The graph is comes as no surprise. Just in the last two and a half years the average script size (for the Alexa top 1.000.000 sites) has doubled. So like it or not we are going to have to live with JS.
Add an aside to the problem definition: and these apps should be maintanable in the long run!Refer the fact that in terms of DOM manipulation jQuery is the clear winner, so that issue is pretty much solved.
But jQuery does not give you any structure, so it’s fairly easy to fall into the trap of creating spagetthi code (with a mess of plugins and event listeners, network calls, you name it…)
Basically we have to apply the same standards we use on our server side code.
Make a remark about the fact that not all of these frameworks strictly follow the MVC pattern, but rather adapt it to its needs. Usually you end up with a model and a view, but might not have a controller in the mix (ergo the MV*).Remember: JS MV* is only a tool, for simple web-pages where you need to add a little bit of flair, it might be overkill.
Choice is a double edged knife: you can use a JS stack that is a great fit for your needs, just be ready to spend some time looking for the right plugins etc. On the other hand, frameworks like ember just make those decisions for you, so you’re ready to start focusing on your app right away.Note thatBackbone already comes with a Js templating lib – via Underscore.js, although you are free to use any other library such as Handlebars;In my oppinion this is a great library to get started with because with a moderate investment in time you can do some interesting thingsAngular stands appart from backbone and ember by the fact that it uses the DOM structure (via directives) to drive the app’s behaviour, instead of the JS code (Backbone views and Ember controllers)Refer that ember uses: Models, Views, Controllers, Routers, Templates, persistence, and for each of these deals with the most common issues (e.g. managing nested views, something that backbone doesn´t do).Although it relies heavily on conventions (e.g. you have to name the variables in a certain way in your handlebars templates so that databinding actually works) usually those are quite sensible.
In the next few slides I’ll talk a little bit about my experience with backbone when going beyond the simple TODO list app.
Remember, YOU are the bottleneck, take everything that helps in that front.
Topics• Why is client side MV* relevant• Libraries / Frameworks• Backbone.js in the wild
The world’s most popular programming language05010015020025020/01/1120/02/1120/03/1120/04/1120/05/1120/06/1120/07/1120/08/1120/09/1120/10/1120/11/1120/12/1120/01/1220/02/1220/03/1220/04/1220/05/1220/06/1220/07/1220/08/1220/09/1220/10/1220/11/1220/12/1220/01/1320/02/1320/03/1320/04/1320/05/13Average js size over time (kb)Source: http://httparchive.org
We are expected to build enduring apps, thatprovide user experiences on par with nativeapps.That goes well beyond DOM manipulation.
Using only jQuery (for instance), it’s easy tocreate a mess of callbacks and selectors.
We need to focus on higher level concerns rightfrom the start:– Structure;– Persistence strategies;– Dependency management;– Code re-use (DRY);– Testing;These types of frameworks help us do just that.
JS MV* frameworks offer a simple way toseparate concerns and provide much neededstructure to web apps.
We have a lot of choice, to name a few:You can view a comple list @ http://todomvc.com
Categorizing libraries/frameworksFlexibleBarebonesLow learning curveOpinionatedLots of features out-of-the boxHigher learning curve
Sure, you could do a large web-app using just aDOM manipulation library… or no libraries atall…
An interesting side effect was that we startedlooking at our server side code more like an API:– We could re-use the exact same API for a mobileapp, delivering it very rapidly;– At a “macro” level, it helps separate the concernseven further: server side stuff should just providea clean API, the web browser is a deliverymechanism, just like a mobile app or thecommand line.
Noteworthy backbone plugins:Synapse (data binding – seems to have been discontinued):https://github.com/bruth/synapseValidation:https://github.com/thedersen/backbone.validationBackbone fetch cache:https://github.com/mrappleton/backbone-fetch-cacheMarionette:https://github.com/marionettejs/backbone.marionette
Thanks!Bruno FélixSoftware Engineer @ White Road Softwarebruno.email@example.com@felix19350