Emblem.js - Ember-targeting indentation-based templates

E6138af35a4330451deb308e9db17752?s=47 machty
January 24, 2013

Emblem.js - Ember-targeting indentation-based templates

Presented at the NYC Ember Meetup on 1/24/13

E6138af35a4330451deb308e9db17752?s=128

machty

January 24, 2013
Tweet

Transcript

  1. USEFUL ROBOT Emblem.js - ember-infused templating language Alex Matchneer Ember

    Meetup: January 24, 2013
  2. Templating in Ember.js Handlebars.js • HTML with {{mustache}}s for dynamic

    content • Separate library from Ember.js, but Ember.js is tightly integrated / dependent on Handlebars • You can use other templating libraries, but you would miss out on data-binding, auto-updating templates, etc
  3. Alternatives Wrap another library to output Handlebars code • e.g.

    Hamlbars - write in Haml, use hb helper function to output {{mustache}} code, then feed to Handlebars.js Problems • Barf on a screen • Unavoidable over-use of hb helper • {{else}} doesn’t nest properly • Requires build tools
  4. Emblem.js Pain-free Templating • Indentation-based • Written in JavaScript, compilable

    in browser • Compiles to Handlebars “assembly”, therefore has full access to Ember- Handlebars helpers, data-binding, auto-updating, etc. • Lots of overridable, Ember-targeting features and conventions
  5. Emblem.js (Configurable) Syntactic Sugar targeting Ember • Emblem is HTML

    aware. Unrecognized HTML elements assumed to be helpers / property lookups • Both HTML and helpers/lookups are first class citizens • Capitalized line-starters are assumed to be view invocations • Support for bang (!) modifiers, as well
  6. Emblem.js JS Bin Demo: http://jsbin.com/ulegec/13/edit

  7. Emblem.js TODO • Gems / NPM packages for precompilation, etc.

    • Syntax suggestions / refinements • Loosen coupling to Ember.js • PRs / Issues welcome: https://github.com/machty/emblem.js
  8. Also check out Ember Script: Ember-infused CoffeeScript • Fork of

    the CoffeeScriptRedux project • Overrides the object-oriented syntax of CS to generate Ember style definitions • Extremely awesome ~> operator • Dot operator utilizes .get() and .set() by default • https://github.com/ghempton/ember-script
  9. Questions? Alex Matchneer • Twitter: machty • github.com/machty • alex@usefulrobot.io