This document discusses MVC patterns in front-end development. It begins by introducing MVC in Alphatown and how it is implemented using modules, templates, and pub/sub patterns. Next, it describes what MVC is in the real world, including classes, event-driven systems, and dependency management. Finally, it provides more details on how to implement MVC with models, controllers, views, templating, and dependency management, and how to enable real-time capabilities using technologies like WebSockets.

1. MVC Practice in Front-End
Dexter.Yy & Clyde.L @ Douban.Inc

MVC in Alphatown

MVC in Real World

MVC in Action

2. 说在前面的话
前端工程师的修炼方向？
如何要使用 MVC ？
Web Applications!

3. MVC in Alphatown
1. MVC 的发展历程，以及 MVC 在 Alphatown 中的
体现
2. 模块化的实现 – OzJS
3. 模板的选择 – Micro-templating
4. PubSub, Promise 模式的使用
5. 可插拔的 widgets ，采用 sandbox 来包装

4. MVC in Real World
What is MVC?
Classes
Event-Driven System
Dependency Management
Real-time Web Applications

5. Classes
Modularity: Classes in JavaScript
1. Inheritance (prototypical)
2. Methods (static/public/private)
3. Control scope in Class (proxy)

6. Event-Driven
1. Event System of DOM (namespaced,
customized)
2. PubSub, Observer Pattern

7. MVC in details
Model & data
Controler & State
View & Templating

8. Dependency Management
CommonJS
Module Loaders (Yabble,
RequireJS...)
Server-side wrapping-up
Alternatives: Sprockets ， LABjs
(script loader)

9. Getting Real(-time)
From Comet to WebSocket (socket.io)
1. Low protocal overhead
2. full-duplex
3. persisted
With PubSub, correct Models, real-
time is quite straightforward.