I agree that putting the two languages (one for the logic, and one for the view) into the same file, even if it still sounds silly to a lot of experienced developers, is an attractive idea especially when you start to think in term of UI “components”. For those who are not convinced by this, I recommended watching the infamous Rethinking best practices talk by Pete Hunt from the ReactJS team, in which he’s explaining what we really mean when we say that we want “separation of concerns”.
So then if you decide to merge these two languages in one file you can have different approaches. One would be to create a new language, aka JSX, which is basically a mix of JavaScript and HTML that provide a convenient way for JavaScript functions to return HTML elements. One drawback here being that if you want to use any other language combination (coffeescript, typescript, purescript, jade) you have to create a new compiler for this new language combination.
As @numtel pointed out, ES6 template string come to the rescue here. Ideally we shouldn’t even call something like Template.fromString
but instead use a template string language prefix:
class myComponent {
whoiam() {
return 'World';
}
renderFunction() {
return html`
<h1>Hello #{world}</h1>
`;
}
}
In the example above you could replace the html
word by jade
for instance.
One other approach is the one you took @chompomonim in the OP, which is using the view language (HTML, Jade) as the “root” language. This is also the road RiotJS took with the slight difference that they wrap the JavaScript code in a script tag:
<h1>Hello #{whoiam}</h1>
<script>
this.whoiam = function() {
return 'World';
};
</script>
I tend to think that this second approach would work pretty well with Blaze.
Merging the component logic and view in the same file could also be an opportunity to re-consider where you define event handling. The Blaze 2 proposal could allow us to define events without css selector matching by defining them with the template language instead of using an “event map” — this is also what ReactJS and other do.
I’m genuinely curious what others think of this. In the meantime if you are using Sublime Text and want a quick way to switch between a template view and its associated logic I can’t recommend enough using the “Jump to definition” shortcut provided by Slava’s plugin. Also if you are using coffeescript+jade, Pierre-Éric created a package to use them in a single file (is this still maintained?).