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: | harshit-jain |
| View: | 21 times |
| Download: | 0 times |
Backbone And Marionette
Take Over The World
How we at Adobe put our application on steroids…
2
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.
About Me
3
And these were just the ones that we could measure.. Shocked?! So were we..
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
time1 week ½ day
4
Let’s see how we did it…
5
6
Un-opinionated Separates data from your view Models Collections Modular
Why Backbone?
7
Model : Handles business logic and data
Collection : Array of models
View : User Interface
Event : Actions on UI elements
Routing : Navigation to application sub-modules
Backbone: Bring it on!!
8
Structure
9
But we felt something was missing…
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
12
And thus began our love affair with Marionette…
13
View: Life In The Fast Lane
INITIALIZE
RENDER
DESTROY
ATTACH
SHOW
14
THE VIEWS :
Item View Collection View Composite View Layout View
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
15
THE ITEM VIEW
View that represents a single item.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
16
THE COLLECTIONVIEW
Collection of multiple item views.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
17
THE COMPOSITE VIEW
Collection View with a template.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
18
THE LAYOUT VIEW
Big Daddy of all views Contains multiple regions A region can be mapped to a view module
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
19
And we thought…Why not…
REDUCE… REUSE…
RECYCLE..
20
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
21
Method and procedure to achieve reusability in Marionette:◦ Attach view to a region
That’s it…Seriously!!
Reusable Components
22
Taking it to the next level…
23
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
Taking it to the next level…
24
So… What’s Next??
25
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)
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!
29
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!!
The Cacheable Radio (An Original Project)
30
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
The Cacheable Radio
31
Central Messaging Channel
Request
Request
Request
Time Consuming Responder
Response: List Of Items
Request: List Of Items
Cacheable
Radio
Cached Response: List Of Items
Cached Response: List Of
Items
Request: List Of Items
Request: List Of Items
Q/A@harshit040591
33
