SlideShare a Scribd company logo
1 of 52
Download to read offline
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

•                                           3D

•   GUI                               Metaphor
“AJAX                ”
•                 /
     viewport           google maps

•
                 JSON

•
    ——     web

•                         “     ”
       overlap                            widget
“                ” web app


•   Single Page App wiki

•                            GUI
    ——           layout

•                                ——
            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-Frameworks

•   Dustin Diaz:
    Ender.js - The open submodule library
2.                      message passing
•    Alan Kay: "OOP to me means only messaging, ..."
•              PubSub / EventEmitter /
     CustomEvent / ...

•                              Observer

•    MVC
•   Observer

•
      View     Controller

•
•   Observer

•              reset
•   Observer        event


            /       /


“       ”

“               ”



==
3.              URL Router
•               web

•     Single-page WebApp    URL            SEO

•   URL       DOM

•   URL

•   URL

•   UNIX                          Plan 9

•   “Plan 9
                        ”

•   URL    WebApp   “        ”
•            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   Canvas
5.                 Render
•                  1                2


•                  1            2   DOM


•        API DOM SVG   Canvas



•                                    API
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
                    Model                 make
                             Controller


•
View
•               + UI            View widget/
    View

•   View
      Model Controller                   /
      Martin Fowler       Passive View

•   View
                  web MVC           web
          GUI              UI        DOM
        View View        DOM
View
•     View                  UI
    Controller

    •        UI              DOM

    •     web        UI                        /


    •                     Google+    circle

•                   Cocoa            UI       View
             View                   DOM
                          View
Controller
•
             URL routing API
    widget

•       View     Model


•                                     App

      MVC
MVC
                                     Server Model


    Pluggable
                                    Server Contorller
    Widgets
                             http

/                 /                        Model


    Controller
                  /                        View
      / App

                      /

            URL           UI/DOM    HTML      /         /
MVC
Smalltalk-80   Ruby On Rails


                                       ASP.NET



  Cocoa




                 Model View Controller: History, theory and usage
We need SMART Models, THIN
Controllers, and DUMB Views
MVC   It's no big deal
MVC                It's 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

More Related Content

What's hot

Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introductioncherukumilli2
 
Building Custom Visual Composer Elements
Building Custom Visual Composer ElementsBuilding Custom Visual Composer Elements
Building Custom Visual Composer ElementsBurak Dogan
 
2013 04-02-server-side-backbone
2013 04-02-server-side-backbone2013 04-02-server-side-backbone
2013 04-02-server-side-backboneSC5.io
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용NAVER D2
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationMarakana Inc.
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require jsAhmed Elharouny
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceTasneem Sayeed
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUITilo Mitra
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?phegaro
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013vibration.sk
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your FrontendArush Sehgal
 
Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolboxSkysoul Pty.Ltd.
 

What's hot (20)

Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Building Custom Visual Composer Elements
Building Custom Visual Composer ElementsBuilding Custom Visual Composer Elements
Building Custom Visual Composer Elements
 
2013 04-02-server-side-backbone
2013 04-02-server-side-backbone2013 04-02-server-side-backbone
2013 04-02-server-side-backbone
 
125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용125 고성능 web view-deview 2013 발표 자료_공유용
125 고성능 web view-deview 2013 발표 자료_공유용
 
What's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovationWhat's this jQuery? Where it came from, and how it will drive innovation
What's this jQuery? Where it came from, and how it will drive innovation
 
One APK to rule them all
One APK to rule them allOne APK to rule them all
One APK to rule them all
 
BBUI
BBUIBBUI
BBUI
 
Introduction to require js
Introduction to require jsIntroduction to require js
Introduction to require js
 
SEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer ExperienceSEE 2009: Improving Mobile Web Developer Experience
SEE 2009: Improving Mobile Web Developer Experience
 
Wheel.js
Wheel.jsWheel.js
Wheel.js
 
Building native Win8 apps with YUI
Building native Win8 apps with YUIBuilding native Win8 apps with YUI
Building native Win8 apps with YUI
 
LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?LinkedIn Mobile: How do we do it?
LinkedIn Mobile: How do we do it?
 
Web design v roku 2013
Web design v roku 2013Web design v roku 2013
Web design v roku 2013
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Java Script
Java ScriptJava Script
Java Script
 
Drupal goes Mobile
Drupal goes MobileDrupal goes Mobile
Drupal goes Mobile
 
Client-Side Packages
Client-Side PackagesClient-Side Packages
Client-Side Packages
 
Test
TestTest
Test
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolbox
 

Viewers also liked

Spring 3 MVC CodeMash 2009
Spring 3 MVC   CodeMash 2009Spring 3 MVC   CodeMash 2009
Spring 3 MVC CodeMash 2009kensipe
 
Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?Zohar Elkayam
 
Linux 系列分享[1] 概览
Linux 系列分享[1]   概览Linux 系列分享[1]   概览
Linux 系列分享[1] 概览rainoxu
 
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化浅谈 Javascript 性能优化
浅谈 Javascript 性能优化rainoxu
 
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012Dexter Yang
 
SQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle DatabaseSQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle DatabaseJeff Smith
 
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Dexter Yang
 
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具Dexter Yang
 
Git 零基础介绍
Git 零基础介绍Git 零基础介绍
Git 零基础介绍Ethan Zhang
 
PHP MVC Tutorial
PHP MVC TutorialPHP MVC Tutorial
PHP MVC TutorialYang Bruce
 
A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!Muhammad Ghazali
 
Oracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & TricksOracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & TricksJeff Smith
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
Web前端性能优化 2014
Web前端性能优化 2014Web前端性能优化 2014
Web前端性能优化 2014Yubei Li
 
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程zhangdaiping
 
Mvp in practice
Mvp in practiceMvp in practice
Mvp in practice彥彬 洪
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Tim (文昌)
 

Viewers also liked (20)

Spring 3 MVC CodeMash 2009
Spring 3 MVC   CodeMash 2009Spring 3 MVC   CodeMash 2009
Spring 3 MVC CodeMash 2009
 
Mvc architecture
Mvc architectureMvc architecture
Mvc architecture
 
Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?Is SQLcl the Next Generation of SQL*Plus?
Is SQLcl the Next Generation of SQL*Plus?
 
Linux 系列分享[1] 概览
Linux 系列分享[1]   概览Linux 系列分享[1]   概览
Linux 系列分享[1] 概览
 
浅谈 Javascript 性能优化
浅谈 Javascript 性能优化浅谈 Javascript 性能优化
浅谈 Javascript 性能优化
 
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012Steve Jobs Announces iTown - Douban Special Event, Jan 2012
Steve Jobs Announces iTown - Douban Special Event, Jan 2012
 
SQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle DatabaseSQLcl overview - A new Command Line Interface for Oracle Database
SQLcl overview - A new Command Line Interface for Oracle Database
 
Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)Learning JavaScript in Three Web Apps(中文)
Learning JavaScript in Three Web Apps(中文)
 
通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具通用JS时代的模块机制和编译工具
通用JS时代的模块机制和编译工具
 
Git 零基础介绍
Git 零基础介绍Git 零基础介绍
Git 零基础介绍
 
PHP MVC Tutorial
PHP MVC TutorialPHP MVC Tutorial
PHP MVC Tutorial
 
A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!A Good PHP Framework For Beginners Like Me!
A Good PHP Framework For Beginners Like Me!
 
Oracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & TricksOracle SQL Developer Tips & Tricks
Oracle SQL Developer Tips & Tricks
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
Web前端性能优化 2014
Web前端性能优化 2014Web前端性能优化 2014
Web前端性能优化 2014
 
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
 
Node way
Node wayNode way
Node way
 
Mvp in practice
Mvp in practiceMvp in practice
Mvp in practice
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
 

Similar to 新版阿尔法城背后的前端MVC实践

Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeEinar Ingebrigtsen
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebChris Canal
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsTimmy Kokke
 
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会Takayuki Kyowa
 
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012CMC Limited
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Adam Mokan
 
Getting Started with Docker
Getting Started with DockerGetting Started with Docker
Getting Started with Dockervisual28
 
Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門Wen-Tien Chang
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMartinSotirov
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)johnnybiz
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 
Large Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the ScenesLarge Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the ScenesBoyan Borisov
 
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in ShareCUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in ShareAlfresco Software
 
Android Development 201
Android Development 201Android Development 201
Android Development 201Tomáš Kypta
 
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...Esri Nederland
 

Similar to 新版阿尔法城背后的前端MVC实践 (20)

Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
JavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform appsJavaScript in Universal Windows Platform apps
JavaScript in Universal Windows Platform apps
 
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
大規模環境でRailsと4年間付き合ってきて@ クックパッド * 食べログ合同勉強会
 
Rhodes
RhodesRhodes
Rhodes
 
6 weeks 6 months live project summer industrial training in cmc limited 2012
6 weeks  6 months live project summer industrial training in cmc limited  20126 weeks  6 months live project summer industrial training in cmc limited  2012
6 weeks 6 months live project summer industrial training in cmc limited 2012
 
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
 
Getting Started with Docker
Getting Started with DockerGetting Started with Docker
Getting Started with Docker
 
Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門Ruby on Rails : 簡介與入門
Ruby on Rails : 簡介與入門
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
20120306 dublin js
20120306 dublin js20120306 dublin js
20120306 dublin js
 
20120802 timisoara
20120802 timisoara20120802 timisoara
20120802 timisoara
 
Large Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the ScenesLarge Scale Drupal - Behind the Scenes
Large Scale Drupal - Behind the Scenes
 
WCM-7 Surfing with CMIS
WCM-7 Surfing with CMISWCM-7 Surfing with CMIS
WCM-7 Surfing with CMIS
 
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in ShareCUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in Share
 
Android Development 201
Android Development 201Android Development 201
Android Development 201
 
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
Getting Started with the ArcGIS API for JavaScript, Esri, Julie Powell, Antoo...
 

Recently uploaded

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 

Recently uploaded (20)

From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 

新版阿尔法城背后的前端MVC实践

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