Front-end beginner's luck

フロントエンドに関して学んだ知識をメモしておくブログです

ng-japanに参加してきました!

3/21(土)に開催されたAngularJSのカンファレンス、ng-japanに参加してきました!

ngjapan.org

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

Session2. AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ(アシアル株式会社 久保田さん)

Onsen UIとは

  • AngularJSの上に作られたライブラリ

HTML5ハイブリッドアプリとは

  • ネイティブアプリとはJavaとかで書かれた普通のアプリ
  • ハイブリッドアプリはネイティブアプリとして動作するが、内部をWebviewで表示
    • HTML5リソースをアプリの内部に持っている

何がいいのか

数年前はパフォーマンスが悪くて使い物にならなかった

  • Facebookも以前はHTML5を一部使っていたが、その後ネイティブに書き換えた

状況の好転

  • 端末のスペックが向上
  • AndroidのWebviewでCromiumが採用された
  • HTML5APIが増えた
  • Android2.3系のシェアが低下

チューニングすればハイブリッドアプリも通用する!

  • 多くの開発者はより素早く描画するためのチューニング方法を知らない

チューニングにはインスペクタを使う

  • AndroidならChromeIOSならSafariを使えば実機でも確認できる
  • 描画が始まって終わるまでが1frame
    • Loading->Scripting->Rendering->Painting
    • 1frameで16msに抑えられれば最高!
      • Loading
        • リソースがローカルにすでにあるのでボトルネックになる可能性は少ない
      • Scripting
        • JavaScriptの実行時間
        • 基本的には高速なのであまり問題にならないが、Canvasの操作やリフローが発生する処理は遅くなったりする
        • Scriptingがボトルネックだったら、インスペクタのプロファイルを取ればだいたい特定できる
      • Rendering
        • レイアウト処理
        • Reculculate Style
          • 個別のDOM要素に対して、当たるスタイルを計算する
          • CSS OMを参照して、DOM要素の数xCSSの数分マッチング処理が走る
          • 一番軽いのは単純なclassの指定
            • 使っていないCSSのルールは消す
        • Layout
          • すべてのDOMのレイアウト情報を計算
          • 計算された結果の視覚的なオブジェクトのツリーがRenderTree
      • Painting
        • 描画処理
          • Paint
            • Display Listへの命令の生成
          • Rasterize
            • Display Listを実行してピクセル化
          • Composite Layers
            • レイヤの合成

translate3d(0,0,0)が速いのはなぜ?

どのCSSプロパティを操作すると何が起こるのか

  • 不明瞭だがある程度法則はある
  • translateやopacityの操作だとComposite Layersのみが発生する
  • CSS triggersで検索!

DOMリークを防ぐ

  • DOM要素が誤って参照されたまま開放されない
  • IOS, Androidだとメモリスワッピングが弱く設計されている

reflowを起こさないようにする

  • 画像のサイズは必ず指定する
  • 一度DOMツリーから切り離して操作する

GPUバウンド

  • CPUよりもGPUのほうで時間がかかっている状態

チューニングの罠

  • チューニングのことばかりを考えながら開発はできない

ネイティブだとUIフレームワークがあるが、HTML5アプリにはない

Onsen UI

  • Angularをベースにして構築
  • CSSによるテーマはtopcoatをベースに構築
  • モバイルアプリでよく使われる機能やチューニングに必要な機能をコンポーネントとして提供

Onsen UIが目指すもの

  • 誰でも簡単に高速なアプリを作成できる
  • チューニングを気にせずに作れる

Session3. Routing your way in an Angular app(Brian Fordさん)

こちらのセッションはスライド内のソースコードが読みづらかったので細かい内容を把握できませんでした。。

こちらのページで復習します。

New Angular Router

以下、聞き取れた部分に関してのみのメモです。

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...

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#とかに優しい言語仕様

静的型付け

  • 静的解析で多くの整合性検査が可能
  • 不整合があったらコンパイルエラー
  • 大規模・大人数になるほど利点が多い
  • JavaC#とかが有名

既存資産の活用

  • JSのライブラリ(jQuery等)に関しては、型情報を定義することで使えるようになる
  • Definitely Typed
    • 型定義を行うプロジェクト
    • 既存JSに型を後付する

AtScript to TypeScript

  • Angular2をTypeScriptで書くという方針に変更
    • TypeScriptに必要な要素が入る
    • 作りたいのはAngularJS本体のはず
    • TypeScriptのsupersetを作るのは難しい
    • TypeScriptの開発速度が速い!

TypeScript関連ツール

  • tslint
  • typedoc
    • JSDoc的なやつでTypeScript専用
  • dtsm
  • エディタ

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にソースを置き換えるまでサポートし続けていく

以上、メモ。