New MVC client side JavaScript framework - Serenade.js

https://github.com/elabs/serenade.js

by lest • 14 years ago

95 52 14 years ago

github.com

haclifford• 14 years ago

Doesn't seem particularly game-changing.

I do like the haml style templating though, anything like this exist standalone with coffeescipt not js syntax?

We currently use eco (https://github.com/sstephenson/eco), but that's standard html.

jfirebaugh• 14 years ago

I just released a port of Slim with embedded CoffeeScript: https://github.com/jfirebaugh/skim

If you prefer HAML, check out https://github.com/9elements/haml-coffee

secoif2• 14 years ago

Stylus is an excellent contender. http://learnboost.github.com/stylus/

I'd vouch it makes haml look like someone took stylus code and spat random characters all over it. It's even got its own compass equivalent, nib: https://github.com/visionmedia/nib

jsavimbi4• 14 years ago

Stylus is for CSS, not HTML.

jnicklas8• 14 years ago

You can use Serenade pretty much as a static template engine if you want to. It's quite small (9k), so not a huge dependency.

arnorhs• 14 years ago

I don't really understand or appreciate what makes this framework better than something like Backbone, Spine or Sproutcore.

Or to put it in another way: What problem does this solve that Backbone/Spine/Sproutcore don't solve as well?

jpeterson• 14 years ago

It seems like *.js framework is the new "Hello World".

phillmv2• 14 years ago

No, no, those are todo list apps.

Besides, we're still in the first to second generation of js rich client frameworks. All this crazy amount of experimentation is great; it'll settle down more towards the fourth to fifth generation.

bionicbrian• 14 years ago

Ha! When I saw the headline I did think "MVC Frameworks are the new Todo List app". I knew someone would say something to that effect. :)

That said, the amount of effort in these frameworks is admirable and pushes ideas and best practices forward.

goblin892• 14 years ago

I don't think it makes sense to compare this to Backbone.js, which is more of a library than framework.

weixiyen• 14 years ago

It's not about solving a problem. It's about solving the same problem slightly better. The reason why new MVC frameworks pop up all the time is because everybody organizes and writes their code differently based on their own use cases and mental model of how things should work.

There is no ubiquitous JS MVC framework because to be honest, either the APIs out there are not very good or it's too much overhead to simply pick up and use for a beginner in many cases.

dagw• 14 years ago

I don't know, but reading through this framework gave me an instant, "I can use this in my current project" feel that Backbone/Spine/Sproutcore didn't. As someone else pointed out it's not so much about solving different problems or solving problems better, as solving problems in a way that feels more natural to your problem and style of programming.

SonicSoul• 14 years ago

it's "super pretty"

jonicklas• 14 years ago

Good point, I wrote up a blog post explaining why I wrote Serenade. I don't feel that it solves any new problems, but it solves existing problems in a different way. Check it out! http://elabs.se/blog/33-why-serenade

cjkihlbom• 14 years ago

Implementation of todomvc in Serenade.js: https://github.com/elabs/serenade_todomvc/blob/gh-pages/js/a...

jashkenas2• 14 years ago

Whoa ... it's pretty cool to see bits and pieces of CoffeeScript's compiler (http://coffeescript.org/documentation/docs/grammar.html), broken out and reused for Serenade's template language (https://github.com/elabs/serenade.js/blob/master/src/grammar...). Fun.

jnicklas8• 14 years ago

I really love CoffeeScript. I hope you don't mind I… borrowed… some parts. It was hugely helpful, especially since I'm quite new to writing parsers and lexers. I put attribution in the README and the license file, in case you missed it.

ryanfitz2• 14 years ago

I would avoid even trying this framework out because its written in coffeescript. I have nothing against cs and write most of my clientside app code in cs, but I think libraries should avoid using it. Simply because it makes debugging more complicated. It adds in an extra step or 2 every time you see a js error, you need to read the compiled code and then figure out where that is actually coming from, from an unknown codebase (your framework/lib).

jeswin• 14 years ago

1. CoffeeScript produces very readable JS. Not the same as handwritten, but close enough.

2. This is a framework. You are less likely to be debugging into it, unlike your own client-side libs written in CoffeeScript (which you mention doesn't bother you).

I don't agree with avoiding a library because it is written in CS.

ryanfitz2• 14 years ago

When I am trying out/learning a new library or framework, I do a lot of tinkering, looking around and reading the source code. Coffeescript output is definitely readable, but you need to take a tiny bit of time to translate the coffeescript output, to the actual source so you can read it, checkout the comments etc to understand how you are supposed to do something. This added bit of time adds up quickly for me.

For example when I was first learning backbone, which is only around 1000 lines and very well documented. I was constantly reading the source code to understand why something wasn't working for me or how to implement something. Projects typically aren't nearly as well documented as backbone, making understanding the sourcecode even more essential.

benatkin• 14 years ago

I'm very glad you posted your comment. It's a reasonable view and the one that I wanted to respond to.

To the author: I don't think you should rewrite this in JavaScript if you like CoffeeScript. I think you should write all of the examples in your README in CoffeeScript. I don't think you'll draw interest from people who aren't open to CoffeeScript, at least early on. Those who are already using CoffeeScript or are curious (I'm somewhere between the two) will prefer all the examples to be in CoffeeScript.

Besides that, there is some overhead in switching between reading the two languages. I was wondering why there were so many parens when I hit the first couple JavaScript examples.

jnicklas8• 14 years ago

I went kind of the opposite way and rewrote the initial example in JavaScript. I'd really prefer if people didn't get hung up on the fact that it's CoffeeScript, I don't think it should matter too much to people using the framework what language the internals are written in.

goblin892• 14 years ago

Very nice! Looks like Backbone.js turned into a framework with batteries included and in-template event bindings.

I think it would make more sense to liken Serenade to Brunch, a kind of framework based on Backbone. Serenade certainly looks promising in comparison.

phzbOx• 14 years ago

I'm never tired of seeing new MVC js framework. I feel like there are still lots of improvement to be made. About serenade, I appreciate the simple object/arrays for models and also the innovative templating with bindings. (Instead of writing them in the html).

jnicklas8• 14 years ago

Thank you :) Glad you like it!

randall• 14 years ago

Like. I think this feels more sparse than I'd expect, which is a good thing. Not going to switch from backbone right now though, but I appreciate the experimentation.

xxiao• 14 years ago

next framework should be named "YAJF", yet another javascript framework

ozziegooen• 14 years ago

Another .js framework? Must be that time of week again

no-espam• 14 years ago

Some advice on views, returning DOM nodes is not performant. DOM insertion is costly. Consider a view representing a message in a chat room or tweets. What if you want to insert 1000 messages in to a parent view? Building all the messges in a string is much faster than inserting a DOM element for each message. Google jsperf and see how badly the jquery template engine performs which is based on DOMs versus micro-templating.

nyrb• 14 years ago

Nice to see another JavaScript MVC Framework written in CoffeeScript. Almost like Spine.js (http://spinejs.com/) A new thing to try it out later, but I'll stay with Backbone.js for now.

prodigal_erik• 14 years ago

We have a responsibility to provide server-side rendering accessible to the rest of the web. Can Serenade.js do this? The existing examples are all broken—no content whatsoever without running custom code at the client.

jnicklas8• 14 years ago

It can, kind of. Though you will probably have to re-render on the client to get all the events to attach. See the section about express.js support at the bottom of the README (I haven't pushed it to npm yet, so you won't be able to install it, fyi). Other web frameworks aren't currently supported. Theoretically it's possible, though not very convenient.

prima-facie• 14 years ago

It baffles me how developers keep pushing for classes and classical inheritance in JS, since it's clearly not how it was meant to be used. Why not play to the language's strenghts instead?

jashkenas2• 14 years ago

That's really not the case. If you know how to use JavaScript's prototypes -- the "prototype" property and constructor functions -- you'll find that you're using them in precisely the way that's best described as a class.

Developers are just calling a rose a rose.

jnicklas8• 14 years ago

It doesn't really push towards classes and classical inheritance, you're free to use any object with the framework that you with, which is not the case with most other frameworks that I've seen. It does use them internally, but that's only because I like it that way, I don't want to push that view onto users of this framework.

arturadib• 14 years ago

You can achieve code compactness without CoffeeScript:

http://agilityjs.com

jnicklas8• 14 years ago

That's a very cool framework, I hadn't seen it. Thanks for the tip. Feels like they have a lot of similar ideas to mine. Not really sure what Serenade has to do with CoffeeScript though?

fingerprinter• 14 years ago

I am quite literally at a loss. I want to do something in Node with an MVC JS framework, but there seem to be hundreds of them. There is no clear front runner and that has to be hurting uptake.

So, what is the #1, #2 and #3 out there and where should I be spending my (not enough of it with two kids) time these days?

mjor• 14 years ago

As someone who hasn't really explored client-side MVC yet, my impression is that Backbone.js is the clear leader at this point.

TimRR• 14 years ago

This is just what the doctor ordered, for me. Been searching for a lightweight pure framework that plays nice with other mobile app dev frameworks. Looks like something I can wrap my head around. Someone mentioned it earlier, this got just as much to do with mental models.

New MVC client side JavaScript framework - Serenade.js

Related Stories