Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Chrome Extensions - Backbone in a Spineless World
Transcript of Chrome Extensions - Backbone in a Spineless World
Chrome message passing.
So how can we bind the views to the data model using the
Models and collections in Backbone are used to represent objects and arrays.
it's easy to integrate with REST-ful APIs
simple inheritance mechanism
many utility functions provided for working with collections
event handling mechanism to bind with views Simply put, views are a collection of UI fragments, which provide user interaction with the application's data model. So Backbone is a useful framework, but how can we apply it to Chrome extensions? Inherit from Model and Collection with base classes that enable easy synchronization between the different contexts using message passing under the hood: ChromeModel and ChromeCollection A Chrome model or collection is instantiated with a unique generated cid and boolean master flag. Backbone provides us with a generic framework for implementing application UIs. With some effort, it is possible to use this framework within Chrome browser extensions.
The solution described here is experimental and although a proof of concept has been implemented, there may be performance implications for high volume or frequently changing data models. Data Model
(Models and Collections) View View View Event Binding Data Model
(Models and Collections) View View Chrome Message Passing Background Script Content Script View View Popup Script Master Data Model
(Models and Collections) View View Chrome Message Passing Background Script Content Script Slave Data Model
(Models and Collections) View View Popup Script Slave Data Model
(Models and Collections) Slave Data Model Slave Data Model Slave Data Model Slave Data Model Master Data Model Broadcast Message Flow Slave Data Model Slave Data Model Slave Data Model Slave Data Model Master Data Model Broadcast Message Flow Chrome Extensions Backbone in a Spineless World Introduction Backbone Advantages Simulated One Version of the Truth One Version of the Truth What About Chrome? Implementation Details The Problem Summary and Disclaimer Broadcasting from the Background Script Changes are sent to all slave instances of the data model in content scripts and popup scripts. Broadcasting from a Content Script Changes are sent first to the master data model in the background script.
This in turn broadcasts them to all slaves instances. The browser extension's data model should be a singleton structure of models and collections. It should instantiated be in the background script, together with the main application logic. OK, so these would be our views ... In a Chrome browser extension, the UI consists of:
HTML fragments injected into content pages