Practice MVC as features,    not frameworks                     MVC        DexterYy @
http://site.douban.com/118836/
)•   “       ”             LBS•   “       ”             3D•   “AJAX   ”•               web app         Flash•
XD
XD•   MVC•   MVC
“                    ”•     “        ”    ——            WASD•    ——   vs       Graph•    ——             “      ”
“                         ”•   Bring real-life to software, rethought for the web     Google+ slogan    XX•               ...
“AJAX                ”•                 /     viewport           google maps•                 JSON•    ——     web•        ...
“                ” web app•   Single Page App wiki•                            GUI    ——           layout•                ...
“       ”•                      View    CouchDB•             “   ”••                            “      ”
zhuangbility...
••         URL••••   webapp
MVC
MVC
MVC•   MVC•   MVC
MVC•         MVC•         MVC    MVC
MVC•           MVC•           MVC    MVC          MVC
MVC•           MVC•           MVC    MVC          MVC
•••
MVC      &
1.•              OzJS•    CommonJS      module•••        JS
••      Model   View•   “MVC       ”
•                    “          ”      micro-framework•   Thomas Fuchs:    Zepto and the rise of the JavaScript    Micro-F...
2.                      message passing•    Alan Kay: "OOP to me means only messaging, ..."•              PubSub / EventEm...
•   Observer•      View     Controller•
•   Observer•              reset
•   Observer        event            /       /“       ”“               ”==
3.              URL Router•               web•     Single-page WebApp    URL            SEO•   URL       DOM•   URL•   URL...
•            url•   router         30
4. UI               delegate •      uiproxy •      UI •            DOM
•     className•       class•   UI    View    View    DOM•    View         UI•                 ——>                  ——>   ...
5.                 Render•                  1                2•                  1            2   DOM•        API DOM SVG ...
5.                 Render•                  1                2•                  1            2   DOM•        API DOM SVG ...
HTML4
•   template•   format python•   convertTpl micro-templating    John Resig/Underscore
•   DomCanvas                         layout•     DOM        Canvas API•         ie6•       SVG    raphael.js
6.      DataSource•   Model•
•
module M V     C    XD  MVC
Model•           Model                     URL•   Model    View                Controller        Model•   Model           ...
View•               + UI            View widget/    View•   View      Model Controller                   /      Martin Fow...
View•     View                  UI    Controller    •        UI              DOM    •     web        UI                   ...
Controller•             URL routing API    widget•       View     Model•                                     App      MVC
MVC                                     Server Model    Pluggable                                    Server Contorller    ...
MVCSmalltalk-80   Ruby On Rails                                       ASP.NET  Cocoa                 Model View Controller...
We need SMART Models, THINControllers, and DUMB Views
MVC   Its no big deal
MVC                Its no big deal                              Thanks•                   http://www.douban.com/people/Dex...
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
【前端Mvc】mvc behind-alphatown
Upcoming SlideShare
Loading in...5
×

【前端Mvc】mvc behind-alphatown

6,387

Published on

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • frontEnd-MVC
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
6,387
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
107
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "【前端Mvc】mvc behind-alphatown"

  1. 1. Practice MVC as features, not frameworks MVC DexterYy @
  2. 2. http://site.douban.com/118836/
  3. 3. )• “ ” LBS• “ ” 3D• “AJAX ”• web app Flash•
  4. 4. XD
  5. 5. XD• MVC• MVC
  6. 6. “ ”• “ ” —— WASD• —— vs Graph• —— “ ”
  7. 7. “ ”• Bring real-life to software, rethought for the web Google+ slogan XX• 3D• GUI Metaphor
  8. 8. “AJAX ”• / viewport google maps• JSON• —— web• “ ” overlap widget
  9. 9. “ ” web app• Single Page App wiki• GUI —— layout• —— layout
  10. 10. “ ”• View CouchDB• “ ”•• “ ”
  11. 11. zhuangbility...
  12. 12. •• URL•••• webapp
  13. 13. MVC
  14. 14. MVC
  15. 15. MVC• MVC• MVC
  16. 16. MVC• MVC• MVC MVC
  17. 17. MVC• MVC• MVC MVC MVC
  18. 18. MVC• MVC• MVC MVC MVC
  19. 19. •••
  20. 20. MVC &
  21. 21. 1.• OzJS• CommonJS module••• JS
  22. 22. •• Model View• “MVC ”
  23. 23. • “ ” micro-framework• Thomas Fuchs: Zepto and the rise of the JavaScript Micro-Frameworks• Dustin Diaz: Ender.js - The open submodule library
  24. 24. 2. message passing• Alan Kay: "OOP to me means only messaging, ..."• PubSub / EventEmitter / CustomEvent / ...• Observer• MVC
  25. 25. • Observer• View Controller•
  26. 26. • Observer• reset
  27. 27. • Observer event / /“ ”“ ”==
  28. 28. 3. URL Router• web• Single-page WebApp URL SEO• URL DOM• URL• URL• UNIX Plan 9• “Plan 9 ”• URL WebApp “ ”
  29. 29. • url• router 30
  30. 30. 4. UI delegate • uiproxy • UI • DOM
  31. 31. • className• class• UI View View DOM• View UI• ——> ——> ——>
  32. 32. 5. Render• 1 2• 1 2 DOM• API DOM SVG Canvas
  33. 33. 5. Render• 1 2• 1 2 DOM• API DOM SVG Canvas• API
  34. 34. HTML4
  35. 35. • template• format python• convertTpl micro-templating John Resig/Underscore
  36. 36. • DomCanvas layout• DOM Canvas API• ie6• SVG raphael.js
  37. 37. 6. DataSource• Model•
  38. 38.
  39. 39. module M V C XD MVC
  40. 40. Model• Model URL• Model View Controller Model• Model Model make Controller•
  41. 41. View• + UI View widget/ View• View Model Controller / Martin Fowler Passive View• View web MVC web GUI UI DOM View View DOM
  42. 42. View• View UI Controller • UI DOM • web UI / • Google+ circle• Cocoa UI View View DOM View
  43. 43. Controller• URL routing API widget• View Model• App MVC
  44. 44. MVC Server Model Pluggable Server Contorller Widgets http/ / Model Controller / View / App / URL UI/DOM HTML / /
  45. 45. MVCSmalltalk-80 Ruby On Rails ASP.NET Cocoa Model View Controller: History, theory and usage
  46. 46. We need SMART Models, THINControllers, and DUMB Views
  47. 47. MVC Its no big deal
  48. 48. MVC Its no big deal Thanks• http://www.douban.com/people/Dexter_Yy/• blog http://www.limboy.com• http://site.douban.com/118836/• MVC module https://github.com/dexteryy/OzJS/tree/master/ mod
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×