Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Aurelia.js の紹介

Getting Started で分かる以上のことは書いてないですが、Aurelia.js の紹介です。

  • Login to see the comments

  • Be the first to like this

Aurelia.js の紹介

  1. 1. Aurelia.js の紹介 2015-03-19 ドヤ会@株式会社 サイカ 林 淳哉
  2. 2. 特徴 • ECMA Script 6/7 • class, module syntax • annotation (ES7) • architecture • view model (JavaScript) • view (HTML5, template tag) • other features • two way binding • custom tag • build, test • jspm • karma for unit test • selenium for e2e test • early preview stage (not for production!!) もともと Angular 2.0 の開発に携わっていた Rob Eisenberg が Angular のチームを 抜けて aurelia を作成。TypeScript の開発者や、ECMA Script のコミュニティとも 密に連携しているっぽい。
  3. 3. Tutorial • Getting Started • skelton-navigation なら簡単に動かせます。 $ git clone git@github.com:aurelia/skeleton-navigation.git
 $ cd skelton-navigation $ npm install -g jspm $ jspm endpoint config github # token を登録しないと制限に引っかかる $ npm install
 $ jspm install $ gulp watch
 …
 [BS] Local URL: http://localhost:9000 [BS] External URL: http://192.168.0.21:9000 [BS] Serving files from: .
 …
  4. 4. コードを見てみる
  5. 5. • アプリケーション定義 • app.js • app.html • view と view model • welcome.js, welcome.html • flicker.js, flicker.html
  6. 6. テストを動かしてみる
  7. 7. • unittest (karma + jasmine) • e2e (selenium) • PageObject という概念が Aurelia から提供 されている $ export CHROME_BIN=/opt/homebrew-cask/Caskroom/google-chrome/latest/Google Chrome.app/Contents/MacOS/Google Chrome $ gulp test
 … Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 12 of 12 SUCCESS (0.014 secs / 0.009 secs) $ gulp watch # 別ターミナルで動かしておく $ gulp e2e
 …
 5 tests, 5 assertions, 0 failures
  8. 8. まとめ • ES6/7 の syntax にわくわく • html に bind を記述するのは便利 • template タグは html5 標準で良さそう • e2e test のテクニックはそのまま使えそう • Getting Started 以上のことをやろうとすると、まだまだ情 報が少なくて辛い • jspmだけでも便利 → 書いた • 「jspmで始めるES6生活」@Qiita
  9. 9. おまけ gitter で日夜活発な議論が繰り広げられている https://gitter.im/Aurelia/Discuss

×