シンプルにredux
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説 | maesblog
https://mae.chab.in/archives/2885
この感じからはじめていくかpolymerをつかってみるか。。
bable,webpack
いろいろやっていたらnode_modulesが肥大化していく。。
Reactを「webpack + babel-loader」でビルドする方法 | maesblog
https://mae.chab.in/archives/2891
babelじゃだめでbabel-loaderをつかえとワーニングが出たから。。
jsと監視
Object.ovserve()
Object.observe() でデータバインディング革命 - HTML5 Rocks
https://www.html5rocks.com/ja/tutorials/es7/observe/
Object.observe() (私は O.o() とか Oooooooo と呼ぶのが好きです) を使えば、フレームワーク なしの 2 Way データバインディングを実現することができます。
オブジェクト
オブザーバブル · Riot.js
http://riotjs.com/ja/api/observable/
与えられたオブジェクトelにObserver機能を付加するか、引数をとらない場合は新しいオブジェクトを生成して返します。この後、オブジェクトはイベントのトリガーおよび監視ができるようになります。
DOM
MutationObserver - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver
MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。
japh(r) by Chris Strom: Replacing MutationObserver with Object.observe() in Polymer
https://japhr.blogspot.jp/2014/11/replacing-mutationobserver-with.html
2014年の記事だが今はどちらがいいのか。
リアクティブの探求 - Vue.js
https://jp.vuejs.org/v2/guide/reactivity.html
モダンな JavaScript の制限(そして Object.observe の断念)のため、Vue.js はプロパティの追加または削除を検出できません。
[フロントエンド] 未来を引き寄せるPolymerを理解しよう - YoheiM .NET
http://www.yoheim.net/blog.php?q=20140802
JavaScriptの変更監視にはObject.observeを利用し、DOMの変更監視にはMutationObserverを利用します。
早い時点でObject.observeを導入していたっぽいので、MutationObseverでいいのかなあ。。
ファイル
node.jsでファイル監視を手軽に行えるモジュール「chokidar」 – GUNMA GIS GEEK
https://shimz.me/blog/node-js/4123
node.jsにはファイル監視を行えるAPI「fs.watch()」や「fs.watchFile()」がありますが、なんだかんだいろいろめんどくさかったりします。
【参考】Node.js の fs.watch() と fs.watchFile() の違い – てっく煮ブログ
そういったメンドクサイ部分を綺麗にラップしてファイル監視を手軽に行えるようにしたモジュールが「chokidar」です。
エラー
JavaScriptのエラーをBugsnagで監視しています - LCL Engineers' Blog
http://techblog.lclco.com/entry/2017/01/31/233000
polymerとredux
polymerって勉強会できいたなあ。。
reduxとセットになってるやつとかあるのかしら。
tur-nr/polymer-redux: Polymer bindings for Redux.
https://github.com/tur-nr/polymer-redux
Polymer Redux
https://tur-nr.github.io/polymer-redux/
サンプルコードはシンプルで綺麗な気がする。
jdomzhang/polymer-redux-example: polymer redux example
https://github.com/jdomzhang/polymer-redux-example
１枚のexample。
polymer
Webの未来は今。Polymer 2.0とWeb Components。Google I/O 2017 - Qiita
http://qiita.com/itagakishintaro/items/673e641da6b7fa40048e
たぶん、2.0が出たというのが割と最新情報。説明がわかりやすい。
いまさら聞けない Polymer 入門 - Polyfills は Web Components の夢をみるか - Librabuch
https://librabuch.jp/blog/2016/10/hello-polymer/
SAN値。。
[フロントエンド] 未来を引き寄せるPolymerを理解しよう - YoheiM .NET
http://www.yoheim.net/blog.php?q=20140802
Welcome - Polymer Project
https://www.polymer-project.org/
公式
Step 2. Create a new page - Polymer Project
https://www.polymer-project.org/2.0/start/toolbox/create-a-page
公式のチュートリアル的なもの
Polymer library - Polymer Project
https://www.polymer-project.org/2.0/docs/devguide/feature-overview
公式ドキュメント
Polymer App Toolbox - Polymer Project
https://www.polymer-project.org/2.0/toolbox/
公式ツール、Behaviorとかなんなの。
ReduxSupportで使われていた。@PolymerBehavior('MyReduxMixin')
Polymer Redux Support - Dart Polymer
https://www.dart-polymer.com/polymerize/polymer/polymer-redux/dart/2.x/2017/05/24/polymer-redux-support/
RiotをReact・Polymerと比較する · Riot.js
http://riotjs.com/ja/compare/
Redux – rnkmr.com
http://rnkmr.com/posts/tag/redux
Polymer 2 - Dart Polymer
https://www.dart-polymer.com/polymer2/
polymer2の公式。
特徴が４つ。redux統合も含まれる。
bowerなのね。良さがいまいちわかっていないのだけども。
Dart言語ってここで出てくるのか。。調べるか。。
なるほど、Dart言語はTypeScriptとかのようにトランスパイルされるための言語なのか。
これをつかってPolymerのコンポーネントを作れるのか。へー。olymerizeというのを使うっぽい。
Polymer Redux Support - Dart Polymer
https://www.dart-polymer.com/polymerize/polymer/polymer-redux/dart/2.x/2017/05/24/polymer-redux-support/
公式での記事（2017/5）
webpack-contrib/polymer-webpack-loader: WebPack Loader for Polymer Web Components
https://github.com/webpack-contrib/polymer-webpack-loader
webpackを使う。。必要があるかどうかだな。。様子見。
コンポーネント
Polymer Element Catalog
https://elements.polymer-project.org/
webcomponents.org
https://www.webcomponents.org/
miztroh/wysiwyg-e - webcomponents.org
https://www.webcomponents.org/element/miztroh/wysiwyg-e
サンプルコードもうごかせる。。すごいなあ。。
wysiwygエディタについては３つくらい検索にマッチしたけど、
依存バージョン的にはwysiwyg-eがあたらしいなあ。
使い方
いまさら聞けない Polymer 入門 - Polyfills は Web Components の夢をみるか - Librabuch
https://librabuch.jp/blog/2016/10/hello-polymer/
インストール
ウェブコンポーネントをカタログから取得
公式のサンプルは基礎からゆっくりではなくて、まとめて先まで進んでしまうが、
この記事はシンプルだったのでわかりやすかった。Hello World!!
基礎の考え方や、現状のメリットデメリットとかも。
ほぼ１年前（2.0前）の記事だけど。
Install Polymer 2.x - Polymer Project
https://www.polymer-project.org/2.0/start/install-2-0
redux
React/Reduxの設計に関する参考記事まとめ - dackdive's blog
http://dackdive.hateblo.jp/entry/2017/04/24/133955
Dart
Google製のWebプログラミング言語 Dart を試してみる ｜ Developers.IO
http://dev.classmethod.jp/client-side/primer_dart_pad/
- ジェネリクスできる
- インタラクティブなウェブエディタ
- intellijでサポートされてる
pub
Dartで開発するときのディレクトリ構成 - Qiita
http://qiita.com/laco0416/items/bc5288bb47d47e64a7e9
たぶん、Dartのパッケージマネージャー。
PRPL
PRPLとflux、reduxあたりの区別というか構造要素というかがいまいち。。
フロントエンドの2016年の振り返りと2017年の展望 | maesblog
https://mae.chab.in/archives/2974
Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？ | HTML5Experts.jp
https://html5experts.jp/komasshu/19704/
PRPL パターン | Web | Google Developers
https://developers.google.com/web/fundamentals/performance/prpl-pattern/?hl=ja
依存関係整理
Node.js - npmパッケージと依存関係の整理方法(76800)｜teratail
https://teratail.com/questions/76800
$ npm outdated（更新確認）
$ ncu（更新確認）
$ npm update some-package（更新）
$ npm dedupe （依存関係整理）
$ npm prune（不要なパッケージ削除）
$ npm init （package.jsonを更新）
yarn cache clean
Yarnやっていきはじめ - Qiita
http://qiita.com/kikunantoka/items/3cf94a43394f3c632ad2
yarn installで不要なパッケージは除去される。
polyfill
ブラウザがウェブコンポーネントに対応していないことが多いので補完するらしい。
Polyfills - webcomponents.org
https://www.webcomponents.org/polyfills