「第69回 HTML5とか勉強会「UIフレームワーク最前線」」に参加してきました

• 2018/6/19
• https://html5j.connpass.com/event/89073/

Angular Ivyとその先

• @laco2net
• https://slides.com/laco/angular-ivy-and-beyond-20180619/#/

Ivy

• もともとngiv
• Angularの第三世代のViewエンジン
  • v2
  • v2-v4
  • Ivy

しくみ

• 今まで
  • template html -> template data -> angular interpreter -> DOM
    • 3つめまでBuildで(AOT)
    • 全部Buildで(JIT)
• ivyは
  • Template html -> template instruction -> DOM

生成物

• 人にも読めるものになった
• サイズも小さくなった

コンセプト

• Smaller
  • 生成されたコードが小さい
  • 使われてないコードを消せる
• Faster
  • ビルドが早くなる
• Simpler
  • 生成されるコードが読みやすい
  • デバッグしやすい

Angular Elements

• AngularコンポーネントをCustomElementsに変換する
  • AngularCoreも一緒に含まれる
  • AngularCoreが小さくなった恩恵を受けてる

Decorator-less Component

• IvyでDecoratorなしでかけるようになる
• Reactみたいに書けてくる
  • jsx to ivyとかできそう

まとめ

• 次世代のAngularのViewエンジン
• Small/Faster/Simpler

今後

• Angular for Designers
  • google内部でコードGUIで生成してしまいたいという動きがある

Vue CLI v3

• @kazu_pon
• https://speakerdeck.com/kazupon/vue-cli-v3

VueCLI v3

• そろそろv3リリース

プラグインシステム

• Vue CLIの拡張機能
• API
  • Service
    • webpack設定カスタマイズ
    • npm scriptに登録
  • Generator
    • テンプレート生成機能
    • 既存テンプレートカスタマイズ
  • Prompt
    • CLIの対話内容のカスタマイズ
• ライブラリのScaffoldツールとして
• プロジェクト固有のコード生成として

Vue CLI UI

• CLIでできることは一通りできる
• ESLintの設定とかPWAの設定とかもできる
• プラグイン管理もできる

Suspense

• @koba04
• https://speakerdeck.com/koba04/react-suspense

Suspenseとは

• 2018/2のjsconfで発表
• 非同期の更新処理をうまく扱う機能
• ページごとのローディングとか
  • すぐレスポンス来てるのに一瞬出たりとか
  • この辺ちゃんとやると大変

どう動くのか

• 子コンポーネントがPromiseを親に投げる
  • resolveするかタイムアウトしたら処理をするみたいな

simple cache provider

• キャッシュのコンテナみたいなもの

Demo

• ローディングとかの制御を自分でstateでやんなくてよくなる
  • でもけっこう複雑そう??
• 画像preloadと組み合わえせたりとか
• https://github.com/koba04/react-suspense-demo

その他

• SSRでSuspense動かすとか
• Apolloと連携できたりとか
• Reduxとはどう組み合わせるかは今後注目
• たぶんReact v17からデフォルトで使えるようになる
• ほかはTimeSlicingとか
• v17は2018年中予定
• 非同期周りが今開発してるところ