Server-side rendering and isomorphic JavaScript by example
Original article: Drupal REST API and Isomorphic JavaScript
In the past few years the web community has been buzzing about client side applications that consume JSON. While this is an attractive prospect in some uses cases, the truth of the matter is it won't invalidate the page-to-page content consuming paradigm. You know - browsing websites. With multiple tools like eZ Platform having a REST API for years in the product, we're off to a new data centric world.
With evergreen browsers and polyfills we can adopt new technologies like web components faster than ever before. On the CSS side developers are used to using CSS pre-prosessors like SASS and LESS. You can send the SASS to the browser and have the it render that to CSS, but that will take time and make the application less responsive on the first pageload.
This is why it is common to render SASS and LESS on server-side to CSS - which is the native format browsers consume. A similar workflow can be applied to custom tags and other polyfills. So essentially you will prerender the generated polyfill HTML/CSS/JavaScript on the server and send them over in a browser native format. This improves the user experience at the most crucial time - the first time a user visits your website.
You can also have a hybrid model (isomorphic applications, which run the same code on the server and client) where you render the first pageload HTML on server-side and then the JavaScript client takes over and no subsequent requests will be just JSON rendered by the JavaScript framework of your choice. The hybrid model will give you the best experience for your users and if done right, won't add much development overhead.
In this session you will gain understanding of how these work on a practical level. With the current JavaScript development pace we will focus on generic concepts, not specific libraries and frameworks.
That said the session will use a JavaScript framework (and pattern) called Riot.js and RiotControl for practical examples. It works very much like Facebook's React.js+Flux combination, but it is more simple to use - making it perfect for examples: How to build a Web Component with Riot.js
Learn More: