Skip to content

Instantly share code, notes, and snippets.

@Pittan

Pittan/ng-japan-2018.md

Last active June 18, 2018 02:25
Show Gist options
  • Save Pittan/7808c0261b36bfe1e04d9fc1781f430b to your computer and use it in GitHub Desktop.
Save Pittan/7808c0261b36bfe1e04d9fc1781f430b to your computer and use it in GitHub Desktop.
Download ZIP
ng-japan 2018の雑なメモ
Raw
ng-japan-2018.md

ng-japan 2018

2018/06/16 13:00 ~ @ Google Japanオフィス

13:00 Keynote

Momentum

今のコミュニティーの状況など。ngGirlsの紹介など。 600以上のAngularプロジェクトがGoogle社内で動いている。

6.0.0

  • stability + Innovation
  • ng updateコマンドでアップデートを助ける
    • バージョンを上げるだけではなくdeprecatedな記述を修正してくれる
    • @angular/hogeだけじゃなくて、自分で作るライブラリについても適用可
  • Schematicsを書くことでできるようになるよ new generate update addでできるようになるぜ
  • ng addも最高だぜ。ng add @angular/materialをすると自動的にあれこれしてくれる
  • ng generate @angular/material:material-nav みたいなことを書けば秒でサイドナビバーが追加できるようになる。
  • ng generate libraryを叩くことでライブラリを作成することができる。（元ng-packagr）
  • update.angular.ioで詳細情報をチェック

Tree shakable providers

  • 今までのAngular(v5まで)ではngModule側でServiceのprovideを書いていたので、TreeShakingの静的解析で参照があるということで削除されなかった。
  • Angular v6のprovidedInを使うことで本当に使っていなければバンドルに含めないことができる

Angular Elements

  • AngularのコンポーネントをCustomElementsにできる
  • Angularドキュメントのコードサンプルは個々のAngularアプリケーション

Angular Material

  • Badge & Bottom Sheetはアツそう

Future

Project Ivy

  • 次世代のレンダリングパイプライン
  • Smaller Faster Simpler が目標
  • Ivy + Angular Elementsの組み合わせは激アツ
  • jQuery, React, Vueのアプリの中にAngularを埋め込めるようになる（容量が小さくなるので）
  • 後方互換性はバッチリになるはず

CDK

  • Listbox combobox
  • Datebox
  • Slider
  • VirtualScrollingがとんでもなく使えそうな予感

14:00 What's new in Zone.js of past year

ngZone使ったりZone.js使ってますよね？このあたりについて役立つものを紹介。 Zone.jsのCollaboratorさん。すげー。

What's Zone.js

Dartからインスパイアされたもの。

Execution Context

LifeCycle Interceptable Hooks

コードサンプルを見ながら実際の流れを見る zone-ebb17.firebaseapp.comで。

Async Error Handling

When should we use Zone

基本的にはGlobalAPIをmonkey patchしている実装。 Test / Debugを中心としたさまざまなこと。 AngularとしてはいつChangeDetectionを走らせるか、どうエラーをハンドリングするか。 テストのときにはAsyncTest, FakeAsyncTestなど。ngZoneではモンキーパッチされたものを使っているとのこと。（ここよくわからず）

Performance

モンキーパッチをしたということはコールスタックが増えるのでパフォーマンス上のオーバーヘッドがある。
Zone.jsをインポートすると自動で多くの非同期処理がpatchされる。 特定のmoduleだけzoneの管理外にしてネイティブのAPIを使いたいとかでいける。
__Zone_disable_requestAnimationFrame=trueとかがそれ。 __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']

一個だけネイティブのsetTimeoutを使うということもできる。Zoneはネイティブ実装のレファレンスを持っているので必要であれば引っ張り出して使うことができる。

Promise

no more Zone.js has detected that ZoneAwarePromiseなど。開発時だけがいいかな。（要確認）

Electron

import 'zone.js/dist/zone-mix'を使うことでElectonサポート可。node + browserでうごきます。 zone-patch-electronを入れることでElectron独自のAPIもサポートできます。 NotificationやRTCPeerConnectionなどのAPIもサポート（予定？）

Test

Zone.js単体でも非同期テストのライブラリとすることができるらしい。 zone-testingをインポートするだけでOK。fakeAsyncとか。 jasmineClockとかとも正しく連携できる。 jasmine3とmocha5も対応。 ひとつのテストファイルで、jasmineでもmochaでもjestでも使えるようになりたい。（なんで？）

Angularの中だけでZone.jsが動くようになるといいよね

ErrorHandling

import 'zone.js/dist/zone-error'をするとエラーのスタックトレースにzoneしかないということを防げる

14:55 Angular活用実績から、ハマり事例のご紹介

野村さんではAJSを2015を使い始めて、2017年から大規模PJでの採用が増えているという背景。AJSがメイン。

背景（品質への期待）

  • ミッションクリティカル
    • 24/365
    • 画面デザインへの熱いこだわり
  • BtoCとは少し違った特性
    • 起動したSPAを長時間使う・エラーや落ちることは許されない
    • アプリの起動が遅いのは調整の余地アリ

役割分担失敗

  • 主力はJavaエンジニア
  • サブシステムごとに担当会社を分けて開発（オフショア）
  • これらをAngularで開発していく上での課題
    • フロントエンドに重要度が上がっていくところでエンジニアが不足してくる
  • PL/BLが疎結合であることを生かして、PLを別チームで開発

迷子の開発者

  • 実装方法のバリエーションが多いので迷う。コンポーネント間のデータ受け渡しだけでもcookieとかServiceとか引数とか。
  • 開発者にコーディングに注力するために、あらかじめ処理方法やタイミングを決めるといい。
    • 処理方式、データの受け渡し方法、画面遷移パターン、業務チェックのタイミングなどなど…
    • 誰が作っても同じ構成のコード、レビューしやすい、保守しやすい、実装方法を共有できる
  • シーケンスをちゃんと書くことでいい感じになる
  • ガチガチな開発ガイドを書くことで開発に注力できる
  • コピペできるサンプルコード集
  • こんなに？というくらいに執拗な標準化がみんなのためになる

オフショア教育

  • Java技術者を100人単位で動員できるのはオフショアだけ
  • 5,10人くらいなら対面でも伝えられる
  • NRI流雪だるま式教育法
    • まずはリーダーにAngular研修をする
    • 残りは研修ごと持ち帰ってもらって、内部で展開してもらう
  • コンテンツだけでなく、育成の仕組みを構築する

メモリリークとの戦い

  • SPAを使い続けることで、ブラウザのメモリ使用量が増加

  • 経験的には1GB消費するとだんだん不安定に

  • 対策としては

    • SPAを分割
      • ひとつの業務を終わることに「トップに戻る」ということでメモリのリフレッシュを定期的にする
    • メモリリークが発生しやすいところを局所化

  • DOMリーク

    • jQueryなんか使うとよくあること。DOMツリーがJSからの参照が切れずにリークしていく。

15:10 Angularで新サービス作って学んだこととか

大分県の人。 複数プロジェクトを同時に動かしたい場合はpackage.jsonにまとめて書く感じ。 ポート番号はそれぞれで変更すること。 SSRするならAngular Universal Starterを使うといいかな

Screenshot test in Angular

Protractor under the hood

AngularとPlantUMLを組み合わせ表現力を更に上げる

Ask Me Anything

Q: 今AngularJSとAngularのハイブリッドアプリを運用している(移行中)であるが、Ivyレンダラは使えそうか？(Kara)

できる。今までとの後方互換をかなり考えているので、そこの心配はいらないはず。

AngularアプリケーションにおけるCSS設計手法

Component CSS

ひとつのコンポーネントに適用されるCSS。デフォルトの挙動。

Shared CSS

複数コンポーネントに対してのCSS

Global CSS

全コンポーネントに対して適用される

それぞれの使い分け

基本的にはComponentCSSだけで組めるといいよね Global CSSは使わないほうがいいよね Sharedが増えてきたときはコンポーネントの組み方がよくないよね。

Sass,SCSSを使いましょう

stylePreprocessorOptions: {includePaths: 'src/styles' をangular.jsonに定義して 全体から参照できるようにすると安全 変数は値が名前で判断できるからよさそう。

Angular CDK Slide

  • AngularCDKはコンポーネントを作るときの有用なユーティリティ集みたいなもの

なんで使うの？

  • AngularMaterialではないデザインのを使う必要があるよね
  • もう少しカスタマイズしたいこともあるよね

CDK at a High Level

  • Component Behaviors
    • コンポーネントを動かすためのロジックとかをぬきだしたもの
  • Common Utils
    • スクリーンリーダーに対応させたり、レスポンシブデザインにしたりするためのもの
  • example: https://stackblitz.com/edit/text-input
  • コンポーネント内でクリアボタンを出したり、フォーカスを管理できる。すごい。

FocusMonitor

要素のフォーカスを監視することができる？ 複数のタイプのフォーカスを引っ掛けることができる（click, keyboard, programなど)

coerceBooleanProperty

booleanに変換する。<text-input multiline /> としたときに通常はmultilineは undefinedとかになりがち。通常であれば<text-input multiline="true" />とかしなきゃいけないけど、それが不要にできる。numberとかでもこういうのがあるらしい（聞き逃した）

cdkTextareaAutosize

<textarea cdkTextareaAutosize></text-area>とかく。 大きさが勝手に変わってくれるtextarea

cdkAutofill

ブラウザのオートフィルを検知できる仕組み？

ngIvy Renderer

次世代のAngularレンダリングパイプライン

ゴール

  • 3つの焦点。小さいバンドルサイズ・速い・シンプル（理解・デバッグなど）
  • 100%後方互換性アリ(Ivy導入する上で何もする必要がない)
    • 不安になるかもしれないけど、以前1度やっている
  • Googleでは600プロジェクトが同じバージョンのAngularで動いているので、検証はバッチリだと思う
    • ここで何も不具合がでなければ自信を持っておすすめできるのではないかと。

デザイン

Tree Shakable

  • Only pay for what you use
  • 使っていないコードはリリースバンドルに含めないようにしたい
  • 通常のTSコードであればimportしているけど使われてない、とかあればできる。
    • 条件式とかでしか使われていない場合でも条件に絶対通過しなければ問題ない
    • が、静的解析ではこういうことは確認できない（実行するまでは）
  • レンダリングパイプラインでも同じことが言える
    • AoTでは最適化されたJSコードを出力し
    • 実際にレンダリングするときにこのコードを評価して…（ここが重要）
    • このときにif文があるのでTreeShakingができなかった
  • Ivyでは
    • テンプレートHTMLから
    • そのままレンダリングするためのコードを生成するので
    • 使っていないコードは削除できるよね、という考え方
  • Code Splittingでも有効

Local

  • 大規模なアプリを開発する際に、一部の機能を書き換えたあと その機能が独立していれば、その機能だけリビルドすればいいよねという考え方

  • 今はこれができないのでIvyで改善していく

  • サードパーティライブラリをプリコンパイルした状態で使うことができそう

  • metadata.jsonはもう必要なくなる

  • メタプログラミング

結果（業績？）

  • HelloWorldのサイズは現状36kb、Ivyになると2.7kb。93%小さく。
  • webpagetest.org/easy でテストする場合、45%のパフォーマンス向上
  • 生成されたコードわかりやすくなるので、デバッグしやすくなる
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment