ng-japan 2017に行ってきました。
ツイートとスライドをまとめただけの記事です。
Track A: #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
Track B: #ng_jpB
#ng_jp
Keynote: How to Think About Angular
Keynote: How to Think About Angular #ng_jp
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
Playground for Angular https://t.co/HiLBkW3BSM
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
ABC = Angular + Bazel + Closure #ng_jp
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
なんか聞いたことがある
BREAKING CHANGEはアプリを壊し休日出勤しなくちゃいけなくなり車の排気ガスが増え、ひいては地球環境を破壊するのでよくない
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
RxJSを活用したアプリケーション開発
フロントエンドエンジニアが多いプロジェクト→設計思想を統一しておかないと大変→CQRS（Command Query Responsibility Segregation）はどうか#ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
CQRSは本来サーバー側実装で使う思想なので、フロント用に少しアレンジ#ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
RxJSのpartitionはストリームを分岐できる #ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
すげー冗長な設計だけど、そのくらいやらんと300 Components、500 Servicesを作っていくのは辛いんやろうな #ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
RxJSを使う上でおすすめしないこと
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•ストリームがスパゲッティになるのでcombineLatest()をやりすぎない
•初期値がいらないストリームではBehaviorSubject(null)でなくReplaySubject(1)で最新１件取得#ng_jp #ng_jpA
CQRSを学ぶために「.NETのエンタープライズアプリケーションアーキテクチャ第2版 .NETを例にしたアプリケーション設計原則」という本を使っているそう。
You need to know SSR
「普段はReact勢なんですが、今日は魂を売りました」 #ng_jp #ng_jpB
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•First Viewのパフォーマンスを改善したい
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•First Viewの定義を定義してから話さないと混乱するので気をつけよう
•Navigation startからFully Loadedまでの間に何段階もある
#ng_jp #ng_jpB
•SSRの致命的な点がいくつかある
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•HTML生成はCPU負荷が高い
•Node.jsではメインループをブロックする#ng_jp #ng_jpB
•HTML生成はReactもAngularも重い
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•現実解としてはHTMLをキャッシュしたり最初に見える範囲だけレンダリングしたりしよう
•それも茨の道。キャッシュをいつ消すの？ユーザ固有の情報は？結局サイトの内容によって方針は変わる#ng_jp #ng_jpB
•見える範囲だけレンダリングしても、それ以外の範囲は？
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•SEOの問題が残る
#ng_jp #ng_jpB
Angularアプリのテストについて
AOTするとTypeScriptの静的解析になるので、これをまずAngularでやるべきテストと考える #ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
TSのStrict Null Checkを使いつつAOTすると、テンプレート中のプロパティのNull Checkも走る。テンプレート中のnull参照しそうなコードを検出できる #ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
ngfactory.tsを気合で読むとたのしい
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Angular CLIでプロジェクト作るとテスト環境も構築済み#ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Isolated Testing
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Componentのクラスをえいやとnewしてロジックだけテストする#ng_jp #ng_jpA
•Shallow Testing
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•下層のコンポーネントを描画せず、そのComponentだけ動かしてテストする
•そのComponentのテンプレート中のExpressionをテストする#ng_jp #ng_jpA
•Integration Testing
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Componentに必要なもの全部描画して動かす。重い。#ng_jp #ng_jpA
#ng_jp #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
うまいこと使い分けたいけど、結局Integration Testingばっかりやっちゃうよな…
•Karma駆動開発（オレオレ用語）
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Karmaのデバッグ画面見ながら開発する
#ng_jp #ng_jpA
•描画後の画像でComponentの差分チェックしてみた
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•分岐元のブランチのスナップショットを正としてimagemagickで画像差分チェックする
•CSSのstyleやpipeの結果などはIntegrationテストじゃなく画像差分でいける
#ng_jp #ng_jpA
Web Payments + Credential Management API
これはAngularのトークではなく、ブラウザでの支払いフォームなどの改善や新機能の紹介。
※スライドのURLを見つけられなかった。
•スマホで通販で買い物するのくっそ大変
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•入力しづらい
•サイトによってまちまち
#ng_jp #ng_jpA
•inputのautocomplete属性がちゃんと入っていると、ブラウザのautofil機能がうまく動く
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•今すぐできる確実な改善なのですぐやろう！
• https://t.co/iqZjfANJKz#ng_jp #ng_jpA
•ブラウザのPayment Request API
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•支払情報などの入力フォームをOS側で用意する機能
•支払い処理を代替するわけじゃなく、単に共通のUIを提供する
•ブラウザに覚えさせておいた支払情報や配送先を使える#ng_jp #ng_jpA
•配達先などが変更された場合の処理は？
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
→ イベントが発火するのでハンドリングしよう
•クレカ情報を生で渡すのはこわい
→Tokenizationして扱う
→支払いだけ別にPayment Appを使うこともできる#ng_jp #ng_jpA
•Payment App
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•支払いだけブラウザではなくそれぞれのプラットフォーム（iOSとか、他のOSとか）側のアプリに依存する仕組み（つまりそれぞれ非互換）
•例えばAndroidならAndroid Pay#ng_jp #ng_jpA
•Payment Appはプラットフォーム依存なので、PWAでできるようにするPayment Handler APIを仕様策定中
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Service Workerを使う#ng_jp #ng_jpA
•Chrome for iOSでも使えるようになるぞ
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•iOSではPayment Appとは非互換だが同じような機能を提供するApple Pay JSがある#ng_jp #ng_jpA
Apple Pay JSをPayment Request APIと同じように使えるwrapper
https://github.com/GoogleChrome/appr-wrapper
FIDOって「ファイドー」って読むのか… #ng_jpa
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
Angular, Firebase, Cloud Functions for Firebase
NoSQL的なものっていきなり触るとすげー困るのわかる#ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•Angular,Firebase,Cloud Functionsの10の良い事
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•非同期がわかる、リアクティブプログラミング、関数型がわかる、データベースがわかる、不便なDB検索機能で鍛えられる、認証機能が使える、ストレージ機能、CF便利、英語力鍛えられる #ng_jpA
関数型はモテる。
•Firebase Web Codelabというのがある
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
• https://t.co/qqWxbshjJ2
•↑の別版↓
•Cloud Functions for Firebase(Angular)
• https://t.co/7LhqFRPSWI
#ng_jpA
• Firebaseのサンプル
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
• https://t.co/RJV5ylJz6z
#ng_jpA
Advanced Component styling with Angular (v4+)
Advanced Component styling with Angular (v4+) 始まった#ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
https://t.co/I71iIeL7yt
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jpA
Componentのcssやtemplateの書き方いろいろある
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
templateまたはstylesで直接Componentのコードに書くか、templateUrl, styleUrlsで別ファイルを参照するか
#ng_jpA
•Componentに外からclass属性を設定するときはngClass、任意のスタイルならngStyle
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•HostBindingでComponent内で設定もできる。 class.foobar とか
#ng_jpA
時間切れたｗ
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jpA
Best practices for modules in Angular
Best practices for modules in Angular#ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
Angular公式のスタイルガイドhttps://t.co/bU4CIJyquY
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jpA
•Lazy Loadingしよう！
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
•webpack-bundle-analyzer使おう
•gzip後の状態も見れる
•パッケージを小さく保とう
•メンテナンス性などのため#ng_jpA
Decoupling Business Logic #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
自動化大事 #ng_jpa
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
Angular Animations
スライドAngular Core TeamのMatias NiemeläによるAnimationについて #ng_jpa
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
https://t.co/sjBLCsERYE
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jpa
ブラウザがWeb-animations APIをサポートしている
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
CSSなしでアニメーションを実装するLowレベルなAPI
AngularからそれにアクセスできるDSLがある
#ng_jpa
ブラウザがWeb-animations APIをサポートしている
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
CSSなしでアニメーションを実装するLowレベルなAPI
AngularからそれにアクセスできるDSLがある
#ng_jpa
Animatin Bindings！
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
データバインディングしているプロパティに連動してanimationもテンプレート中で書ける
#ng_jpA
#ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
俺の仕事のPJだとスタイル関連は完全に全体のcssに出してあるから、animation bindingは使いづらいな…
#ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
DSLが黒魔術じみてきた
What's New in Angular Material
Autocomplete や Datepickerふえたよー。今後も対応部品増やしていくよー。というトーク。
input要素にdirectiveつけて使うこともできるのか >Datepicker
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jpA
Data Tableほしいぞ #ng_jpA
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
RTL対応つっらそう
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
#ng_jp
お疲れ様でした pic.twitter.com/0BTLbKpSen
— りんご🍏C92 1日目 東せ13a (@mstssk) June 17, 2017
