noteのフロントエンドApp分割

by kozo yamagata

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

noteのフロントエンドApp分割  2021-06-21(mon) 山形孝造 

Slide 3

Slide 3 text

3 受託開発会社でエンジニア、フリーランスを経て   2020年3月にnote入社   ☕コーヒーを自宅で焙煎したり、農園に行ったりするくらいにスキ       フロントエンド・エンジニア   山形孝造  （やまがたこうぞう） note.com/zochang   twitter.com/kozo002   github.com/kozo002  

Slide 4

Slide 4 text

note   フロントエンド  Appの課題        4

Slide 5

Slide 5 text

note inc. 初期：Ruby on Rails ＋ AngularJS  5 Railsのassets上に実装されたSPA   なつかしのCoffeeScriptで書かれていた  

Slide 6

Slide 6 text

note inc. - SSRできない  - Headless browser で html生成してSEO対策  - 動作が遅い  - WebpackではなくSprockets  - CoffeeScriptで書かれている  - モダンなJSに追いつけない    　＝＞ Nuxt.jsへ乗り換え　2018年夏頃から     6 問題点 

Slide 7

Slide 7 text

note inc. - AngularJSはほんの一部残っている  - 全て移行するのは時間の問題  - Nuxt移行チームは解散  - 僕が入社したのはこの後    　＝＞ AngularJS時代の問題は全て解決     Nuxt移行ほぼ完了 🎉  7

Slide 8

Slide 8 text

note inc. 新たな課題発生 😇 

Slide 9

Slide 9 text

note inc. - AngularJS実装の機能＋新機能がNuxt上に存在   - コード量が凄まじいことに  - 😈ビルドが長い  - ローカルで開発着手できるまで時間がかかる  - 途中で落ちる  - デプロイが遅い  - 影響範囲が広い  - バタフライエフェクトのような障害が発生したことも  - パフォーマンスが低下  - SEOにも悪影響  - パフォーマンス対策は別軸で進めている  9 Nuxt実装による現在の課題 💀 

Slide 10

Slide 10 text

フロントエンド  App分割      10 2021年2月から開始 

Slide 11

Slide 11 text

note inc. - 新しい機能はNext.jsで実装中  - そのうち本体も分割していく  - Nuxtを今すぐ捨てるわけではない  - 🔥共通Componentsをどう解決するか  - 共通スタイル  - Router問題    => これらの問題を解決していく 💪  フロントエンドApp分割  11

Slide 12

Slide 12 text

note inc. - Web Componentsを検討した  - Stencil.jsを使ってみた  - バンドルサイズがでかい  - SSRできない  - Svelteを採用 🎉  - バンドルサイズが小さい  - 試しにButtonを実装してみた  - Stencil.js 36.8KB  - Svelte 5.5KB(React adapterを含む)  共通Componentsをどう解決するか  12

Slide 13

Slide 13 text

note inc. - Svelteを採用 🎉  - TypeScript が気持ちよく書ける  - Webpack config を書けば Nuxt.js/Next.js 上で動く  - SSR/Hydrationも簡単にできる    　＝＞ Github Packagesでライブラリ化     共通Componentsをどう解決するか  13

Slide 14

Slide 14 text

note inc. SvelteをReactで動かす例  14 svelteファイルがimportのために   Webpack loaderを追加する   基本的にはtargetに要素を与えて   newするだけで動く   ※実際にはもう少し対応が必要です   ※これはSSRに対応していません  

Slide 15

Slide 15 text

note inc. SvelteをVue(ver2系)で動かす例  15 svelteファイルがimportのために   Webpack loaderを追加する   基本的にはtargetに要素を与えて   newするだけで動く   ※実際にはもう少し対応が必要です   ※これはSSRに対応していません  

Slide 16

Slide 16 text

App分割をやって  見えてきたこと      16

Slide 17

Slide 17 text

note inc. - 新しいFramework/Libraryの知識  - 課題解決の引き出しになる  - ビルドシステムを読み解く力  - 問題解決能力に直結  - 実装力  - コードを書くスピード、習熟度  - フットワーク  - 分析力  - 成果物が求めていたものかを確かめられる  求められる技術と知識  17

Slide 18

Slide 18 text

note inc. - 個人的な想いから、アイデアを作る  - 歯磨きしてる時、頭を洗っている時、散歩している時  - 仲間に相談すると同意を得られる  - 単純にSlackでつぶやくだけ  - アイデア+αされてブラッシュアップされる  - 上長に相談すると時間が得られる  - 残業しなくて済む  - お墨付きで改善を進められる  - 小さく始めて少しずつ周りを巻き込む  - すばやく試そう、つねにリーダーシップを、おおきな視点で考えよう  まわりの協力が不可欠  18

Slide 19

Slide 19 text

19 noteの  フロントエンドエンジニアを  募集中です  採用情報  https://open.talentio.com/1/c/note/requisitions/det ail/11493

Slide 20

Slide 20 text

No content