Backbone And Marionette Take Over The World

How we at Adobe put our application on steroids…

2

About Me

• 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.

3

Our Story At Adobe

• And these were just the ones that we could measure..• Shocked?! So were we..

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…

5

6

Why Backbone?

• Un-opinionated• Separates data from

your view• Models• Collections• Modular

7

Backbone: Bring it on!!

• Model : Handles business logic and data

• Collection : Array of models

• View : User Interface

• Event : Actions on UI elements

• Routing : Navigation to application sub-modules

8

Structure

9

But we felt something was missing…

10

What Backbone Lacked… That we needed..

Backbone

Handling Zombie Views

Complex View Management

Messaging Channels

11

… We Gained With Marionette

Backbone Marionette

Handling Zombie Views

Complex View Management

Messaging Channels

12

And thus began our love affair with Marionette…

13

View: Life In The Fast Lane

INITIALIZE

RENDER

DESTROY

ATTACH

SHOW

14

Marionette’s Master Builders

THE VIEWS :

• Item View• Collection View• Composite View• Layout View

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

15

THE ITEM VIEW

• View that represents a single item.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Marionette’s Master Builders

16

THE COLLECTION VIEW

• Collection of multiple item views.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Marionette’s Master Builders

17

THE COMPOSITE VIEW

• Collection View with a template.

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Marionette’s Master Builders

18

THE LAYOUT VIEW

• Big Daddy of all views• Contains multiple

regions• A region can be

mapped to a view module

ITEM VIEW

COLLECTION VIEW

LAYOUT VIEW

COMPOSITE VIEW

Marionette’s Master Builders

19

And we thought.. Why not..

Reduce… Reuse…

Recycle…

20

Reusable Components

• 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

21

Reusable Components

• Method and procedure to achieve reusability in Marionette:– Attach view to a region

That’s it…Seriously!!

22

Taking it to the next level…

23

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 past

• Just switch the UI template and all the underlying logic works as before

24

So… What’s Next??

25

Central Messaging Channel

• 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)

26

Central Messaging Channel

Requester

Responder

Requester

Requester

Response

Request “R1”

Request “R1”

Request “R1”

Response

Response

27

Central Messaging Channel

Response

Request

28

It was fast..But not fast enough!!

29

The Cacheable Radio (An Original Project)

• 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!!

30

The Cacheable Radio

• 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

31

Central Messaging Channel

Request

Request

Request

Time Consuming Responder

Response: List Of Items

Request: List Of Items

Cacheable RadioCached Response: List Of Items

Cached Response: List Of Items

Request: List Of Items

Request: List Of Items

Q/A

@harshit040591

33