| OLD | NEW |
| 1 <h1>MVC Architecture</h1> | 1 <h1>MVC Architecture</h1> |
| 2 | 2 |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 As modern browsers become more powerful with rich features, | 5 As modern browsers become more powerful with rich features, |
| 6 building full-blown web applications in JavaScript is not only feasible, | 6 building full-blown web applications in JavaScript is not only feasible, |
| 7 but increasingly popular. | 7 but increasingly popular. |
| 8 Based on | 8 Based on |
| 9 <a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&m
axlabel=Jan+15+2012">trends</a> | 9 <a href="http://httparchive.org/trends.php?s=intersection&minlabel=Jan+20+2011&m
axlabel=Jan+15+2012">trends</a> |
| 10 on <a href="http://httparchive.org/">HTTP Archive</a>, | 10 on <a href="http://httparchive.org/">HTTP Archive</a>, |
| (...skipping 18 matching lines...) Expand all Loading... |
| 29 Design patterns are important to write maintainable and reusable code. | 29 Design patterns are important to write maintainable and reusable code. |
| 30 A pattern is a reusable solution that can be applied to commonly occurring probl
ems in software design — | 30 A pattern is a reusable solution that can be applied to commonly occurring probl
ems in software design — |
| 31 in our case — writing Chrome packaged apps. | 31 in our case — writing Chrome packaged apps. |
| 32 We recommend that developers decouple the app | 32 We recommend that developers decouple the app |
| 33 into a series of independent components following the MVC pattern. | 33 into a series of independent components following the MVC pattern. |
| 34 </p> | 34 </p> |
| 35 | 35 |
| 36 <p> | 36 <p> |
| 37 In the last few years, | 37 In the last few years, |
| 38 a series of JavaScript MVC frameworks have been developed, | 38 a series of JavaScript MVC frameworks have been developed, |
| 39 such as <a href="http://backbonejs.org/">backbone.js</a>, <a href="http://emberj
s.com/">ember.js</a>, <a href="http://angularjs.org/">AngularJS</a>, <a href="ht
tp://sencha.com/">Sencha</a>, <a href="http://kendo.com/">Kendo UI</a>, and more
. | 39 such as <a href="http://backbonejs.org/">backbone.js</a>, <a href="http://emberj
s.com/">ember.js</a>, <a href="http://angularjs.org/">AngularJS</a>, <a href="ht
tp://sencha.com/">Sencha</a>, <a href="http://www.kendoui.com/">Kendo UI</a>, an
d more. |
| 40 While they all have their unique advantages, each one of them follows some form
of MVC pattern | 40 While they all have their unique advantages, each one of them follows some form
of MVC pattern |
| 41 with the goal of encouraging developers to write more structured JavaScript code
. | 41 with the goal of encouraging developers to write more structured JavaScript code
. |
| 42 </p> | 42 </p> |
| 43 | 43 |
| 44 <h2 id="mvc">MVC pattern overview</h2> | 44 <h2 id="mvc">MVC pattern overview</h2> |
| 45 | 45 |
| 46 <p> | 46 <p> |
| 47 MVC offers architectural benefits over standard JavaScript — | 47 MVC offers architectural benefits over standard JavaScript — |
| 48 it helps you write better organized, and therefore more maintainable code. | 48 it helps you write better organized, and therefore more maintainable code. |
| 49 This pattern has been used and extensively tested | 49 This pattern has been used and extensively tested |
| (...skipping 239 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 289 | 289 |
| 290 <h3 id="recommended">Recommended MVC frameworks</h3> | 290 <h3 id="recommended">Recommended MVC frameworks</h3> |
| 291 | 291 |
| 292 <p> | 292 <p> |
| 293 MVC is crucial to designing Chrome packaged apps. | 293 MVC is crucial to designing Chrome packaged apps. |
| 294 We recommend the following <a href="app_csp.html">CSP–Compliant</a> MVC fr
ameworks | 294 We recommend the following <a href="app_csp.html">CSP–Compliant</a> MVC fr
ameworks |
| 295 for writing secure and scalable Chrome packaged apps: | 295 for writing secure and scalable Chrome packaged apps: |
| 296 </p> | 296 </p> |
| 297 | 297 |
| 298 <ul> | 298 <ul> |
| 299 » <li><a href="http://angularjs.org/">AngularJS</a> | 299 <li><a href="http://angularjs.org/">AngularJS</a> |
| 300 » » (<a href="https://github.com/GoogleChrome/textdrive-app">Text Dr
ive Reference App</a>)</li> | 300 (<a href="https://github.com/GoogleChrome/textdrive-app">Text Drive Reference
App</a> and <a href="angular_framework.html">Build Apps with AngularJS tutorial<
/a>)</li> |
| 301 » <li><a href="http://kendo.com/">Kendo UI</a> | 301 <li><a href="http://www.kendoui.com/">Kendo UI</a> |
| 302 » » (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app"
>Photo Booth Reference App</a>)</li> | 302 (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app">Photo Booth R
eference App</a>)</li> |
| 303 » <li><a href="http://www.sencha.com/">Sencha</a> | 303 <li><a href="http://www.sencha.com/">Sencha</a> |
| 304 » » (<a href="https://github.com/GoogleChrome/sencha-video-player-ap
p">Video Player Reference App</a>)</li> | 304 (<a href="https://github.com/GoogleChrome/sencha-video-player-app">Video Playe
r Reference App</a> and <a href="sencha_framework.html">Build Apps with Sencha E
xt JS tutorial</a>)</li> |
| 305 </ul> | 305 </ul> |
| 306 | 306 |
| 307 <h2 id="resources">Useful resources</h2> | 307 <h2 id="resources">Useful resources</h2> |
| 308 | 308 |
| 309 <h3 id="online">Online</h3> | 309 <h3 id="online">Online</h3> |
| 310 | 310 |
| 311 <ul> | 311 <ul> |
| 312 <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li> | 312 <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li> |
| 313 <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/b
ook/">Learning JavaScript Design Patterns</a> | 313 <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/b
ook/">Learning JavaScript Design Patterns</a> |
| 314 (by Addy Osmani)</li> | 314 (by Addy Osmani)</li> |
| 315 <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li> | 315 <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li> |
| 316 </ul> | 316 </ul> |
| 317 | 317 |
| 318 <h3 id="books">Books</h3> | 318 <h3 id="books">Books</h3> |
| 319 | 319 |
| 320 <ul> | 320 <ul> |
| 321 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> | 321 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> |
| 322 (By Alex MacCaw)</li> | 322 (By Alex MacCaw)</li> |
| 323 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> | 323 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> |
| 324 (By Stoyan Stefonov)</li> | 324 (By Stoyan Stefonov)</li> |
| 325 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> | 325 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> |
| 326 (By Nicolas Z. Zakas)</li> | 326 (By Nicolas Z. Zakas)</li> |
| 327 </ul> | 327 </ul> |
| 328 | 328 |
| 329 <p class="backtotop"><a href="#top">Back to top</a></p> | 329 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |