1. Web App MVC Jit Im Will 小问

2. Front + Back

3. JavaScript MVC + Node.js MVC

4. Front

5. jQuery MooTools YUI Prototype ExtJS Dojo

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

7. Back

8. ExpressJS Web.js Connect

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 ); });

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 ); }); });

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

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

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

24. File System

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 );

26. Node.js MVC

27. M Model

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; **/

31. V View

32. { Mustache.js

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 ); } } } }; 对象

36. C Controller

38. 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

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

44. Q&A