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
220
Introduction to CocoaLumberjack
Avatar for Kristian Andersen ksmandersen
0
120

Other Decks in Programming

See All in Programming
KotlinConf Extended South Korea 2026 Keynote
Avatar for HyunWoo Lee l2hyunwoo
0
120
AIに既存システムを理解させる技術　～レガシーを見捨てないハーネスエンジニアリング入門～
Avatar for Ochtum ochtum
0
150
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
700
AWS Transform Custom による Spring Boot 2.xから4.xへのVerUp
Avatar for Satoshi Kaneyasu satoshi256kbyte
2
100
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
580
PostgreSQL 18で考えるUUID主キー
Avatar for Kazuhiro Seo kazuhiro1982
0
500
AI Engineeringは、AIプロダクトだけのものか？ 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
Avatar for r-kagaya rkaga
5
530
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
440
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
200
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
2
210
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
7.8k
Hono + Inertia + React で LP を構築した話
Avatar for Yuka Ooka oukayuka
2
170

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
500
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
900
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
280
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
310
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
220
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
450
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.5k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
670
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
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