Andrija Jambrović: Why you should use Marionette.js 
(explained on an legacy app re-write to a product)

I work in the Solvers and this is my boss

We help people solve their problems

Topics

  • Backbone.js
  • Marionette.js
  • Rewrite and the results
  • Questions

In the beginning...

In the beginning v2... 

How did we end up here???

Backbone.js

Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term.

 Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It’s not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements.

The library doesn’t focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. Backbone also doesn’t prescribe a specific template engine. While you are free to use the micro-templating offered by Underscore.js (Backbone’s only hard dependency), views can bind to HTML constructed using your templating solution of choice.

Addy Osmani, Backbone fundamentals

Models

Collections

 Routers

Events

Views

Zombies!

... and Zombie remedy!

Backbone Wrapup

Marionette.js - El Framework de Backbone!

MarionetteJS — formerly known as Backbone.Marionette — builds on top of Backbone’s event-driven architecture, and adds a myriad of tools for building larger, more structured Backbone applications while implementing a lot of functionality that is commonly used across most applications. As its creator, Derick Bailey, said himself: Marionette “make[s] your Backbone.js apps dance with a composite application architecture!”

- Joseph Zimmerman, Better Backbone Applications with MarionetteJS 

Modules (deprecated)

Renderer and Template Cache

Application, Router and Regions

Views and view related objects

Layout View

Views and view related objects

Item, Collection and Composite Views

Backbone Object - Super POJO

Controller (deprecated)

Zombies!!!

A Marionette application (1)

A Marionette application (2)

A Marionette application (3)

The Rewrite

The sort-of-RESTfull-JSON-API and the SuperModel

The Arhitecture (Books recommendations)

First book

Second book

Third book

Code organization

So what are our results?

  • Cleaned up codebase
  • Increased code reuse
  • Lowered entry barrier
  • Faster default setup
  • ability to offer more to the customer

To sum it up...

How long? Not long.

Because what you reap,

Is what you sow.

 

-Wake up, Rage Against the Machine

Thank you!

Questions?

Made with Slides.com