狠狠撸

狠狠撸Share a Scribd company logo

Web App Mvc

?Download as PPT, PDF?
?
Will Gunn
Will Gunn
1 of 44
Downloaded 34 times
Web App MVC Jit Im Will 小问
Front + Back
JavaScript MVC + Node.js MVC
Front
jQuery MooTools YUI Prototype ExtJS Dojo
Mustache.js Underscore.js Backbone.js Socket.io jQuery
Back
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 &quot; <b> &quot; . $row [ 'name' ]. &quot; </b> &quot; ; echo &quot; <br/> &quot; ; } //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'
var People = Backbone.Collection.extend({ sayHello : function () { this.map(function (person) { return this.get('name') + 'say: &quot;Hello, I`m ' + this.get('name') + '.&quot;'; }); } }); var w3ctech = new People; w3ctech.add({name: 'Will'}, {name: 'Foo'}, {name: 'Bar'}); w3ctech.sayHello(); /** -> Will say: &quot;Hello, I`m Will.&quot; * Foo say: &quot;Hello, I`m Foo.&quot; * Bar say: &quot;Hello, I`m Bar.&quot; **/
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 ( &quot;&&quot; ), _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 ( &quot;&&quot; ), _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
Q&A

More Related Content

Web App Mvc

  • 1. Web App MVC Jit Im Will 小问
  • 3. JavaScript MVC + Node.js MVC
  • 5. jQuery MooTools YUI Prototype ExtJS Dojo
  • 9. Underscore.js Socket.io Backbone.js JSData.js MongoSkin Web.js
  • 10. 前后端 MVC 交互 传统 /*PHP*/ $result = mysql_query ( 'SELECT name FROM users' ); while ( $row = mysql_fetch_array ( $result )) { echo &quot; <b> &quot; . $row [ 'name' ]. &quot; </b> &quot; ; echo &quot; <br/> &quot; ; } //jQuery $ . get ( location . origin + '/names.php' ) . done (function ( data ) { $ ( 'body' ). append ( data ); });
  • 11. 服务器运算延迟！ HTTP 传输性能有限！ 终端设备性能大大浪费！
  • 12. 高性能 //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 交互
  • 13. 前后端 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 ); }); });
  • 14. ?
  • 15. 终端性能 CPU 运算 V8 来自 Google 的基于 C++ 的高性能 JavaScript 引擎 Worker API 多线程 JavaScript 运行机制 GPU 硬件加速 Canvas 绘图加速 Video API 解码加速 DOM 渲染加速 移动终端的超强交互性能
  • 16. 终端性能 存储机制 Cookies localStorage sessionStorage Web SQL Cache 交互机制 WebSocket Message Model Ajax Level 2 …… 不仅不能避免缓存， 而且要主动存储！ 不要让 Web 成为 Long Polling 的天下！
  • 17. 服务端资源 ￥ 5800 / 年 Xeon 双核， 1.5G 内存， 150G 存储空间，千兆带宽光纤
  • 18. 服务端资源 ￥ 25500 元 / 年！ Xeon 八核， 16G 内存， 750G 存储空间，千兆带宽光纤
  • 19. 服务器资源 HTTP 资源 TCP 资源 LAN 资源 存储资源 内存资源 数据库资源 CPU 资源 ……
  • 20. NoSQL 垂直查询 异步通信 关系链 线程运算 垂直查询 关系链 异步通信 NoSQL NoSQL 关系链
  • 21. 前后端优化 Quick Simple Light MVC 高速架构 NoSQL 数据模型 JSON 轻量传输
  • 22. JavaScript — 因为不严谨而飞速发展的脚本语言 Node.js — 基于不严谨的强悍服务器 Web.js — 基于简易的高性能 Node.js 开发框架
  • 23. require ( 'webjs' ). run () Simple Deployment
  • 25. //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 );
  • 28. ?
  • 29. var Person = Backbone.Model.extend({ sayHello : function () { console.log(this.get('name')); } }); var me = new Person({name: 'Will'}); me.sayHello(); // -> 'Will'
  • 30. var People = Backbone.Collection.extend({ sayHello : function () { this.map(function (person) { return this.get('name') + 'say: &quot;Hello, I`m ' + this.get('name') + '.&quot;'; }); } }); var w3ctech = new People; w3ctech.add({name: 'Will'}, {name: 'Foo'}, {name: 'Bar'}); w3ctech.sayHello(); /** -> Will say: &quot;Hello, I`m Will.&quot; * Foo say: &quot;Hello, I`m Foo.&quot; * Bar say: &quot;Hello, I`m Bar.&quot; **/
  • 33. Mustache.js < table > < tbody > {{# peoples }} {{# Man }} < tr > < td >{{ Name }}</ td > < td >{{ Age }}</ td > < td >{{ Sex }}</ td > </ tr > {{/ Man }} {{/ peoples }} </ tbody > </ table > 模版
  • 34. 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 ); } } } }; 对象
  • 35. 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 );
  • 37. Web.js var postRouter = { 'seturlrouter' : function ( req , res , qs ){ web . get ({ qs . key : qs . value }); res . send ( 'Set success' ); } }; web . post ( postRouter );
  • 39. //For IE function parseQs () { var qs = ( location . search > 0 ? location . search . substring ( 1 ) : '' ), params = {}, items = qs . split ( &quot;&&quot; ), _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
  • 40. JavaScript MVC //For Chrome, FireFox and more location . __defineGetter__ ( 'qs' , function() { var qs = ( location . search > 0 ? location . search . substring ( 1 ) : '' ), params = {}, items = qs . split ( &quot;&&quot; ), _item = null ; for (var i = 0 ; i < items . length ; i ++) { item = items [ i ]; params [ decodeURIComponent ( item [ 0 ])] = decodeURIComponent ( item [ 1 ]); } return params ; });
  • 41. 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 );
  • 42. Page JavaScript MVC Node.js 3.Data Trans 2.Page Action Router 1.Server Router
  • 44. Q&A