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 |