node,npmのお勉強3

シンプルに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