Your SlideShare is downloading. ×
웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

웹 애플리케이션 프레임웍의 과거,현재 그리고 미래 - 봄날은 간다

4,961
views

Published on

Published in: Technology

1 Comment
22 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,961
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
96
Comments
1
Likes
22
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 봄날은
  • 2.  간다Past,
  • 3.  Present
  • 4.  
  • 5.  Futureof
  • 6.  Web
  • 7.  Application
  • 8.  Framework앱스프레소Lab
  • 9.  /
  • 10.  장동수
  • 11.  /
  • 12.  @iolothebard 1
  • 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.   때릴꼬야? -_-;;; 4 4
  • 63. Brief
  • 64.  History
  • 65.  of
  • 66.  Web
  • 67.  Application
  • 68.  Frameworks 5 5
  • 69. Past WWW CGI WAS Frameworks1990 2000 2012 6
  • 70. WWWTim
  • 71.  Burners-Lee최초의
  • 72.  웹브라우저
  • 73.  “WorldWideWeb”최초의
  • 74.  웹서버
  • 75.  “CERN
  • 76.  httpd”1990년...12월...25일... 7 7
  • 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.  W3C 81990 2000 2012 8
  • 97. WWW 9 9
  • 98. WWWfont color=”blue” size=”20” bBold/b iItalic/i uUnderline/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: close RFC959
  • 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 2012 12
  • 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 is b%ld/b./p,m,n,m*n);}printf(/body/html); 13 13
  • 134. CGIMultiplication resultsThe Product of 10 and 20 is 200. 14 14
  • 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 2000 2012 15
  • 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/html 16 16
  • 186. WASMultiplication resultsThe Product of 10 and 20 is 200. 17 17
  • 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 2000 2012 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; @Override public void init(ServletConfig config) throws ServletException { super.init(config); getServletContext().log(init() called); count=0; } @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { getServletContext().log(service() called); count++; response.getWriter().write(Incrementing the count: Count = +count); } @Override public void destroy() { getServletContext().log(destroy() called); }} 19 19
  • 278. 프레임웍YourCode 20 20
  • 279. PresentModel-View-Controller Ruby on Rails Struts Spring1990 2000 2012 21
  • 280. MVC 생산성
  • 281.  향상의
  • 282.  유혹, MVC
  • 283.  Returns 2004,
  • 284.  Tim
  • 285.  O’Reilly,
  • 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 2000 2012 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/h3 VpThe 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. 24 24
  • 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 2000 2012 25
  • 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 2000 2012 27
  • 389. 스트러츠
  • 390.  
  • 391.  스프링 서산에
  • 392.  지는
  • 393.  해는 지고
  • 394.  싶어
  • 395.  지나...나를
  • 396.  버리고
  • 397.  가시는
  • 398.  님은 가고
  • 399.  싶어
  • 400.  가나... 28 28
  • 401. Future모바일, 소셜 클라우드 비동기 프레임웍 경량 웹프레임웍프론트엔드 웹프레임웍 Play! 프레임웍1990 2000 2012 29
  • 402. 소셜,
  • 403.  모바일
  • 404.  그리고
  • 405.  클라우드T G I F 30 30
  • 406. 앱스토어 31 31
  • 407. N-스크린 32 32
  • 408. 리얼타임 33 33
  • 409.
  • 410.  데이터출처:
  • 411.  http://mashable.com/2011/06/28/data-infographic/ 34 34
  • 412. 소셜,
  • 413.  모바일
  • 414.  그리고
  • 415.  클라우드 Never OTL!
  • 416.  이미지
  • 417.  출처:
  • 418.  http://www.gunchinews.com/blog2/editor_list.php?idxno=161cidxno=70page=1blog_id=mosi 35 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.  ... 361990 2000 2012 36
  • 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.  동시에 37 37
  • 482. 동기
  • 483.  
  • 484.  멀티쓰레드 서버 ▶ 1 || || 2 ▶클라이언트 ▶ ▶ Long
  • 485.  I/O
  • 486.   Task ▶ ▶ 4 3 응답 38 38
  • 487. 동기
  • 488.  
  • 489.  멀티쓰레드동기
  • 490.  
  • 491.  멀티쓰레드 39 39
  • 492. 비동기
  • 493.  
  • 494.  싱글쓰레드
  • 495.   서버 || || ▶ 1 3클라이언트 Long ▶ ▶ I/O ▶ ▶ Task 5 6 4 응답 40 40
  • 496. 비동기
  • 497.  
  • 498.  싱글쓰레드
  • 499.  비동기
  • 500.  
  • 501.  싱글쓰레드 41 41
  • 502. 비동기
  • 503.  
  • 504.  멀티쓰레드 서버 Worker 1 1 || || ▶ ▶ || || ▶클라이언트 ▶ ▶ 2 2 3 ▶ ▶ 3 Long
  • 505.  I/O
  • 506.   응답 Task 42 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.  ... 441990 2000 2012 44
  • 545. 경량
  • 546.  웹프레임웍
  • 547.  -
  • 548.  Sinatra$ gem install sinatra$ cat hello.rbrequire sinatraget /hello/:name do |name| Hello, #{name}end$ ruby -rubygems hello.rb 45 45
  • 549. 경량
  • 550.  웹프레임웍
  • 551.  -
  • 552.  Flask$ pip install Flask$ cat hello.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.py 46 46
  • 553. 경량
  • 554.  웹프레임웍
  • 555.  -
  • 556.  Express$ npm intall express$ cat hello.jsvar express = require(express), app = express();app.get(/hello/:name, function (req, res) { res.send(Hello, + req.param(name));});app.listen(3000);$ node hello 47 47
  • 557. 경량
  • 558.  웹프레임웍
  • 559.  -
  • 560.  Spray$ git clone git://github.com/spray/spray-template.git .$ cat src/main/scala/hello.scalaimport cc.spray._trait HelloService extends Directives { val helloService = { path(hello / PathElement) { name = get { completeWith { hello, + name } } } }}$ sbt run 48 48
  • 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 2000 2012 49
  • 600. 프론트엔드
  • 601.  웹프레임웍
  • 602.  -
  • 603.  Backbone.jsscript type=text/template this.defaults().title}); } id=item-template }, div class=view ... input class=toggle }); type=checkbox var TodoView =%=done?checked=checked:%/ Backbone.View.extend({ label%= title %/label template: _.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)) { /script this.set({title: 출처: http://todomvc.com 50 50
  • 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));/script 51 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’}); 52 52
  • 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.  처리 531990 2000 2012 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 54 54
  • 656. Play!
  • 657.  프레임웍
  • 658.  -
  • 659.  RoutesGET / controllers.Projects.index()# AuthenticationGET /login controllers.Application.login()POST /login controllers.Application.authenticate()GET /logout controllers.Application.logout()# ProjectsPOST /projects controllers.Projects.add()POST /projects/groups controllers.Projects.addGroup()DELETE /projects/groups controllers.Projects.deleteGroup(group: String)PUT /projects/groups controllers.Projects.renameGroup(group: String)DELETE /projects/:project controllers.Projects.delete(project: Long)PUT /projects/:project controllers.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/*file controllers.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)); }} 56 56
  • 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)) }} 57 57
  • 668. Play!
  • 669.  프레임웍
  • 670.  -
  • 671.  View
  • 672.  Template@(title: String)(content: Html)html  head    title@title/title    link rel=stylesheet href=@routes.Assets.at(stylesheets/main.css)    script src=@routes.Assets.at(javascripts/jquery.js)/script  /head  body    header      a href=@routes.Application.index@title/a    /header    section      @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    }  /ul  p class=buttons    a 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) } }} 59 59
  • 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.js 프론트엔드 Express 경량 정적
  • 691.  컨텐츠 Cherokee 웹
  • 692.  앱 API
  • 693.  서버 웹
  • 694.  서버 웹프레임웍 Angular.js 웹프레임웍 Spray NO
  • 695.  CGI Nginx 분산
  • 696.  객체
  • 697.  캐시 Redis RDBMS SQL 비동기 Akka
  • 698.  +
  • 699.  Spring
  • 700.  IoC 애플리케이션
  • 701.  서버 캐시 데이터베이스 프레임웍 웹
  • 702.  가속기 Varnish MongoDB NoSQL YOU
  • 703.  CAN’T
  • 704.   YOURBaaS.io
  • 705.  ^^; 백엔드 BaaS 컴퓨팅 AWS
  • 706.  EC2 IaaS 리소스 TOUCH
  • 707.   리거시 STACK MAKE THIS!! OWN 62 62
  • 708. Putting
  • 709.  It
  • 710.  All
  • 711.  Together
  • 712.  -
  • 713.  If
  • 714.  I
  • 715.  were
  • 716.  God... Backbone.js 프론트엔드 Express 경량 정적
  • 717.  컨텐츠 Cherokee 웹프레임웍 Angular.js 웹프레임웍 Spray NO
  • 718.  CGI Nginx 분산
  • 719.  객체
  • 720.  캐시 Redis RDBMS SQL 비동기 Akka
  • 721.  +
  • 722.  Spring
  • 723.  IoC 프레임웍 웹
  • 724.  가속기 Varnish MongoDB NoSQL YOU
  • 725.  CAN’T
  • 726.   YOURBaaS.io
  • 727.  ^^; BaaS AWS
  • 728.  EC2 IaaS TOUCH
  • 729.   STACK THIS!! OWN 63 63
  • 730. Putting
  • 731.  It
  • 732.  All
  • 733.  Together
  • 734.  -
  • 735.  If
  • 736.  I
  • 737.  were
  • 738.  God... Backbone.js Express Cherokee Angular.js Spray Nginx Redis RDBMS Akka
  • 739.  +
  • 740.  Spring
  • 741.  IoC Varnish MongoDB YOU
  • 742.  CAN’T
  • 743.  BaaS.io
  • 744.  ^^; AWS
  • 745.  EC2 TOUCH
  • 746.   THIS!! STACK 64 64
  • 747. Putting
  • 748.  It
  • 749.  All
  • 750.  Together
  • 751.  -
  • 752.  If
  • 753.  I
  • 754.  were
  • 755.  God... 웹앱 Vanish 정적 웹
  • 756.  서버 정적Backbone 컨텐츠 HTTP Cherokee Javascript 클라이언트 애플리케이션
  • 757.  서버 L4
  • 758.  or
  • 759.  CDN MongoDB JSON/HTTP Akka모바일
  • 760.  앱 RESTful Redis Actor Actor Java API
  • 761.  서버 클라이언트 MySQL Express TCP/IP Actor ActorObjective-C클라이언트 Remote
  • 762.  Akka
  • 763.  with
  • 764.  L4 Spring
  • 765.  IoC or
  • 766.  Distributed
  • 767.  Akka 리거시 JSON/HTTP3rd-Party BaaS
  • 768.  -
  • 769.  BaaS.io IaaS
  • 770.  -
  • 771.  AWS
  • 772.  EC2 매시업 푸시 스토리지 CPU GPU 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.   66 66
  • 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.com 67 67
  • 877. 감사합니다.앱스프레소Lab
  • 878.  /
  • 879.  장동수
  • 880.  /
  • 881.  @iolothebard 68 68