Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
SSR以後の世界へ / techcamp05
yasaichi
November 20, 2018
Programming
3
1.3k
SSR以後の世界へ / techcamp05
第5回開発合宿(2018/11/20)
yasaichi
November 20, 2018
Tweet
Share
More Decks by yasaichi
See All by yasaichi
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
46
17k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
36
16k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
260
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
131
75k
サービス開発の現場からOSSを生み出す思考技術 / genbaweb04
yasaichi
3
770
Capybaraで変更に強いE2Eテストを書く / TokyuRubyKaigi12
yasaichi
5
1.3k
今更始めるGo言語 / techcamp04
yasaichi
0
2.7k
とある企業のモバイル対応 / Rails Developers Meetup 2017
yasaichi
1
3.2k
テスト駆動開発と私 / TechBookWalk TDD
yasaichi
3
1.6k
Other Decks in Programming
See All in Programming
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
150
ストア評価「2.4」だったCOCOARアプリを1年で「4.4」になんとかした方法@Cloud CIRCUS Meetup #2
1901drama
0
180
僕が便利だと感じる Snow Monkey の特徴/20220723_Gifu_WordPress_Meetup
oleindesign
0
110
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
300
アジャイルで不確実性に向き合うための開発タスクの切り方
tanden
4
1.1k
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
2
490
There's an API for that!
mariatta
PRO
0
110
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
1
400
一口目から美味しいReactのスルメ本🦑
taro28
2
660
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
How to Test Your Compose UI (Droidcon Berlin 2022)
stewemetal
1
130
Computer Vision Seminar 1/コンピュータビジョンセミナーvol.1 OpenCV活用
fixstars
0
170
Featured
See All Featured
Fireside Chat
paigeccino
13
1.4k
In The Pink: A Labor of Love
frogandcode
131
21k
Agile that works and the tools we love
rasmusluckow
319
19k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Adopting Sorbet at Scale
ufuk
63
7.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Code Review Best Practice
trishagee
44
9.7k
It's Worth the Effort
3n
172
26k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Become a Pro
speakerdeck
PRO
3
910
Transcript
SSR以後の世界へ Yuichi Goto (@_yasaichi) November 20, 2018 @ 第5回開発合宿成果発表
Agenda 背景と目的 技術概要 やったこと 所感 !2
ピクスタでのRe-architectingの流れ 1. SSRのための基盤を導入する(今ここ) 2. RailsのViewをReactで書き直す 3. BFFを使って2とRailsを完全に切り離す 4. 愛すべき未来へ(cf. EXILE)
!3 開発部中長期計画における "SoEとSoRの分離"のこと
なぜSSR基盤を導入するのか • 一般的によく言われる目的: • SPAにおけるSEO対策のため • First Meaningful Paintの高速化のため •
ピクスタでの目的: 既存のSEO面での要求を満たし ながら、エンジニアとデザイナーの職務の境界線を 変更するため !4
職務の境界線の変更 現在 デザイン マークアップ JavaScript バックエンド !5 目指したい状態 デザイン マークアップ
JavaScript バックエンド ! デザイナー ! エンジニア ! デザイナー ! エンジニア こうすることでコンポーネントという 再利用可能な単位を導入できる
今回の目的: SSR以後の世界へ • 合宿で明らかにしたかったこと: 2の詳細 1. Reactで書き直すのはどの程度の労力がかかる? 2. コンポーネントの再利用はどれくらいできる? •
最終的に明らかにしたいこと: 3の詳細 • 2ができていればスムーズに移行できる? !6
Agenda 背景と目的 技術概要 やったこと 所感 !7
SSR(Server Side Rendering)とは • 狭義の意味では、ブラウザ向けのコードをサーバー 側で実行し、HTMLを生成して返す手法のこと • 実現のための手段(Reactの場合) • Next.js:
ZEIT製のWebアプリケーションフレーム ワークで、ReactのSSRを始め多くの機能を持つ • Hypernova: Airbnb製のSSR用のフレームワーク !8
アーキテクチャの違い Next.js !9 Hypernova Browser Next.js API Server (e.g. Rails)
Data Sever-rendered HTML + assets Request data (if needed) Request page Browser Rails Hypernova Sever-rendered HTML HTML + assets Request SSR Request page
ピクスタではどちらを採用したか? • 次の理由から、Hypernovaを採用した • 直近は職務の境界線の変更にのみ集中したいため (≒ 同時に複数のことをやろうとすると失敗する) • Hypernova展開後の状態なら、Next.js等のBFF への移行もおそらく容易だろうと予想されるため
!10
Agenda 背景と目的 技術概要 やったこと 所感 !11
今回の題材 • https://www.bob-kamakura.com • お世話になっている美容師さんのWebサイトで、 yasaichiが開発・運用しているので遊びたい放題 • バックエンド: Ruby on
Rails • フロントエンド: CoffeeScript(!), Browserify(!) !12
合宿前にやったこと 1. 技術スタックをモダンな?感じにする • CoffeeScript → TypeScript • Browserify →
webpack 2. Hypernovaを導入する 3. 既存のSlimで書かれたViewを雑にReact側に移す !13
合宿中にやったこと 1. styled-components の導入 2. 雑に移したページの中から共通のコンポーネントを 切り出し、Atomic Designにしたがって整理する • 対応済み:
<Map> • 対応中: <ContactUs>, <LazyLoadImg> !14
ここで実際のサイト画面と対応する コードを見せる !15
参考: ディレクトリ構成(一部抜粋) !16 frontend/src !"" components # !"" atoms #
# $"" FontAwesomeIcon.tsx # !"" molecules # # $"" Map.tsx # !"" organisms # # $"" ContactUs.tsx # $"" templates # $"" DefaultLayout.tsx !"" images !"" lib # $"" hypernova-react.ts !"" pages # !"" access.tsx # !"" contact-us # # $"" index.tsx # !"" index.tsx # $"" privacy_policy.tsx $"" typings $"" images.d.ts このへんはAtomic Designの 分け方を参考にしている このへんはNext.jsの 構成を参考にしている
Agenda 背景と目的 技術概要 やったこと 所感 !17
当初の疑問への回答 1. Reactで書き直すのはどの程度の労力がかかる? • 既存のViewを雑にReact側に移すのは楽 • 共通部分を抽出・整理するのが大変(特にCSS) 2. コンポーネントの再利用はどれくらいできる? •
少なくとも今回の題材ではあまりできなかった !18
示唆1 • 所感1から • 職務の境界線を変更すること"だけ"ならそこまで 難しくなさそう(∵ 移行作業は並列で実施できる) • 外部CSSやコンポーネントを抽出・整理する作業は スキルが必要なので進め方に工夫が必要そう
!19
示唆2 • 所感2から • 物にもよるが、「共通コンポーネントを切り貼りして ページを作る」世界の実現はそもそも難しそう • とはいえ、デザイナーとの意思疎通の手段としての デザインシステム構築のために、コンポーネントの 共通化を進めるメリットはありそう
!20
お疲れさまでした! 成果物: https://www.bob-kamakura.com !21