Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rediscovering Progressive HTML Rendering with Marko Templates and Node.js


Published on

Progressive HTML rendering is a technique to improve the performance of websites that involves sending an HTTP response for an HTML page in multiple flushes. This improves both the actual load time, as well as the perceived load time. In this talk we show how this can easily be applied using Marko Templates (an asynchronous, streaming templating engine) and Node.js. In addition, we illustrate an advanced technique of flushing HTML chunks out-of-order and using JavaScript on the client-side to move fragments into the proper order in the DOM.

Learn more about Marko on Github:

View demo:

Demo source:

Published in: Software
  • Yes you are right. There are many research paper writing services available now. But almost services are fake and illegal. Only a genuine service will treat their customer with quality research papers. ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here

Rediscovering Progressive HTML Rendering with Marko Templates and Node.js

  1. 1. Rediscovering Pro ressive HTML endefing Patrick Steele-Idem November 7, 2014
  2. 2. About Me - Senior Platform Architect at eBay - Node. js, JavaScript and open source enthusiast - Author of RaptorJS - Twitter: @pstee| eidem - Github: github. com/ patrick-stee| e-idem
  3. 3. What is Progressive HTML Rendering? Progressive HTML rendering involves flushing out web pages in multiple chunks.
  4. 4. W lly’: Using multiple content flushes improves both the real and the perceived performance.
  5. 5. Without Progressive Rendenng Ads Service Client Idle
  6. 6. With Progressive Rendering
  7. 7. Express. js views are not friendly to Pro ressive HTML endenng 69 Express renders the entire web page in memory before sending one single byte to the browser.
  8. 8. Tll<3ll““~ fl bl . > llllilll ill W h at you will l'l‘€‘€‘O: C « A streaming templating language « An asynchronous templating language « A templating language that supports flushing « Access to the output response stream
  9. 9. H l/ l l I l < fl = Marko is an extensible, streaming, asynchronous, high performance, HTML-based templating language that can be used in Node. js or in the browser. github. com/ raptorjs/ marko
  10. 10. Marko Syntax Hello ${data. name}! <ul if-"notEmpty(data. colors)"> <11 class= "color" fnn= ”color in data. colors“> ${color} </ li> </ ul> <div e1§e> No colors! </ div> <ui; :abs> <ui; tfl. b label-"Home"> Content for Home </ ui; tah> <ui; Inb label-“Profile"> Content for Profile </ ui-_tn. b> <ui: tab label= "Messages"> Content for Messages </ uj; tgh> </ ui; Inbs>
  11. 11. Don't wait for back-end data. Immediately render the template!
  12. 12. Push vs Pull - Push: Controller pushes data to template - Pull: Template requests data from controller
  13. 13. Push Data (the old way) - Make service calls - Wait for all service calls to complete - Build View mode! - Start rendering template
  14. 14. Sample Code: Push contro| |er. js var userservice = require('user—service'); module. exports = function(req, res) { var userid = req. query. userid; userservice. getUserInfo(userid, function(err, userInfo) { res. render( 'user‘, { userInfo: userInfo H; H;
  15. 15. Sample Code: Push temp| ate. htm| <! DOCTYPE htm1> <html lang= "en”> <head> <meta charset= "UTF—8" / > <title>User Info</ title> </ head> <body> Hello {{userInfo. firstName}} {{userInfo. lastName}}! </ body> </ html>
  16. 16. Pull Data (the new way) - Build view mode| * - Starting rendering template *View mode! will contain async data providers (as functions or promises)!
  17. 17. Sample Code: Pull contro| |er. js var userservice = require('user—service'); var template = require('marko'). load(‘template. marko'); module. exports = function(req, res) { var userid = req. query. userid; template. render(( userInfoProvider: function(args, callback) { userservice. getUserInfo(userid, callback); } }. res);
  18. 18. Sample Code: Pull temp| ate. marko <! DOCTYPE html> <html lang= ”en”> <head> <meta charset= "UTF—8" / > <title>User Info</ title> </ head> <body> <async—fragment data—provider= "data. userInfoProvider” var= ”userInfo": Hello ${userInfo. firstName} ${userInfo. lastName}! </ async—fragment> </ body> </ html>
  19. 19. We can do better. .. Out-of-Order Flushing - Flush each fragment as soon as it finishes - Use client-side Javascript to reorder async fragments in the DOM* *Ca veat: Requires Javascript-enabled browser
  20. 20. Enable Out-of-Order Flushing <body> <main> <async—fragment data—provider= ".. ." var= ".. ." client—reorder> </ async—fragment> </ main> <footer> <async—fragment data—provider= ".. ." var= ".. ." client—reorder> </ async—fragment> </ footer> <! —— Async fragments will be rendered here (hidden): ——> <async—fragments/ > </ body>
  21. 21. See it in action Click here for Live Demo
  22. 22. ll‘! 53!‘! ltl; l « RaptorJS: raptorjs. org <~ Marko: github. com/ raptorjs/ marko « Twitter: @psteeleidem « Github: github. com/ patrick-steele-idem P. S. Please star projects on Github!