Merge Chromium + Blink git repositories

[chromium-blink-merge.git] / chrome / common / extensions / docs / templates / articles / app_frameworks.html

<h1>MVC Architecture</h1>


<p>
As modern browsers become more powerful with rich features,
building full-blown web applications in JavaScript is not only feasible,
but increasingly popular.
Based on
<a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&maxlabel=Jan+15+2012">trends</a>
on <a href="http://httparchive.org/">HTTP Archive</a>,
deployed JavaScript code size has grown 45% over the course of the year.
</p>

<img src="{{static}}/images/jstransferrequests.png"
     width="568"
     height="292"
     alt="JS transfer size and JS requests">

<p>
With JavaScript's popularity climbing,
our client-side applications are much more complex than before.
Application development requires collaboration from multiple developers.
Writing <strong>maintainable</strong> and
<strong>reusable</strong> code is crucial in the new web app era.
The Chrome App, with its rich client-side features, is no exception.
</p>

<p>
Design patterns are important to write maintainable and reusable code.
A pattern is a reusable solution that can be applied to commonly occurring problems in software design &mdash;
in our case &mdash; writing Chrome Apps.
We recommend that developers decouple the app
into a series of independent components following the MVC pattern.
</p>

<p>
In the last few years,
a series of JavaScript MVC frameworks have been developed,
such as <a href="http://backbonejs.org/">backbone.js</a>, <a href="http://emberjs.com/">ember.js</a>, <a href="http://angularjs.org/">AngularJS</a>, <a href="http://sencha.com/">Sencha</a>, <a href="http://www.kendoui.com/">Kendo UI</a>, and more.
While they all have their unique advantages, each one of them follows some form of MVC pattern
with the goal of encouraging developers to write more structured JavaScript code.
</p>

<h2 id="mvc">MVC pattern overview</h2>

<p>
MVC offers architectural benefits over standard JavaScript &mdash;
it helps you write better organized, and therefore more maintainable code.
This pattern has been used and extensively tested
over multiple languages and generations of programmers.
</p>

<p>
MVC is composed of three components:
</p>

<img src="{{static}}/images/mvc.png"
     width="466"
     height="303"
     alt="model-view-controller">

<h3 id="model">Model</h3>

<p>
Model is where the application’s data objects are stored.
The model doesn’t know anything about views and controllers.
When a model changes, typically it will notify its observers that a change has occurred.
</p>

<p>
To understand this further, let’s use the Todo list app, a simple, one page web app that tracks your task list.
</p>

<br>

<img src="{{static}}/images/todos.png"
     width="444"
     height="366"
     alt="model-view-controller">

<p>
The model here represents attributes associated
with each todo item such as description and status.
When a new todo item is created,
it is stored in an instance of the model.
</p>

<h3 id="view">View</h3>

<p>
View is what's presented to the users and how users interact with the app.
The view is made with HTML, CSS, JavaScript and often templates.
This part of your Chrome App has access to the DOM.
</p>

<p>
For example, in the above todo list web app,
you can create a view that nicely presents the list of todo items to your users.
Users can also enter a new todo item through some input format;
however, the view doesn’t know how to update the model because that’s the controller’s job.
</p>

<h3 id="controller">Controller</h3>

<p>
The controller is the decision maker and the glue between the model and view.
The controller updates the view when the model changes.
It also adds event listeners to the view and
updates the model when the user manipulates the view.
</p>

<p>
In the todo list web app,
when the user checks an item as completed,
the click is forwarded to the controller.
The controller modifies the model to mark item as completed.
If the data needs to be persistent, it also makes an async save to the server.
In rich client-side web app development such as Chrome Apps,
keeping the data persistent in local storage is also crucial.
In this case, the controller also handles saving the data
to the client-side storage such as <a href="app_storage">FileSystem API</a>.
</p>

<p>
There are a few variations of the MVC design pattern
such as MVP (Model&ndash;View&ndash;Presenter)
and MVVP(Model&ndash;View&ndash;ViewModel).
Even with the so called MVC design pattern itself,
there is some variation between the traditional MVC pattern
vs the modern interpretation in various programming languages.
For example, some MVC&ndash;based frameworks will have
the view observe the changes in the models
while others will let the controller handle the view update.
This article is not focused on the comparison of various implementations
but rather on the separation&ndash;of&ndash;concerns and
it's importance in writing modern web apps.
</p>

<p>
If you are interested in learning more,
we recommend <a href="https://plus.google.com/u/0/115133653231679625609/posts">Addy Osmani's</a> online book: <a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JavaScript Design Patterns</a>.
</p>

<p>
To summarize, the MVC pattern brings modularity
to application developers and it enables:
</p>

<ul>
        <li>Reusable and extendable code.</li>
        <li>Separation of view logic from business logic.</li>
        <li>Allow simultaneous work between developers who are responsible
                for different components (such as UI layer and core logic).</li>
        <li>Easier to maintain.</li>
</ul>

<h2 id="mvcpersistence">MVC persistence patterns</h2>

<p>
There are many different ways of implementing persistence
with an MVC framework, each with different trade&ndash;offs.
When writing Chrome Apps,
choose the frameworks with MVC and persistence patterns
that feel natural to you and fit you application needs.
</p>

<h3 id="model_persistence">Model does its own persistence - ActiveRecord pattern</h3>

<p>
Popular in both server&ndash;side frameworks like Ruby on Rails,
and client-side frameworks like
<a href="http://backbonejs.org">Backbone.js</a> and
<a href="http://emberjs.com/">ember.js</a>,
the ActiveRecord pattern places the responsibility
for persistence on the model itself
and is typically implemented via JSON API.
</p>

<p>
A slightly different take from
having a model handle the persistence
is to introduce a separate concept of Store and Adapter API.
Store, Model and
Adapter (in some frameworks it is called Proxy)
work hand by hand.
Store is the repository that holds the loaded models,
and it also provides functions such as creating,
querying and filtering the model instances contained within it.
</p>

<p>
An adapter, or a proxy, receives the requests from a store and
translates them into appropriate actions to take
against your persistent data layer
(such as JSON API).
This is interesting in the modern web app design
because you often interact with more than one persistent data layer
such as a remote server and browser’s local storage.
Chrome Apps provides both
<a href="storage">Chrome Storage API</a> and
<a href="fileSystem">HTML 5 fileSystem API</a> for client side storage.
</p>

<p>Pros:</p>

<ul>
        <li>Simple to use and understand.</li>
</ul>

<p>
Cons:
</p>

<ul>
        <li>Hard to test since the persistence layer is ‘baked’ into the object hierarchy.</li>
        <li>Having different objects use different persistent stores is difficult
                (for example, FileSystem APIs vs indexedDB vs server&ndash;side).</li>
        <li>Reusing Model in other applications may create conflicts,
                such as sharing a single Customer class between two different views,
                each view wanting to save to different places.</li>
</ul>

<h3 id="controller_persistence">Controller does persistence</h3>

<p>
In this pattern, the controller holds a reference
to both the model and a datastore
and is responsible for keeping the model persisted.
The controller responds to lifecycle events like Load, Save, Delete,
and issues commands to the datastore to fetch or update the model. 
</p>

<p>
Pros:
</p>

<ul>
        <li>Easier to test, controller can be passed a mock datastore to write tests against.</li>
        <li>The same model can be reused with multiple datastores just by constructing controllers with different datastores.</li>
</ul>

<p>
Cons:
</p>

<ul>
        <li>Code can be more complex to maintain.</li>
</ul>

<h3 id="app_controller">AppController does persistence</h3>

<p>
In some patterns, there is a supervising controller responsible
for navigating between one MVC and another.
The AppController decides, for example,
that a ‘Back’ button moves the client from an editing screen
(which contains MVC widgets/formats),
to a settings screen.
</p>

<p>
In the AppController pattern,
the AppController responds to events
and changes the app’s current screen by issuing a call
to the datastore to load any models needed and
constructing all of the matching views and controllers for that screen.
</p>

<p>
Pros:
</p>

<ul>
        <li>Moves persistence layer even higher up the stack where it can be easily changed.</li>
        <li>Doesn’t pollute lower level controllers like a DatePickerController with the need to know about persistence.</li>
</ul>

<p>
Cons:
</p>

<ul>
        <li>Each ‘Page/Screen’ of the app now requires a lot of boilerplate to write or update: Model, View, Controller, AppController.</li>
</ul>

<h3 id="recommended">Recommended MVC frameworks</h3>

<p>
MVC is crucial to designing Chrome Apps.
We recommend the following <a href="contentSecurityPolicy">CSP&ndash;Compliant</a> MVC frameworks
for writing secure and scalable Chrome Apps:
</p>

<ul>
  <li><a href="http://angularjs.org/">AngularJS</a>
  (<a href="https://github.com/GoogleChrome/textdrive-app">Text Drive Reference App</a> and <a href="angular_framework">Build Apps with AngularJS tutorial</a>)</li>
  <li><a href="http://www.kendoui.com/">Kendo UI</a>
  (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app">Photo Booth Reference App</a>)</li>
  <li><a href="http://www.sencha.com/">Sencha</a>
  (<a href="https://github.com/GoogleChrome/sencha-video-player-app">Video Player Reference App</a> and <a href="sencha_framework">Build Apps with Sencha Ext JS tutorial</a>)</li>
</ul>

<h2 id="resources">Useful resources</h2>

<h3 id="online">Online</h3>

<ul>
        <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li>
        <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">Learning JavaScript Design Patterns</a>
                (by Addy Osmani)</li>
        <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li>
</ul>

<h3 id="books">Books</h3>

<ul>
        <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X">JavaScript Web Applications</a>
                (By Alex MacCaw)</li>
        <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a>
                (By Stoyan Stefonov)</li>
        <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680">Maintainable JavaScript</a>
                (By Nicolas Z. Zakas)</li>
</ul>

<p class="backtotop"><a href="#top">Back to top</a></p>