1.

2. Past, 3. Present 4. 5. Futureof 6. Web 7. Application 8. FrameworkLab 9. / 10. 11. / 12. @iolothebard1 13. Prologue ...Past WWW 14. / 15. CGI 16. / 17. WAS 18. / 19. Present MVC 20. / 21. 22. 23. 24. / 25. 26. 27. 28. Future, 29. 30. 31. 32. / 33. 34. 35. / 36. 37. 38. / 39. 40. 41. / 42. Play! 43. Epilogue ... 2 2 44. Prologue... ?3 45. Prologue Oh! 46. My 47. Lord 48. Johnson~ 49. ~ Lord 50. Johnson 51. ... ? 52. 53. 54. ?-- 55. ~ 56. 57. ...-_-+ Node.js 58. ~ 59. ... ... 60. ?..... 61. ? --; 62. ? -_-;;;44 63. Brief 64. History 65. of 66. Web 67. Application 68. Frameworks 5 5 69. Past WWWCGIWAS Frameworks1990 2000 2012 6 70. WWWTim 71. Burners-Lee 72. 73. WorldWideWeb 74. 75. CERN 76. httpd1990...12...25...77 77. WWW 78. 79. 80. 81. , 82. 1990, 83. Tim 84. Burners-Lee, 85. WorldWideWeb 86. 87. CERN 88. httpd Archie(1990), 89. Gopher(1991), WAIS(1991), 90. Velonica(1992), 91. ... 1993, 92. Marc 93. Andreessen, 94. NCSA 95. Mosaic 1994, 96. W3C81990 200020128 97. WWW99 98. WWWfont color=blue size=20bBold/biItalic/iuUnderline/u/font 99. 100. ...Bold Italic Underline ! 101. 10 10 102. WWW$ telnet example.com 80GET/HTTP/1.1HTTP/1.1 200 OKDate: Mon, 23 Oct 2012 22:38:34 GMT 103. ...Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2011 23:11:55 GMT RFC822 104. EMAIL?Accept-Ranges: noneContent-Length: 438Connection: closeRFC959 105. FTP?Content-Type: text/html; charset=UTF-8htmlheadtitle...11 11 106. CGI 107. 108. , 109. 110. CGI 1993, 111. Rob 112. McCool, 113. Server 114. Scripts Common 115. Gateway 116. Interface(RFC3875) 117. 118. 119. 120. / 121. 122. SERVER_PROTOCOL, 123. SERVER_PORT, 124. REQUEST_METHOD, 125. PATH_INFO, 126. PATH_TRANSLATED, 127. SCRIPT_NAME, 128. QUERY_STRING, 129. REMOTE_HOST, 130. REMOTE_ADDR, 131. REMOTE_USER 132. ... 121990 2000 201212 133. CGIprintf(%s%c%cn, Content-Type:text/html, 13, 10);printf(htmlheadtitleMultiplication results /title/headbody);printf(h3results/h3);char *data = getenv(QUERY_STRING);if(data == NULL) {printf(pError!/p);} else if(sscanf(data,m=%ldn=%ld,m,n) != 2) {printf(pError!/p);} else {printf(pThe product of %ld and %ld isb%ld/b./p,m,n,m*n);}printf(/body/html);13 13 134. CGIMultiplication resultsThe Product of 10 and 20 is 200. 1414 135. WAS 136. Multi-tier 137. ,WAS 138. Web 139. + 140. Application 141. Server 142. 143. WAS 144. 145. ,WAS 146. 147. 148. WAS 149. 150. 151. 152. .WebLogic, 153. WebSphere 154. and 155. ... Netscape 156. Enterprise 157. Server 158. / 159. NSAPI 160. / 161. Livewire, 162. IIS 163. / 164. ISAPI 165. / 166. Active 167. Server 168. Pages, 169. Java 170. Web 171. Server... 172. / 173. Servlet 174. / 175. Java 176. Server 177. Pages, 178. Tomcat, 179. Resin, 180. JBoss, 181. JRun, 182. ColdFusion, 183. NetDynamics, 184. ... 151990 2000201215 185. WAS%@ page language=java%htmlheadtitleMultiplication results/title/headbodyh3Multiplication results/h3% try {long m = Long.parseLong(request.getParameter(m));long n = Long.parseLong(request.getParamter(n));%pThe product of %= m % and %= n % isb%= (m*n) %/b./p% } catch(Exception e) { %pError!/p% } %/body/html16 16 186. WASMultiplication resultsThe Product of 10 and 20 is 200. 1717 187. 188. 189. , 190. Returns 191. vs 192. A 193. library 194. is 195. essentially 196. a 197. set 198. of 199. functions 200. that 201. you 202. can 203. call, 204. these 205. days 206. usually 207. organized 208. into 209. classes. 210. Each 211. call 212. does 213. some 214. work 215. and 216. returns 217. control 218. to 219. the 220. client. A 221. framework 222. embodies 223. some 224. abstract 225. design, 226. with 227. more 228. behavior 229. built 230. in. 231. In 232. order 233. to 234. use 235. it 236. you 237. need 238. to 239. insert 240. your 241. behavior 242. into 243. various 244. places 245. in 246. the 247. framework 248. either 249. by 250. subclassing 251. or 252. by 253. plugging 254. in 255. your 256. own 257. classes. 258. The 259. frameworks 260. code 261. then 262. calls 263. your 264. code 265. at 266. these 267. points. You 268. call 269. Library 270. 271. 272. Framework 273. calls 274. You. Inversion-of-Control Where 275. is 276. main()?181990 20002012 18 277. import java.io.IOException;import javax.servlet.ServletConfig;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ServletLifeCycleExample extends HttpServlet {private int count;@Overridepublic void init(ServletConfig config) throws ServletException {super.init(config); getServletContext().log(init() called); count=0;}@Overrideprotected void service(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {getServletContext().log(service() called); count++;response.getWriter().write(Incrementing the count: Count = +count);}@Overridepublic void destroy() {getServletContext().log(destroy() called);}} 1919 278. YourCode20 20 279. PresentModel-View-Controller Ruby on Rails Struts Spring199020002012 21 280. MVC 281. 282. , MVC 283. Returns 2004, 284. Tim 285. OReilly, 286. Web 287. 2.0 Model-View-Controller 288. 289. 290. / 291. 292. / 293. 294. , 295. 296. , 297. 298. , 299. , 300. 301. , 302. , 303. AJAX, 304. ... Turbine, 305. Struts, 306. ASP.NET, 307. WebWork, 308. Zope, 309. JSF, 310. Spring, 311. Rails, 312. Django, 313. Grails, 314. Play, 315. ... Prototype.JS, 316. jQuery, 317. YUI, 318. Dojo, 319. ...221990 20002012 22 320. MVCclass ProductModel {long multiplier, multiplicant, product; ...M}class CalcService {long getProduct(long m, long n) { return m * n; } ...}jsp:useBean id=model class=ProductBean/h3Multiplication results/h3VpThe product of jsp:getProperty name=model property=multiplier/ andjsp:getProperty name=model property=multiplicand/ isbjsp:getProperty name=model property=product//b./plong m = Long.parseLong(request.getParameter(m));long n = Long.parseLong(request.getParameter(n));CProductModel model = new ProductModel(m, n, calcService.getProduct(m, n));request.setAttribute(model, model);getServletContext().getRequestDispatcher(mul.jsp).forward(request, response);23 23 321. MVCMultiplication resultsThe Product of 10 and 20 is 200. 2424 322. 323. 324. Easy 325. Come 326. Easy 327. Go, 328. 329. 2004, 330. David 331. Heinemeier 332. Hansson, 37signals, 333. Basecamp.com 15 334. 335. 336. !? Ruby 337. 338. 339. 340. 341. ~ Convention-over-Configuration, 342. Scaffolding, 343. RESTful 344. routing, 345. ActionRecord, 346. Template, 347. AJAX 348. Support, 349. Testing, 350. Micro 351. Web 352. Server, 353. ... 251990 2000201225 354. 355. 356. 357. 15 358. 359. 360. 361. ... 362. ......26 26 363. 364. 365. 366. , 367. 368. 2000, 369. Craig 370. McClanahan, 371. Struts 372. MVC 373. on 374. Servet 375. API 2002, 376. Rod 377. Johnson, 378. Spring 379. Framework 380. General 381. Purpose 382. IoC 383. Container So 384. what? 385. Rails? 386. Django? 387. Who 388. cares? 271990 2000201227 389. 390. 391. 392. 393. 394. 395. ... 396. 397. 398. 399. 400. ... 2828 401. Future, Play! 1990 2000 2012 29 402. , 403. 404. 405. T G I F30 30 406. 3131 407. N-32 32 408. 3333 409. 410. : 411. http://mashable.com/2011/06/28/data-infographic/ 3434 412. , 413. 414. 415. NeverOTL! 416. 417. : 418. http://www.gunchinews.com/blog2/editor_list.php?idxno=161cidxno=70page=1blog_id=mosi35 35 419. Simply 420. the 421. Best, 422. Returns Async? 423. Non-Blocking 424. I/O? , 425. , 426. ... 427. 428. 429. 430. CPU 431. 432. CPU 433. 434. 435. 436. 437. 438. 439. 440. ! 441. 442. 443. 444. 445. , 446. 447. 448. ~ 449. 450. 451. 452. 453. 454. 455. , 456. 457. 458. ~ Node.js, 459. Vert.x, 460. Akka, 461. Parallel 462. Python, 463. ... 3619902000 201236 464. 465. vs 466. if (fs.existsSync(/etc/passwd)) {var data = fs.readFileSync(/etc/passwd);console.log(data);}fs.exists(/etc/passwd, function (exist) {if (exist) {fs.readFileSync(/etc/passwd, function (err, data) {console.log(b); console.log(data);});}}); console.log(a); (1) 467. a-b 468. 469. 470. (2) 471. b-a 472. 473. 474. (3) 475. 476. 477. 478. 479. 480. (4) 481. 3737 482. 483. 484. 1 || ||2 Long 485. I/O 486. Task 4 3 3838 487. 488. 489. 490. 491. 39 39 492. 493. 494. 495. || || 1 3 Long I/O Task 5 64 40 40 496. 497. 498. 499. 500. 501. 4141 502. 503. 504. Worker 1 1 || || || || 223 3Long 505. I/O 506. Task42 42 507. 508. 509. 510. 511. 43 43 512. 513. Keep 514. it 515. simple, 516. Stupid! 517. 518. 519. 520. Bigger 521. and 522. Bigger~ 523. ? 524. RESTful 525. API 526. 527. 528. 529. 530. 531. ! 532. OK! 533. ? 534. ? 535. No 536. Thank 537. You! Sinatra(Ruby), 538. Flask(Python), 539. Express(Node.js), 540. Spray(Scala), 541. Jersey(Java), 542. Play-mini(Scala), 543. Gretty(Groovy), 544. ... 4419902000201244 545. 546. 547. - 548. Sinatra$ gem install sinatra$ cathello.rbrequire sinatraget /hello/:name do |name|Hello, #{name}end$ ruby -rubygems hello.rb 4545 549. 550. 551. - 552. Flask$ pip install Flask$ cathello.pyfrom flask import Flaskapp = Flask(__name__)@app.route(/hello/name, methods=[GET])def hello(name):return Hello, %s % nameif __name__ == __main__:app.run()$ python hello.py46 46 553. 554. 555. - 556. Express$ npm intall express$ cathello.jsvar express = require(express),app = express();app.get(/hello/:name, function (req, res) {res.send(Hello,+ req.param(name));});app.listen(3000);$ node hello47 47 557. 558. 559. - 560. Spray$ git clone git://github.com/spray/spray-template.git .$ catsrc/main/scala/hello.scalaimport cc.spray._trait HelloService extends Directives {val helloService = {path(hello / PathElement) {name = get {completeWith {hello,+ name}}}}}$ sbt run 4848 561. 562. HTML5 563. , 564. Web-as-a-Platform!! URL 565. (#) 566. 567. ( 568. 569. ), 570. 571. , 572. 573. 574. 575. UI 576. 577. / 578. , 579. WebStorage 580. 581. HTTP 582. 583. 584. , 585. 586. RPC, 587. ... Backbone.js, 588. Knockout.js, 589. Sencha 590. EXT 591. JS, 592. Javascript 593. MVC, 594. SproutCore, 595. Angular.js, 596. Batman.js 597. , 598. Ember.js(SprouteCore2), 599. ...491990 20002012 49 600. 601. 602. - 603. Backbone.jsscript type=text/templatethis.defaults().title}); } id=item-template},div class=view ...input class=toggle}); type=checkbox var TodoView =%=done?checked=checked:%/ Backbone.View.extend({label%= title %/labeltemplate: _.template(a class=destroy/a$(#item-template).html()),/div initialize: function() {input class=edit type=text this.model.on(change, value=%= title % /this.render, this);/script this.model.on(destroy,this.remove, this);script type=text/javascript},var Todo = Backbone.Model.extend({ render: function() {defaults: function() {this.$el.html(this.template( return {this.model.toJSON()));title: empty todo..., this.$el.toggleClass(done,order: Todos.nextOrder(),this.model.get(done));done: false return this; };},}, ...initialize: function() { }); if (!this.get(title)) { /scriptthis.set({title: : http://todomvc.com5050 604. 605. 606. - 607. Knockout.jsselect data-bind=options:tickets,optionsCaption:Choose...,optionsText:name,value:chosenTicket/selectbutton data-bind=enable:chosenTicket,click:resetTicketClear/buttonp data-bind=with:chosenTicketYou have chosen b data-bind=text:name/b($span data-bind=text:price/span)/pscript type=text/javascriptfunction TicketsViewModel() {this.tickets = [ { name: Economy, price: 199.95 }, { name: Business, price: 449.22 }, { name: First Class, price: 1199.99 }];this.chosenTicket = ko.observable();this.resetTicket = function() { this.chosenTicket(null) }}ko.applyBindings(new TicketsViewModel(), document.getElementById(liveExample));/script51 51 608. 609. 610. - 611. Sencha 612. Ext 613. JSExt.define(User, {extend: Ext.data.Model,fields: [{name: name, type: string},{name: age, type: int},{name: pic, type: string}]});var myStore = Ext.create(Ext.data.Store, {model: User,proxy: { type: ajax, url : /users.json, reader: { type: json, root: users }},autoLoad: true});Ext.create(Ext.DataView, {fullscreen: true,store: myStore,itemTpl: img src={pic} /h2{name}/h2p{age} years old/p}); 5252 614. Play! 615. 616. 617. 618. 619. , Play! 620. 621. 622. 623. 624. 625. 626. 627. 628. CoC, 629. Scaffolding, 630. , 631. ... 632. DSL 633. 634. Comet/Long 635. Polling/WebSocket 636. 637. , JPA(), 638. Ebean 639. ORM(), 640. Anorm 641. DAO( ) 642. 643. SQL/NoSQL 644. 645. 646. Akka 647. 648. 649. / 650. 53199020002012 53 651. Play! 652. 653. - 654. 655. app Application sources ! assets Compiled asset sources! stylesheets Typically LESS CSS sources! javascripts Typically CoffeeScript sources ! controllers Application controllers ! models Application business layer ! views Templatesconf Configurations files ! application.conf Main configuration file ! routes Routes definitionpublic Public assets ! stylesheets CSS files ! javascripts Javascript files ! images Image filesproject sbt configuration files ! build.properties Marker for sbt project ! Build.scala Application build script ! plugins.sbt sbt pluginslib Unmanaged libraries dependencieslogs Standard logs foldertarget Generated stufftest source folder for unit or functional tests 5454 656. Play! 657. 658. - 659. RoutesGET/ controllers.Projects.index()# AuthenticationGET/logincontrollers.Application.login()POST /logincontrollers.Application.authenticate()GET/logout controllers.Application.logout()# ProjectsPOST /projects controllers.Projects.add()POST /projects/groupscontrollers.Projects.addGroup()DELETE /projects/groupscontrollers.Projects.deleteGroup(group: String)PUT/projects/groupscontrollers.Projects.renameGroup(group: String)DELETE /projects/:projectcontrollers.Projects.delete(project: Long)PUT/projects/:projectcontrollers.Projects.rename(project: Long)POST /projects/:project/team controllers.Projects.addUser(project: Long)DELETE /projects/:project/team controllers.Projects.removeUser(project:Long)...# Map static resources from the /public folder to the /public pathGET/assets/*filecontrollers.Assets.at(path=/public, file)55 55 660. Play! 661. 662. - 663. Javapackage controllers;import play.*;import play.mvc.*;public class Application extends Controller {public static Result hello(String name) {return ok(views.html.index.render(Hello+ name));}public static Result upload() {FilePart filePart =request().body().asMultipartFormData().getFile(file);if (filePart != null) {// ... filePart.getFilename()/getContentType()/getFile() ...return ok(h1file uploaded/h1).as(text/html);} else { return BadRequest(file upload error!) }}public static Result download() {return ok(new java.io.File(/tmp/fileToServe.pdf));}} 5656 664. Play! 665. 666. - 667. Scalapackage controllersimport play.api._import play.api.mvc._object Application extends Controller {def hello(name:String) = Action {Ok(views.html.hello(Hello+ name))}def upload = Action {request.body.file(file).map { filePart =// ... filePart.filename/contentType/ref ...Ok(h1file uploaded/h1).as(HTML)}.getOrElse {BadRequest(file upload error!)}}def download = Action {Ok.sendFile(new java.io.File(/tmp/fileToServe.pdf))}} 5757 668. Play! 669. 670. - 671. View 672. Template@(title: String)(content: Html)htmlheadtitle@title/titlelink rel=stylesheet href=@routes.Assets.at(stylesheets/main.css)script src=@routes.Assets.at(javascripts/jquery.js)/script/headbodyheadera href=@routes.Application.index@title/a/headersection@content/section/body/html@(name: String, repeat: Int, color: String)@main(Here is the result:) {ul style=color: @if(color != null) { @color } else { inherited }@for(i - 1 to repeat) {liHello @name!/li}/ulp class=buttonsa href=@routes.Application.indexBack to the form/a/p}58 58 673. Play! 674. 675. - 676. Akkadef hello = Action {Async {val myActor =Akka.system.actorOf(Props[MyActor], name = myactor)(myActor ? hello).mapTo[String].asPromise.map {result = Ok(Greetings,+ result)}}}def upload = Action {Async {Akka.future {longTask()}.map {result = Ok(Got+ result)}}} 5959 677. Play! 678. 679. 680. ...60 60 681. Epilogue ... .61 682. Putting 683. It 684. All 685. Together 686. - 687. If 688. I 689. were 690. God... Backbone.jsExpress 691. Cherokee 692. API 693. 694. Angular.jsSpray NO 695. CGI Nginx 696. 697. Redis RDBMS SQLAkka 698. + 699. Spring 700. IoC 701. 702. Varnish MongoDBNoSQLYOU 703. CANT 704. YOURBaaS.io 705. ^^; BaaS AWS 706. EC2 IaaS TOUCH 707. STACK MAKETHIS!! OWN62 62 708. Putting 709. It 710. All 711. Together 712. - 713. If 714. I 715. were 716. God... Backbone.jsExpress 717. CherokeeAngular.jsSpray NO 718. CGI Nginx 719. 720. Redis RDBMS SQLAkka 721. + 722. Spring 723. IoC 724. Varnish MongoDBNoSQLYOU 725. CANT 726. YOURBaaS.io 727. ^^; BaaSAWS 728. EC2 IaaSTOUCH 729. STACKTHIS!! OWN63 63 730. Putting 731. It 732. All 733. Together 734. - 735. If 736. I 737. were 738. God... Backbone.js ExpressCherokeeAngular.jsSprayNginx RedisRDBMSAkka 739. + 740. Spring 741. IoC VarnishMongoDBYOU 742. CANT 743. BaaS.io 744. ^^; AWS 745. EC2TOUCH 746. THIS!! STACK64 64 747. Putting 748. It 749. All 750. Together 751. - 752. If 753. I 754. were 755. God... Vanish 756. Backbone HTTPCherokeeJavascript 757. L4 758. or 759. CDN MongoDBJSON/HTTPAkka 760. RESTful RedisActorActor JavaAPI 761. MySQL Express TCP/IP ActorActorObjective-CRemote 762. Akka 763. with 764. L4 Spring 765. IoC or 766. Distributed 767. Akka JSON/HTTP3rd-Party BaaS 768. - 769. BaaS.ioIaaS 770. - 771. AWS 772. EC2 CPUGPU BaaS OpenAPI ... .........65 65 773. Epilogue 774. KIN!Node.js 775. 776. ~ 777. 778. 779. 780. ! Lord 781. Johnson typesafe 782. ... Akka 783. + 784. Spring?! 785. 786. 787. ? .. 788. 789. 790. ... 791. 792. ~?! -_-+++~ 793. ~ 794. ...+_+ 795. 796. 797. ~ --; 798. 6666 799. HTTP, 800. W3C 801. http://www.w3.org/Protocols/HTTP/AsImplemented.htmlHTTP, 802. 803. http://en.wikipedia.org/wiki/Hypertext_Transfer_ProtocolCGI, 804. http://en.wikipedia.org/wiki/Common_Gateway_Interface 805. , 806. 807. http://en.wikipedia.org/wiki/Java_Servlet 808. , 809. 810. http://en.wikipedia.org/wiki/Software_framework 811. vs 812. , 813. 814. http://goo.gl/4cLE7 815. (IoC), 816. 817. http://martinfowler.com/bliki/InversionOfControl.html 818. 819. , 820. 821. http://en.wikipedia.org/wiki/Web_application_framework 822. 823. 824. , 825. 826. http://goo.gl/vnu23 827. MVC 828. 829. 830. http://todomvc.com 831. MVC 832. 833. 834. http://goo.gl/18BQlSpring 835. 836. 837. http://www.springsource.org 838. Play 839. 840. 841. http://www.playframework.org 842. Spray 843. 844. 845. http://spray.ccFlask 846. 847. 848. http://flask.pocoo.orgSinatra 849. 850. 851. http://www.sinatrarb.com 852. Express 853. 854. 855. http://expressjs.com 856. Prototype 857. js 858. 859. http://prototypejs.orgjQuery 860. 861. http://jquery.comDojo 862. Toolkit 863. 864. http://dojotoolkit.org 865. Knockout 866. 867. 868. http://knockoutjs.com 869. Backbone 870. 871. 872. http://backbonejs.org 873. Sencha 874. Touch 875. 876. http://www.sencha.com67 67 877. .Lab 878. / 879. 880. / 881. @iolothebard68 68