「Forefront JavaScript ! 急成長中のサービスの技術達!」に参加してきました

CTO対談

  • 是澤さん(メルカリ)
  • 鈴木さん(スペースマーケット)
  • 辻さん(エアークローゼット)

エアークローゼット

  • 全部jsで統一
  • バックフロント区別せずみんな全部

airClosetのアーキテクチャと今後の展望

かつて

  • rails
    • レガシーなコード
    • セキュリティ脆弱性
  • モダンな設計へ
    • Reactへ
  • 更に汎用的に

ReactでSSR

ReactのCSS

  • CSS Modules
  • styled-components

成功した話

  • 頻繁にnpm-check-updates
    • 一気にアップデートすると死ぬ
    • こまめに上げておくと良い
  • Next.jsいい

失敗した話

  • RefluxJSを入れてしまった
    • Redux - Reducerって感じ
    • メンテされなくなった
  • CSS Spriteを使ったこと
    • 画像をなるべく一枚にする
    • HTTP2だと早くならない
      • 1枚あたりのサイズ小さくした方がいい

SSR用に作ったFW

スペースマーケットを支える技術

スペースマーケットの技術スタック

  • Rails
  • React
  • Swift
  • Kotlin
  • ReactNative
    • ホスト向けだけ
  • GraphQL

ローンチ初期

React × Rails時代

FWを統一

GraphQL

  • graphdoc
    • コマンド一発でAPIドキュメント
  • GraphiQL
    • クエリ実行環境
  • Apollo
    • GraphQLにクライアント

アーキテクチャと反省と改善

技術を統一して学習コスト下げる

  • 全部JSで
  • プラットフォームの違いがあっても共通の処理は共有
  • Lerna
    • monorepo実現のためのツール
    • webとnativeで処理を共通化
    • Storeがとてもきれいになる
  • Flow
    • nullチェックしてないとことか警告してくれる
    • model作ると相性良い

Flow

  • config分かりづらい
    • 慣れで
  • エラー分かりづらい
    • 慣れで
  • VUPですぐエラー出る

Formik

  • formのライブラリ
  • webとnativeでバリデーションを共有できる

アプリエンジニアが感じたReactNative導入の良し悪し

従来

  • iosandroid別のコードベースで作ってると
  • バグ改修もアップデートも2倍

RNを検討

  • 不安なことが多い
  • プロトタイプの作成にはよさそう

fastifyはいいぞ

fastify

  • web framework
  • オーバーヘッドが小さい
  • expressっぽい
  • validationをjsで書ける
    • swaggerっぽいことできる
  • ペイロードが小さいほど速い

これからのReactのスタイリングにはStyled Componentsが最高かもしれない

styled-components

storybook

Nuxt.jsでいい感じにGraphQLを扱いたい話

なぜGraphQL

  • サーバ側のステークホルダー多かった
  • GraphQLなら1つのエンドポイントでやりとりできる

Nuxt.jsでどう使うか

メルカリNOWを2ヶ月半でリリースした話し

webpack4について

v4リリース

  • BigChangeが大量
  • 設定ファイルなくても動くように

jsのnumber

ES2018とかのnumber

  • 整数
  • 少数
  • 8進数
    • 0oからはじめると8進数
  • 2進数
    • obからはじまると2進数
  • BigInt
    • まだStage3
    • 64bit以上
    • BigInt以外との演算できない
  • Separator
    • まだStage3
    • 数字の間に_書けるようになる