LoginSignup
12
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-09-05

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を部分的に再利用したいなら密結合を防ぐ為に「コピー」した方が良い
12
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
13