Isomorphic web application
8 likes3,063 views
The document discusses isomorphic web applications, which allow running JavaScript code on both the server and client for improved performance, SEO, and user experience. It provides an overview of traditional multi-page and single-page applications, then introduces isomorphic applications as a hybrid approach. Popular companies using isomorphic applications are listed. The document demonstrates how to build an isomorphic app using React for rendering and Browserify for bundling modules to run on both server and client.
Ad
More Related Content
What's hot (20)
Viewers also liked (10)
Ad
Similar to Isomorphic web application (20)
Ad
More from Oliver N (8)
Recently uploaded (20)
Isomorphic web application
- 1. Isomorphic Web Application Demo using React
- 2. Isomorphic Web Application Vu Nguyen [email protected] LitiSolutions
- 3. Agenda 1.A brief history of web development -Server-rendered Multi-Page Application (MPA) -Client-rendered Single Page Application (SPA) 2.What is Isomorphic JavaScript? 3.Why on the Earth do we need it? 4.How can I build isomorphic app? 5.Stop talking. Show me the code!
- 4. TL;DR 1.Isomorphic JavaScript is the pattern of running JavaScript code on both server & client. 2.People are using it for production today. Ask Facebook, Yahoo, Asana, Airbnb, Rising Stack, … 3.This is not another talk about NodeJS!
- 5. once upon a time…
- 6. <?php echo“Hey, a web server is talking to you !!”; echo “How many {$item.name}do you want to buy?” ?> <form> <input name=“your-name” /> <input name=“quantity” /> </form>
- 7. then…
- 8. then…
- 9. then…
- 10. then…
- 11. then…
- 12. Today (Dec, 2014) * http://modulecounts.com
- 15. Traditional Multi-Page Application •Server-rendered content, Improving user experience by using AJAX, JQuery, … •Serving HTML on first-load is fast. •Crawlers, screen-readers are happy with HTML. But: •Maintain UI render and logic in both client and server •Duplicate application logic in (usually) two languages, two frameworks, two development stacks, two templates, …
- 18. Single Page Application •Client-rendered content •Separate application logic and data retrieval •More interactivity, optimistic UI, offline, mobile But: •Not SEO-friendly. •Still have to pre-render pages on server for crawlers. •Users have to wait a few seconds of blank page or loading spinner before seeing the content.
- 20. We have another option:
- 21. Isomorphic Web Application The best of both worlds We have another option:
- 23. Isomorphic Web Application Mix server-renderedand client-renderedcontent •On first page load, serve real server-rendered HTML. •Client-side JSapp bootstraps on top of server-rendered HTML rather than bootstrapping into an empty div. •From that point on, it's a client-side JS app.
- 24. Taking the best of both worlds •Performance •MPA -Serving fully-formed HTML is fast. •SPA -AJAX, transport data instead of HTML. •Connection quality •SPA can handle client state, request only needed data. •SEO & Accessibility •MPA –crawlers & screen readers needs HTML. Google will always prefer MPA. •UX •SPA -more interactivity, optimistic UI, offline, mobile. •Maintainability
- 25. So, do I have to rewrite my app in NodeJs? It’s terrible!
- 26. So, do I have to rewrite my app in NodeJs? It’s terrible! No, you don’t have to. Just use your preferred stack plus a few code for NodeJs.
- 27. Are there anyone building isomorphic app in production?
- 28. Are there anyone building isomorphic app in production? FacebookInstagramRisingStack AsanaMeteorYahoo! Mail(next version*) * http://www.slideshare.net/rmsguhan/react-meetup-mailonreact
- 31. But don’t use it.
- 32. Let’s build our own Isomorphic application
- 33. Let’s build our own isomorphic application •Understand Isomorphic JavaScript •Environment independent •Shimmed per environment •Building blocks
- 35. Environment-independent •Do not depend on environment-specific features Browser: window, DOM NodeJs: process, “fs”
- 36. Shimmed per environment •Provide shims for accessing environment-specific features so we can use the same API Browser:xhr.open(‘GET’, ‘http://example.com’) NodeJs:http.request({ host: ‘example.com’, path: ‘/’ }) Shim:superagent.get(‘http://example.com’)
- 37. Most of your favouriteJS libraries are Isomorphic
- 38. You can use these libraries on server or client jqueryunderscore backbonehandlebar reactmithril momentnumeral superagenti18next …
- 39. Building blocks
- 40. Building blocks: what do we need? View:Render HTML with or without browser’s DOM. Routing: Navigate through the application. Communicating:Send AJAX or HTTP requests. Stores:Store application states. States:Transfer application states from server to client. Bundling:Combine all our node modules to a single file that can run on browser.
- 41. Building blocks: which libraries can we use today? View:react, handlebar Routing: direction, flux-router-component Communicating:superagent, fluxible-plugin-fetchr Stores:flux, backbone model States:express-state or implement your own Bundling:browserify, web-pack
- 42. React •Virtual DOM Browser:React.render( <App />, document.body) NodeJs:React.renderToString( <App /> )
- 43. Browserify •require() node modules in browser. •Provide shims for node-specific features that can run on browser. •Bundle all modules to single script file.
- 44. Demo using React
- 45. Thanks for your listening !! Vu Nguyen [email protected] LitiSolutions