Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Frontend Architecture of teamLab

simochee
November 16, 2019

Frontend Architecture of teamLab

チームラボはアートだけでなくWebやアプリの受託開発も行っています。

そんなチームラボのフロントエンドチームで使用しているアーキテクチャを実例を交えてご紹介します。

Frontend Conference Fukuoka 2019 にて登壇しました。
https://frontend-conf.fukuoka.jp/sessions#a-3

simochee

November 16, 2019
Tweet

Other Decks in Programming

Transcript

  1. 自己紹介 • 1997年6月28日生まれ(22歳) • 山口県下関市出身 • 宇部工業高等専門学校 制御情報工学科卒 • 2018年4月

    チームラボに新卒入社 • 好きなもの:鉄道、東京03 • 好きなエディタ:VS Code ◦ テーマ:Netflix Red theme • 気になるもの: Parcel v2 / TypeScript 3.7 田村 亮弥 @lollipop_onl チームラボ株式会社 フロントエンドチーム 4
  2. チームラボの各チーム 6 • Webアプリケーションチーム • フロントエンドチーム • スマホアプリチーム • インタラクティブチーム

    • 機械学習チーム • サーチ・レコメチーム • ハードウェアチーム など • UI / UX デザイナー • ビジュアルデザイナー など 650人 • カタリスト
  3. チームラボの受託開発は、初期の提案フェーズから行う。 エンジニアはすべてのフェーズに参加する。 チームラボの受託開発 7 提案 見積もり、実現の可否 1 要件定義 仕様の詰め、外部ベンダーとの連携 2

    設計 / 実装 考える、作る、レビューする 3 テスト 仕様通りに動作するか確認 4 リリース リリースしてからがスタート 5 保守・追加開発 不具合、障害対応・追加開発 6
  4. フロントエンドチーム • メンバー:12人(平均: 27歳) • 受託開発 / アート案件のJavaScript実装 ◦ Node.jsでのツール開発やサーバー開発を行うこともある

    • 仕様やデザイン、API設計をそれぞれの担当者と検討 ◦ プロジェクトの中心で各方面と連携 • チーム内の活動 ◦ 週定例・タスクチェック ◦ ナレッジ共有会 … 案件で利用した技術や体験の共有 ◦ 勉強会 … 担当者持ち回りで隔週で開催。最近の話題はReasonML、Svelte、DIなど 9
  5. 21 • The Progressive Vue.js Framework • サーバーサイドレンダリング(SSR) • ルーティング

    ◦ ディレクトリ構成からのルーティングの自動生成 • Webpack開発環境 • 静的サイトジェネレータ ◦ SEOを意識したSPAアプリのビルド • TypeScriptの公式サポート(Nuxt TypeScript) Nuxt.js - The Vue.js Framework
  6. 22 • 静的型付け、型推論 ◦ 型による動作保証 • 11/5に TypeScript 3.7.2 がリリースされた

    ◦ Optional Chaining ▪ ? をつけると値がなくても {} と解釈される ◦ Nullish Coalescing ▪ Null/Undefined のみ false となるOR比較 TypeScript - JavaScript that scales.
  7. 苦労①:ライブラリの使用 • ライブラリの読み込みがうまく行かない ◦ window or document undefined ◦ Tree

    Shakingはしたい ➢ プラグインとして読み込み 28 window or document undefined - NuxtJS
  8. フロントエンドとWebpack 39 • フロントエンドチームでの開発環境の主力は Webpack ◦ 少し前の案件はGulp + Webpackの構成が多い ◦

    小規模な案件ではParcelが使わることもある • マークアップをすることも多い • PugのためだけにGulpは使用したくない ➢ Webpack でマークアップしたい
  9. Pugファイル更新時のHMR • Pugファイル更新時にリロードされない ◦ webpack-dev-server の Hot Reload の設定と競合 ➢

    browser-sync でHMRさせる ◦ webpackだけでpugをビルドする環境を作る - Qiita 43 webpackだけでpugをビルドする環境を作る - Qiita