SlideShare a Scribd company logo
Data Presentation with Dust.js 
Technologies 
backing 
By : Ruhaim Izmeth
Presentation with Dust.js Technologies 
What is Dust? 
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
Presentation with Dust.js Technologies 
Choosing Dust.js 
backing 
18 templating technologies 
4 finalists 
Google 
Closure 
Templates 
mustache 
handlebars 
dust.js 
WINNER
Presentation with Dust.js Technologies 
Most Viewed Page types on Linkedin 
backing 
User Profiles
Presentation with Dust.js Technologies 
Most Viewed Page types on Linkedin 
backing 
Company Profiles
Presentation with Dust.js Technologies 
Most Viewed Page types on Linkedin 
backing 
Jobs
Presentation with Dust.js Technologies 
LinkedIn presentation layer in 2010 
backing 
html 
browser 
server 
grails jruby java
Presentation with Dust.js Technologies 
LinkedIn presentation layer after Dust.js in 2011 
backing 
html 
json 
browser 
server 
<dust-template>.js 
grails jruby java 
cdn
Presentation with Dust.js Technologies 
Simple Dust.js usage 
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>
Presentation with Dust.js Technologies 
Simple Dust.js usage 
backing
Presentation with Dust.js Technologies 
Some features of Dust templates 
backing 
simple - {name} 
loops - {#names}...{/names} 
Conditionals 
if conditions - {@if cond="condition"} 
exists - {?names}...{/names} 
not exist - {^names}...{/names} 
Selection - @select key=”<>” + @eq,@ne,@lt,@gt,@lte,@gte 
Math function - @math 
Nested JSONs 
contexts and sections 
paths 
And more at - https://github.com/linkedin/dustjs/wiki/Dust-Tutorial
Presentation with Dust.js Technologies 
Advantages 
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.
Presentation with Dust.js Technologies 
Disadvantages 
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
Presentation with Dust.js Technologies 
Next major client side improvement in 2013 
backing 
Introducing Fizzy - deferred rendering 
read more at http://engineering.linkedin.com/profile/engineering-new-linkedin-profile

More Related Content

What's hot

BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
edm00se
 
OSGi and Spring Data for simple (Web) Application Development
OSGi and Spring Data  for simple (Web) Application DevelopmentOSGi and Spring Data  for simple (Web) Application Development
OSGi and Spring Data for simple (Web) Application Development
Christian Baranowski
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
Haim Michael
 
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
Katy Slemon
 
CQ5 and Sling overview
CQ5 and Sling overviewCQ5 and Sling overview
CQ5 and Sling overview
Bertrand Delacretaz
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
Iran Reyes Fleitas
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
Go4Guru
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
Imam Raza
 
Web Components
Web ComponentsWeb Components
Web Components
Nikolaus Graf
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
Fulvio Corno
 
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
Gene Babon
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
mfrancis
 
Leaving jsps in the dust
Leaving jsps in the dustLeaving jsps in the dust
Leaving jsps in the dust
Veena Basavaraj
 
Introduction to java_script
Introduction to java_scriptIntroduction to java_script
Introduction to java_script
Basavaraj Hampali
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
Oliver N
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
Chris Love
 
How to build a web application with Polymer
How to build a web application with PolymerHow to build a web application with Polymer
How to build a web application with Polymer
Sami Suo-Heikki
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
Katy Slemon
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
tdc-globalcode
 

What's hot (20)

BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
OSGi and Spring Data for simple (Web) Application Development
OSGi and Spring Data  for simple (Web) Application DevelopmentOSGi and Spring Data  for simple (Web) Application Development
OSGi and Spring Data for simple (Web) Application Development
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
 
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
How to Build Real-time Chat App with Express, ReactJS, and Socket.IO?
 
CQ5 and Sling overview
CQ5 and Sling overviewCQ5 and Sling overview
CQ5 and Sling overview
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
 
Polymer and web component
Polymer and web componentPolymer and web component
Polymer and web component
 
Web Components
Web ComponentsWeb Components
Web Components
 
Introduction to Javascript programming
Introduction to Javascript programmingIntroduction to Javascript programming
Introduction to Javascript programming
 
JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1JavaScript Missing Manual, Ch. 1
JavaScript Missing Manual, Ch. 1
 
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff NorrisRESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
RESTful OSGi Web Applications Tutorial - Khawaja S Shams & Jeff Norris
 
Leaving jsps in the dust
Leaving jsps in the dustLeaving jsps in the dust
Leaving jsps in the dust
 
Introduction to java_script
Introduction to java_scriptIntroduction to java_script
Introduction to java_script
 
Isomorphic web application
Isomorphic web applicationIsomorphic web application
Isomorphic web application
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
How to build a web application with Polymer
How to build a web application with PolymerHow to build a web application with Polymer
How to build a web application with Polymer
 
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with exampleLaravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
 
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
 

Similar to Data presentation with dust js technologies backing linkedin

Dust.js
Dust.jsDust.js
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
Michael Ahearn
 
Node.js
Node.jsNode.js
Node.js
Neethu Dasan
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
Suresh Patidar
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
aleemb
 
Vuejs and Web components - current state
Vuejs and Web components - current stateVuejs and Web components - current state
Vuejs and Web components - current state
Mikhail Kuznetcov
 
How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscape
Radosław Scheibinger
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web App
Edureka!
 
Normalizing x pages web development
Normalizing x pages web development Normalizing x pages web development
Normalizing x pages web development
Shean McManus
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web App
Edureka!
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
Oleksii Prohonnyi
 
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
David Amend
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JSFestUA
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
Edureka!
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
Edureka!
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
Vlad Fedosov
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
yuvaraj72
 

Similar to Data presentation with dust js technologies backing linkedin (20)

Dust.js
Dust.jsDust.js
Dust.js
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
Node.js
Node.jsNode.js
Node.js
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
Vuejs and Web components - current state
Vuejs and Web components - current stateVuejs and Web components - current state
Vuejs and Web components - current state
 
How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscape
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web App
 
Normalizing x pages web development
Normalizing x pages web development Normalizing x pages web development
Normalizing x pages web development
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web App
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
JavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and LibrariesJavaScript Presentation Frameworks and Libraries
JavaScript Presentation Frameworks and Libraries
 
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...Client vs Server Templating: Speed up initial load for SPA with Angular as an...
Client vs Server Templating: Speed up initial load for SPA with Angular as an...
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
Web matrix part 2
Web matrix part 2Web matrix part 2
Web matrix part 2
 

Recently uploaded

一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
taqyea
 
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
taqyea
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
taqyea
 
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
taqyea
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
Bestdesign2hub
 
cyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.pptcyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.ppt
LiamOConnor52
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
taqyea
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
byubyu7
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
thomaskurtha9
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
taqyea
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
sivaraman163206
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
ubufe
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
ffg01100
 
Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
Serva AppLabs
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
taqyea
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
taqyea
 
Founders Of Digital World Social Media..
Founders Of Digital World Social Media..Founders Of Digital World Social Media..
Founders Of Digital World Social Media..
jom pom
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
NandakumarP24
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99
 

Recently uploaded (20)

一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
一比一原版(kcl毕业证书)英国伦敦国王学院毕业证如何办理
 
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)英国布鲁内尔大学毕业证如何办理
 
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
一比一原版(greenwich毕业证书)英国格林威治大学毕业证如何办理
 
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
一比一原版(ubc毕业证书)英属哥伦比亚大学毕业证如何办理
 
PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024PSD to Wordpress Service Providers in 2024
PSD to Wordpress Service Providers in 2024
 
cyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.pptcyber-security-training-presentation-q320.ppt
cyber-security-training-presentation-q320.ppt
 
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
一比一原版(london毕业证书)英国伦敦大学毕业证如何办理
 
Corporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptxCorporate Minimal Newspaper Headline Style Newsletter.pptx
Corporate Minimal Newspaper Headline Style Newsletter.pptx
 
Tarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur On Data Breaches and Privacy Fears
Tarun Gaur On Data Breaches and Privacy Fears
 
Book dating , international dating phgra
Book dating , international dating phgraBook dating , international dating phgra
Book dating , international dating phgra
 
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
一比一原版美国休斯敦大学毕业证(uh毕业证书)如何办理
 
Steps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a companySteps involved in the implementation of EDI in a company
Steps involved in the implementation of EDI in a company
 
Carrington degree offer diploma Transcript
Carrington degree offer diploma TranscriptCarrington degree offer diploma Transcript
Carrington degree offer diploma Transcript
 
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
202254.com全网最高清影视香蕉影视,热门电影推荐,热门电视剧在线观看,免费电影,电影在线,在线观看。球华人在线電視劇,免费点播,免费提供最新高清的...
 
Common Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdfCommon Challenges in UI UX Design and How Services Can Help.pdf
Common Challenges in UI UX Design and How Services Can Help.pdf
 
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
一比一原版(heriotwatt毕业证书)英国赫瑞瓦特大学毕业证如何办理
 
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
一比一原版(city毕业证书)英国剑桥大学毕业证如何办理
 
Founders Of Digital World Social Media..
Founders Of Digital World Social Media..Founders Of Digital World Social Media..
Founders Of Digital World Social Media..
 
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptxSlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
SlideEgg_200767-ICC Mens T20 World Cup 2024.pptx
 
Megalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor TerpercayaMegalive99 Situs Betting Online Gacor Terpercaya
Megalive99 Situs Betting Online Gacor Terpercaya
 

Data presentation with dust js technologies backing linkedin

  • 1. Data Presentation with Dust.js Technologies backing By : Ruhaim Izmeth
  • 2. Presentation with Dust.js Technologies What is Dust? 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
  • 3. Presentation with Dust.js Technologies Choosing Dust.js backing 18 templating technologies 4 finalists Google Closure Templates mustache handlebars dust.js WINNER
  • 4. Presentation with Dust.js Technologies Most Viewed Page types on Linkedin backing User Profiles
  • 5. Presentation with Dust.js Technologies Most Viewed Page types on Linkedin backing Company Profiles
  • 6. Presentation with Dust.js Technologies Most Viewed Page types on Linkedin backing Jobs
  • 7. Presentation with Dust.js Technologies LinkedIn presentation layer in 2010 backing html browser server grails jruby java
  • 8. Presentation with Dust.js Technologies LinkedIn presentation layer after Dust.js in 2011 backing html json browser server <dust-template>.js grails jruby java cdn
  • 9. Presentation with Dust.js Technologies Simple Dust.js usage 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>
  • 10. Presentation with Dust.js Technologies Simple Dust.js usage backing
  • 11. Presentation with Dust.js Technologies Some features of Dust templates backing simple - {name} loops - {#names}...{/names} Conditionals if conditions - {@if cond="condition"} exists - {?names}...{/names} not exist - {^names}...{/names} Selection - @select key=”<>” + @eq,@ne,@lt,@gt,@lte,@gte Math function - @math Nested JSONs contexts and sections paths And more at - https://github.com/linkedin/dustjs/wiki/Dust-Tutorial
  • 12. Presentation with Dust.js Technologies Advantages 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.
  • 13. Presentation with Dust.js Technologies Disadvantages 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
  • 14. Presentation with Dust.js Technologies Next major client side improvement in 2013 backing Introducing Fizzy - deferred rendering read more at http://engineering.linkedin.com/profile/engineering-new-linkedin-profile