ng-japanに参加してきました!
3/21(土)に開催されたAngularJSのカンファレンス、ng-japanに参加してきました!
AngularJSの中の人3名を招いてのセッションを含め、とてつもなく濃い内容で非常に楽しかったです。
間違いなくAngularJS初級者の私ですが、AngularJSの未来にワクワクしましたし、今後も使われ続けていくだろうという安心感を覚えました。
ただメインセッションに集中しすぎて尋常じゃなく疲れてしまったので、途中退出したのが心残りでした。。
多分いろいろ間違ってると思いますが、セッション中に色々メモを取ったので備忘として貼り付けます。
以下、メモです↓
Session1. Angular 1.4 and beyond(chirayuさん)
Angular1.4のリリースについて
- 1週間後にリリース
- これまでのangularの中で最も安定したリリース
Githubへのビジター数
- 2週間で100万UU, 1600PR, 200 new contributor
Angular1.4とは
- 35+ new features
- 140+ bug fix
主な特徴
- new Router
- Pluralization and Gender suppoort
- ng-animate update
- ng-messages update
- ng-cookies update
new Router
- 別のセッションで紹介
Pluralization and Gender support
- Ability to set path and domain
- cleans up cookie update process
- Closes one of the oldest and most commented open issues
- 2年以上あった
パフォーマンス改善
- 30% faster digest times (vs Angular 1.3)
- 2-4% memory footprint improvement
- Less GC pressure
- パフォーマンスの度合いは各アプリケーションやブラウザに依存するので必ずしも上記の結果とはならない
- しかし、大きなデータ等を扱う場合はパフォーマンス
everyone should upgrade!
- 後方互換性に注力したので大規模な改善の必要はないはず
- 1.3でサポートしたブラウザは1.4でもサポートしている
Angular1.5について
- 1.4のリリースしてから作業に入る
- 議論はcommunity上で公開
Angular2について
- 別のセッションで紹介
リリースサイクルが徐々に速くなっている
communityはとても重要で、多くの人の手伝いも必要としている
- 手伝う方法
- Add a Feature
- まずはコミュニティーで追加したい機能を詳細に共有してね
- PRはミニマムにして、コンポーザブルに
- ユニットテストちゃんと書いてね
- Work on Issues
- うまく動かなかったりテストが落ちたりしたらissues上げてね
- 言葉で説明するとあいまいなのでコードとか一緒にあげてくれるとわかりやすいよ
- 本当にmasterでうまく動かないのかを確認してね
- Help closing issues and PRs
- Add a Feature
Session2. AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ(アシアル株式会社 久保田さん)
Onsen UIとは
- AngularJSの上に作られたライブラリ
HTML5ハイブリッドアプリとは
何がいいのか
- クロスプラットフォーム性
- Webの知識が役立つ
- ストアでも配信できる
- ネイティブの機能をJSで呼び出せる
数年前はパフォーマンスが悪くて使い物にならなかった
状況の好転
チューニングすればハイブリッドアプリも通用する!
- 多くの開発者はより素早く描画するためのチューニング方法を知らない
チューニングにはインスペクタを使う
- AndroidならChrome、IOSならSafariを使えば実機でも確認できる
- 描画が始まって終わるまでが1frame
- Loading->Scripting->Rendering->Painting
- 1frameで16msに抑えられれば最高!
- Loading
- リソースがローカルにすでにあるのでボトルネックになる可能性は少ない
- Scripting
- JavaScriptの実行時間
- 基本的には高速なのであまり問題にならないが、Canvasの操作やリフローが発生する処理は遅くなったりする
- Scriptingがボトルネックだったら、インスペクタのプロファイルを取ればだいたい特定できる
- Rendering
- Painting
- 描画処理
- Paint
- Display Listへの命令の生成
- Rasterize
- Display Listを実行してピクセル化
- Composite Layers
- レイヤの合成
- Paint
- 描画処理
- Loading
translate3d(0,0,0)が速いのはなぜ?
- Composite Layersのみが起こり、GPUが動くから
どのCSSプロパティを操作すると何が起こるのか
- 不明瞭だがある程度法則はある
- translateやopacityの操作だとComposite Layersのみが発生する
- CSS triggersで検索!
DOMリークを防ぐ
reflowを起こさないようにする
- 画像のサイズは必ず指定する
- 一度DOMツリーから切り離して操作する
GPUバウンド
- CPUよりもGPUのほうで時間がかかっている状態
チューニングの罠
- チューニングのことばかりを考えながら開発はできない
ネイティブだとUIフレームワークがあるが、HTML5アプリにはない
Onsen UI
Onsen UIが目指すもの
- 誰でも簡単に高速なアプリを作成できる
- チューニングを気にせずに作れる
Session3. Routing your way in an Angular app(Brian Fordさん)
こちらのセッションはスライド内のソースコードが読みづらかったので細かい内容を把握できませんでした。。
こちらのページで復習します。
以下、聞き取れた部分に関してのみのメモです。
AngularのRouterの基本的な考え方
History of Routing ins Angular
- ngRoute
- シンプルなユースケースのみサポート
- ニーズに応えられていない
- UI-Router
- ニーズを満たす形で登場
- 柔軟性に富んでおり、Angular1とマッチする
- New Router
- Angular1でもAngular2でもうまく機能する
- migrationをより簡単に行うことができる
New Routerの特徴
- Reusable and Composable
- Familiar
- APIはほかのルーティングシステムに影響を受けている
- ngRoute, ExpressJS etc...
- APIはほかのルーティングシステムに影響を受けている
migrationの中で果たす仕事
- new RouterにすればAngular1とAngular2で同じAPIを使える
- Angular1とAngular2を並行して実行することができるので、Angular2を使ったほうがよい箇所でのみAngular2を使うということができる
現在の状態
- カレントバージョンは0.5
- 1.0リリースはAngular1.4と同時に行う
- RouterのリリースはAngular1, Angular2とは独立して行う
Session4. TypeScript+Angular 1.3(わかめさん)
ECMAScript
- JavaScriptの元となる使用
- DOMの仕様とかは入ってない
- 最近のブラウザはだいたいES5をサポートしている
AtScriptとは
- ES6+Annotations(Decorators)
- TypeScriptのSuperSet
TypeScriptとは
- JSを拡張した言語
- 静的型付け
- ES6の文法を取り込み中
- 読みやすい変換後javaScript
- JavaとかC#とかに優しい言語仕様
静的型付け
既存資産の活用
- JSのライブラリ(jQuery等)に関しては、型情報を定義することで使えるようになる
- Definitely Typed
- 型定義を行うプロジェクト
- 既存JSに型を後付する
AtScript to TypeScript
- Angular2をTypeScriptで書くという方針に変更
- TypeScriptに必要な要素が入る
- 作りたいのはAngularJS本体のはず
- TypeScriptのsupersetを作るのは難しい
- TypeScriptの開発速度が速い!
TypeScript関連ツール
- tslint
- TypeScript用lintツール
- typedoc
- JSDoc的なやつでTypeScript専用
- dtsm
- 型定義ファイルの管理
- 作者 wwakameさん
- デファクトスタンダードはtsdだが、コマンドが覚えづらい
- エディタ
AngularJS1.3との組み合わせ
- TypeScriptはJSの延長線上にあるので、特別なことをする必要はない
- JSのベストプラクティスを踏襲すればよい
- 基礎知識
- 型の名前を覚えよう!
- 使いたいメソッド名
- 使いたいDIオブジェクト名
- お作法
- tsc --noImplicitAnyオプションを使う
- 型注釈は全力で
- プロジェクト厚生
- 外部モジュールは使わない
- コンパイルの始点を決める
- 出力順制御問題
- ツリー構造にする
- protractor
- 型定義ファイル干渉問題
- $の定義がぶつかる
- 全てが丸くおさまる解決策なし
- 別々のファイルにしてコンパイルする必要あり
- $の定義がぶつかる
- 型定義ファイル干渉問題
SourceMap
- validationの仕様が入ってない!
- 変換途中でぶっ壊れてもわからん!
Session5. Angular 2(Igor Minarさん)
Angular2を作った背景
- Webアプリケーションの生産性を上げるためにAngular1を作った
- 現在は多くの人に愛されるフレームワークになった
- angularjs.orgには1月に100万人が訪れている
- 現在Google内での2000のアプリがangularを使っている
- 信頼されるということは責任が増すということでもある
- 次の段階ではもっと画期的にしたいと思ってAngular2を作った
Angular2のテーマ
- Simpler(シンプル)
- Consistent(一貫性がある)
- Flexible(柔軟性がある)
- ここまで培われた柔軟性を今後も継続したい
- Fast(パフォーマンス重視)
- Productive(生産性)
- こちらも継続的に持っていく必要がある
Angular1, 2は似ているのか全く異なるのか
- APIに相違点はあるが、内部で持っている機能は非常に似ている
- 非常に強力なFeatureも追加
- Viewports
- New languages
- Web Components
- New template syntax
- パフォーマンス強化
Productivity
- toolsの活用
- typoを防ぐ
- TypeScriptで書かれている
- 以下の言語から好きなものを選んで書ける
- ES5
- ES6
- TypeScript
Performance
- ベンチマーク
- ネストが非常に深いコンポーネントの操作
- 生のJavaScriptで最大限速くしたものをベースラインとした
- 1.3だと8.58倍
- 2だと3.14倍
- 2でView Cacheを加えると1.44倍
- immutable data structure
- 変化しないデータの検知を行わない
Angular2のステータス
- 現時点ではα版
- リリースの日付はまだ決まっていない
- 2015年5月にgoogle内部のチームが使い始める
Angular1はどうなるの?
- Angular1を使っているサイトのほとんどがAngular2にソースを置き換えるまでサポートし続けていく
以上、メモ。