「HTML5 Conference 2017」に参加してきました

勉強会メモ

Microservices入門

  • 長谷川 裕一さん
  • Springユーザ会会長

今日の話

  • クライアントはSPA
  • サーバはマイクロサービス

マイクロサービスの粒度

  • 2週間でリリースできる単位が１つのサービスの単位

構造

  • Serviceたくさん
  • Configサーバ
    • SpringCloudConfig
  • ServiceRepository
    • SpringCloudNetflix

JavaEEは？

  • JavaEEは選択肢としてなし
  • 大手APサーバ企業でJavaEEやめるとこがあって近々発表
  • Spring使うのが定番

マイクロサービスの特徴

  • ライブラリではなく別プロセスで動くサービスとしてコンポーネント化
  • EJBやSOAじゃできなかったことができるよになったものがマイクロサービス
  • 期限のあるプロジェクトでなく継続的なプロダクト
  • サービスごとにDBを持つ
  • 障害設計
    • サーキットブレーカーはSpringCloudNetflixで簡単にできる(アノテーション書くだけ)
  • SpringCloudContractでモック作ってくれてマイクロサービス単位にテストできる
  • SpringCloudStreamでキューとか簡単
  • SoRは成功しないSoEのが成功する

これからはじめるAngular

  • lacoさん(KaizenPlatform)
  • AngularのContributer

Angularとは

Angular-Cli

  • Angularチームが考えるベストプラクティスで始められる
    • 今使うなら必須

パフォーマンス

  • 仮想DOMは使ってない
  • とにかく高速にDOMを変更するアプローチ
    • Chromeチームとかのノウハウがつまってる

TypeScript

  • 型がドキュメント
  • コンパイルで軽微なエラーをはじける
  • オートコンプリート
    • エディターが頑張ってるのではなくコンパイラがすごい

BasicAPI

@Component

@Input/@Output

@Directive

  • DOMの拡張

@Pipe

  • Viewレベルの変換をするのに使う
  • 文字列にカンマをつけたりとか

@NgModule

  • ライブラリのインポートとかする
  • Config的な感じ

Angularとはなんなのか

  • フレームワークでなくプラットフォーム
  • メインは4つ
    • レンダリング
      • データをViewに変換する
    • modelの変更検知
      • modelのどこかが変更されたら書き換える
    • Viewの切り替え
      • ルーティング
      • LazyLoadingも含まれる
    • サーバアクセス
      • http通信
      • Observableベース
        • Promiseと違って遅延実行できる
      • 通信のプログレス
      • ヘッダーに特定のデータをかませるとか

その他

  • angularのサイトは最新のAngularで作られてる
    • ソースも公開されてる

バージョン

  • メジャーバージョンは半年であがる
    • 破壊的変更の有無に関わらず

Web技術でネイティブアプリを開発する話

  • 田中 正裕さん(Asial)
  • OnsenUI作ってるとこ

Web技術でクロスプラットフォーム

こいったツールの課題

  • UI
  • ネイティブAPI
  • 開発環境/ビルド

Electron

  • Atom作ったのがベース
  • VSCodeとかslackとか

仕組み

  • メインプロセス
    • main.js
  • レンダラープロセス
    • index.html
  • node上で動く
    • npmライブラリが使える
  • UI標準にのっとらないで自由
  • のっとりたい場合ReactDesctopとかいい
  • NodeWebkit
    • 印刷とかもできて高機能
    • ChromeAPIと親和性がある

モバイル開発

  • 性能が低い
    • 最新のはそうでもない
  • UIスタイル規定
    • ios UIKit
    • MaterialDesign
    • アップルに審査落ちることも
  • B2BとB2Cで要件違う
    • 低コストで多OS展開
    • AppStoreTop10狙い最高性能で

Cordova

ReactNative

NativeScript

  • Angularを公式サポート
  • 最近はVueも

Weex

  • alibabaが作ったやつ

React v16 and beyond React Fiber

  • 小林 徹さん
  • koba04
  • Reactにプルリクだしたりとか

React16

  • 1年ぶりメジャーバージョンアップ
  • 互換性保ちながら内部実装一新
  • Reactは前のバージョンでワーニングだしてから次のバージョンで消える
  • ライセンスがMITに

render string and array

  • spanとか無理やりつけなくても直接返せる

error boundaries

  • componentDidCatch
  • エラーが起きて誰も拾わないとアンマウントされるようになる
  • アンマウントされたくない場合はエラーハンドリングを

portal

  • ReactDom.creaePortal

Flat Bundles

  • browserifyからrollupに変更
  • 1つのモジュールにするのでファイルサイズ削減パース時間削減
  • DirectImportができなくなるのでそれをしている3rdパーティライブラリとか注意

SSR

  • ReactPartialRenderer.jsへ独立
  • StreamRenderingのサポート
  • HydrationStrategy
    • ReactDOM.hydrate()
    • element単位でhydration

DOM Attributes

Polyfill

  • Map,Set,requestAnimationFrameが使われるので

その他

  • PropTypesとかワーニングだったやつ消えた

リリースいつ

  • 来週(9末)

React Fiber

既存の問題点

  • 更新全て同期的
  • 入力中にレスポンスきたら待たされ書けられちゃったり

ReactFiberでは

  • UIレスポンス向上のため変更
  • 同期だけど優先度付けできるようになった

React Architecuter

  • JSX(タグ) -> Reconciler(Fiber, Stack) -> Renderer(DOM, Native)
Reconciler
  • ツリー作ったり
  • 差分計算したり
スケジューリング
  • 時間ベース
    • requestIdleCallback
  • 優先度ベース

FiBerのデータ構造

  • ReactElement単位で存在
  • LinkedList構造

Phases

  • Begin~Complete
  • Commit

v17以降

まとめ

  • v16で劇的に高速化されるわけではない
  • 今後のためのベース
  • ReactFiberはUIのレスポンス性向上が目的

The State of Web Components

  • 泉水 翔吾さん