This month sees 3 screencast tuts on Handlebars at SitePoint! With Javascript becoming more popular and a rising number of frameworks, libraries and dev tools available for JS developers, I’ve put across 3 screen-casts on Handlebars. Of which 2 are mini projects
Templating is pretty useful:
- if you’re going to be working with large amounts of JSON data (example accessing data from a public API such as twitter).
- In the separation of logic and presentation
- if you’re going to be using a JS framework such as Ember.js and Backbone.js which use Handlebars (Angular has its own)
Here is a breakdown of the screen casts:
- Handle Your Layouts with JavaScript and Handlebars
Handlebars is great for interactive web apps that need to update frequently! That’s why in this screencast I will cover template engines but more specifically I will look into how Handlebars works. Once you have scratched the surface of Handlebars we’ll do a small project together using Handlebars templates and a Twitter Bootstrap Theme. What are you waiting for? Let’s handle this together!
A ~ 12 min screencast that introduces you to:
- what a templating engine is, it’s main function and purpose
- How a templating works
- Differences across the various JS templating engines (Dust.js, jsRender, Jade & EJS)
- Intro to Handlbars and it’s advantages and what “logicLess” infers
This screencast assumes basic working knowledge of HTML, CSS and JS
2.Reworking a Bootstrap Theme Navigation with Handlebars
A ~ 8 min screencast in which you template a Twitter Bootstrap theme. So in short templating a template! This screencast is all hands on and includes:
Have you ever needed to re-use a Bootstrap theme for another project? We all have to do it from time to time. Let me show you how to template your Bootstrap theme with Handlebars.
Templating will allow you to separate logic from presentation. With Handlebars you can re-use the same Twitter Bootstrap theme from a different project and by modifying only the Handlebars file — you can repurpose your sites, painlessly! Yes, I’m going to show you how!
This is part one of two screencast. In this screencast we’ll focus on templating the navigation menu of our project. Part 2 will complete the whole project. Grab your code samples on GitHub: https://github.com/learnable-content/kauress-HandleBars/tree/bootstrap-nav-handlebars.
- Setting up a Handlebars project (the directory structure and including the Handlebars library in your project)
- Using Handlebars expressions to insert a template within index.html to modify the nav bar of the twitter bootstrap theme
- Compiling the template for the nav bar
This screencast is downright hands on if you have little to no experience with a templating engine and Handlebars for that matter.
Here is a before and after of the nav bar. No html was used, only name value pairs. So you can imagine if you were to work hours on perfecting a custom built theme such as this Twitter Bootstrap theme, then templating would be a big time saver if customizing the theme for a different purpose or client
Before (left) and After (right) pic of the TWB navBar using Handlebars
3. Reworking the rest of the Bootstrap Theme with Handlebars
A ~ 25 min screencast on templating the rest of the twitter bootstrap with Handlebars
- Use built in and custom helpers to template and customize the rest of the TWB theme:
- The each helpers re-iterates through the categories & product listings (no need to insert individual products in each of the TWB column classes).
- Using the built in “if” helper to return if an item is in stock.
- And lastly using a custom “if” helper to return all items that are on sale
- Register a partial to render a custom Tagline string for the e-shoppe
If you’d like to compare the original and templated TWB theme. Go ahead and compare This with the Handlebars Template
You can check these screencasts out Here and Here. If JavaScript of Handlebars isn’t really your thing checkout SitePoint they have a bunch of other useful stuff. Including a growing repository of screencasts and short tuts.
