JSFOO 2015 Proposed Talk : Backbone And Marionette : Take Over The World

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
12
Marionette…

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