Overview
The article discusses LinkedIn's transition from server-side templates to client-side templating solutions, focusing on the evaluation of various technologies including Mustache, Handlebars, and Dust.js. It outlines the selection process and criteria used to determine the best templating solution for their needs.
What You'll Learn
1
How to evaluate client-side templating solutions based on specific requirements
2
Why separating presentation from logic is crucial in templating
3
When to choose a logic-less templating approach over embedded JavaScript templates
Prerequisites & Requirements
- Understanding of client-side and server-side rendering concepts
- Familiarity with JavaScript and templating languages(optional)
Key Questions Answered
How did LinkedIn choose Dust.js as its client-side templating solution?
LinkedIn evaluated 18 templating technologies based on a set of criteria including DRY principles, performance, and community support. Dust.js emerged as the winner due to its features, flexibility, and ability to keep view code clean and fast.
What are the main categories of client-side templating technologies?
The main categories identified were embedded JavaScript templates, which allow regular JavaScript code within templates, and logic-less templates, which restrict logic to a small set of constructs. This distinction helps in choosing the right approach based on project needs.
What features were evaluated in the templating solutions?
Features evaluated included DRY support, internationalization (i18n), hot reload capabilities, performance, learning curve, productivity, server/client support, community activity, library dependencies, testability, debuggability, editor support, maturity, and documentation quality.
What were the main findings from the templating technology evaluation?
The evaluation revealed a four-way tie among Google Closure Templates, Mustache, Handlebars, and Dust.js. Each had strengths and weaknesses, but Dust.js was ultimately chosen for its comprehensive feature set and performance.
Technologies & Tools
Frontend
Dust.js
Chosen as the client-side templating solution for its features and flexibility.
Frontend
Mustache
Considered for its clean syntax and active community.
Frontend
Handlebars
Evaluated for its compiled templates and better path support.
Frontend
Google Closure Templates
Noted for its functionality but limited community usage.
Key Actionable Insights
1When selecting a templating technology, prioritize community support and documentation quality to ensure long-term viability and ease of use.A strong community can provide resources and troubleshooting help, making it easier to adopt and implement the technology effectively.
2Consider the specific needs of your project when choosing between embedded JavaScript and logic-less templates.Logic-less templates can enforce a cleaner separation of concerns, which is beneficial for maintainability, but may limit flexibility for complex rendering tasks.
3Test templating solutions in real-world scenarios to gauge performance and usability before making a decision.The evaluation process at LinkedIn involved practical tests that highlighted the strengths and weaknesses of each technology, leading to a more informed choice.
Common Pitfalls
1
Choosing a templating solution without considering the community and documentation can lead to challenges in implementation and support.
A lack of resources can hinder development and troubleshooting efforts, making it crucial to evaluate community engagement and documentation quality.
2
Overlooking the importance of separating logic from presentation can result in messy, hard-to-maintain templates.
Using logic-less templates can help enforce this separation, leading to cleaner and more maintainable code.
Related Concepts
Client-side Rendering
Server-side Rendering
Templating Languages
Javascript Frameworks