AngularJSからReactに移ったケースの話

2015-08-30 Yosuke Kumakura

Yosuke Kumakura (kumatch)

https://twitter.com/kumatch

https://github.com/kumatch

Agenda• 自分がフロントエンド JS フレームワークを

AngularJS から React に移した背景を紹介

• 思い出（昔話）を語ります

• 記憶の（都合よい）改変があるかも

• 当時と今はまた状況が変わってます

サーバサイドがメイン

• Web アプリケーション & インフラエンジニア

• JavaScript はついでにやる程度だった

• jQuery でなんかやるくらい

～ 2013年

Data binding

Directive (Component)

Dependency Injection (DI)

機能面とその実装方法

サーバサイドがメイン (2回目)

• Web アプリケーション & インフラエンジニア

• JavaScript は で使っている

• かなり優れた eco system

• JS 開発環境

• concat, minify, compile

• browserify

&

　　　　　　は Node.js 普及前の成果物• 当時の AngularJS (1.2 直後) は CommonJS

module 体制ではなかった

• ライブラリも当然ながら非 CommonJS

• ツールだけは Node.js を有効活用していた(ex. Testacular - 現 Karma)

• bower のみ

• AngularJS 公式ではないものは一応あった

は CommonJS module じゃなので 　　　　　による配布はされていなかった

package.json を持っていない GitHub JS コードを

npm_modules 以下へ持ってくるツールを使う

require(“angular/angular”);

Browserify によってコードがバンドルされる

angular.module(“myApp.services”, []). value(“version”, 0.1). service(“echoHello”, [ “version”, function (version) { return function () { console.log(“hello, “ + version); }; }]);

module.exports = function (version) { return function () { console.log(“hello, ” + version); }; };

Node.js 利用者から見ると微妙に

マッチしていない JavaScript 実装体制

できなくはないが 無理やりフィットさせている。

2014年 ～

React

Node.js 以後の世界

npm modules は資産

React

Component 関心事の集約

(見た目 & 振る舞い)

React

One way data flow Simple

(not Easy)

React

現在とこれから

CommonJS modules 化

すべて npm で導入可能

の登場

実行環境こそは Node.js だけども これまでのフロントエンド開発のノウハウを集約 （めっちゃ頑張ってる）

Node.js 以後の世界

まとめ• AngularJS はそこまで嫌いでもなかった

• 自分にとってフィットしてなかっただけ（環境、時代）

• 状況はまた一刻と変わってます好みで選びましょう

Question ?

( for )React