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

勉強会メモ

Angular Ivyとその先

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

VueCLI v3

  • そろそろv3リリース

プラグインシステム

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

Vue CLI UI

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

Suspense

Suspenseとは

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

どう動くのか

simple cache provider

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

Demo

その他

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