# Templating and Serverside rendering ---  --- ## What is server-side rendering? "With server-side rendering, whenever you want to see a new web page, you have to go out and get it, this is analogous to you driving over to the super market every time you want to eat. With client-side rendering, you go to the super market once and spend 45 minutes walking around buying a bunch of food for the month. Then, whenever you want to eat, you just open the fridge.” — Adam Zerner --- ## The pros of serverside rendering vs clientside  --- **Performance**: Server side rendered pages will load faster because the content is available to the browser sooner. 🏎 --- **Search Engine Optimization**: Content is crawlable by search engines so your site and pages will appear in Google search results, whereas search engines cannot yet efficiently index applications that exclusively render client-side. 🔎 --- **User Experience**: Similar to performance, content is available sooner so the user is not waiting around looking at blank pages or loading spinners. 😊 --- **Social Media Optimization**: When people post your links on Twitter, Facebook, etc. the metadata needed to show a nice preview (images, title, description..) is gathered quickly and easily 📣 --- **All in all, server-side allows for a better user-experience and improves a website's visibility on the web.** 🚀 --- ## The pros of clientside rendering vs serverside --- **No full page load required** 📃 Client-side rendering a voids making unnecessary requests for a full page when only a portion of the page has changed -Especially helpful in a world that’s increasingly browsing via mobile networks --- **Lazy loading** 😴 Client-side rendering supports lazy loading sections of your application to save bandwidth & speed initial load. *Example - loading additional records, images, and ads as the user scrolls down --- **Rich site interactions** 💰 Client-side rendering supports rich, animated interactions, transformations, and transitions. --- **Great for web applications** 🌍 Hosting static files is typically cheaper than hosting traditional server-side technologies like ASP.NET, PHP, or Ruby. --- **Faster website rendering after the initial load.** 🏃🏾‍♂️ As client-side approach to the UI rendering implies that all the required data and templates are loaded entirely. -> There’s no need to reconfer with the server unless additional data is required --- **Robust selection of JavaScript libraries.** 📚 Examples include: * Webix * Ember.js * Backbone.js * Underscore.js --- <iframe src="https://giphy.com/embed/DhIjOI1TLJGTu" width="480" height="442" frameBorder="0" class="giphy-embed" allowFullScreen></iframe> --- ## What is a templating language? --- A template processor (also known as a template engine or template parser) is software designed to combine templates with a data model to produce result documents. The language that the templates are written in is known as a template language or templating language. ---  --- Mustache is a template system. Handlebars is an implementation of mustache. --- Mustache gets its name from the frequent use of curly braces. # {{ These resemble a mustache. ---  --- A moustache is facial hair grown on the upper lip. ---  --- ## What problems do templating languages solve? --- - Encourages organization of source code into operationally-distinct layers (see e.g., MVC) - Allows code to be more re-usable + modularised - Enhances productivity by reducing unnecessary reproduction of effort - Enhances teamwork by allowing separation of work based on skill-set (e.g., artistic vs. technical) --- Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. ---  --- ## What are some examples of functionality that templating languages provide e.g. conditional logic etc. --- **Mustache** is fully logic-less but **Handlebars** 🚲 adds **minimal** logic thanks to the use of some helpers: `if`, `with`, `unless`, `each` and more. Handlebars differs from mustache: - Helpers can allow custom functionality through explicit user-written code for that block. --- ### The if block helper You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block. ```js <div class="entry"> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{/if}} </div> ``` --- You can also specify a template section to run if the expression returns a falsy value. The section, marked by {{else}} is called an "else section". ``` js <div class="entry"> {{#if author}} <h1>{{firstName}} {{lastName}}</h1> {{else}} <h1>Unknown Author</h1> {{/if}} </div> ``` --- You can use the unless helper as the inverse of the if helper. Its block will be rendered if the expression returns a falsy value. ``` js <div class="entry"> {{#unless license}} <h3 class="warning">WARNING: This entry does not have a license!</h3> {{/unless}} </div> ``` --- ### The 'Each' helper You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over. ```js <ul class="people_list"> {{#each people}} <li>{{this}}</li> {{/each}} </ul> ``` --- - Nested Paths (Mustache only allows Simple paths, whereas Handlebars supports greater nesting of objects). ---  --- ### Any questions?  --- ## References What is server-side rendering: https://medium.com/@baphemot/whats-server-side-rendering-and-do-i-need-it-cb42dc059b38 Flavio Copes' Server Side Rendering article: https://flaviocopes.com/react-server-side-rendering/ freecodecamp's client side vs. server side: https://www.freecodecamp.org/news/what-exactly-is-client-side-rendering-and-hows-it-different-from-server-side-rendering-bd5c786b340d/ https://dev.to/sunnysingh/the-benefits-and-origins-of-server-side-rendering-4doh Template Processor wikipedia: https://en.wikipedia.org/wiki/Template_processor Mustache wikipedia: https://en.wikipedia.org/wiki/Mustache_(template_system) Learn handlebars in 10mn ("yea right"): https://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes Why client side rendering won: https://www.freecodecamp.org/news/heres-why-client-side-rendering-won-46a349fadb52/ Helpers: https://handlebarsjs.com/builtin_helpers.html