View
107
Download
1
Category
Preview:
DESCRIPTION
Introduction to Data presentation with DustJS This deck gives a breif introduction of DustJS and a simele way to use it
Citation preview
Data Presentation with Dust.js
Technologies backing
By : Ruhaim Izmeth
What is Dust?Presentation with Dust.js Technologies
backing
https://github.com/linkedin/dustjs/
Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without
sacrificing ease of use
Choosing Dust.js Presentation with Dust.js Technologies
backing
18 templating technologies
Google Closure Templates
mustache
handlebars
dust.js
4 finalists
WINNER
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
User Profiles
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
Company Profiles
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
Jobs
LinkedIn presentation layer in 2010Presentation with Dust.js Technologies
backing
grails jruby java
html
browser
server
LinkedIn presentation layer after Dust.js in 2011Presentation with Dust.js Technologies
backing
grails jruby java
html
jsonbrowser
server
cdn
<dust-template>.js
Simple Dust.js usagePresentation with Dust.js Technologies
backing
<html>
<script type="text/javascript" src="dust-full.min.js"></script><script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">var json = “<json structure>”;var _t = “<dust template>”;
dust.render(_t, json, function(error, data){$(“mydiv”).html(data)
});</script>
<div id=”mydiv”></div>
</html>
Simple Dust.js usagePresentation with Dust.js Technologies
backing
Some features of Dust templatesPresentation with Dust.js Technologies
backing
simple - {name}loops - {#names}...{/names}
Conditionalsif conditions - {@if cond="condition"}exists - {?names}...{/names}not exist - {^names}...{/names}Selection - @select key=”<>” + @eq,@ne,@lt,@gt,@lte,@gte
Math function - @math
Nested JSONscontexts and sections paths
And more at - https://github.com/linkedin/dustjs/wiki/Dust-Tutorial
Advantages Presentation with Dust.js Technologies
backing
● Compilable Templates - Compiled JavaScript provide speed of execution
● Caching - can be served via CDN unlike a JSP output / less bandwidth
● Decoupling - templates aren’t bound to any business logic
● Easy Testing - No need for UI developers to start a Tomcat server to render
a page served with JSON-- much faster cycle time, less issues
● i18n - Localization support
● Write once and can run the same on both the client (browser) and server
using JS engine such as V8/rhino
● Progressive rendering - Load only what’s needed.
DisadvantagesPresentation with Dust.js Technologies
backing
● JS disabled clients / Clients with poor JSON parsing support eg:- ie6,7,8
won't render templated properly
● SEO unfriendly
● Need to run templating logic for emails - but this does not run on browser
Solution : do the templating on server using additional technology stack
Node.js, V8 engine, Rhino
Next major client side improvement in 2013Presentation with Dust.js Technologies
backing
Introducing Fizzy - deferred rendering read more at http://engineering.linkedin.com/profile/engineering-new-linkedin-profile
Recommended