jsfoo submission

Backbone, Marionette and Jasmine: A Game Changing Combination

About Us

• Neha Singhal – Developer at Adobe. – Active in web development and UI for the past 2.5 years. – Likes solving interesting problems involving UX, cross-browser issues and maintainability

of code. – On a personal front, an avid dancer, loves to travel and is a big fan of animated movies.

• Harshit Jain – Developer at Adobe. – Web developer for 2 years with a passion for good UI/UX. – Likes solving usability and performance issues with his team. – Enjoys music and playing his guitar in his free time. – Loves hacking away on new libraries and frameworks, trying to figure out if he can use it

for his next project.

Why Backbone?

• Flexible• Un-opinionated• Models• Collections• Separates data from

your view• Modular

Backbone : Bring it on!!

• Model : Handles business logic and data

• Collection : Array of models

• View : User Interface

• Event : Actions on UI elements

• Routing : Navigation to application sub-modules

What Backbone Lacks…

• Life Cycle Management• Handling Zombie Views

• Complex View Management• Messaging Channels

… We Gain With Marionette

• Life Cycle Management• Handling Zombie Views

• Complex View Management• Messaging Channels

View: Life In The Fast Lane

INITIALIZE

RENDER

DESTROY

ATTACH

SHOW

View Management

• Item View• Collection View• Composite View• Layout View

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Item View

• View that represents a single item.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Collection View

• Collection of multiple item views.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Composite View

• Collection View with a template.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Layout View

• Big Daddy of all views• Contains multiple

regions• A region can be

mapped to a view module

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Reusable Components

• Whaaaaaaaatt!!!! Is it really possible ??

Reusable Components

• Marionette by design treats all views as small, reusable entities.

• Views consist of– A Model/A Collection– A Template– Accompanying styling– Events

• Marionette conveniently bundles all these together so that they can be reused as many times as a developer wants

Reusable Components

• Method and procedure to achieve reusability in Marionette:– Attach view to a region

That’s it…Seriously!!

Central Messaging Channel

Plug And Play

It’s not magic.. Ok, maybe a little

Plug And Play

• Marionette detaches the code for the View from the business logic

• Painful UI modifications will now be a thing of the past

• Just switch the UI template and all the underlying logic works as before

Jasmine is..

• Javascript Testing Framework• Independent of browsers, DOM • Supports multiple javascript frameworks• Headless running out of the box• Easy to use• Clean Syntax

So let’s see what we’re up against

• Suite : to describe a section of your code

• Specs: it creates a new spec

• Expectations : what you expect the code block to do

So let’s see what we’re up against

• Matchers : utility functions– toEqual– toMatch– toBeTruthy– And the list goes on and on