jsfoo submission
TRANSCRIPT
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