Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How we at Adobe put our application on
steroids…
 Harshit Jain
◦ Developer at Adobe.
◦ Web developer for 2 years with a passion for good UI/UX.
◦ Likes solving usability ...
 And these were just the ones that we could measure..
 Shocked?! So were we..
3
Before After
Page load time 3 sec ~ 0.5 ...
Let’s see how we did it…
4
5
 Un-opinionated
 Separates data from your view
 Models
 Collections
 Modular
6
 Model : Handles business logic and data
 Collection : Array of models
 View : User Interface
 Event : Actions on UI e...
8
But we felt something was
missing…
9
10
Backbone
Handling Zombie Views 
Complex View
Management

Messaging Channels 
That we needed…
11
Backbone Marionette
Handling Zombie Views  
Complex View
Management
 
Messaging Channels  
And thus began our love affair
with Marionette…
12
13
INITIALIZE
RENDER
DESTROY
ATTACH
SHOW
THE VIEWS :
 Item View
 Collection View
 Composite View
 Layout View
14
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSIT...
THE ITEM VIEW
 View that represents a single item.
15
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE COLLECTION
VIEW
 Collection of
multiple item views.
16
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE COMPOSITE VIEW
 Collection View
with a template.
17
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
THE LAYOUT VIEW
 Big Daddy of all
views
 Contains multiple
regions
 A region can be
mapped to a view
module
18
ITEM VIE...
19
And we thought…
Why not…
 Marionette by design treats all views as small,
reusable entities.
 Views consist of
◦ A Model/A Collection
◦ A Templat...
 Method and procedure to achieve reusability
in Marionette:
◦ Attach view to a region
That’s it…Seriously!!
21
22
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 ...
24
So… What’s Next??
 The next Marionette version will come along with a
messaging library: Backbone.Radio
 But the library is available to u...
26
Requester
Responder
Requester
Requester
Request “R1”
Response
27
28
It was fast…
But not fast enough!
 It’s an internal add-on we are creating for
Backbone.Radio
 Why???
◦ Radio request-reply loops usually take some
time
◦...
 It acts as a wrapper over the regular
Backbone.Radio library
 Saves time by browser-caching radio
requests (avoiding un...
31
Request
Request
Request
Time
Consuming
Responder
Cacheable
Radio
@harshit040591
33
Upcoming SlideShare
Loading in …5
×

JSFoo Backbone Updated

159 views

Published on

JSFoo Backbone Updated

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JSFoo Backbone Updated

  1. 1. How we at Adobe put our application on steroids…
  2. 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. 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. 4. Let’s see how we did it… 4
  5. 5. 5
  6. 6.  Un-opinionated  Separates data from your view  Models  Collections  Modular 6
  7. 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. 8
  9. 9. But we felt something was missing… 9
  10. 10. 10 Backbone Handling Zombie Views  Complex View Management  Messaging Channels  That we needed…
  11. 11. 11 Backbone Marionette Handling Zombie Views   Complex View Management   Messaging Channels  
  12. 12. And thus began our love affair with Marionette… 12
  13. 13. 13 INITIALIZE RENDER DESTROY ATTACH SHOW
  14. 14. THE VIEWS :  Item View  Collection View  Composite View  Layout View 14 ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
  15. 15. THE ITEM VIEW  View that represents a single item. 15 ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
  16. 16. THE COLLECTION VIEW  Collection of multiple item views. 16 ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
  17. 17. THE COMPOSITE VIEW  Collection View with a template. 17 ITEM VIEW COLLECTION VIEW LAYOUT VIEW COMPOSITE VIEW
  18. 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. 19 And we thought… Why not…
  20. 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. 21.  Method and procedure to achieve reusability in Marionette: ◦ Attach view to a region That’s it…Seriously!! 21
  22. 22. 22 Taking it to the next level…
  23. 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. 24 So… What’s Next??
  25. 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. 26 Requester Responder Requester Requester Request “R1” Response
  27. 27. 27
  28. 28. 28 It was fast… But not fast enough!
  29. 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. 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. 31 Request Request Request Time Consuming Responder Cacheable Radio
  32. 32. @harshit040591
  33. 33. 33

×