SlideShare a Scribd company logo
1 of 82
Download to read offline
{ dust.js } at LinkedIn



     Yevgeniy Brikman
2011: LinkedIn adopted dust.js, a
 client side templating language
This is the story of client side
templating at massive scale
Dust in the wild




                   Profile 2.0
Dust in the wild




             People You May Know
Dust in the wild




                   Influencers
About me




                Presentation Infrastructure Team
   (also Hackdays, [in]cubator, Engineering Blog, Open Source)
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
LinkedIn in 2003




 A single, monolithic webapp: servlets/JSPs
LinkedIn in 2010




 New web frameworks to boost productivity:
  Grails/GSPs, JRuby/ERBs, plus others
Fragmentation

● Each tech stack used a different templating
  technology (JSP, GSP, ERB, etc)

● No easy way to share UI code for common
  components (e.g. profile, the feed)

● The "global" nav had to be rewritten in
  multiple languages/technologies. Updating it
  was very time consuming.
We needed to unify the view layer
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
We began looking at client side
    templating solutions
Traditional server side rendering




    All page content is rendered as HTML and sent to the browser
Client side rendering (simplified)




   Server sends JSON. The template is fetched from the CDN and
                      rendered in browser.
Client side rendering (full)




   Server sends JSON embedded in an HTML skeleton. The skeleton
      has JavaScript code that fetches and renders the template.
Client side MVC




   Client side MVC makes client side rendering even more important.
Client side rendering (with MVC)




   Once a page has loaded, the client side MVC takes over, fetching
   JSON from the server and rendering it with client side templates
Client side rendering benefits

● DRY: works with any server side stack plus
  client side

● Performance: bandwidth, latency, caching

● Productivity: fast iteration, mock JSON

● Rich apps: client side MVC
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
Decisions, decisions




   We evaluated 26 different options. They tended to fall into one of
        two groups: Embedded JavaScript and Logic Less.
Embedded JavaScript Templates


 <ul>
   <% for(var i = 0; i < supplies.length; i ++) { %>
      <li><%= supplies[i] %> </li>
   <% } %>
 </ul>




            Normal JavaScript code directly in the template.
Embedded JavaScript Templates
●   underscore.js
●   Jade
●   haml-js
●   jQote2
●   doT
●   Stencil
●   Parrot
●   Eco
●   EJS
●   jQuery templates
●   node-asyncEJS
Logic-less Templates



 <p>
   Hello {name}! You have {count} new messages.
 </p>




              Custom template language that limits logic
Embedded JavaScript Templates
●   mustache
●   dust.js
●   handlebars
●   Google Closure Templates
●   Nun
●   Mu
●   kite
The test




           Render a simplified LinkedIn profile
The rules

● Produce this HTML output

● Use this profile JSON as input

● The same template should render on the server-side
  and client-side

● Properly handle profile data display rules

● Format numbers and dates correctly
The criteria
●   DRY
●   i18n
●   Hot reload
●   Performance
●   Ramp-up time
●   Ramped-up productivity
●   Server/client support
●   Community
●   Library agnostic
●   Testable
●   Debuggable
●   Editor support
●   Maturity
●   Documentation
●   Code documentation
Criteria are just guidelines;
not all are weighted equally.
The finalists
Google Closure Templates
Pros
 ● Templates are compiled into JavaScript for client-side and Java for server-
    side.
 ● Good built-in functionality: loops, conditionals, partials, i18n.
 ● Documentation is enforced by the template.

Cons
 ● Very little usage outside of Google. No plans to push new versions or
   accept new contributions.
 ● Some functionality is missing, such as being able to loop over maps.
 ● Not DRY: adding new functionality requires implementing plugins in both
   Java and JavaScript.
Mustache
Pros
 ● Very popular choice with a large, active community.
 ● Server side support in many languages, including Java.
 ● Logic-less templates do a great job of forcing you to separate presentation
    from logic.
 ● Clean syntax leads to templates that are easy to build, read, and maintain.

Cons
 ● A little too logic-less: basic tasks (e.g. label alternate rows with different
   CSS classes) are difficult.
 ● View logic is often pushed back to the server or implemented as a
   "lambda" (callable function).
 ● For lambdas to work on client and server, you must write them in
   JavaScript.
 ● Slow, interpreted templates
Handlebars
Pros
 ● Logic-less templates do a great job of forcing you to separate presentation
    from logic.
 ● Clean syntax leads to templates that are easy to build, read, and maintain.
 ● Compiled rather than interpreted templates.
 ● Better support for paths than mustache (ie, reaching deep into a context
    object).
 ● Better support for global helpers than mustache.

Cons
 ● Requires server-side JavaScript to render on the server.
Dust.js
Pros
 ● Logic-less templates do a great job of forcing you to separate presentation
    from logic.
 ● Clean syntax leads to templates that are easy to build, read, and maintain.
 ● Compiled rather than interpreted templates.
 ● Better support for paths than mustache (ie, reaching deep into a context
    object).
 ● Better support for global helpers than mustache.
 ● Inline parameters.
 ● Blocks & inline partials.
 ● Overriding contexts.
 ● Support for asynchronous rendering and streaming.
 ● Composable templates.

Cons
 ● Requires server-side JavaScript to render on the server.
 ● Maintainer of github repo is not responsive.
Spoiler alert!
dust.js won
Takeaways
● Based on how we weighed our criteria, Dust
  fit our needs the best

● Use real use cases and identify the most
  important criteria to you

● For non-trivial views, no templating option
  works on client and server, unless your
  server executes JavaScript (v8, Rhino)
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
The LinkedIn Fork

● The original maintainer abandoned dust

● The LinkedIn fork is now the most active

● We've added bug fixes, perf improvements,
  and helpers
Try it out

● Homepage:
  http://linkedin.github.com/dustjs/

● Try it in the browser: http://linkedin.github.
  com/dustjs/test/test.html

● Source code: https://github.
  com/linkedin/dustjs
(demo)
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
How do you handle view logic?
Yes, there is such a thing as view logic
 and it's separate from business logic
Complicated
Logic      logic




Logic
Homework assignment: implement
  this view with a truly logic-less
 template (no helpers/lambdas!)
Helpers to the rescue: @eq, @ne


 {@eq key="foo" value="foo"}The key and value are equal!{/ eq}
 {@ne key="foo" value="bar"}The key and value are not equal!{/ ne}
Helpers to the rescue: @gt, @lt


  {@gt key="22" value="3"}22 is greater than 3{/ gt}
  {@lt key="0" value="500"}0 is less than 500{/ lt}
Helpers to the rescue: @select


 {@select key=age}
   {@eq value="1"}Baby{/eq}
   {@lt value="10"}Child{/lt}
   {@lt value="18"}Teen{/lt}
   {@default}Adult{/default}
 {/select}
Helpers to the rescue: @size, @math



 You have {@ size key=list/} new messages
 {@math key="16" method="add" operand="4"/}
Full library of helpers is available at:
https://github.com/linkedin/dustjs-helpers
How do we handled clients without
 JavaScript? What about SEO?
SSR: Server Side Rendering
● Google V8 engine

● A plugin for Apache Traffic Server

● Executes arbitrary JavaScript server side,
  including rendering dust templates

● Often nicknamed Unified Server Side
  Rendering... aka, USSR
Client side rendering (full, SSR)




   The HTML Skeleton is written in dust. SSR renders it as HTML.
SSR uses
● Render dust skeleton into HTML skeleton

● Render everything server side for:
  ○ Crawlers/bots/search engines
  ○ Clients without JavaScript
  ○ Slow clients (IE < 8)

● Logic less templates help ensure that
  everything renders correctly server-side. No
  DOM dependencies!
What about i18n? Formatting? URLs?
Server side templates



 <p>
   <a href="${url.link( 'home-page' }">$!{i18n('hello-world' )}</a>
 </p>




    In JSPs, Java libraries did i18n, text formatting, URL generation
Sending an entire i18n dictionary,
URL dictionary, and all formatting
code to the browser is expensive
Option #1: everything server side
Java controller


     json.put("name", "Jim");
     json.put("home-page-link" , Url.link("home-page" ));
     json.put("hello-world-text" , I18n.get("hello-world" ));
     render("profile-page" , json);



profile-page dust template



     <p>
       <a href="{home-page-link} ">{hello-world-text} </a>
     </p>




          All i18n, text formatting, and URL generation is done server side
                            and added to the JSON payload
Option #1: everything server side

Pros
● Simple, easy to understand
● Clean templates

Cons
● Controller code cluttered with view logic
Option #2: dynamic pre-processing
Original profile-page dust template


     <p>
       <a href="{@pre.link key="home-page"}
                                          ">{@pre.i18n key="hello-world"}
                                                                        </a>
     </p>




Pre-processed profile-page dust template


     <p>
       <a href="{link-123}">{i18n-456}</a>
     </p>




        Step 1: the @pre helper tags get replaced at build time with
        references to unique keys in the JSON
Option #2: dynamic pre-processing
Java controller



     json.put("name", "Jim");
     render("profile-page" , json);




Pre-processed JSON


     {
         "name": "Jim",
         "link-123" : "http://www.linkedin.com" ,
         "i18n-456" : "Hello World"
     }



         Step 2: whenever profile-page is rendered, automatically
         "enhance" the JSON with the requested i18n and URL values
Option #2: dynamic pre-processing

Pros
● All view logic is in the templates
● Clean server side code

Cons
● Complicated, hard to debug
● Tight coupling: need special server and build
  logic to use templates
● Performance: increased JSON payload
  and/or more server processing time
Option #3: static pre-processing
Original profile-page dust template


     <p>
       <a href="{home-page-link}">{@i18n}Hello World{/i18n}</a>
     </p>




Pre-processed profile-page dust template (one per language)
     <p>
       <a href="{home-page-link}">Hello World</a>
     </p>


     <p>
       <a href="{home-page-link}">Bonjour monde</a>
     </p>



          Generate one template per language with translated text already
          filled in. Link generation and formatting still happen server-side.
Option #3: static pre-processing

Pros
● Hybrid approach: i18n is in the templates,
  only formatting/link generation is in controller
● Simpler, easier to debug than dynamic pre-
  processing

Cons
● Custom build process
● Increased template payload, but i18n strings
  now cached with template
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
LinkedIn in 2013




 We now many services using client side rendering and
         many using server-side rendering
A full rewrite is too expensive
Fizzy: Composable UI
Fizzy




 Fizzy is an ATS plugin that reads the HTML (skeleton or
                full) returned by webapps
Fizzy


 <html>
   <body>
     <h1>Composable UI </h1>
     <script type="fs/embed" fs-uri="/news-feed/top" ></script>
     <script type="fs/embed" fs-uri="/pymk"></script>
     <script type="fs/embed" fs-uri="/ad"></script>
   </body>
 </html>




   If Fizzy finds an fs/embed in the HTML, it calls the URI and injects
                        the response into the page.
Fizzy

                    HTML skeleton



                                    Embed


                        Embed

                                    Embed




A page now consists of a skeleton with a bunch of Fizzy-
                 processed embeds.
Deferred rendering
Typical page
               HTML Skeleton


                                     Dust
                                   template
                 Dust template


                                     Dust
                                   template



                 Dust template       Dust
                                   template




                        Dust template
Typical page
                        HTML Skeleton


                                              Dust
                                            template
                          Dust template


                                              Dust
          The fold                          template



                          Dust template       Dust
                                            template




                                 Dust template




   On initial page load, the user doesn't see anything below the fold
Typical page
                       HTML Skeleton


                                             Dust
                                           template
                         Dust template


                                             Dust
            The fold                       template



                         Dust template       Dust
                                           template



No need
to render                       Dust template

                                                      No need to fetch
                                                       data or render
Deferred rendering

● Dramatically improve performance by not
  rendering anything below the fold

● Improve it even further by not fetching the
  data for things far out of view

● The challenge: the fold is at different
  positions on different devices
Outline

1. A little LinkedIn history
2. A new direction: client side rendering
3. Picking a templating technology
4. Take dust for a spin
5. Challenges: SEO, i18n, logic
6. The Future
Final thoughts

● Dust.js has improved developer productivity and code
  sharing at LinkedIn

● Client side templating offers powerful new capabilities
  and benefits

● It also introduces tough new challenges

● It's an evolving technology; now is a good time to get
  involved
Questions?

More Related Content

What's hot

Data all over the place! How SQL and Apache Calcite bring sanity to streaming...
Data all over the place! How SQL and Apache Calcite bring sanity to streaming...Data all over the place! How SQL and Apache Calcite bring sanity to streaming...
Data all over the place! How SQL and Apache Calcite bring sanity to streaming...Julian Hyde
 
Hw09 Large Scale Transaction Analysis
Hw09   Large Scale Transaction AnalysisHw09   Large Scale Transaction Analysis
Hw09 Large Scale Transaction AnalysisCloudera, Inc.
 
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012Shirshanka Das
 
Efficient platform engineering with Microk8s & gopaddle.pdf
Efficient platform engineering  with  Microk8s & gopaddle.pdfEfficient platform engineering  with  Microk8s & gopaddle.pdf
Efficient platform engineering with Microk8s & gopaddle.pdfVinothini Raju
 
Cost Savings at High Performance with Redis Labs and AWS
Cost Savings at High Performance with Redis Labs and AWSCost Savings at High Performance with Redis Labs and AWS
Cost Savings at High Performance with Redis Labs and AWSAmazon Web Services
 
Cost-based Query Optimization in Apache Phoenix using Apache Calcite
Cost-based Query Optimization in Apache Phoenix using Apache CalciteCost-based Query Optimization in Apache Phoenix using Apache Calcite
Cost-based Query Optimization in Apache Phoenix using Apache CalciteJulian Hyde
 
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20Amazon Web Services Korea
 
Tame the small files problem and optimize data layout for streaming ingestion...
Tame the small files problem and optimize data layout for streaming ingestion...Tame the small files problem and optimize data layout for streaming ingestion...
Tame the small files problem and optimize data layout for streaming ingestion...Flink Forward
 
Lean-Agile PMO
Lean-Agile PMOLean-Agile PMO
Lean-Agile PMOLeanKit
 
Series of Unfortunate Netflix Container Events - QConNYC17
Series of Unfortunate Netflix Container Events - QConNYC17Series of Unfortunate Netflix Container Events - QConNYC17
Series of Unfortunate Netflix Container Events - QConNYC17aspyker
 
Microservices, Containers, Kubernetes, Kafka, Kanban
Microservices, Containers, Kubernetes, Kafka, KanbanMicroservices, Containers, Kubernetes, Kafka, Kanban
Microservices, Containers, Kubernetes, Kafka, KanbanAraf Karsh Hamid
 
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우NAVER D2
 
Open stack ha design & deployment kilo
Open stack ha design & deployment   kiloOpen stack ha design & deployment   kilo
Open stack ha design & deployment kiloSteven Li
 
A Product Manager's Place in a DevOps World
A Product Manager's Place in a DevOps WorldA Product Manager's Place in a DevOps World
A Product Manager's Place in a DevOps WorldAtlassian
 
Modern Operations: Solving DevOps’ Last Mile Problem
Modern Operations: Solving DevOps’ Last Mile Problem Modern Operations: Solving DevOps’ Last Mile Problem
Modern Operations: Solving DevOps’ Last Mile Problem Rundeck
 

What's hot (20)

Dynatrace
DynatraceDynatrace
Dynatrace
 
Data all over the place! How SQL and Apache Calcite bring sanity to streaming...
Data all over the place! How SQL and Apache Calcite bring sanity to streaming...Data all over the place! How SQL and Apache Calcite bring sanity to streaming...
Data all over the place! How SQL and Apache Calcite bring sanity to streaming...
 
DevOps at Lowe's - Our Journey
DevOps at Lowe's - Our JourneyDevOps at Lowe's - Our Journey
DevOps at Lowe's - Our Journey
 
Hw09 Large Scale Transaction Analysis
Hw09   Large Scale Transaction AnalysisHw09   Large Scale Transaction Analysis
Hw09 Large Scale Transaction Analysis
 
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012
Databus: LinkedIn's Change Data Capture Pipeline SOCC 2012
 
Efficient platform engineering with Microk8s & gopaddle.pdf
Efficient platform engineering  with  Microk8s & gopaddle.pdfEfficient platform engineering  with  Microk8s & gopaddle.pdf
Efficient platform engineering with Microk8s & gopaddle.pdf
 
Cost Savings at High Performance with Redis Labs and AWS
Cost Savings at High Performance with Redis Labs and AWSCost Savings at High Performance with Redis Labs and AWS
Cost Savings at High Performance with Redis Labs and AWS
 
Spark etl
Spark etlSpark etl
Spark etl
 
Cost-based Query Optimization in Apache Phoenix using Apache Calcite
Cost-based Query Optimization in Apache Phoenix using Apache CalciteCost-based Query Optimization in Apache Phoenix using Apache Calcite
Cost-based Query Optimization in Apache Phoenix using Apache Calcite
 
Achieving 100k Queries per Hour on Hive on Tez
Achieving 100k Queries per Hour on Hive on TezAchieving 100k Queries per Hour on Hive on Tez
Achieving 100k Queries per Hour on Hive on Tez
 
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
AWS 기반의 마이크로 서비스 아키텍쳐 구현 방안 :: 김필중 :: AWS Summit Seoul 20
 
Application Migrations at Scale
Application Migrations at ScaleApplication Migrations at Scale
Application Migrations at Scale
 
Tame the small files problem and optimize data layout for streaming ingestion...
Tame the small files problem and optimize data layout for streaming ingestion...Tame the small files problem and optimize data layout for streaming ingestion...
Tame the small files problem and optimize data layout for streaming ingestion...
 
Lean-Agile PMO
Lean-Agile PMOLean-Agile PMO
Lean-Agile PMO
 
Series of Unfortunate Netflix Container Events - QConNYC17
Series of Unfortunate Netflix Container Events - QConNYC17Series of Unfortunate Netflix Container Events - QConNYC17
Series of Unfortunate Netflix Container Events - QConNYC17
 
Microservices, Containers, Kubernetes, Kafka, Kanban
Microservices, Containers, Kubernetes, Kafka, KanbanMicroservices, Containers, Kubernetes, Kafka, Kanban
Microservices, Containers, Kubernetes, Kafka, Kanban
 
[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우[112]rest에서 graph ql과 relay로 갈아타기 이정우
[112]rest에서 graph ql과 relay로 갈아타기 이정우
 
Open stack ha design & deployment kilo
Open stack ha design & deployment   kiloOpen stack ha design & deployment   kilo
Open stack ha design & deployment kilo
 
A Product Manager's Place in a DevOps World
A Product Manager's Place in a DevOps WorldA Product Manager's Place in a DevOps World
A Product Manager's Place in a DevOps World
 
Modern Operations: Solving DevOps’ Last Mile Problem
Modern Operations: Solving DevOps’ Last Mile Problem Modern Operations: Solving DevOps’ Last Mile Problem
Modern Operations: Solving DevOps’ Last Mile Problem
 

Similar to Dust.js

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 frontendVlad Fedosov
 
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
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)Alex Ross
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraLINAGORA
 
Company Visitor Management System Report.docx
Company Visitor Management System Report.docxCompany Visitor Management System Report.docx
Company Visitor Management System Report.docxfantabulous2024
 
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
 
What are the basic key points to focus on while learning Full-stack web devel...
What are the basic key points to focus on while learning Full-stack web devel...What are the basic key points to focus on while learning Full-stack web devel...
What are the basic key points to focus on while learning Full-stack web devel...kzayra69
 
Frontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsFrontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsKarthik Ramgopal
 
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 landscapeRadosław Scheibinger
 
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 workerSuresh Patidar
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Toolsbarciszewski
 
Advanced web application architecture - Talk
Advanced web application architecture - TalkAdvanced web application architecture - Talk
Advanced web application architecture - TalkMatthias Noback
 
Viktor Turskyi "Effective NodeJS Application Development"
Viktor Turskyi "Effective NodeJS Application Development"Viktor Turskyi "Effective NodeJS Application Development"
Viktor Turskyi "Effective NodeJS Application Development"Fwdays
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 

Similar to Dust.js (20)

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
 
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...
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
 
Company Visitor Management System Report.docx
Company Visitor Management System Report.docxCompany Visitor Management System Report.docx
Company Visitor Management System Report.docx
 
Nodejs
NodejsNodejs
Nodejs
 
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...
 
What are the basic key points to focus on while learning Full-stack web devel...
What are the basic key points to focus on while learning Full-stack web devel...What are the basic key points to focus on while learning Full-stack web devel...
What are the basic key points to focus on while learning Full-stack web devel...
 
Angular Js
Angular JsAngular Js
Angular Js
 
Frontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsFrontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterations
 
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
 
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
 
GWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO ToolsGWT - Building Rich Internet Applications Using OO Tools
GWT - Building Rich Internet Applications Using OO Tools
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Advanced web application architecture - Talk
Advanced web application architecture - TalkAdvanced web application architecture - Talk
Advanced web application architecture - Talk
 
Viktor Turskyi "Effective NodeJS Application Development"
Viktor Turskyi "Effective NodeJS Application Development"Viktor Turskyi "Effective NodeJS Application Development"
Viktor Turskyi "Effective NodeJS Application Development"
 
RealDay: Angular.js
RealDay: Angular.jsRealDay: Angular.js
RealDay: Angular.js
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 

More from Yevgeniy Brikman

Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsCloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsYevgeniy Brikman
 
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...Yevgeniy Brikman
 
Lessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeLessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeYevgeniy Brikman
 
Gruntwork Executive Summary
Gruntwork Executive SummaryGruntwork Executive Summary
Gruntwork Executive SummaryYevgeniy Brikman
 
Reusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesReusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesYevgeniy Brikman
 
The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...Yevgeniy Brikman
 
An intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSAn intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSYevgeniy Brikman
 
Comprehensive Terraform Training
Comprehensive Terraform TrainingComprehensive Terraform Training
Comprehensive Terraform TrainingYevgeniy Brikman
 
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Yevgeniy Brikman
 
Startup Ideas and Validation
Startup Ideas and ValidationStartup Ideas and Validation
Startup Ideas and ValidationYevgeniy Brikman
 
A Guide to Hiring for your Startup
A Guide to Hiring for your StartupA Guide to Hiring for your Startup
A Guide to Hiring for your StartupYevgeniy Brikman
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Yevgeniy Brikman
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play appsYevgeniy Brikman
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaYevgeniy Brikman
 
The Play Framework at LinkedIn
The Play Framework at LinkedInThe Play Framework at LinkedIn
The Play Framework at LinkedInYevgeniy Brikman
 

More from Yevgeniy Brikman (20)

Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutionsCloud adoption fails - 5 ways deployments go wrong and 5 solutions
Cloud adoption fails - 5 ways deployments go wrong and 5 solutions
 
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...How to test infrastructure code: automated testing for Terraform, Kubernetes,...
How to test infrastructure code: automated testing for Terraform, Kubernetes,...
 
Lessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure codeLessons learned from writing over 300,000 lines of infrastructure code
Lessons learned from writing over 300,000 lines of infrastructure code
 
Gruntwork Executive Summary
Gruntwork Executive SummaryGruntwork Executive Summary
Gruntwork Executive Summary
 
Reusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modulesReusable, composable, battle-tested Terraform modules
Reusable, composable, battle-tested Terraform modules
 
The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...The Truth About Startups: What I wish someone had told me about entrepreneurs...
The Truth About Startups: What I wish someone had told me about entrepreneurs...
 
An intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECSAn intro to Docker, Terraform, and Amazon ECS
An intro to Docker, Terraform, and Amazon ECS
 
Comprehensive Terraform Training
Comprehensive Terraform TrainingComprehensive Terraform Training
Comprehensive Terraform Training
 
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...Infrastructure as code: running microservices on AWS using Docker, Terraform,...
Infrastructure as code: running microservices on AWS using Docker, Terraform,...
 
Agility Requires Safety
Agility Requires SafetyAgility Requires Safety
Agility Requires Safety
 
Startup Ideas and Validation
Startup Ideas and ValidationStartup Ideas and Validation
Startup Ideas and Validation
 
A Guide to Hiring for your Startup
A Guide to Hiring for your StartupA Guide to Hiring for your Startup
A Guide to Hiring for your Startup
 
Startup DNA: Speed Wins
Startup DNA: Speed WinsStartup DNA: Speed Wins
Startup DNA: Speed Wins
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)
 
Node.js vs Play Framework
Node.js vs Play FrameworkNode.js vs Play Framework
Node.js vs Play Framework
 
Rapid prototyping
Rapid prototypingRapid prototyping
Rapid prototyping
 
Composable and streamable Play apps
Composable and streamable Play appsComposable and streamable Play apps
Composable and streamable Play apps
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and ScalaPlay Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
 
The Play Framework at LinkedIn
The Play Framework at LinkedInThe Play Framework at LinkedIn
The Play Framework at LinkedIn
 
Kings of Code Hack Battle
Kings of Code Hack BattleKings of Code Hack Battle
Kings of Code Hack Battle
 

Recently uploaded

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditSkynet Technologies
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...AliaaTarek5
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 

Recently uploaded (20)

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
Manual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance AuditManual 508 Accessibility Compliance Audit
Manual 508 Accessibility Compliance Audit
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
(How to Program) Paul Deitel, Harvey Deitel-Java How to Program, Early Object...
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 

Dust.js

  • 1. { dust.js } at LinkedIn Yevgeniy Brikman
  • 2. 2011: LinkedIn adopted dust.js, a client side templating language
  • 3. This is the story of client side templating at massive scale
  • 4. Dust in the wild Profile 2.0
  • 5. Dust in the wild People You May Know
  • 6. Dust in the wild Influencers
  • 7. About me Presentation Infrastructure Team (also Hackdays, [in]cubator, Engineering Blog, Open Source)
  • 8. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 9. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 10. LinkedIn in 2003 A single, monolithic webapp: servlets/JSPs
  • 11. LinkedIn in 2010 New web frameworks to boost productivity: Grails/GSPs, JRuby/ERBs, plus others
  • 12. Fragmentation ● Each tech stack used a different templating technology (JSP, GSP, ERB, etc) ● No easy way to share UI code for common components (e.g. profile, the feed) ● The "global" nav had to be rewritten in multiple languages/technologies. Updating it was very time consuming.
  • 13. We needed to unify the view layer
  • 14. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 15. We began looking at client side templating solutions
  • 16. Traditional server side rendering All page content is rendered as HTML and sent to the browser
  • 17. Client side rendering (simplified) Server sends JSON. The template is fetched from the CDN and rendered in browser.
  • 18. Client side rendering (full) Server sends JSON embedded in an HTML skeleton. The skeleton has JavaScript code that fetches and renders the template.
  • 19. Client side MVC Client side MVC makes client side rendering even more important.
  • 20. Client side rendering (with MVC) Once a page has loaded, the client side MVC takes over, fetching JSON from the server and rendering it with client side templates
  • 21. Client side rendering benefits ● DRY: works with any server side stack plus client side ● Performance: bandwidth, latency, caching ● Productivity: fast iteration, mock JSON ● Rich apps: client side MVC
  • 22. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 23. Decisions, decisions We evaluated 26 different options. They tended to fall into one of two groups: Embedded JavaScript and Logic Less.
  • 24. Embedded JavaScript Templates <ul> <% for(var i = 0; i < supplies.length; i ++) { %> <li><%= supplies[i] %> </li> <% } %> </ul> Normal JavaScript code directly in the template.
  • 25. Embedded JavaScript Templates ● underscore.js ● Jade ● haml-js ● jQote2 ● doT ● Stencil ● Parrot ● Eco ● EJS ● jQuery templates ● node-asyncEJS
  • 26. Logic-less Templates <p> Hello {name}! You have {count} new messages. </p> Custom template language that limits logic
  • 27. Embedded JavaScript Templates ● mustache ● dust.js ● handlebars ● Google Closure Templates ● Nun ● Mu ● kite
  • 28. The test Render a simplified LinkedIn profile
  • 29. The rules ● Produce this HTML output ● Use this profile JSON as input ● The same template should render on the server-side and client-side ● Properly handle profile data display rules ● Format numbers and dates correctly
  • 30. The criteria ● DRY ● i18n ● Hot reload ● Performance ● Ramp-up time ● Ramped-up productivity ● Server/client support ● Community ● Library agnostic ● Testable ● Debuggable ● Editor support ● Maturity ● Documentation ● Code documentation
  • 31. Criteria are just guidelines; not all are weighted equally.
  • 33. Google Closure Templates Pros ● Templates are compiled into JavaScript for client-side and Java for server- side. ● Good built-in functionality: loops, conditionals, partials, i18n. ● Documentation is enforced by the template. Cons ● Very little usage outside of Google. No plans to push new versions or accept new contributions. ● Some functionality is missing, such as being able to loop over maps. ● Not DRY: adding new functionality requires implementing plugins in both Java and JavaScript.
  • 34. Mustache Pros ● Very popular choice with a large, active community. ● Server side support in many languages, including Java. ● Logic-less templates do a great job of forcing you to separate presentation from logic. ● Clean syntax leads to templates that are easy to build, read, and maintain. Cons ● A little too logic-less: basic tasks (e.g. label alternate rows with different CSS classes) are difficult. ● View logic is often pushed back to the server or implemented as a "lambda" (callable function). ● For lambdas to work on client and server, you must write them in JavaScript. ● Slow, interpreted templates
  • 35. Handlebars Pros ● Logic-less templates do a great job of forcing you to separate presentation from logic. ● Clean syntax leads to templates that are easy to build, read, and maintain. ● Compiled rather than interpreted templates. ● Better support for paths than mustache (ie, reaching deep into a context object). ● Better support for global helpers than mustache. Cons ● Requires server-side JavaScript to render on the server.
  • 36. Dust.js Pros ● Logic-less templates do a great job of forcing you to separate presentation from logic. ● Clean syntax leads to templates that are easy to build, read, and maintain. ● Compiled rather than interpreted templates. ● Better support for paths than mustache (ie, reaching deep into a context object). ● Better support for global helpers than mustache. ● Inline parameters. ● Blocks & inline partials. ● Overriding contexts. ● Support for asynchronous rendering and streaming. ● Composable templates. Cons ● Requires server-side JavaScript to render on the server. ● Maintainer of github repo is not responsive.
  • 39. Takeaways ● Based on how we weighed our criteria, Dust fit our needs the best ● Use real use cases and identify the most important criteria to you ● For non-trivial views, no templating option works on client and server, unless your server executes JavaScript (v8, Rhino)
  • 40. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 41. The LinkedIn Fork ● The original maintainer abandoned dust ● The LinkedIn fork is now the most active ● We've added bug fixes, perf improvements, and helpers
  • 42. Try it out ● Homepage: http://linkedin.github.com/dustjs/ ● Try it in the browser: http://linkedin.github. com/dustjs/test/test.html ● Source code: https://github. com/linkedin/dustjs
  • 44. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 45. How do you handle view logic?
  • 46. Yes, there is such a thing as view logic and it's separate from business logic
  • 47. Complicated Logic logic Logic
  • 48. Homework assignment: implement this view with a truly logic-less template (no helpers/lambdas!)
  • 49. Helpers to the rescue: @eq, @ne {@eq key="foo" value="foo"}The key and value are equal!{/ eq} {@ne key="foo" value="bar"}The key and value are not equal!{/ ne}
  • 50. Helpers to the rescue: @gt, @lt {@gt key="22" value="3"}22 is greater than 3{/ gt} {@lt key="0" value="500"}0 is less than 500{/ lt}
  • 51. Helpers to the rescue: @select {@select key=age} {@eq value="1"}Baby{/eq} {@lt value="10"}Child{/lt} {@lt value="18"}Teen{/lt} {@default}Adult{/default} {/select}
  • 52. Helpers to the rescue: @size, @math You have {@ size key=list/} new messages {@math key="16" method="add" operand="4"/}
  • 53. Full library of helpers is available at: https://github.com/linkedin/dustjs-helpers
  • 54. How do we handled clients without JavaScript? What about SEO?
  • 55. SSR: Server Side Rendering ● Google V8 engine ● A plugin for Apache Traffic Server ● Executes arbitrary JavaScript server side, including rendering dust templates ● Often nicknamed Unified Server Side Rendering... aka, USSR
  • 56. Client side rendering (full, SSR) The HTML Skeleton is written in dust. SSR renders it as HTML.
  • 57. SSR uses ● Render dust skeleton into HTML skeleton ● Render everything server side for: ○ Crawlers/bots/search engines ○ Clients without JavaScript ○ Slow clients (IE < 8) ● Logic less templates help ensure that everything renders correctly server-side. No DOM dependencies!
  • 58. What about i18n? Formatting? URLs?
  • 59. Server side templates <p> <a href="${url.link( 'home-page' }">$!{i18n('hello-world' )}</a> </p> In JSPs, Java libraries did i18n, text formatting, URL generation
  • 60. Sending an entire i18n dictionary, URL dictionary, and all formatting code to the browser is expensive
  • 61. Option #1: everything server side Java controller json.put("name", "Jim"); json.put("home-page-link" , Url.link("home-page" )); json.put("hello-world-text" , I18n.get("hello-world" )); render("profile-page" , json); profile-page dust template <p> <a href="{home-page-link} ">{hello-world-text} </a> </p> All i18n, text formatting, and URL generation is done server side and added to the JSON payload
  • 62. Option #1: everything server side Pros ● Simple, easy to understand ● Clean templates Cons ● Controller code cluttered with view logic
  • 63. Option #2: dynamic pre-processing Original profile-page dust template <p> <a href="{@pre.link key="home-page"} ">{@pre.i18n key="hello-world"} </a> </p> Pre-processed profile-page dust template <p> <a href="{link-123}">{i18n-456}</a> </p> Step 1: the @pre helper tags get replaced at build time with references to unique keys in the JSON
  • 64. Option #2: dynamic pre-processing Java controller json.put("name", "Jim"); render("profile-page" , json); Pre-processed JSON { "name": "Jim", "link-123" : "http://www.linkedin.com" , "i18n-456" : "Hello World" } Step 2: whenever profile-page is rendered, automatically "enhance" the JSON with the requested i18n and URL values
  • 65. Option #2: dynamic pre-processing Pros ● All view logic is in the templates ● Clean server side code Cons ● Complicated, hard to debug ● Tight coupling: need special server and build logic to use templates ● Performance: increased JSON payload and/or more server processing time
  • 66. Option #3: static pre-processing Original profile-page dust template <p> <a href="{home-page-link}">{@i18n}Hello World{/i18n}</a> </p> Pre-processed profile-page dust template (one per language) <p> <a href="{home-page-link}">Hello World</a> </p> <p> <a href="{home-page-link}">Bonjour monde</a> </p> Generate one template per language with translated text already filled in. Link generation and formatting still happen server-side.
  • 67. Option #3: static pre-processing Pros ● Hybrid approach: i18n is in the templates, only formatting/link generation is in controller ● Simpler, easier to debug than dynamic pre- processing Cons ● Custom build process ● Increased template payload, but i18n strings now cached with template
  • 68. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 69. LinkedIn in 2013 We now many services using client side rendering and many using server-side rendering
  • 70. A full rewrite is too expensive
  • 72. Fizzy Fizzy is an ATS plugin that reads the HTML (skeleton or full) returned by webapps
  • 73. Fizzy <html> <body> <h1>Composable UI </h1> <script type="fs/embed" fs-uri="/news-feed/top" ></script> <script type="fs/embed" fs-uri="/pymk"></script> <script type="fs/embed" fs-uri="/ad"></script> </body> </html> If Fizzy finds an fs/embed in the HTML, it calls the URI and injects the response into the page.
  • 74. Fizzy HTML skeleton Embed Embed Embed A page now consists of a skeleton with a bunch of Fizzy- processed embeds.
  • 76. Typical page HTML Skeleton Dust template Dust template Dust template Dust template Dust template Dust template
  • 77. Typical page HTML Skeleton Dust template Dust template Dust The fold template Dust template Dust template Dust template On initial page load, the user doesn't see anything below the fold
  • 78. Typical page HTML Skeleton Dust template Dust template Dust The fold template Dust template Dust template No need to render Dust template No need to fetch data or render
  • 79. Deferred rendering ● Dramatically improve performance by not rendering anything below the fold ● Improve it even further by not fetching the data for things far out of view ● The challenge: the fold is at different positions on different devices
  • 80. Outline 1. A little LinkedIn history 2. A new direction: client side rendering 3. Picking a templating technology 4. Take dust for a spin 5. Challenges: SEO, i18n, logic 6. The Future
  • 81. Final thoughts ● Dust.js has improved developer productivity and code sharing at LinkedIn ● Client side templating offers powerful new capabilities and benefits ● It also introduces tough new challenges ● It's an evolving technology; now is a good time to get involved