Highperformance renderer framework famo.us

ネイティブ並の早さを誇るJavascriptの高速レンダリングフレームワークのfamo.usにyeomanサポートと、チュートリアルが来ました。

• Install - https://famo.us/install
• Courses - https://famo.us/university

famo.usと言えばこのデモが有名ですね。（HTMLはもうなくなったっぽいですが）

famo.us 3D template [ hello world ] - YouTube

これの何が凄いってCanvasじゃなくてDivでできている点です。

一度でもCSS3の3Dアニメーションを経験したことある方なら分かると思います。 要素数が増えると極端にパフォーマンスが落ちるところで、大量の透過・角丸オブジェクトを非力なMBAでもサクサク動く凄いフレームワークです。

このライブラリに出会ってからハイブリッドアプリで遅いのは実装の問題とよくわかります。 自分の技術力の低さを棚に上げてDisってはダメですね。

Install

まずはyeomanのジェネレーターをインストールします。

$ npm install -g generator-famous

次にyeomanを使用してfamo.usプロジェクトを生成します。

$ yo famous

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

You're using the fantastic Famo.us generator.
[?] Your project name: (dirname) 
[?] Your project description: (e.g. Seed project to get started with Famo.us) 
[?] Would you mind telling me your username on Github? 
[?] (optional) Do you agree to our Terms of Service (https://famo.us/terms) and our Privacy Policy (http://famo.us/privacy)? (Y/n) 

コマンドを実行するといくつか質問されるので回答していってください。 それぞれの質問はあとから変更可能です。（たぶん）

Structure

$ tree
.
├── .bowerrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .jscsrc
├── .travis.yml
├── .yo-rc.json
├── Gruntfile.js
├── README.md
├── app
│   ├── content
│   ├── index.html
│   ├── lib
│   ├── src
│   └── styles
├── bower.json
├── grunt
│   ├── aliases.js
│   ├── bower.js
│   ├── clean.js
│   ├── connect.js
│   ├── copy.js
│   ├── eslint.js
│   ├── htmlmin.js
│   ├── jscs.js
│   ├── processhtml.js
│   ├── requirejs.js
│   ├── rev.js
│   ├── usemin.js
│   ├── useminPrepare.js
│   └── watch.js
├── node_modules
│   ├── .bin
│   ├── bower
│   ├── famous-metrics
│   ├── grunt
│   ├── grunt-bower-requirejs
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-htmlmin
│   ├── grunt-contrib-requirejs
│   ├── grunt-contrib-uglify
│   ├── grunt-contrib-watch
│   ├── grunt-eslint
│   ├── grunt-jscs-checker
│   ├── grunt-processhtml
│   ├── grunt-rev
│   ├── grunt-usemin
│   ├── load-grunt-config
│   └── time-grunt
└── package.json

最近、流行の構成になっています。 gruntの分割もついにテンプレートになる時代ですね。

grunt

gruntでは以下のタスクが登録されています。

$ grunt serve

yoeman定番のサーバー起動。

$ grunt build

デプロイできる状態にビルド。

$ grunt lint

jscs、eslintでのJavascriptコードの構文チェック。

$ grunt test

テスト。ただし、内部でlintを呼び出しているだけのようです。

bower

bower.jsでは以下のライブラリを読み込むように設定されています。

• requirejs
• almond
• famous-polyfills
• famous

JSファイルの読み込みだけで特に依存ライブラリはないようです。

---

GWと良いタイミングで見つけたので、GWはチュートリアルで勉強しようと思います。 数百枚の画像サムネイル表示をこれでスムーズに出来ればと期待ですね。