Client-side Templating with JavaScript

Will Klein

Boston Code Camp 19

March 9, 2013

About Me

engineer @ Travelers

github.com/willklein

http://willkle.in

Agenda

A Brief History

We used to mix our code

(in a blender)

Separation of Concerns

We had concerns, so we separated them

Don't put:

...you get the idea.

Evolving Our Code

Trying new things

Improving the "Developer Experience"

Templating is

taking HTML (or something like it),

dynamic data (typically JSON),

and binding the data into the HTML.

Where Are We Now

DOM scripting, the fast way:

jsPerf

Is faster really better?

A Simple Template


<a href="somewhere.html">Some link</a>

Mustache

Released in 2009

Written in Ruby by Chris Wanstrath

Inspired by ctemplate (C++) and et (Erlang)

An Amazing {{mustache}}

Ported everywhere

Has a spec

Handlebars.js is a superset of Mustache.js

Hogan is a Mustache compiler

Jade - Node Template Engine

Inspired by Haml (born in Ruby)

Written for Node.js by TJ Holowaychuk

Can be deployed to the browser

jade-lang.com

Interactive documentation

Transparency

*Pure* HTML templates

Written in CoffeeScript by Jarno Keskikangas

DOM based

Semantic data binding

Transparency

Stuff to Think About

Deliver me my templates!

Pre-compilation

Performance

We still need our pages to load (fast)

Some browsers are really slow

Some browsers are really fast

Done right, templating can *improve* responsiveness (perceived performance)

Browser vs Server

Keep some things server-side

Initial page-load HTML can be done server-side

Hybrid approach

Share templates when possible

More Template Engines

Playing Nice w/ Frameworks

So Fresh, So Clean

Templating can provide:

Where can I learn more?

Questions?

Stay Tuned

Thanks!

/

#