View
22
Download
0
Category
Preview:
Citation preview
2
About Me
• 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.
3
Our Story At Adobe
• And these were just the ones that we could measure..• Shocked?! So were we..
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
7
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
10
What Backbone Lacked… That we needed..
Backbone
Handling Zombie Views
Complex View Management
Messaging Channels
11
… We Gained With Marionette
Backbone Marionette
Handling Zombie Views
Complex View Management
Messaging Channels
14
Marionette’s Master Builders
THE VIEWS :
• Item View• Collection View• Composite View• Layout View
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
15
THE ITEM VIEW
• View that represents a single item.
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
Marionette’s Master Builders
16
THE COLLECTION VIEW
• Collection of multiple item views.
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
Marionette’s Master Builders
17
THE COMPOSITE VIEW
• Collection View with a template.
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
Marionette’s Master Builders
18
THE 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
Marionette’s Master Builders
20
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
21
Reusable Components
• Method and procedure to achieve reusability in Marionette:– Attach view to a region
That’s it…Seriously!!
23
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
25
Central Messaging Channel
• 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)
26
Central Messaging Channel
Requester
Responder
Requester
Requester
Response
Request “R1”
Request “R1”
Request “R1”
Response
Response
29
The Cacheable Radio (An Original Project)
• 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!!
30
The Cacheable Radio
• 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
31
Central Messaging Channel
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
Recommended