Skip to content

Instantly share code, notes, and snippets.

@yusukegoto
Created March 21, 2015 09:01
Show Gist options
  • Save yusukegoto/a7e25384f7b7d30280c2 to your computer and use it in GitHub Desktop.
Save yusukegoto/a7e25384f7b7d30280c2 to your computer and use it in GitHub Desktop.

ng-japan 2015

概要

公式

Angular 1.4 and beyond

Chirayu Krishnappa

これから一週間くらいでリリースされる 安定版

1.4の新機能

  • New Router
  • Pluralization And Gender Support
  • ng-animate
  • ng-messages改善
  • ng-cookie改善

New RouterはBrianのセッション change log

Pluralization And Gender

複数形と性別対応 ICU MessageFormat {{}}の中で宣言的にメッセージフォーマットが書ける atrributesで利用することができる

Pluralizationの例

{{numMessages, plural,
     =0 { no new messages}
     =1 { 1 new messages}
  other { # new messages }

ng-messages

複数includeできるようになった

ng-cookie

シンプルだったcookieの扱いによくある機能を足した

  • cookieのpathとdomainが持てる
  • 更新できる
  • githubの2年越しのissueがcloseできた

その他

  • commonjsフレンドリー
  • injector
  • ng-jq
  • $http改善

ng-jqにjqliteや特定のバージョンが指定できる

パフォーマンス改善

digest timeが1.3より最大で30%向上 2-4%のメモリ容量が改善 1.3を使っている人は1.4にアップグレードするべき

1.5

でるんだ 1.4がリリースされたら開始する

2.0

Igorのセッション

リリースサイクル

Angularのリリースサイクルが短くなってきている 大きな変化が少なくなってくるのでアップグレードも容易になるはず

コントリビュートの注意

新機能を追加したいとき

開発者に連絡して実装方針などを相談したりコミュニティからFBもらう 小さなコミット ユニットテスト

AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ

アシアル久保田さん 発表資料

Onsen UI Angularをベースにしたcordovaライブラリ

昔はhtml5のハイブリッドアプリはうまくいかなかった(facebook) HTMLやcss, jsは書けるがチューニングできる人が少ない 最近は好転してきた

チューニング方法

ボトルネックを探す AndroidはCorome、iOSはSafariのインスペクタで計測 実機での計測もできる

Loading

リソースの読み込みやパース ハイブリッドアプリはローカルにあるからあまり問題にならない

Scripting

純粋な計算は早い IOやcanvasが発生すると遅い profileとればいい

Rendering

Recualculate Style: cssルールの再計算

不要なcssのルールを消すだけでもだいぶ速くなる 重たいcssの書き方を減らす

Layout Dom構築

Painting

その他

CSS Triggersにcssプロパティの変更のパフォーマンスに与える影響が載っている

DOMリークを防ぐ

detached DOMツリーとそれに参照されているリソースが全てリークする iOS, Androidだとメモリ管理が余計にシビア(PCに比べスワッピングが弱い)

HTML5ハイブリッドアプリの開発

このようなチューニングは全ての開発者に必要なことなのか? ハイブリッドアプリはネイティブにあるCocoaとかsystem viewなどの コンポーネント部分が開発者に委ねられる そこでAngularJSベースのOnsen UIでそいいったUIの煩わしさから解放したい stylusを利用してbemベースのcss

webコンポーネント的なものとかもう当たり前になってきている感
<ons-toolbar>
  <div class="center">List</div>
</ons-toolbar>

Q&A

ionicとの違い

  • 高速
  • ionicはiOSしか対応していなかった
  • 日本語のドキュメントが充実

Routing your way in an Angular app

Brian Ford

AngularでのRoutingはURLをコンポーネントに割り当てていく Deeplinking: BookmarkとかをAngularアプリでもできるようにする New RouterはログインなどのRouter情報を再利用可能にする

New Routerは2系と1系のAPIを混在させることができるので 段階的にAPIをマイグレートすることができる

TypeScriptとAngular1.3

わかめさん TypeScriptのDefinitlyTypedにめっちゃコミットしている 発表資料

AtScript = ES6 + A AはAnnotation Aはtypescriptのsuper class つまりAtScriptはTypeScriptのすごいやつになるはずだった

ES5 <- ES6 <- TypeScript

コンパイルはやはり大規模・大人数になるほど有利 既存資産はTypeScript用に型情報を用意すれば利用出来る それがDefinitlyTyped

AtScriptよりTypeScriptの方が開発が早かった ES6の機能がだいぶTypeScriptの1.5に入ってきた

MSすげーな

TypeScriptをやってみよう

javascriptに毛が生えた感じだな ES6でもそのうち同じことができるようになる

bowerより最近はnpmもってきてbrowserifyなのか TypeScriptはコンパイラがAPIを提供しているのでVisual Studio同等の 機能をエディタで利用することができる Web Stormは独自実装なのでAPIの利点は活かしきれていない

--noImplicitAnyオプションは絶対入れろ angularは内部的にjqueryを利用している

QA

かばれっじツールはない istanbulはcoffeeをサポートしているけどTypeSctiptは無理そう

ヒアドキュメント ES6からtemplateリテラルがサポートされる

Angular2

igor

今現在一番コミットしている人 googleでは2000のプロジェクトがAngularを使っている

2をなぜ作ろうとしたのか

信頼性をあげるため改善したい もっと画期的なものを作りたい

Angular2はどんなものになるのか

  • シンプル
  • 一貫性
  • 柔軟性
  • 速い
  • 生産性

2のシンタックスは大分変わる 内部や概念は似ている Toolへのサポート ブラウザ実装の差異を吸収する? typoを減らすしくみ ES6などの機能を利用するためTypeScriptで実装するが 将来的にはAngularで欲しかった機能がESMAにバックポートしたい AltJSはいらなくなるだろう

パフォーマンス

1.3で改善した Angularは何をもって速いとするか? Benchpress 実際の世界で利用しているようなユースケースをシミュレートできるシステムを作った view cacheという機能を使えばDOMを再利用できる 2は1.3より4倍速い(上の条件での結果)

immutable data structureのいいところ オブジェクトで絶対変更しないのがわかっている場合その情報を利用する

angular2のサンプル Youtubeにも動画あり

いつリリースされるのか

Angular2はα版 5月にGoogle内のアプリのマイグレーションを始める予定 angular.org: 1系 angular.io: 2系

ng-confのビデオは重要だ!

気になったこと

router(らうたー) ngをエンジーと呼んでる GIF(ぎふっていってる)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment