Web App Mvc

Web App MVC Jit Im Will 小问

Front + Back

JavaScript MVC + Node.js MVC

jQuery MooTools YUI Prototype ExtJS Dojo

Mustache.js Underscore.js Backbone.js Socket.io jQuery

ExpressJS Web.js Connect

Underscore.js Socket.io Backbone.js JSData.js MongoSkin Web.js

前后端 MVC 交互传统 /*PHP*/ $result = mysql_query ( 'SELECT name FROM users' ); while ( $row = mysql_fetch_array ( $result )) { echo " <b> " . $row [ 'name' ]. " </b> " ; echo " <br/> " ; } //jQuery $ . get ( location . origin + '/names.php' ) . done (function ( data ) { $ ( 'body' ). append ( data ); });

服务器运算延迟！
HTTP 传输性能有限！
终端设备性能大大浪费！

高性能 //Node.js with Web.js and MongoSkin var getRouter = { 'names' : function ( req , res , qs ) { db . collection ( 'names' ) . find ({}) . toArray (function ( err , names ) { res . sendJSON ( names ); }) } }; web . get ( getRouter ); 前后端 MVC 交互

前后端 MVC 交互高性能 //jQuery, Mustache.js $ . get ( location . origin + ' /names ' ) . done (function ( data ) { var $names = JSON . parse (data); $ . get ( location . origin + ' /tmlp/names.html ' ) . done (function ( data ) { $html = Mustache . to_html (data, {names: $names }); $( ' body ' ) . append ( $html ); }); });

终端性能
CPU 运算
V8 来自 Google 的基于 C++ 的高性能 JavaScript 引擎
Worker API 多线程 JavaScript 运行机制
GPU 硬件加速
Canvas 绘图加速
Video API 解码加速
DOM 渲染加速
移动终端的超强交互性能

终端性能
存储机制
Cookies
localStorage
sessionStorage
Web SQL
Cache
交互机制
WebSocket
Message Model
Ajax Level 2
……
不仅不能避免缓存，而且要主动存储！不要让 Web 成为 Long Polling 的天下！

服务端资源￥ 5800 / 年 Xeon 双核， 1.5G 内存， 150G 存储空间，千兆带宽光纤

服务端资源￥ 25500 元 / 年！ Xeon 八核， 16G 内存， 750G 存储空间，千兆带宽光纤

服务器资源
HTTP 资源
TCP 资源
LAN 资源
存储资源
内存资源
数据库资源
CPU 资源
……

NoSQL 垂直查询异步通信关系链线程运算垂直查询关系链异步通信 NoSQL NoSQL 关系链

前后端优化 Quick Simple Light MVC 高速架构 NoSQL 数据模型 JSON 轻量传输

JavaScript — 因为不严谨而飞速发展的脚本语言 Node.js — 基于不严谨的强悍服务器 Web.js — 基于简易的高性能 Node.js 开发框架

require ( 'webjs' ). run () Simple Deployment

File System

//ExpressJS var app = require ( 'express' ). createServer (); app . get ( '/*' , function ( req , res ) { res . sendfile ( req . get ( 'content-disposition' , 'filename' )); }); app . listen ( 80 ); //Web.js require ( 'webjs' ). run () //Node.js var http = require ( 'http' ), fs = require ( 'fs' );……… server . on ( 'request' , function ( req , res ) { ……… }). listen ( 80 );

Node.js MVC

M Model

var Person = Backbone.Model.extend({ sayHello : function () { console.log(this.get('name')); } }); var me = new Person({name: 'Will'}); me.sayHello(); // -> 'Will'

V View

{ Mustache.js

Mustache.js < table > < tbody > {{# peoples }} {{# Man }} < tr > < td >{{ Name }}</ td > < td >{{ Age }}</ td > < td >{{ Sex }}</ td > </ tr > {{/ Man }} {{/ peoples }} </ tbody > </ table > 模版

Mustache.js var obj = { peoples : [ { Name : 'Will' , Age : 15 , Sex : 'Man' }, { Name : 'Foo' , Age : 30 , Sex : 'Woman' }, { Name : 'Bar' , Age : 18 , Sex : 'Man' }], Man : function () { if ( this . Sex == 'Man' ) { return function ( text , render ) { render ( text ); } } } }; 对象

Web.js with Mustache.js
var getRouter = {
'^mans' : function ( req , res , qs ) {
mansHtml = web . render ( 'mans' , obj );
res . send ( mansHtml );
}
};
web . set ( 'tmplDir' , 'tmlps' )
. get ( getRouter );

C Controller

Web.js
var postRouter = {
'seturlrouter' : function ( req , res , qs ){
web . get ({ qs . key : qs . value });
res . send ( 'Set success' );
}
};
web . post ( postRouter );

JavaScript MVC

//For IE
function parseQs () {
var qs = ( location . search > 0 ? location . search . substring ( 1 ) : '' ),
params = {},
items = qs . split ( "&" ),
_item = null ;
for (var i = 0 ; i < items . length ; i ++) {
item = items [ i ];
params [ decodeURIComponent ( item [ 0 ])] = decodeURIComponent ( item [ 1 ]);
}
return params ;
}
location . qs = parseOs ();
JavaScript MVC

JavaScript MVC //For Chrome, FireFox and more location . __defineGetter__ ( 'qs' , function() { var qs = ( location . search > 0 ? location . search . substring ( 1 ) : '' ), params = {}, items = qs . split ( "&" ), _item = null ; for (var i = 0 ; i < items . length ; i ++) { item = items [ i ]; params [ decodeURIComponent ( item [ 0 ])] = decodeURIComponent ( item [ 1 ]); } return params ; });

JavaScript MVC (function ( $ ) { $ . getScript ( location . origin + '/js/web-client.js' ); //Web.js for Client var getRouter = { 'getsomething' : function () { $ ( 'body' ). append ( web . getData ( 'something' ) . render ( 'someTmpl' ) ); } }; web . conn ( location . origin ) . get ( getRouter ) })( jQuery );

Page JavaScript MVC Node.js 3.Data Trans 2.Page Action Router 1.Server Router

http://www.iwillwen.com https://github.com/iwillwen/Web.js

http://www.iwillwen.com	2270
http://willwen.tumblr.com	239
http://www.iwillwen.com} {2307302404\|\|\|pingback	1
https://www.iwillwen.com	1
http://webcache.googleusercontent.com	1
http://www.webpagetest.org	1
http://www.iwillwen.com} {255143311\|\|\|pingback	1
http://www.iwillwen.com} {128425306\|\|\|pingback	1

Web App Mvc

by Will Gunn on Jul 31, 2011

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 2,515

Statistics

Web App Mvc Presentation Transcript