Data Binding JS Night

at LINE May 27, 2015

Facebookの開発したReact.jsをはじめ、JavaScriptライブラリでは、UI(View)に特化したData Bindingによるデータフローが盛り上がっている中で、Data BindingをサポートしているJavaScript MV* フレームワークを語り合う「Data Binding JS Night」がLINEオフィス27階カフェにて開催されましたので、そのまとめです。


開会

開会は、企画・会場提供いただいたLINEさんから@tejitakさんのご挨拶。冒頭で、今回のテーマ「Data Binding」の定義について再確認。

DATA BINDING JS NIGHT #1 OPENING by @tejitak

@tejitakさんが作成した下記サイトも、ぜひチェックしてください。
http://tejitak.github.io/js-library-map/


Next Vue.js 0.12

一番手は、@kazuponさんから、最近頻繁にアップデートが行われている「Vue.js」について。

Next Vue.js 0.12 by @kazupon

今回の “0.12” アップデートでは、非同期コンポーネントの追加や、カスタムタグやFilterまわりの強化、またparamAttributespropsへの名称変更とv-componentv-withの廃止により、重複していた機能の解消など変更がありました。

個人的には、v-withv-componentを廃止してpropsに統一したことで、Vueコンポーネントや子要素の扱いが整理されたのが良かったです。

Vue.js
http://vuejs.org/


海外で注目されてるJS Framework
“Mithril”の特徴

次に、@shoyo_kyoさんから、超軽量Framework「Mithril」について。

海外で注目されているJS Framework “Mithril”の特徴 by @shoyo_kyo

Mithrilは、軽量ながらルーティングやデータ同期、そしてVirtulDOM をカバーしています。VirtulaDOMの代名詞Reactとの違いのひとつは、MVC構造であり、それがVirtulDOMでの描画の高速化につながっているそうです。

Twitterなどでも、称賛のツイートを見かけますが、@shoyo_kyoさんが所属するLINEさんでも話題のFrameworkだそうです。

APIが15個!しかないため、学習コスト少なめ、これスゴイ。

Mithril.js
http://mithril.js.org/


コンポーネント指向にみる、Reactのベストプラクティスとバッドプラクティス

続いて、@axross_さんから、ご存知「React.js」について。

コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス by @axross_

ここでは、statepropsについて特に言及されていました。propsのみに徹することで、MVCのようなデータ構造に整理しやすくなります。また、CSSの設計についても “ 1コンポーネント= 1 BEM Block ” とするなど、最良の施策について触れていました。

複雑さを取り除いて、高速・効率的に開発をすすめる方法を説明してくれています。

React
https://facebook.github.io/react/


Vue.js を数ヶ月使ってみて遭遇した
問題とその解決策

続いて、@positiveflatさんから、本日2度目の「Vue.js」について。

Vue.jsを数ヶ月使ってみて遭遇した問題とその解決策 by @positiveflat

Vue.jsでは、$dataの監視をgetter/setterで監視しており、会場でもObject.observe()への今後の対応が期待されていました。

とりあえず始めた方が陥りやすい問題と解決を解説されています。

Vue.js
http://vuejs.org/


Meteorの紹介

休憩を挟んだ後半戦の一番手は、@hashedrockさんから、ちょっと異色の「Meteor」について。

Meteorの紹介 by @hashedrock

“Isomorphic” なFrameworkで、Reactive Programmingによる強力なリアルタイムwebアプリケーション構築が売りです。今回は、いかに簡単にアプリが作れるかを、アルコールに酔った状態を想定!?して解説されていました。

nodeやMongoDBが内蔵されているので、特に下準備なく書き始められるところは、酔ったノリでwebアプリを手早く作るのに向いている気はします。

変わった視点で解説していますが、面白くまとまっています。 “Data Binding” で語るには、かなり多機能です。

Meteor
https://www.meteor.com/


Riot.jsとgeneratorで始める
新しいデータバインディングの形

続いて、@cognitomさんから、会場での反響も大きかった発表。

Riot.js + generatorで始める新しいデータバインディング by @cognitom

Riot.js」の紹介かと思いきや、Riot.jsをベースにした自作ライブラリも紹介されていて、コンポーネントのoptsタグにPromise objectやGeneratorsのfunction*() syntaxをぶっこむことが出来るというもの。

面白いアイデアに会場から、「おお」っと声が上がっていました。

ライブラリに興味ある方は、ぜひプルリクしてください。
ライブラリは、こちら→ http://cognitom.github.io/ikki/

Riot.js
https://muut.com/riotjs/


React & Go Single Page Apps

続いて、@tyshgcさんから、本日2度目「React」と「Go」によるSPA制作について。

React & Go Single Page Apps by @tyshgc

今回の発表は、@tyshgcさんが所属するGunosyさんで取り組んでいる「Gunosy Platform」の開発実例から解説されていました。この組み合わせの場合、サーバーサイドとクライントサイド両方でのレンダリング、データの同期に工夫が必要になることが多いよう。

資料最後には、React + Go でのIsomorphicの例も紹介されています。

React
http://facebook.github.io/react/


今、改めてBackboneを評価する

トリの発表は、@shibe97さんから、「Backbone.js」について。

今、改めてBackboneを評価する by @shibe97

資料でも触れていますが、Angular.jsとよく比較され、ほぼ完全に押されてしまった感もありますが、他のJavaScriptライブラリと組み合わせることで自在になることを提案されています。フルスタックのAngular.jsでは、この柔軟性の担保はなかなか難しいですね。

どうしても新しいものに気が移りがちですが、少し以前のものを再評価する姿勢にすごく共感しました。

Backbone.js
http://backbonejs.org/


終わりに

今回、計6つのJavascript ライブラリ(Framework)についてそれぞれの発表を聞いてみて、双方向データバインディングから一方向データバインディングにシフトするなど、構造を単純化する意図を感じました。

データバインディングは、モデルとビューを分離し、複雑なUIの実装にこそ威力を発揮するので、明示的でわかりやすい構造であることが求められます。その意味で、Mithrilなんかは理想に近い設計になっているのではないでしょうか(あくまで、個人的に)。

私のような、デザイナーや新米エンジニアの障壁が下がっていくと嬉しいですね。

最後に、「Data Binding JS Night」を主催したVue.jsの日本語翻訳チーム「vuejs-jp」の翻訳が、先日無事に公開されました。皆様のお役に少しでも立ててもらえればと思います。
http://jp.vuejs.org/


vuejs-jp」では、Vue.jsに関するDiscussionを受け付けていますので、お気軽にissueのオープン待っています!
https://github.com/vuejs-jp/discussion

Like what you read? Give k.kojima a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.