Sunday, February 24, 2013

On modern Javascript applications

I use to consider myself more a backend python type developer, but the last year I was writing javascript / java most of the time. So I guess I'm a front-end guy now.

We've been building a medium-large Backbone site, with a java backend. Because we all have MVC backgrounds (grails, django, mvc, etc), and zero experience doing Java2EE stuff, we choose Play (1.2 at the time) as our backend framework.

The site is in production now, running smoothly. It's not perfect but is improving all the time. I've learnt a lot, specially front-end wise. Here are some of my impressions.

  • RequireJS. It's a must have for any medium to large size project. It allows you to break down your javascript application in modules, and declare dependencies inside each module. Specially with a code-intensive framework like backbone, managing all your files quickly becomes a nightmare unless you use some type of dependency management.
  • Backbone. It's small, minimalistic, and very good at what it does. It has components for managing routes, events, models with backend synchronization, easy prototypal inheritance, and that's it. Paired with something like RequireJS allows you to have a very modularized application, with reusable components (if you have good coding practices).

    The issue with backbone is that being so minimalistic, you need to build a LOT of infrastructure, so you need to know a lot of javascript techniques for modularizing your code, writing reusable code, etc. It's unlikely you get it right the first time.

    One of the things it lacks with rotundity is some mechanism for data-binding between your models and the DOM.

    And believe me, you want data-binding.

    So, at this point you have several options:
    1. Manually bind some DOM elements with your model and viceversa (using backbone events).
      This is very labor-intensive, boring, and not cool at all. Small changes in the UI logic require non-trivial amount of work.
    2. Use one of the available plugins, like Backbone.ModelBinder, or RivetsJS. Oh, you will also need Backbone.DeepModel, which is rather buggy and handle a relative small set of cases. RivetsJS is a little more powerful than ModelBinder, but still very very minimalistic compared to KnockoutJS or AngularJS.
      This is an improvement over the manual approach, but still requires tremendous amount of work for everything beyond the minimum.
    3. Use KnockoutJS on top of your backbone views. The problem with this approach is that KO's models are different than BB's models. So you need a way to transform between the two models. That can be done by hand, or via KnockbackJS.
      If you go this way, be prepared to have a steep learning curve, and hard time finding guys with all the skill set needed to be productive quickly in your project. Of course they will learn, eventually.
      And of course KO is very idiosyncratic and some people argue that it allows you to do some dirty stuff.
  • AngularJS. The alternative to Backbone / Spine / Knockout / whatever is to use Angular.
    It has almost all components needed for building a full javascript application (the missing part is RequireJS, but it's no so terrible). It has a completely different way of doing things, in particular because it goes to great lengths to make you difficult to mix your view logic with DOM manipulation. I won't describe Angular here, but suffice to say I'll be writing most of my javascript apps with Angular in the near future. Key features of AngularJS are:
    • You can build stuff FAST.
    • Forces you to have modularized components
    • Which makes controller logic much more easy to test
    • Allows you to create reusable widgets, Services, Factories
    • POJOs everywhere. No need to learn a new api for model manipulation, just plain JS.
    • Boilerplate code reduced dramatically
    • Makes your dog happy, helps fight global warming, etc etc etc.
  • Yeoman. It is described as "a workflow; a collection of tools and best practices working in harmony to make developing for the web even better". It's comprised of three components:
    • Yo. Scaffolding and Grunt task management
    • Bower. Client side package / dependency management
    • Grunt. Used to build / test / preview your project. You can make your own grunt task easily.
  • Now, the question is this: Why on earth you're not using Yeoman???? Really, I guaranty you'll become a better person / happier / healthier if you use Yeoman. 

No comments:

Post a Comment