33
Backbone And Marionette Take Over The World How we at Adobe put our application on steroids…
| Date post: | 18-Aug-2015 |
| Category: |
Technology |
| Upload: | harshit040591 |
| View: | 19 times |
| Download: | 1 times |
Backbone And Marionette Take Over The World
How we at Adobe put our application on steroids…
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.
2
About Me
And these were just the ones that we could measure.. Shocked?! So were we..
3
Our Story At Adobe
Before After
Page load time 3 sec ~ 0.5 sec
Weird unexplained bugs > 15 < 5
Network Time (combined) 40 sec 10 sec
Module UI redesign time 1 week ½ day
Let’s see how we did it…
4
5
Un-opinionated
Separates data from your view
Models
Collections
Modular
6
Why Backbone?
Model : Handles business logic and data
Collection : Array of models
View : User Interface
Event : Actions on UI elements
Routing : Navigation to application sub-modules
7
Backbone: Bring it on!!
8
Structure
But we felt something was missing…
9
10
What Backbone Lacked…
Backbone
Handling Zombie Views
Complex View Management
Messaging Channels
That we needed…
11
… We Gained With Marionette
Backbone Marionette
Handling Zombie Views
Complex View
Management
Messaging Channels
And thus began our love affair with
12
Marionette…
13
View: Life In The Fast Lane
INITIALIZE
RENDER
DESTROY
ATTACH
SHOW
THE VIEWS :
Item View Collection View Composite View Layout View
14
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE ITEM VIEW
View that represents a single item.
15
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE COLLECTIONVIEW
Collection of multiple item views.
16
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE COMPOSITE VIEW
Collection View with a template.
17
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE LAYOUT VIEW
Big Daddy of all views
Contains multiple regions
A region can be mapped to a view module
18
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
19
And we thought…Why not…
REDUCE… REUSE…
RECYCLE..
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
20
Reusable Components
Method and procedure to achieve reusability in Marionette:◦ Attach view to a region
That’s it…Seriously!!
21
Reusable Components
22
Taking it to the next level…
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
23
Taking it to the next level…
24
So… What’s Next??
The next Marionette version will come along with a messaging library: Backbone.Radio
But the library is available to use with the current version also
Requests unlike events generally want something (data or action to be performed)
25
Central Messaging Channel
26
Central Messaging Channel
Requester
Responder
Requester
Requester
Response
Request “R1”
Request “R1”
Request “R1”
Response
Response
27
Central Messaging Channel
Response
Request
28
It was fast…
But not fast enough!
It’s an internal add-on we are creating for Backbone.Radio
Why???◦ Radio request-reply loops usually take some time◦ It can be either processing time or network time◦ And guess who solves this problem!! The mighty Cacheable
Radio!!
29
The Cacheable Radio
(An Original Project)
It acts as a wrapper over the regular Backbone.Radio library
Saves time by browser-caching radio requests (avoiding unnecessary server calls)
It also has an in-built function to invalidate stored data if a fresh API call is required
30
The Cacheable Radio
31
Request
Request
Request
Time Consuming Responder
Response: List Of Items
Request: List Of Items
Cacheable RadioCached Response: List Of Items
Cached Response: List Of Items
Request: List Of Items
Request: List Of Items
The Cacheable Radio
Q/A@harshit040591
33
