🧊

TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed

そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。

  • React陣営は @koba04 & @yosuke_furukawa
  • Angular陣営は @laco0416 & @armorik83
  • モデレータは @Shumpei

メモは雑なので、漏れとか齟齬とかあるかもですよ。

トークバトル

  • React / Angular 2の概要
    • スター数とかバージョンとか
    • コードがだいたいこんな感じとか

開発言語

  • こば: だいたいBabel、TypeScriptでもやれる
  • 会長: だいたいBabel使ってると幸せになれる
  • らこ: JavaScript or TypeScript or Dart
  • らこ: まあTypeScriptですよね
  • らこ: Dartはリポジトリが分かれました
  • はち: ReactやるからAngularやるからで開発言語を選ぶのはナンセンスだ！
  • 会長: それはそうだがエコシステムがそうなってる
  • 会長: JSXキモいけど他の選択肢が・・
  • はち: Flowってどうなの
  • 会長: `propTypes`をFlowでチェックしようみたいな動きとかはある
  • こば: でもそれをReactは強制してるわけではないよ

アーキテクチャ（Fluxとかそういう意味で

  • 会長: ReactはViewの機能しかないので何かしら必要
  • 会長: ちなみにFluxはデザパタです
  • 会長: それをコードに落としたので一番流行ってるのがRedux
  • はち: Angular 2ではなく1のことを振り返る
  • はち: あの頃はなんでもAngular.moduleでなんとかするしかなかった
  • はち: しかし2はそうじゃないので、One Frameworkつっても自由度はある
  • はち: Rxjsと一緒に使うのが多いし、Observableな流れはキテると思う
  • はち: Angular 2とReduxもやってみたけど相性が・・
  • はち: reducerの中でDIできないならAngularでやる意味なくね
  • らこ: AngularはDIがあるので、そもそもReduxなんかいらない
  • こば: ReactとRxjsとかの組合せはあるけど、自由に使えばいいのでは

ビルドツール

  • 会長: WebpackとかBrowserifyとか
  • 会長: エコシステムがそうなってるので基本的にはコレ
  • らこ: 大差ないと思う
  • らこ: SystemJSはhttp/2がありふれる世界になってから

ルーティング

  • 会長: Angularの勝ちです、圧敗です
  • 会長: `react-router`がデファクトではある・・が・・・
  • 会長: ページ変わったらデータ取りたいAction発火したいのに、コンポーネントをマウントするしかできない
  • らこ: Angular 2では`resolve`というのがあって、それができる
  • 会長: `onenter`ってのがあるけど非推奨って書いてある・・
  • らこ: 最近のルーターの完成度は良くて言うことなし
  • こば: そもそも特定のライブラリに依存しなくていいのでは
  • こば: Director.jsとかそっち方面から出ないかなーとは思ってる

テンプレート

  • はち: どっちもキモいので好きな方を
  • らこ: Angular 2はぎりぎりHTMLなのでツールチェインもワンチャン
  • らこ: テンプレート内で`import`したりできる
  • らこ: JSXの`className`とか書いててキモくないんですか？
  • 会長: HTMLセントリックを語るならRiotくらいやってほしい
  • らこ: XSS対策のサニタイズとかしてくれる？
  • 会長: 場所によってはしてくれる（`a.href`とか`iframe.src`とかはしてない
  • らこ: Angularは厳しいくらいセキュアです
  • らこ: WebComponents対応は？
  • こば: CustomElementとか書けるし、この先に期待

いったんLT

詳細は下に。

スタイリング（CSS in JS的な話

  • 会長: WebpackでCSS in JSとかできる
  • 会長: CSS Modulesでやるとか
  • こば: React本体の機能としては最低限しかない
  • らこ: `@Components`の中に`styles`を書けば、ShadowDOMをエミュレートしたスコープができる
  • らこ: 設定ひとつでネイティブのShadowDOMが使える

APIコールまわり

  • らこ: Ajaxならangular-httpというのがある
  • 会長: それは別パッケージ？
  • らこ: リポジトリは別だが開発は一緒
  • こば: 本体がサポートする理由は？
  • らこ: フルスタックなフレームワークなので・・DIありきなので・・
  • らこ: FetchAPIがくれば切り替えできるようにはなってる
  • はち: 何使ってもいいけど、テストの時に上手いことしてくれたりする
  • 会長: ReduxのMiddlewareに戸惑うのはまだまだ慣れてない証拠です
  • 会長: 非同期処理やるにもReduxのMiddlewareはいっぱいある
  • 会長: 何がしたいかでMiddlewareをちゃんと選ぶ必要があって、それが辛いと思うなら何か勘違いしてる

ツールサポート（エディタ・IDEとか

  • はち: Angular 2は、WebStormのサポートが強いです
  • らこ: でもJSXでもサポートしてるよ
  • こば: Chrome Extensionとか、Storybookとか、このへんは豊富かも
  • らこ: Angular 2にもChrome Extensionはある

テスト

  • はち: E2Eテストどうしてますか
  • こば: ここで話すこと・・？
  • 会長: コンポーネントのテストするかしないか、書くなら何使う？
  • はち: Karmaかな？Angularチームが作ってるし
  • らこ: Angular 2にはテスト用のAPIがあって、Enzymeみたいな
  • こば: Reactのコンポーネントは関数なので、テストは簡単
  • らこ: 書くか書かないかでいくと、Angular 2はコンパイル可能かどうかテストしないと死ぬ
  • 会長: JSXならランタイムでエラーになるから利点っちゃあ利点
  • 会長: でもコンポーネントのテストはコストになるので書かないで良いと思ってる
  • らこ: コンポーネントの性質が違うから・・DIありきなので・・

パフォーマンス

  • らこ: 初期ロードはちょい遅いけど、その後は遅くない
  • はち: Angular 1の頃は、Angularのせいにできた
  • 会長: DOMの書き換えとか変更検知とかは？
  • らこ: Zoneというのがあって・・
  • らこ: `window`をモンキーパッチ
  • らこ: VDOMなくても速い
  • こば: チューニングする箇所が決まってるのでやりやすい
  • らこ: `PureComponent`ってなんなの
  • こば: VDOMの比較がコストになる時があるので、そういう時に
  • らこ: それはVDOMの敗北では？？？
  • こば: エスケープハッチとして・・
  • 会長: チューニングできる選択肢が増えたということで

サーバーサイドレンダリング

  • 会長: VDOMのツリーを作るところが非効率で、テンプレートエンジンとしては微妙
  • 会長: 1レンダリングに50msくらいかかってて、Nodeのイベントループが止まってる問題
  • こば: Facebookも使ってないあの機能は何なんだろう今後は・・
  • こば: Reconcilerアルゴリズムがくれば変わるかも？
  • 会長: SSRやってる企業はあるけど、全部を全部やってないとこも多い
  • らこ: Angularにはまだそういうライブラリないです
  • らこ: やったとしても遅くなるのは一緒な気がする
  • らこ: でもフルスタックなのでルーティング後の処理とかそのへんはいい感じになると思う

ライブラリ vs フレームワーク

  • はち: なんだこのイベントは！そもそも比較するもんじゃねーだろ！

まあ一言でいうとコレなんですけど、このように本人の申し立てがあったのでもう少し追記しますｗ


  • はち: そもそもReactとAngularは領域が違う（被ってるとこはあるけど）ので、比較するのがそもそもおかしい
  • はち: それよりか、双方踏まえた上でこれからのフロントエンドをどう設計していくかみたいな話の方が有益だったのでは


まぁネタをネタと見抜けない人には（ｒｙ

相手側のいいなと思う点

  • 会長: 学習曲線で中級者になるまでが長い、フレームワークだとそのへん易しそうではある
  • こば: 頭のいい人が作った最高のフレームワーク感
  • らこ: 流行ってるしメジャーバージョンなのうらやましい
  • らこ: 今月か来月にはリリースされると思うので・・
  • はち: Angular 3で（ｒｙ

相手側のイケてないと思う点

  • らこ: ユーザー層が偏ってない？初心者向けのがないような・・
  • 会長: Node学園祭にNodeSchoolというのがありまして・・
  • らこ: 逆にAngularは上級者がいない
  • らこ: 上級者はReactに流れていく
  • こば: ハンズオンとかMeetupとかありますので

会場質問

Angular 2のアプリをビルドしてみたら、ファイル600KBくらいあったけどアレはなんぞ・・・？
  • らこ: Inline SourceMapが重いので、Uglifyとかしてください
なぜReduxを使うの？他にないの？
  • 会長: 流行ってるから
  • こば: 必要だと思えば使えばいいと思う
  • こば: できれば何も使わずに使った上で、ライブラリに手を出して欲しい
  • 会長: バケツリレーの辛さを感じるべし
  • 会長: 結局ReactはViewしかやってくれなくて、（それだとアプリは作れなくて、）Stateを持つ場所が欲しいのでReduxとかを使う
Stateはサーバーに置けないもの・・？
  • 会長: GraphQLやRelayみたいな派閥もある
  • 会長: React自体はStatelessが哲学なので、そのほかはRedux等に委ねたいのかも
MVCの代わりとしてのFlux・・？
  • 会長: RailsのMVCとは違うからね
  • 会長: ・・・（時間切れ）


昔SEしてたときに会話録で8時間の議事録とってたの思い出した(˘ω˘ )

LT

各陣営から2人ずつ、5分間のLT。

Express+React+Redux+TypeScriptでSSRの話

なんとLunascapeの中の人！もうお一人はメイド喫茶の経営とかしてたらしいｗ

  • タイトルの技術を使ったスタック
    • それぞれ頭文字がNERRTBS -> Goemon
  • https://github.com/goemonjs/goemon
  • 0からReduxするの大変だと思うので、参考にしてもらえれば

SSR事始め by @teyosh

ng-japanユーザーグループからの刺客・・！

  • SPAってローディングとかSEOとかOGPとか困るよね
  • SSRすれば解決！
  • 各種いろいろあるよね
    • Riotなら、riot-ssr
    • Reactなら、`ReactDOMServer.renderToString()`
  • Angular 2だと、Angular Universalというのがある
  • `prebootComplete`なるすごいヤツがいる
  • ただしRC.6移行の最中なので、今見たことは忘れろ！！！

型とテストのある暮らし〜jasmineの香りを添えて〜 by @uryyyyyyy

型とテストのある暮らし〜jasmineの香りを添えて〜 - Qiita

  • Angular 2には期待してるけど安定するまでReact使います
  • TypeScriptいいよね
  • karmaでカバレッジ取ったりしてる
    • 前はjsdomとか使ってたけど

Angular2 と Swagger by @taxpon

Angular2 x Swagger by Takuro Wada