Skip to content
This repository has been archived by the owner on Feb 17, 2021. It is now read-only.

Latest commit

 

History

History
69 lines (59 loc) · 2.05 KB

lecture.md

File metadata and controls

69 lines (59 loc) · 2.05 KB
Raw

Lecture 4

HTML template engines

  • Pug
  • Nunjucks
  • Embedded JS
  • Handlebars
  • Mustache
Pug

Features:

  • Works with any build tools or render engine on Node server
  • Can be integrated into Vue / React / Angular
  • Less HTML code
  • Requires a strict awareness of whitespace
  • Possibility to write JS in the template
  • Possibility to insert content from one file into another
  • Template inheritance
  • .pug file extension

Pug references:

  • Variables
  • Case (JS switch analog)
  • Code (inline JS code in the template)
  • Conditionals (if, else if, else, unless)
  • Filters (using other languages in your templates, e.g. Markdown or CoffeScript)
  • Includes (content from one file to another)
  • Extends & Block (recursive inheritance)
  • String Interpolation
  • Iteration (each, while)
  • Mixins
Nunjucks

Features:

  • Works with any build tools or render engine on Node server
  • Can be integrated into Vue / React / Angular (?)
  • Possibility to insert content from one file into another
  • Possibility to write custom function and use them in your template
  • Template inheritance
  • .njk file extension

Nunjucks references:

  • Variables
  • Inheritance
  • Tags (if, for, asyncEach, asyncAll, macro, set, extends, block, include, import, raw, verbatim, filter, call)
  • Expressions
  • Global functions
  • Builtin and custom filters

Tooling

Build tools - automation tool for repetitive work that have to be done.

  • Gulp
  • Webpack
  • Grunt
  • ... etc

Gulp useful plugins: