Vue.js の"The Progressive Framework"という設計思想がすごく刺さった

jQueryで書いている現場にVue.js を導入

jQuery で書いている現場にフロントエンドにフレームワークを導入する際、どれを選ぶかということに頭を悩ませてきました。
複雑なフレームワークだと誰もメンテできずに放置されるだろうし、流行らないフレームワークならベストプラクティスやトラブルシューティングな情報が見つからず苦労するだろうし。
導入はシンプルで仕様もそんなに難しくなくて、かつドキュメントなどの情報量がある程度あるフレームワーク、そんなちょうどいい感じのフレームワークを探していました。

で、結局Vue.js に落ち着くことにしました。

jp.vuejs.org

The Progressive Framework

Vue.js の設計思想のひとつに"The Progressive Framework" というものがあります。
これがですね、個人的にすごく刺さったんですね。

直訳すれば進歩的なフレームワークですが、段階的に開発者が機能を選択できるフレームワークという意味です。 フレームワークは重厚で異様に複雑なもの、hello world は出力するのに特化したもの、薄すぎて向こう側が透けて見えそうなものなど様々です。

僕らはチームのメンバーの人数やスキルという問題やアプリケーション固有の複雑といった問題を考慮してフレームワークを選定します。

ただ、これでめでたしめでたしとはならないのがWebアプリケーションというものですね。
フレームワーク選定時に決定した状況は変化します。

最初はシンプルな機能だけだったものがいつの間にかいろんな機能が五月雨に追加されてしまい薄いフレームワークの中に重厚なロジックが詰め込まれている状態に陥ってしまったり。
また、複雑さはある程度高くなるのはわかっているが、サービスローンチまでの開発スピードが要求されるときにあえて重厚なフレームワークを選択したり。
どのフレームワークを選ぶべきかという問題はとても悩ましいものです。
Twitterのようにバックグラウンドをコロコロ変える企業もありますが一度サービスインしたサービスのフレームワークの移行は得てして大変なものです。

この辺の問題をクリアできるように"The Progressive Framework"という思想のもと設計されたのがVue.js です。
必要に応じてステップ・バイ・ステップで複雑さ=機能を選択できるようになっています。
f:id:snowlong:20170327170314p:plain Vue.js @ LaraconEU - Google スライド

ちょっと画面にAjax的な動きを入れたいのであれば、宣言的レンダリングでVueを宣言してその中にdataやmethodsを追加するだけでjQuery を同じくらい簡単に導入することができます。
宣言的レンダリング

Vue.js の作者Evan YouがVue.js の設計思想について語っています。

アプリケーション開発者に必要な機能を選択させるというのはわりと誰でも思いつくことなのですが、Vue.js はそれがきちんと実装されていていいですね。

Learning Vue.Js 2

Learning Vue.Js 2