Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Isomorphic Web Apps with React

Avatar for Kristian Andersen Kristian Andersen
February 25, 2016
Programming
52
0

Isomorphic Web Apps with React

Avatar for Kristian Andersen

Kristian Andersen

February 25, 2016

More Decks by Kristian Andersen

See All by Kristian Andersen
Flexbox all the things
Avatar for Kristian Andersen ksmandersen
2
170
Static Websites with Gulp & AWS
Avatar for Kristian Andersen ksmandersen
0
140
Practical MVVM
Avatar for Kristian Andersen ksmandersen
0
230
Practical Swift
Avatar for Kristian Andersen ksmandersen
1
220
Introduction to CocoaLumberjack
Avatar for Kristian Andersen ksmandersen
0
120

Other Decks in Programming

See All in Programming
デプロイ直後のレイテンシスパイクを調べたら、 Railsの仕様にたどり着いた
Avatar for naohisa nhsykym
0
120
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
160
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
0
230
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
180
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
AI駆動開発にグラフDBを重ねてみた
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
790
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
150
GKE アップグレード前に知っておきたい Blue/Green と PDB の関係
Avatar for Sota Takaki stkk
0
160
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
4
660
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
140
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
240
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
580

Featured

See All Featured
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
690
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
450
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Claude Code のすすめ
Avatar for schroneko schroneko
67
230k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
230
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
306
120k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
It's Worth the Effort
Avatar for 3n 3n
188
29k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.6k

Transcript

  1. @CPHFRONT ⎯ @KSMANDERSEN

  2. ISOMORPHIC WEB APPS

  3. IN THE BEGINNING

  4. AND THUS JAVASCRIPT WAS BORN

  5. THE CRAZY ENGINEERS @ GOOGLE

  6. LET'S RUN JAVASCRIPT ON SERVERS

  7. ISOMORPHIC WEB APPS

  8. UNIVERSAL WEB APPS

  9. WHAT IT IS > An app that runs both on

    the server and the client > Rendering can be done both by the server and the browser > The apps share at least 90% of the same code
  10. None
  11. None

  12. CLIENT-SIDE RENDERING > Rendering done client-side takes load away from

    the server > Consecutive page navigation is very fast > Fancy interactions, animations and rainbows

  13. SERVER-SIDE RENDERING > More load on the server for rendering

    > Page content visible to bots, search engines and crazy people > The initial page load is faster (no app to boot client- side)

  14. ISOMORPHIC RENDERING > The best of both worlds > Fast

    initial page load (server-side rendering) > Consecutive page loads are very fast (client-side rendering) > Page content visible for bots, search engines and crazy people
  15. None

  16. WHY IS REACT GREAT FOR ISOMORPHIC WEB APPS?

  17. COMPONENTS COMPONENTS COMPONENTS

  18. THE VIRTUAL DOM

  19. await Router.dispatch({ path: req.path, query: req.query, context }, (state, component)

    => { data.body = ReactDOM.renderToString(component); });

  20. DE-COUPLED ROUTING

  21. const router = new Router(on => { on('*', async (state,

    next) => { const component = await next(); return component && <App context={state.context}>{component}</App>; }); on('/login', async () => <LoginPage />); });

  22. EXPRESS.JS

  23. const server = global.server = express(); server.get('*', async (req, res,

    next) => { res.status(200).send(`Hello World`); });

  24. GREAT HOW DO I GET STARTED?

  25. None

  26. HOW IT ACTUALLY WORKS

  27. None

  28. SERVER.JS const server = global.server = express(); server.get('*', async (req,

    res, next) => { try { const data = { title: '', description: '', css: [], body: '', entry: assets.main.js }; const context = { insertCss: styles => data.css.push(styles._getCss()), ... }; await Router.dispatch({ path: req.path, query: req.query, context }, (state, component) => { data.body = ReactDOM.renderToString(component); data.css = css.join(''); }); const html = ReactDOM.renderToStaticMarkup(<Html {...data} />); res.status(200).send(`<!doctype html>\n${html}`); } catch (err) { next(err); } }); server.listen(port, () => {});

  29. DEMO TIME

  30. @CPHFRONT ⎯ @KSMANDERSEN