Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic Web Apps with React

Avatar for Kristian Andersen Kristian Andersen
February 25, 2016
Programming
51
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
210
Introduction to CocoaLumberjack
Avatar for Kristian Andersen ksmandersen
0
120

Other Decks in Programming

See All in Programming
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
4
330
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
510
Lean は証明の正しさを確認するためだけのツールって思ってませんか？
Avatar for 井上亜星 inoueasei
1
130
ドリフトを絶対に許さない（？）CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
Avatar for アキキー | Akihisa Ikeda akihisaikeda
1
150
20260722_microCMSで考える、AI時代のコンテンツ運用設計
Avatar for Yoshihisa Kaino yosh1
0
200
ルールを書いて終わらせないハーネスエンジニアリング
Avatar for Yuji Yamaguchi yug1224
4
1.8k
Claude Team Plan導入・ガイド
Avatar for tk3fftk tk3fftk
0
250
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
170
Android CLI
Avatar for Sungyong An fornewid
0
200
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.6k
PHPだって関数型したい 〜できること、できないこと〜 / fp-in-php
Avatar for jsoizo jsoizo
1
260
Go言語とトイモデルで学ぶTransformerの気持ち / fukuokago23-transformer
Avatar for monochromegane monochromegane
0
160

Featured

See All Featured
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
790
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
240
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
10k
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
160
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.5k
Digital Ethics as a Driver of Design Innovation
Avatar for Per Axbom axbom
PRO
1
350
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
230
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
340
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k

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