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

4. Let’s see how we did it…
4

5. 5

6.  Un-opinionated
 Separates data from your view
 Models
 Collections
 Modular
6

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

8. 8

9. But we felt something was
missing…
9

10. 10
Backbone
Handling Zombie Views 
Complex View
Management

Messaging Channels 
That we needed…

11. 11
Backbone Marionette
Handling Zombie Views  
Complex View
Management
 
Messaging Channels  

12. And thus began our love affair
with Marionette…
12

13. 13
INITIALIZE
RENDER
DESTROY
ATTACH
SHOW

14. THE VIEWS :
 Item View
 Collection View
 Composite View
 Layout View
14
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW

15. THE ITEM VIEW
 View that represents a single item.
15
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW

16. THE COLLECTION
VIEW
 Collection of
multiple item views.
16
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW

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

19. 19
And we thought…
Why not…

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

22. 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
23

24. 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)
25

26. 26
Requester
Responder
Requester
Requester
Request “R1”
Response

27. 27

28. 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!!
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

31. 31
Request
Request
Request
Time
Consuming
Responder
Cacheable
Radio

32. @harshit040591

33. 33