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

Hive Bucketing in Apache Spark with Tejas Patil
Hive Bucketing in Apache Spark with Tejas PatilHive Bucketing in Apache Spark with Tejas Patil
Hive Bucketing in Apache Spark with Tejas PatilDatabricks
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with JestMichał Pierzchała
 
How Netflix Tunes EC2 Instances for Performance
How Netflix Tunes EC2 Instances for PerformanceHow Netflix Tunes EC2 Instances for Performance
How Netflix Tunes EC2 Instances for PerformanceBrendan Gregg
 
Scalable Filesystem Metadata Services with RocksDB
Scalable Filesystem Metadata Services with RocksDBScalable Filesystem Metadata Services with RocksDB
Scalable Filesystem Metadata Services with RocksDBAlluxio, Inc.
 
Building modern data lakes
Building modern data lakes Building modern data lakes
Building modern data lakes Minio
 
Leverage CompletableFutures to handle async queries. DevNexus 2022
Leverage CompletableFutures to handle async queries. DevNexus 2022Leverage CompletableFutures to handle async queries. DevNexus 2022
Leverage CompletableFutures to handle async queries. DevNexus 2022David Gómez García
 
Bowling Game Kata by Robert C. Martin
Bowling Game Kata by Robert C. MartinBowling Game Kata by Robert C. Martin
Bowling Game Kata by Robert C. MartinLalit Kale
 
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...Databricks
 
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023Sam Brannen
 
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...DataWorks Summit/Hadoop Summit
 
Real-Time Spark: From Interactive Queries to Streaming
Real-Time Spark: From Interactive Queries to StreamingReal-Time Spark: From Interactive Queries to Streaming
Real-Time Spark: From Interactive Queries to StreamingDatabricks
 
Building an ML Platform with Ray and MLflow
Building an ML Platform with Ray and MLflowBuilding an ML Platform with Ray and MLflow
Building an ML Platform with Ray and MLflowDatabricks
 
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...Amazon Web Services
 
Introduction to DataFusion An Embeddable Query Engine Written in Rust
Introduction to DataFusion  An Embeddable Query Engine Written in RustIntroduction to DataFusion  An Embeddable Query Engine Written in Rust
Introduction to DataFusion An Embeddable Query Engine Written in RustAndrew Lamb
 
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...Databricks
 
Clean architectures with fast api pycones
Clean architectures with fast api   pyconesClean architectures with fast api   pycones
Clean architectures with fast api pyconesAlvaro Del Castillo
 
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Edureka!
 
Architecting a Fraud Detection Application with Hadoop
Architecting a Fraud Detection Application with HadoopArchitecting a Fraud Detection Application with Hadoop
Architecting a Fraud Detection Application with HadoopDataWorks Summit
 

What's hot (20)

Hive Bucketing in Apache Spark with Tejas Patil
Hive Bucketing in Apache Spark with Tejas PatilHive Bucketing in Apache Spark with Tejas Patil
Hive Bucketing in Apache Spark with Tejas Patil
 
Painless JavaScript Testing with Jest
Painless JavaScript Testing with JestPainless JavaScript Testing with Jest
Painless JavaScript Testing with Jest
 
How Netflix Tunes EC2 Instances for Performance
How Netflix Tunes EC2 Instances for PerformanceHow Netflix Tunes EC2 Instances for Performance
How Netflix Tunes EC2 Instances for Performance
 
Scalable Filesystem Metadata Services with RocksDB
Scalable Filesystem Metadata Services with RocksDBScalable Filesystem Metadata Services with RocksDB
Scalable Filesystem Metadata Services with RocksDB
 
Building modern data lakes
Building modern data lakes Building modern data lakes
Building modern data lakes
 
Leverage CompletableFutures to handle async queries. DevNexus 2022
Leverage CompletableFutures to handle async queries. DevNexus 2022Leverage CompletableFutures to handle async queries. DevNexus 2022
Leverage CompletableFutures to handle async queries. DevNexus 2022
 
Bowling Game Kata by Robert C. Martin
Bowling Game Kata by Robert C. MartinBowling Game Kata by Robert C. Martin
Bowling Game Kata by Robert C. Martin
 
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...
Everyday I'm Shuffling - Tips for Writing Better Spark Programs, Strata San J...
 
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023
Testing with Spring, AOT, GraalVM, and JUnit 5 - Spring I/O 2023
 
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...
How to overcome mysterious problems caused by large and multi-tenancy Hadoop ...
 
React lecture
React lectureReact lecture
React lecture
 
Real-Time Spark: From Interactive Queries to Streaming
Real-Time Spark: From Interactive Queries to StreamingReal-Time Spark: From Interactive Queries to Streaming
Real-Time Spark: From Interactive Queries to Streaming
 
Hbase at Salesforce.com
Hbase at Salesforce.comHbase at Salesforce.com
Hbase at Salesforce.com
 
Building an ML Platform with Ray and MLflow
Building an ML Platform with Ray and MLflowBuilding an ML Platform with Ray and MLflow
Building an ML Platform with Ray and MLflow
 
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...
Extending Analytics Beyond the Data Warehouse, ft. Warner Bros. Analytics (AN...
 
Introduction to DataFusion An Embeddable Query Engine Written in Rust
Introduction to DataFusion  An Embeddable Query Engine Written in RustIntroduction to DataFusion  An Embeddable Query Engine Written in Rust
Introduction to DataFusion An Embeddable Query Engine Written in Rust
 
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...
A Tale of Three Apache Spark APIs: RDDs, DataFrames, and Datasets with Jules ...
 
Clean architectures with fast api pycones
Clean architectures with fast api   pyconesClean architectures with fast api   pycones
Clean architectures with fast api pycones
 
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
Pyspark Tutorial | Introduction to Apache Spark with Python | PySpark Trainin...
 
Architecting a Fraud Detection Application with Hadoop
Architecting a Fraud Detection Application with HadoopArchitecting a Fraud Detection Application with Hadoop
Architecting a Fraud Detection Application with Hadoop
 

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
 
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
 
Pertemuan 1 - Introduction to Frontend Engineer.pdf
Pertemuan 1 - Introduction to Frontend Engineer.pdfPertemuan 1 - Introduction to Frontend Engineer.pdf
Pertemuan 1 - Introduction to Frontend Engineer.pdfRaffiPratama3
 

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...
 
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
 
Pertemuan 1 - Introduction to Frontend Engineer.pdf
Pertemuan 1 - Introduction to Frontend Engineer.pdfPertemuan 1 - Introduction to Frontend Engineer.pdf
Pertemuan 1 - Introduction to Frontend Engineer.pdf
 

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

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 

Recently uploaded (20)

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 

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