ng-japan 2015行った #ng_jp
ng-japan - AngularJS Japan User Group | Doorkeeper
Angular1.3以降や2系についてはあんまり追っていなかったので、参加してみた。 最近はディスられていた印象が強かったけど、Communityがすごい規模になってもCommunityを重視して開発を進めようとしているっぽいので、Angularは長く支持されそうだなと思った。 2系ではパフォーマンスがかなり改善されるし、TypeScriptとの連携も強くなるようなので、しばらく使っていなかったが触っておかないと今後困ることがありそうだなと感じた。
以下、メモ。
Angular 1.4 and beyond @chirayuk
- Chirayu Krishnappa
- 1.4まだ出てないけど１週間位で出るで
- もっとも安定したリリースや
- onlineにいっぱい情報あるで
- めっちゃCommunityでかなっとるねん
- Github 100K+unique visitors / 2week
- 1600くらい新しいissueとPRができる / 2week
- 200人くらいコントリビューター増える / 2week
- 1.4
- weeklyでrelease condidate
- 35以上のFeatures
- 140以上のBug fix
- パフォーマンス改善
- みんな興味ありそうなアップデート
- New Router
- Brianから発表するで
- Pluralization and Gender support
- ng-animate update
- ng-messages update
- ng-cookie
- New Router
Pluralization and Gender
Pluralization
- based on ICU MessageFormat
- Use in interpolation expressions
- Use in attributes
Gender
ng-massages updates
- 複数のinludeが可能に
- 式が書けるようになった。
ng-message-exp
ng-cookies updates
- cookie周りはいろんな要望が来る
pathとdomainの設定が可能に- bug fix
more
- commonJS対応
- injectorのエラーが詳細に（あってるか不安）
- ng-jq
- ng-options
- limitTo
- ngModelに$setDirtyメソッドを追加
- routeProvider case-insensitive
- ngAria, $http improvements
- ChangeLog読めや
Better Peformance
- 1.3と比べて30％ faster（digestのとこが） − 起きたイベントによって何に影響をおよぼすかの判定部分
- メモリフットプリント 2~4%改善
- まぁブラウザや作ってるアプリによるけどな！
Everyone should upgrade!
- 後方互換性に気を使っているので、出たらすぐ使えや！
- サポートブラウザも1.3と一緒
Future
- 1.5
- 1.4がリリースされたら1.5何するかの計画が始まる
- VoteとかPRとかくれや
- リリースサイクル短くなっておる
You can help
- Add a future
- contact us
- minimal set of changes per PR
- unit tests
- follow conventions
- Work on issues
- バグを見つけてfailするテストをくれ
- Help closing issues and PRs
- issueとかPRとかに「これもう直ってるで」とかコメントしてくれると助かる
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ @anatoo
www.slideshare.net
- 久保田 光則
- https://twitter.com/anatoo
- アシアル株式会社
- Onsen UI
- ハイブリッドアプリ用のUIフレームワーク
HTML5ハイブリッドアプリとは
- WebViewでUIを構築するやつ
- メリット
どんな問題があるのか？
- 多くの開発者がハイブリッドで頑張ったが死んでいった
- 有名な例はFacebookさんやで
- 数年前に比べて好転しつつある
- 端末スペック向上
- WebViewの性能向上
- Android2.3のシェア低下
- etc
- railsのDHHも言ってるらしい
- 直接の問題
- パフォーマンスや安定性
- UIパーツをHTML・CSSで再構成する必要がある
- チューニングができるFEエンジニアが少ない
効率的なチューニング
- Loading, Scripting, Rendering, Paintingの1frameを16ms以下にすれば60fps
- これ以上やってもしょうがない
- Loading
- リソースの読み込みやパース
- ハイブリッドアプリの場合、ここは短いはず
- ローカルにあるから
- Scriptiong
- JSの実行時間
- CPU Profileとれや
- Bottom Upのselfみろや
- Rendering
- Painting
- DisplayListの生成
- Rasterize（DisplayListのピクセル化）
- Composite Layers レイヤの合成
CSS Triggersでググれや！カスどもが！
DOMリークを防ぐ
- reflow
- GPUバウンド
- CPUよりGPUの処理の時間がかかっている状態
- でかい要素のtranslateZ hackすれば再現できる
- こんなこと全員が考えないといけないのはおかしいでござる
なぜAngularとOnsen UIが必要なのか
- アプリ開発者がそれに集中できるようにするのが目的や
- Angular, stylus, topcoat, BEM...
Routing your way in an Angular app @briantford
- Brian Ford
- http://angular.github.io/router/
- Angularの場合、componentに対してURLをマッピングする
- Deep Linking
- Angularのroutingの歴史
- ngRoute
- よかったがシンプルなユースケースしか対応できてなかった
- ニーズに対応しきれない
- UI Router
- ngRouteに満足しないコミュニティから生まれた
- New Router
- 1系でも2系でもうまく連携できるものを作りたかった
- ngRoute
- Reusable and Composable
- Familiar
- 既に使い慣れているもの（expressとか）に似せた
- Controller.$routeConfig
<ng-viewport></ng-viewport>に展開される
ng-linkでdeep link- 遷移時にアニメーションできるで
- Sibiling Routes
<div ng-viewport="left"></div>
- Lifecycle Hook
- 遷移時にイベント取れる
- 遷移のキャンセルとかできる。
Controller.prototype.canDeactivate- falseで遷移をキャンセル
- Promiseを返せば待つ
- canReactivate, canDeactivate, instatiate, canActivate...
- Migration
- 1系と2系で設定が同じ
- Router内で1系と2系のコンポーネントが両方動く
- Componentごとに2系に移行できるやんけ
- state
- 0.5
- 1.0はAngular1.4と一緒に出す
- 故に来週くらい
- 詳しいやつ
TypeScript+Angular 1.3 @vvakame
www.slideshare.net
- vvakame
- わかめ まさひろ
- https://twitter.com/vvakame
- TopGate
- TypeScript人間
- AtScript
- AtScript == ES6 + Annotation（Decorators）
- ES6には含まれない
- TypeScriptのSuper set
- TypeScript
- ES6取り込み中
- 1.5でだいぶ取り込む
- JS + 型
- ES6取り込み中
- DefinitelyTyped
- 型定義ファイルが1000以上ある
- 2015/3/15 AngularがTypeScriptを採用することを表明
- TypeScriptのsuper setを作るのは難しい。
- TypeScriptの開発速度が早い！
- TypeScriptのsuper setを作るのは難しい。
- 今からTypeScriptやっておこう
- tslint
- typescript固有のやつ
- typedoc
- JSDoc like
- grunt-typedocはちょっと古いけど直します
- dtsm
- 型定義ファイルの管理
- tsdのオプションが使いづらかったので作った
- エディタ
- 基礎知識
- 型の名前を覚える、d.tsを見る
- tsc --noImplicitAnyでやれ、常に
- 暗黙的にanyになるのを防ぐ
- 出力順問題
- 読み込み順が重要になる
- index.tsをルートにして、ツリー構造にするといい
- protractor
- 型定義ファイルの干渉が起きる
- e2eテストコードと本番コードを混ぜない
- FAQ
- browserify使わない方がいい
- --taget es6は使わない方がいい
- babelは使わない
- source map使わない方がいい
- 壊れやすいのでやめた方がいい
- sourcemapにValidationの仕様がない
- 実戦投入
- 既にいくつかの案件でうまく行っている
- typescript + angularjs 1.3 いけるで
- Q&A
- coverageとコード解析は何を使えばいい？
- ない
- coverageは変換後のJSでやれ
- ヒアドキュメントはどうしてる？
- ES6のTemplate String使えばええやんけ
- coverageとコード解析は何を使えばいい？
Angular 2 @IgorMinar
- Igor Minar
Why Angular 2?
- 5年前にAngular1の開発を始めた
- 多くのユーザがangularjs.orgにやってくる
- 1Million per 30days
- Google内で2000のアプリケーションがAngularを作っている
- 多くの信頼を得たが、改善への責任も伴っている
What's in Angular2?
- Themes
- シンプル、一貫性、柔軟性、速さ、効率
- 1系と似てる
- DI, Data binding, Directivesなどなど
- new features
- viewports,
- new languages
- web components
- template syntax
- unidirectional data flow
- ultra-fast change detection
- ツールの活用
- TypeScript 1.5
- 2系はTypeScriptで開発するが、2系を使う時はTypeScriptを使わなくても書ける
- でもTypeScript使ったほうがいろいろサポートするよ
Performance
- benchpress作ったで〜
- Deep Tree
- 深い構造のComponent、複雑なUIをどれくらい速く構築できるのかのベンチマーク
- baseline：vanilaJSでとにかく速いコード（汚いけど速い）を基準に。
- baselineを1とすると
- 1.3は8.58倍のオーバーヘッド、他のライブラリもだいたい同じくらい
- 2系は3.11倍
- View cache有りだと1.44倍
- virtual scrolling, viewの行き来の改善
- memory
- 1.3は9.5倍、2系のview cache有りは1.3倍
- Immutable Data Structures
- change detectionの改善
- Virtual Scrolling
what does it look like?
When?
- 今はまだalpha
- communityを重視したいので、フィードバックちょうだいな
- Google内部のいくつかのチームでは5月からMigrateを始める
- https://angular.io/
- 2系に特化したサイト
What about Angular 1?
- 1系はどうなるのか？
- ほとんどのエンジニアが2系のMigrationが終わったと感じるまで、1系のサポートを続ける
- ng-conf 2015の動画見ろや
