生産力を向上する非埋め込み型MVVMフレームワークAsta4jsの紹介

開発部の劉です。今回は弊社のフロントエンド開発に使われている自社フレームワークAsta4jsを紹介させていただきます。

Asta4jsとは何か？

Asta4jsはどうか？

分離されたテンプレートとバインディング

web component

なぜAsta4jsを作るのか

終わりに

Asta4jsとは何か？

Asta4jsは非埋め込み型によるテンプレートバインディングの仕組みを提供しています。それにより、ロジックを担当するjavascriptエンジニアとビジュアル設計とUIを担当するデザイナーは互いに作業を妨げることなく、各自のタスクを遂行できる斬新なフロントエンドMVVMフレームワークです。

github.com

Asta4jsはどうか？

分離されたテンプレートとバインディング

まず、簡単なサンプルソースでAsta4jsのバインディングを示します。

仮に、このようなHTMLファイルに対してバインドを行うとした場合を例にします。

  <span id="name-preview"></span>

下記がバインディングを行うロジックになります。

Aj.init(function($scope){  
  $scope.data = {};  
  $scope.snippet("body").bind($scope.data, {  
      name: "#name-preview" //bind the $scope.data.name to #name-preview in 1-way  
  });  
});

このサンプルソースのように、CSSセレクターを利用したデータバインディングの宣言をテンプレートファイルから抽出できています。そして、業務ロジックを担当するエンジニアは完全に独立してロジックを書くことができ、同時にビジュアル担当のデザイナーも自身の作業を進めることが出来ます。

実は、Asta4js自身のサンプルソースに、エンジニアとデザイナーが独立して作業することにより、生産力が素晴らしく向上出来たと称賛された例があります。下記のリンクはAsta4jsの該当のサンプルプログラムのコードです：

http://astamuse.github.io/asta4js/examples/userList/userList.html

f:id:astamuse:20161004144242p:plain

上記の画面は弊社のデザイナーに設計してもらった画面ですが、その画面も最初は下記のように少しみすぼらしいものでした：

f:id:astamuse:20161004144249p:plain

弊社のエンジニアはUIの設計について得意ではなく、今回の目的もAsta4jsの利用方法を示すことだけなので、担当のエンジニアは必要なHTML要素を全部入れて、必要なjsソースを実装しておきました。その後、デザイナーは画面を綺麗にするために、下記のふたつをコミットしました。

SHA-1: 334859ae2785b68e8dfb7e043ffc73d777d44905

btn style modifired

examples\userList\userList.css examples\userList\userList.html

SHA-1: 00aa49bda5449299cd2f0b0fc0fdf40dc66fd223

style added

examples\userList\userList.css examples\userList\userList.html

このコミット履歴から見えるのは、デザイナーが一人で画面の設計と実装を完成したことであり、それと同時にjs側の担当エンジニアはフレームワークのバグと格闘しており、サンプルアプリの画面実装についてまったく手を入れていないという完璧な開発作業分担になっています。

Asta4jsのもっと詳しい説明は公開されているgithubのページにあります。詳細なユーザガイドもwikiの形式でgithubに載せています。ユーザガイドは6ページしかないですが、すでに「詳細」になっています。Asta4jsが簡単であるという何よりの証拠です。

web component

FacebookのReactjsとGoogleのPolymerの発表に従い、componentに基づく開発はフロントエンドに対して大きな話題になっていましたが、幸いなことにweb componentという最新なweb api specに対しても、特殊な対応をせずにすんでいます。そして、Asta4jsがコンポーネントに基づく開発スタイルも完璧にサポートしています。

さらに、Asta4jsはPolymerのビルトインコンポーネントを直接利用できます。下記のリンクはAsta4jsでPolymerのpaper-slideコンポーネントを利用するオンラインサンプルです。

http://astamuse.github.io/asta4js/examples/webComponent/polymer/slider.html

Asta4jsは標準のweb apiでweb componentをインテグレーションしていますので、Polymerだけではなく、すべてのweb component準拠な外部コンポーネントをスムーズに利用できます。Mozilla Brickのcalendarコンポーネントを利用するもう一つのサンプルがあります。

http://astamuse.github.io/asta4js/examples/webComponent/brick/calendar.html

Asta4jsのユーザガイドに外部コンポーネントの利用方法とAsta4jsを利用して自分のコンポーネントを実装する方法を詳しく説明しています。

https://github.com/astamuse/asta4js/wiki/Web-Component-Developing

なぜAsta4jsを作るのか

AngluarJS, Vue, KnockoutのようなフロントエンドMVVMフレームワークはたくさんあります。基本的にview-modelの双方向バイディングをサポートしてフロントエンドのエンジニアを煩雑なDOM操作から抜け出して、ロジックにより集中できるようになっていますが、われわれはなぜまた新しいフレームワークを作るのでしょうか？

簡単に言えば、われわれは現在のテンプレートエンジンがフロントエンドエンジニアの生産力を大変束縛しているという観点を持っています。フロントのテンプレートファイルに埋められたテンプレート制御コードはどうしてもデザイナーの作業を妨害してしまっており、フロントのページリファクタリングなども大変不便になっています。言い換えれば、デザイナーがページを直してからページがうまく表示できなくなることが開発者の日常生活になっているような状況です。たくさんの会社はデザイナーとエンジニアのコミュニケーションを強化するために、席を密接させるかなどいろいろ対策を採用しています。もしくは、デザイナーに対して最低限なプログラミング能力を求めて、すくなくともテンプレートファイルに埋められているバインディングなどのロジックを担当できるように要求しています。さらに、一部の会社はフルスタックエンジニアを求めて生産力を向上できるのではないかと模索しています。

しかしながら、そのいろいろ努力はそこまで生産力の向上に寄与していないという事実もあります。デザイナーと開発エンジニアは緊密に繋がられてよりパワフルな生産力を発揮できていません。

数年前、われわれはScalaのフレームワークLiftの感銘を受けて、JavaでのサーバサイドレンダリングフレームワークAsta4D(JavaフレームワークAsta4Dの話)を作りました。Liftから提出したロジックとテンプレート完全分離という仕組みを活用して、開発にすごくいい効果を得ることが出来ました。デザイナーはエンジニアに依存しなくても自身の作業のみでフロントページをバージョンアップすることが可能となり、開発エンジニアもデザイナーとのコミュニケーションをせずともにほとんどの開発タスクを独自に進められるようになっています。そのような柔軟な開発フローの恩恵で会社の利益は増大していっています。

近年、新しいサービスの開発にクライアントレンダリングのMVVMフレームワークが必要になり、いろいろフレームワークを評価してみましたが、既存のフレームワーク中ではAngularJSの評価が一番でした。しかし、AngluarJSも埋め込み型のテンプレートエンジンであり、HTMLのテンプレートファイルに様々なバイディングと制御を埋めなければならず、非埋め込み型フレームワークと比較すれば生産力の大幅な低下になると感じました。また、AngluarJSで複雑すぎると批判されているdiretiveで特殊なカスタマイズ作業のコストがすごく高くなってしまったこともありました。

いろいろな不満点を持ちながらもAngularJSを利用してサービスの開発をしていましたが、今回新しいサービスの開発をするにあたり、われわれが持っている非埋め込み型レンダリング経験を導入しようというきっかけで、非埋め込み型MVVMフレームワークAsta4jsの開発を着手しました。

現在、Asta4jsはまだ初期開発の状態にありますので、バグ報告やpull requestを歓迎しています。また、github上にissueチケットを作ってディスカッションを起こしていただけることも期待しております。