Pittan/ng-japan-2018.md

## ng-japan-2018.md

      
    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%のパフォーマンス向上
生成されたコードわかりやすくなるので、デバッグしやすくなる