【React勉強会】ランサーズ × Sansan × ビットジャーニー × キュア・アップ

  • 13
    いいね
  • 0
    コメント

Official

『 React.js/redux のコンポーネントの機能拡張、ストアの機能拡張でよくみかけるアプローチの紹介』 森 一彦 氏

『React/Redux@Eight』 青山 修平 氏

  • Slide
  • EightでのReact/Reduxの使われ方
  • スタイルガイド
    • コードスタイルの統一・共通コンポーネント化・ステートレスなコンポーネント
    • ESLint
    • react-styleguidist
    • enzyme
  • Normarize
    • Storeの中身の整理・コンポーネントの責務とStoreの責務
    • Redux
    • normalizr
  • モデル化
    • immutable-js
    • PropsTypes型の定義・モデルとしての処理

『新規Railsアプリに小さく導入するReact』 出口 貴也 氏

  • Slide
  • BitJourney内での事例
  • kibelaで使っている
  • ES2015, Babel, Webpack, npm...etc
  • 非SPA、普通のRailsアプリ
  • 最初から完璧を目指さない
  • 走りながら徐々に良くする
  • Reactを使い始めてみる
    • react-rails導入
    • ES2015使えない、ライブラリ管理もBundler
  • Modern JS on Rails
    • Rails Wayに乗ったまま、モダンJS構成に近づける
    • npmライブラリで管理
    • browerify-railsを導入
    • Babelifyの導入
    • https://js.coach/react
  • 足並みを揃える
    • ESLintを導入(eslint-plugin-react)
    • 定期的な自動npm,update (最近のreactは2,3週間に一度更新ある)
    • ci-npm-update・・・cron+circleCIで実行している
  • Fluxを使ってみる
    • バケツリレー疲れ
    • Stateは親が一元管理するのが原則
    • 親はStateとHandlerをPropsとして子に渡し、子はそれを使う
    • バケツリレーを軽減
    • react-micro-containerを導入
  • ビルド時間の短縮
    • ビルド時間が気になり始める(キャッシュ無しで10〜20秒)
    • webpack-railsに移行

『マルチプラットフォーム時代のReact / React Native / Universal JS』 鈴木 晋 氏

  • Slide
  • CureAppでReactNativeを使った知見について
  • ReactNative
    • Bridgeというしくみでネイティブコードを呼び出す仕組み
    • Learn once, Write anywhere
  • 既にReact製webアプリのコードをどこまでReactNativeで動くのか
    • コード共有は出来る
    • UniversalJSの理解が必要
  • UniversalJS
    • どこでも動くJS
    • 言語仕様とそうでないものを知る
    • 環境の違いを吸収すれば「実質Universal」を作れる。
    • 言語仕様だけでやれる事。(Reactの一部、 Redux...etc)
    • React, flux(redux)では、(UILayer,AppLayer,DomainLayer, InfraLayer)UILayer以外は共有可能
  • ドメインモデル(ドメイン駆動設計)で開発
  • 状態管理はredux
  • EventSourcing設計
  • ReactNativeのComponentはより抽象化されている
  • react-native-web
  • そもそもwebとモバイルアプリのUIは結構違う
    • Dryと密結合のバランスを保つ
    • UIを部分的に再利用したいなら密結合を防ぐ為に「コピー」した方が良い