Goalist Developers Blog

FlexとAngular2を比較してみた

はじめまして!ゴーリスト開発の盛次(モリツグ)です。

最近社内でAngular2の勉強会を行った時に以下のようなやり取りがありました。

盛次:「Angular2とFlexってどことなく似てるから凄くいい」

鈴木:「良く分からないんで比較してブログ書いてください」

ということで、今回はFlexとAngular2を比較します。
以下のような方に向けた内容となっています。
・Flex?勤務時間の話?という方
・僕も含めた全国に100人はいると思われるFlexファン
・AlexさんがFlexJSを完成させてくれることを2年ぐらい願っている方

Flexとは

詳しくはAdobe FlexまたはApache Flexでググっていただくとして、、、
特徴は以下です
・Flash上で動くのでFlashが動けば同じソースコードでどのOS上でも同じ動作をしてくれる
・HTMLの代わりにMXMLというXMLを拡張した言語でGUIを記述する
・JavaScriptの代わりにActionScript(クラスベースのオブジェクト指向言語)を使う
・2010年にiOSがFlashに対応しないことが確定したため悲しい運命を辿った

FlexとAngular2の類似点

・MXMLの代わりに頻繁に「キモい」といわれるHTMLを拡張した記法を用いてGUIを記述する
・ActionScriptの代わりにTypeScript(クラスベースのオブジェクト指向言語)を使う。

本当にそっくりですね!

では実際にソースコードを比較したいと思います。

見た目(ボタンを押したらHello, world!)

Flex

f:id:t-moritsugu:20161222102938p:plain

Angular2

f:id:t-moritsugu:20161222102937p:plain

イベントの伝搬(Flex:dispatchEvent, Angular2:emit)

Flex

f:id:t-moritsugu:20161222112328p:plain

Angular2

f:id:t-moritsugu:20161222123959p:plain

Alertの呼び出し(Angular2のアラートは一部自作)

Flex

f:id:t-moritsugu:20161222124001p:plain

Angular2

f:id:t-moritsugu:20161222130826p:plain f:id:t-moritsugu:20161222130827p:plain

まとめ

ただひたすらソースコードを貼るという暴挙に出てみました。
Flexの経験があれば何となく雰囲気が伝わったでしょうか。
Flexの経験が無くてもコンポーネントベースで型があるぐらいが伝われば幸いです。
まだまだ「これIDEがやってくれたらいいのに」的な部分も多いAngular2ですが、使っていて物凄く可能性を感じるので広まってくれることを祈ります。