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
VibeCodingからAgenticWorkflowへ
Avatar for starfish719 starfish719
0
770
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
Avatar for Tatsuki tatsuki12
4
990
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
350
komatsuna「分散システムにおけるバグ分析手法」
Avatar for こまつな komatsunaqa
0
270
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
Avatar for Junya Okabe junyaokabe
0
120
承認済みなのに差戻しできてしまうバグ、型で潰せます
Avatar for SHINCHI Takahiro shinchit
0
100
Flow は今どうなっているか
Avatar for mizdra mizdra
PRO
0
680
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
190
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
Avatar for freee freee
PRO
0
590
Go を使い始めて 2 ヶ月の学び / My first two months with Go
Avatar for Daisuke Garaike contour_gara
0
370
プロポーザルを書いてもらう
Avatar for pvcresin pvcresin
0
570
引き算の組織 ― アウトカムとAIに全振りするために辞めたこと ― / Organization by Subtraction
Avatar for ヤマモトヒロキ hirokiyamamoto14
PRO
0
280

Featured

See All Featured
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
440
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
580
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
35
2.8k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
250
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Docker and Python
Avatar for Tania Allard trallard
47
4.1k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
810
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k

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