7 ms·
Emblem.js: concise, indented alternative templating language for Handlebars.js
- xakshay 14y agoThis is great stuff. Starting to use it on a project.
- becojo 14y agoa concise, beautiful, and fully compatible templating alternative for Handlebars.js" [...] Introducing Emblem.js: a new templating language that compiles to Handlebars.js If it compiles to Handlebars, it's not an alternative to it, is it?
- lukenyc 14y agoIf Coffeescript is an alternative to Javascript, then yes. If not, no.
- jacquesc 14y agoExactly. Emblem.js is for people who love Haml / Slim / Jade and want to use that style of templating with Handlebars.js
- mtsmith85 14y agoIt really fits into place if you're coming from one of those libraries. I only wish I could enable percent-sign indicators for HTML tags! (%h1 vs h1)
- machty 14y ago%h1 is totally valid emblem syntax. edit: it's optional, of course, but you have to use it if you need to use non-standard (read: unrecognized by emblem) html tags
- mtsmith85 14y agoNot sure how I missed that. It's a kick-ass little feature in my book, because while I appreciate the "implied HTML tags", I do find them easy to miss.
- jeremyjh 14y agoIt is not an alternative to a handlebars dependency, but it does mean you can write templates without writing any handlebars code. So it is an alternative to writing Handlebars templates, but not an alternative to using them.
- sir_akshay 14y agoIs this production ready / feature complete ? Can I go about replacing my complex handlebars templates? A note on current limitations would be awesome.
- mtsmith85 14y agoI'm really excited to watch this come to further fruition. Alex gave a great quick demo at the last NY Ember.js meetup and I was really impressed. I'm a big fan of Handlebars but really appreciate the cleaner syntax.
- sir_akshay 14y agofyi - for people using ember with rails: https://github.com/alexspeller/emblem-rails https://github.com/alexspeller/emblem-rails
- yefim323 14y agoSo now we have Emblem.js that is compiled to Handlebars.js that can then be compiled straight to JavaScript, that is finally rendered as HTML. When will the madness stop?
- mistercow 14y agoAn alternative point of view is that each level of abstraction offers an insertion point for specialized tweaks without having to drop all the way down to the bottom level. Is that of practical significance? I have no idea. But it could be.
- jacquesc 14y agoActually, Handlebars.js is a 2 step process. First step is compiling the syntax to something the runtime can understand, and the other is actually executing at runtime. Emblem.js just replaces the first step of that process. So technically no more steps than plain Handlebars.
- adamnemecek 14y agoIt's turtles (or you know, compilation) all the way down.
- combataircraft 14y agoWhat is the difference between Emblem and Jade? http://jade-lang.com/ http://jade-lang.com/
- jacquesc 14y agoSimilar syntax. Emblem.js compiles to Handlebars to make it ideal to use for client side templating and Ember.js
- deleted 14y ago[deleted]
- machty 14y agoafaik Jade can't be precompiled; all the parsing needs to happen in the Browser, whereas Handlebars (and therefore Emblem) can be precompiled so that browser processing is minimal. Also, for frameworks that heavily extend Handlebars, such as Ember.js, you'd miss out on a lot of features such as auto-updating templates if you didn't choose a language that compiled to Handlebars, i.e. Handlebars or Emblem.
- nadaviv 14y agoIt can. See the example at https://github.com/visionmedia/jade#a4 https://github.com/visionmedia/jade#a4
- walkon 14y agoInteresting, but I really do not like the implied HTML tags (+ blocking via indentation) going on there. Mentally parsing HTML isn't that bad for someone with a bit of experience. This would add a new wrinkle (i.e. friction) to design.
- whalesalad 14y agoI've been hand coding HTML for years. Switching to HAML was a no brainer. We already write indented HTML, why worry about extra angle bracket syntax and closing tags? I'm surprised by the number of people who don't like using technology for what it was invented to do: make your life easier.
- walkon 14y agoI'm surprised by the number of people who don't like using technology for what it was invented to do: make your life easier. That's my point - I don't see this being much easier or particularly valuable, considering I will always have to be highly competent with straight HTML regardless. To me, this is a mental switch with little payoff (handlebars + HTML is fine).
- machty 14y agoThis is a JavaScript templating language; aside from the fact that I like Emblem's syntax way better, you can't use HAML for JavaScript templates unless you go the hacky/ugly hamlbars route.
- vidarh 14y agoSeeing as you can obviously use technology to not worry about extra angle bracket syntax and closing tags, I don't see why you need to hide them in order to achieve that. I'm surprised by the number of people who want to strip out visual cues like that. To me, that makes life harder.
- danneu 14y agoSome people like different things than the things you like. I like `abstractions` instead of `tools that let me coexist with clunky things`.
- JiPi 14y agoWow, I read 'Ember.js'...:)
- machty 14y agoEmblem is not ashamed of its roots
- st0p 14y agoLooks nice, but why would I choose this over handlebars? Don't wanna sound negative but it looks like just another layer of indirection...
- machty 14y agoMostly because mucking around with raw HTML is a pain, and very much error prone (missing closing tags, etc.). You can either spend the time learning the ins and outs of text editor shortcuts to make your HTML editing easier or you can spend the time working through another layer of abstraction (Emblem in this case).
- st0p 14y agoHmmm, after years of editing HTML and having lots of shortcuts in my muscle memory maybe I forgot that, so yeah that is a valid use case.
- danneu 14y agoThat's a good way of putting it. After half-heartedly learning Zen Coding (aka Emmet), I realized most of the reasons I wanted to learn it were obviated by Haml.
- jacquesc 14y agoMy favorite feature is implicit Ember actions and bound attributes. http://emblemjs.com/syntax/#implicit-bind-attributes http://emblemjs.com/syntax/#implicit-bind-attributes That feature alone made my Ember templates vastly more readable.
- abhishekdelta 14y agoYet another templating language! I really don't see why this is any better than Handlebars itself, other than having lesser number of characters. C'mon ppl, developers are not that lazy!
- denysonique 14y agoBefore I had to make my own jade-handlebars Meteor package. I hope that someone will quickly make a Emblem.js package for Meteor.
- jacquesc 14y agoWe'd love to. Would you be interested in helping out? Shoot me an email (on my profile) and we can coordinate.
- phildeschaine 14y agoStill no template inheritance! I feel like I'm taking crazy pills when that's the one feature I need / care about and none of the newer template languages implement it. I'm spoiled from Django/Jinja2/twig.
- machty 14y agoI'd consider this functionality in the future, but Emblem's bound by the constraints of Handlebars.js. In the meantime, most JS frameworks that you'd use Handlebars/Emblem with provide something pretty close to template inheritance. You'd achieve something similar in Ember with 'outlets', if I understand correctly.
- spullara 14y agoMost of the mustache implementations (.java, hogan.js, php, objc, etc) now support this. https://github.com/mustache/spec/issues/38 https://github.com/mustache/spec/issues/38
- nadaviv 14y agoJade has template inheritance, mixins, includes and plenty of other cool stuff. If you haven't, you might want to check it out: https://github.com/visionmedia/jade https://github.com/visionmedia/jade
- beernutz 14y agoI really dig this kind of simplicity and clarity. The similarity to python really helps to keep things understandable. Any chance of making this work with http://angularjs.org/ http://angularjs.org/ ?
- machty 14y agoNot sure if/how angular makes use of / extends Handlebars, but Emblem internally compiles to a Handlebars AST so it should be flexible enough to integrate with angular, though that's not on my immediate TODO list. Please feel free to have a go at it though, Anglebars seems like the logical place to start
- spullara 14y agoWhy do people do this? Obfuscating the HTML seems like the worst of both worlds. Either use a component model that abstracts it away or use HTML so you can see what is going on. Also, get your code out of the view. Has the world gone mad?
- njharman 14y agoI'm guessing cause they use sucky editors that make writing *ML style markup hard.
- zachrose 14y agoWell yes, but Haml/Emblem are trying to answer the question of where tooling should belong. Is it better to "abstract" syntax with your development environment, or in the source code itself?
- jacquesc 14y agoWriting is the easy part (stuff like zencoding tools help with this). But reading and grokking mountains of HTML code gets difficult for some people (me). That's when these templating languages are a lifesaver.
- machty 14y agoWhat code? The only stuff in there is to respond to changes in underlying data or pass click events to their rightful handler. Also, making something prettier, more readable, and easier to maintain seems like the opposite of obfuscatory, no?
- spullara 14y agoThis is code "each person in people" — once you go down the path of doing that kind of thing, the next thing people will ask for are filters, etc. and eventually half your business logic is in the "template" and half in the view code.
- digitaltoad 14y ago
- randall 14y agoEveryone who doesn't like HTML template languages is going to eventually mention Zencoding. Note: They changed the name to Emmet, and it's still actively maintained and works with Sublime, et. al. http://emmet.io/ http://emmet.io/ If you find Zencoding anywhere, it's outdated and sucky.
- zaphar 14y agoAn html dsl is not a templating language. It's something else that you can use to solve a similar problem. Why do people keep calling them that?
- sagen12 14y agoWhere can I find an example of using it in Node for precompiling templates to html or use it instead of jade?