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
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.7k
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
240
cdk deploy JawsSonic #MARATHONしながらAWSリソースをデプロイしてみよう
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
130
スマート反転とウェブアクセシビリティ
Avatar for KAMIHARA Takumi camiha
0
210
速く作れる。その次は、速く確かめられる開発へ 〜AIネイティブ開発を支える、Shift Down〜 / Can build fast. Next, moving to development where we can verify fast.
Avatar for r-kagaya rkaga
4
2.5k
FreeBSDでZabbixを動かす.pdf
Avatar for kenkino kenkino
0
280
SREの越境 / SRE Collaboration
Avatar for y-ohgi y0hgi
0
130
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.5k
モデルのリファクタリングが難しいと思ったら、そもそも複雑だったのはビジネス仕様だった ? / is-the-business-domain-the-real-complexity
Avatar for hatsu hatsu38
0
260
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
140
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
0
280
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
370

Featured

See All Featured
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
700
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
450
Leo the Paperboy
Avatar for Maya Tellez mayatellez
10
2.3k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
11k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
25k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
870
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
410
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k

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