albatrosary's blog

UI/UXとエンタープライズシステム

Aurelia.jsという新しいJavaScriptフレームワーク

aurelia

Aurelia.jsはAngular teamで開発を行っていた方が Durandal Inc. というところで新しく作ったJavaScriptフレームワークのようです。Aurelia.jsに関しては下記サイトを見て頂けると良いと思います。今回はその味見をしてみましたのでメモを取ります。

f:id:albatrosary:20150303145633p:plain

Home | Aurelia

特徴

  • ES6
  • Web Components
  • Object.observe

などなどあるようです。

始める

gulp, jspmのインストール

gulpとjspmを

$ npm install -g gulp
$ npm install -g jspm

jspmのエンドポイント設定

jspmのエンドポイントを設定する必要があります。これを実行しないとjspmを実行したときにエラーを吐きまくります：

$ jspm endpoint config github
Would you like to set up your GitHub credentials? [yes]: 
     If using two-factor authentication or to avoid using your password you can generate an access token at https://github.com/settings/applications.

Enter your GitHub username: albatrosary
Enter your GitHub password or access token: 
Would you like to test these credentials? [yes]: 
ok   GitHub authentication is working successfully.
ok   Endpoint github configured successfully.
$

詳細はこちらをご確認ください：

Endpoints · jspm/jspm-cli Wiki · GitHub

jspm.io - Frictionless Browser Package Management の特徴はサイトにも書いてある通り次の特徴があります：

  • jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader
  • Load any module format (ES6, AMD, CommonJS and globals) directly from any endpoint such as npm and github with flat versioned dependency management. Any custom endpoints can be created through the Endpoint API.
  • For development, load modules as separate files with ES6 and plugins compiled in the browser.
  • For production (or development too), optimize into a bundle, layered bundles or a self-executing bundle with a single command.

環境ができたら

Releases · aurelia/skeleton-navigation · GitHub

からzip若しくはtarをダウンロードしプロジェクトフォルダーに展開しアプリケーションを実行します。

$ npm install
$ jspm install -y
$ gulp watch

アプリケーションが立ち上がります

f:id:albatrosary:20150303151611p:plain

ソースを見る

f:id:albatrosary:20150303165247p:plain

見て直ぐ分かりますが、ES6、Web Componentsが使われているのが確認とれます。そしてルーティングの書き方ですが、結構私的には好みです。まだインストールして立ち上げただけなのでなんとも言えませんが、面白そうなのでじっくりと味見して見たいなと。。

最後に

元ネタはこちらです：

AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！ - paiza開発日誌

はてぶで色々言われてるんですね、でも個人的にはこれ面白いと思います。実際に「じゃ直ぐ業務で」ということにはなりませんが、触る分には害はないかと思います。ES6とWeb Componemtsとかでできているので楽しむには良いかなと。
残念ながらOo()はわかりませんでした、バインディングというのはわかるのですが。ソースコードあまり読んでませんので、すこし追っかけないと。