The document discusses how Adobe improved the performance and maintainability of one of their applications by adopting the Marionette JavaScript framework. Some key metrics like page load time and number of bugs were significantly reduced after the transition. Marionette's modular approach with separation of views, models, and logic helped achieve reusability. Later, a caching layer was added to Marionette's messaging system to reduce processing time for frequent requests.
1. 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.
2
3. And these were just the ones that we could measure..
Shocked?! So were we..
3
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. 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
17. THE COMPOSITE VIEW
Collection View
with a template.
17
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
18
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
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
20
21. Method and procedure to achieve reusability
in Marionette:
◦ Attach view to a region
That’s it…Seriously!!
21
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
23
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)
25
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!!
29
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
30