| 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 100 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 | 111 |
| 112 <p> | 112 <p> |
| 113 In the todo list web app, | 113 In the todo list web app, |
| 114 when the user checks an item as completed, | 114 when the user checks an item as completed, |
| 115 the click is forwarded to the controller. | 115 the click is forwarded to the controller. |
| 116 The controller modifies the model to mark item as completed. | 116 The controller modifies the model to mark item as completed. |
| 117 If the data needs to be persistent, it also makes an async save to the server. | 117 If the data needs to be persistent, it also makes an async save to the server. |
| 118 In rich client-side web app development such as Chrome Apps, | 118 In rich client-side web app development such as Chrome Apps, |
| 119 keeping the data persistent in local storage is also crucial. | 119 keeping the data persistent in local storage is also crucial. |
| 120 In this case, the controller also handles saving the data | 120 In this case, the controller also handles saving the data |
| 121 to the client-side storage such as <a href="app_storage.html">FileSystem API</a>
. | 121 to the client-side storage such as <a href="app_storage">FileSystem API</a>. |
| 122 </p> | 122 </p> |
| 123 | 123 |
| 124 <p> | 124 <p> |
| 125 There are a few variations of the MVC design pattern | 125 There are a few variations of the MVC design pattern |
| 126 such as MVP (Model–View–Presenter) | 126 such as MVP (Model–View–Presenter) |
| 127 and MVVP(Model–View–ViewModel). | 127 and MVVP(Model–View–ViewModel). |
| 128 Even with the so called MVC design pattern itself, | 128 Even with the so called MVC design pattern itself, |
| 129 there is some variation between the traditional MVC pattern | 129 there is some variation between the traditional MVC pattern |
| 130 vs the modern interpretation in various programming languages. | 130 vs the modern interpretation in various programming languages. |
| 131 For example, some MVC–based frameworks will have | 131 For example, some MVC–based frameworks will have |
| (...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 190 | 190 |
| 191 <p> | 191 <p> |
| 192 An adapter, or a proxy, receives the requests from a store and | 192 An adapter, or a proxy, receives the requests from a store and |
| 193 translates them into appropriate actions to take | 193 translates them into appropriate actions to take |
| 194 against your persistent data layer | 194 against your persistent data layer |
| 195 (such as JSON API). | 195 (such as JSON API). |
| 196 This is interesting in the modern web app design | 196 This is interesting in the modern web app design |
| 197 because you often interact with more than one persistent data layer | 197 because you often interact with more than one persistent data layer |
| 198 such as a remote server and browser’s local storage. | 198 such as a remote server and browser’s local storage. |
| 199 Chrome Apps provides both | 199 Chrome Apps provides both |
| 200 <a href="storage.html">Chrome Storage API</a> and | 200 <a href="storage">Chrome Storage API</a> and |
| 201 <a href="fileSystem.html">HTML 5 fileSystem API</a> for client side storage. | 201 <a href="fileSystem">HTML 5 fileSystem API</a> for client side storage. |
| 202 </p> | 202 </p> |
| 203 | 203 |
| 204 <p>Pros:</p> | 204 <p>Pros:</p> |
| 205 | 205 |
| 206 <ul> | 206 <ul> |
| 207 <li>Simple to use and understand.</li> | 207 <li>Simple to use and understand.</li> |
| 208 </ul> | 208 </ul> |
| 209 | 209 |
| 210 <p> | 210 <p> |
| 211 Cons: | 211 Cons: |
| (...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 280 </p> | 280 </p> |
| 281 | 281 |
| 282 <ul> | 282 <ul> |
| 283 <li>Each ‘Page/Screen’ of the app now requires a lot of boilerplate to w
rite or update: Model, View, Controller, AppController.</li> | 283 <li>Each ‘Page/Screen’ of the app now requires a lot of boilerplate to w
rite or update: Model, View, Controller, AppController.</li> |
| 284 </ul> | 284 </ul> |
| 285 | 285 |
| 286 <h3 id="recommended">Recommended MVC frameworks</h3> | 286 <h3 id="recommended">Recommended MVC frameworks</h3> |
| 287 | 287 |
| 288 <p> | 288 <p> |
| 289 MVC is crucial to designing Chrome Apps. | 289 MVC is crucial to designing Chrome Apps. |
| 290 We recommend the following <a href="contentSecurityPolicy.html">CSP–Compli
ant</a> MVC frameworks | 290 We recommend the following <a href="contentSecurityPolicy">CSP–Compliant</
a> MVC frameworks |
| 291 for writing secure and scalable Chrome Apps: | 291 for writing secure and scalable Chrome Apps: |
| 292 </p> | 292 </p> |
| 293 | 293 |
| 294 <ul> | 294 <ul> |
| 295 <li><a href="http://angularjs.org/">AngularJS</a> | 295 <li><a href="http://angularjs.org/">AngularJS</a> |
| 296 (<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> | 296 (<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> |
| 297 <li><a href="http://www.kendoui.com/">Kendo UI</a> | 297 <li><a href="http://www.kendoui.com/">Kendo UI</a> |
| 298 (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app">Photo Booth R
eference App</a>)</li> | 298 (<a href="https://github.com/GoogleChrome/kendo-photo-booth-app">Photo Booth R
eference App</a>)</li> |
| 299 <li><a href="http://www.sencha.com/">Sencha</a> | 299 <li><a href="http://www.sencha.com/">Sencha</a> |
| 300 (<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> | 300 (<a href="https://github.com/GoogleChrome/sencha-video-player-app">Video Playe
r Reference App</a> and <a href="sencha_framework">Build Apps with Sencha Ext JS
tutorial</a>)</li> |
| 301 </ul> | 301 </ul> |
| 302 | 302 |
| 303 <h2 id="resources">Useful resources</h2> | 303 <h2 id="resources">Useful resources</h2> |
| 304 | 304 |
| 305 <h3 id="online">Online</h3> | 305 <h3 id="online">Online</h3> |
| 306 | 306 |
| 307 <ul> | 307 <ul> |
| 308 <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li> | 308 <li><a href="http://www.html5rocks.com/">HTML5Rocks.com</a></li> |
| 309 <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/b
ook/">Learning JavaScript Design Patterns</a> | 309 <li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/b
ook/">Learning JavaScript Design Patterns</a> |
| 310 (by Addy Osmani)</li> | 310 (by Addy Osmani)</li> |
| 311 <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li> | 311 <li><a href="http://addyosmani.github.com/todomvc/">TodoMVC</a></li> |
| 312 </ul> | 312 </ul> |
| 313 | 313 |
| 314 <h3 id="books">Books</h3> | 314 <h3 id="books">Books</h3> |
| 315 | 315 |
| 316 <ul> | 316 <ul> |
| 317 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> | 317 <li><a href="http://www.amazon.com/JavaScript-Web-Applications-Alex-MacC
aw/dp/144930351X">JavaScript Web Applications</a> |
| 318 (By Alex MacCaw)</li> | 318 (By Alex MacCaw)</li> |
| 319 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> | 319 <li><a href="http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/d
p/0596806752/ref=pd_sim_b_2">JavaScript Patterns</a> |
| 320 (By Stoyan Stefonov)</li> | 320 (By Stoyan Stefonov)</li> |
| 321 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> | 321 <li><a href="http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Za
kas/dp/1449327680">Maintainable JavaScript</a> |
| 322 (By Nicolas Z. Zakas)</li> | 322 (By Nicolas Z. Zakas)</li> |
| 323 </ul> | 323 </ul> |
| 324 | 324 |
| 325 <p class="backtotop"><a href="#top">Back to top</a></p> | 325 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |