jsfoo backbone updated
TRANSCRIPT
![Page 1: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/1.jpg)
Backbone And Marionette
Take Over The World
How we at Adobe put our application on steroids…
![Page 2: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/2.jpg)
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.
About Me
![Page 3: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/3.jpg)
3
And these were just the ones that we could measure.. Shocked?! So were we..
Our Story At Adobe
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
time1 week ½ day
![Page 4: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/4.jpg)
4
Let’s see how we did it…
![Page 5: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/5.jpg)
5
![Page 6: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/6.jpg)
6
Un-opinionated Separates data from your view Models Collections Modular
Why Backbone?
![Page 7: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/7.jpg)
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
Backbone: Bring it on!!
![Page 8: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/8.jpg)
8
Structure
![Page 9: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/9.jpg)
9
But we felt something was missing…
![Page 10: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/10.jpg)
10
What Backbone Lacked…
Backbone
Handling Zombie Views
Complex View
Management
Messaging Channels
That we needed…
![Page 11: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/11.jpg)
11
… We Gained With Marionette
Backbone Marionette
Handling Zombie Views
Complex View
Management
Messaging Channels
![Page 12: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/12.jpg)
12
And thus began our love affair with Marionette…
![Page 13: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/13.jpg)
13
View: Life In The Fast Lane
INITIALIZE
RENDER
DESTROY
ATTACH
SHOW
![Page 14: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/14.jpg)
14
THE VIEWS :
Item View Collection View Composite View Layout View
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
![Page 15: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/15.jpg)
15
THE ITEM VIEW
View that represents a single item.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
![Page 16: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/16.jpg)
16
THE COLLECTIONVIEW
Collection of multiple item views.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
![Page 17: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/17.jpg)
17
THE COMPOSITE VIEW
Collection View with a template.
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
![Page 18: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/18.jpg)
18
THE LAYOUT VIEW
Big Daddy of all views Contains multiple regions A region can be mapped to a view module
Marionette’s Master Builders
ITEM VIEW
COLLECTION VIEW
LAYOUT VIEW
COMPOSITE VIEW
![Page 19: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/19.jpg)
19
And we thought…Why not…
REDUCE… REUSE…
RECYCLE..
![Page 20: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/20.jpg)
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
Reusable Components
![Page 21: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/21.jpg)
21
Method and procedure to achieve reusability in Marionette:◦ Attach view to a region
That’s it…Seriously!!
Reusable Components
![Page 22: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/22.jpg)
22
Taking it to the next level…
![Page 23: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/23.jpg)
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
Taking it to the next level…
![Page 24: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/24.jpg)
24
So… What’s Next??
![Page 25: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/25.jpg)
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)
Central Messaging Channel
![Page 26: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/26.jpg)
26
Central Messaging Channel
Requester
Responder
Requester
Requester
Response
Request “R1”
Request “R1”
Request “R1”
Response
Response
![Page 27: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/27.jpg)
27
Central Messaging Channel
Response
Request
![Page 28: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/28.jpg)
28
It was fast…
But not fast enough!
![Page 29: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/29.jpg)
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!!
The Cacheable Radio (An Original Project)
![Page 30: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/30.jpg)
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
The Cacheable Radio
![Page 31: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/31.jpg)
31
Central Messaging Channel
Request
Request
Request
Time Consuming Responder
Response: List Of Items
Request: List Of Items
Cacheable
Radio
Cached Response: List Of Items
Cached Response: List Of
Items
Request: List Of Items
Request: List Of Items
![Page 32: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/32.jpg)
Q/A@harshit040591
![Page 33: JSFoo Backbone Updated](https://reader031.vdocuments.mx/reader031/viewer/2022032122/55d233b8bb61eb30358b456c/html5/thumbnails/33.jpg)
33