Data presentation with dust js technologies backing linkedin
-
Upload
ruhaim-izmeth -
Category
Internet
-
view
107 -
download
1
description
Transcript of Data presentation with dust js technologies backing linkedin
![Page 1: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/1.jpg)
Data Presentation with Dust.js
Technologies backing
By : Ruhaim Izmeth
![Page 2: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/2.jpg)
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
![Page 3: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/3.jpg)
Choosing Dust.js Presentation with Dust.js Technologies
backing
18 templating technologies
Google Closure Templates
mustache
handlebars
dust.js
4 finalists
WINNER
![Page 4: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/4.jpg)
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
User Profiles
![Page 5: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/5.jpg)
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
Company Profiles
![Page 6: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/6.jpg)
Most Viewed Page types on LinkedinPresentation with Dust.js Technologies
backing
Jobs
![Page 7: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/7.jpg)
LinkedIn presentation layer in 2010Presentation with Dust.js Technologies
backing
grails jruby java
html
browser
server
![Page 8: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/8.jpg)
LinkedIn presentation layer after Dust.js in 2011Presentation with Dust.js Technologies
backing
grails jruby java
html
jsonbrowser
server
cdn
<dust-template>.js
![Page 9: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/9.jpg)
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>
![Page 10: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/10.jpg)
Simple Dust.js usagePresentation with Dust.js Technologies
backing
![Page 11: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/11.jpg)
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
![Page 12: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/12.jpg)
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.
![Page 13: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/13.jpg)
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
![Page 14: Data presentation with dust js technologies backing linkedin](https://reader036.fdocuments.net/reader036/viewer/2022081404/5596d9251a28abb0098b4854/html5/thumbnails/14.jpg)
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