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

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

on

  • 4,211 views

 

Statistics

Views

Total Views
4,211
Views on SlideShare
4,205
Embed Views
6

Actions

Likes
14
Downloads
64
Comments
1

2 Embeds 6

https://twitter.com 5
http://kmjj3849.dothome.co.kr 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 봄날은
  •   간다Past,
  •   Present
  •   &
  •   Futureof
  •   Web
  •   Application
  •   Framework앱스프레소Lab
  •   /
  •   장동수
  •   /
  •   @iolothebard 1
  • 차례 Prologue ... Past WWW
  •   /
  •   CGI
  •   /
  •   WAS
  •   /
  •   프레임웍 Present MVC
  •   /
  •   루비
  •   온
  •   레일즈
  •   /
  •   스트러츠
  •   &
  •   스프링
  •   프레임웍 Future소셜,
  •   모바일
  •   그리고
  •   클라우드
  •   /
  •   비동기
  •   프레임웍
  •   /
  •   경량
  •   웹프레임웍
  •   /
  •   프론트엔드
  •   웹프레임웍
  •   /
  •   Play!
  •   프레임웍 Epilogue ... 2 2
  • Prologue“어떻게... 사랑이 변하니?” 3
  • Prologue Oh!
  •   My
  •   “Lord”
  •   Johnson~ 스프링
  •   만쉐~ “Lord”
  •   Johnson이 스칼라
  •   공부한다는데... 스칼라?
  •   그거
  •   먹는
  •   거임? -ㅠ- 자바스크립트가
  •   대세래~자바스크립트
  •   노가다를
  •   누가... -_-+ Node.js가
  •   짱~
  •   빠르다던데... 어떻게...사랑이
  •   변하니? 라면... ㅠ..ㅠ 끓여
  •   줄까? -ㅅ-;
  •    때릴꼬야? -_-;;; 4 4
  • Brief
  •   History
  •   of
  •   Web
  •   Application
  •   Frameworks 5 5
  • Past WWW CGI WAS Frameworks1990 2000 2012 6
  • WWWTim
  •   Burners-Lee최초의
  •   웹브라우저
  •   “WorldWideWeb”최초의
  •   웹서버
  •   “CERN
  •   httpd”1990년...12월...25일... 7 7
  • WWW 보기
  •   좋은
  •   떡이
  •   먹기
  •   좋다, 웹의
  •   탄생 1990,
  •   Tim
  •   Burners-Lee,
  •    WorldWideWeb
  •   &
  •   CERN
  •   httpd Archie(1990),
  •   Gopher(1991), WAIS(1991),
  •   Velonica(1992),
  •   ... 1993,
  •   Marc
  •   Andreessen,
  •   NCSA
  •   Mosaic 1994,
  •   W3C 81990 2000 2012 8
  • WWW 9 9
  • WWW<font color=”blue” size=”20”> <b>Bold</b> <i>Italic</i> <u>Underline</u></font> 보기
  •   좋은
  •   떡이...Bold Italic Underline 지! 먹기도
  •   좋 10 10
  • WWW$ telnet example.com 80GET␠/␠HTTP/1.1HTTP/1.1 200 OKDate: Mon, 23 Oct 2012 22:38:34 GMT 화면
  •   뒤에선...Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2011 23:11:55 GMT RFC822
  •   EMAIL?Accept-Ranges: noneContent-Length: 438Connection: close RFC959
  •   FTP?Content-Type: text/html; charset=UTF-8<html><head><title>... 11 11
  • CGI 멀어지는
  •   시맨틱의
  •   꿈, 동적
  •   컨텐츠와
  •   CGI 1993,
  •   Rob
  •   McCool,
  •   “Server
  •   Scripts” Common
  •   Gateway
  •   Interface(RFC3875) 웹서버는
  •   웹브라우저의
  •   요청을 “환경변수”와
  •   “표준
  •   입/출력”을
  •   통해 “응용프로그램”에게
  •   “위임” SERVER_PROTOCOL,
  •   SERVER_PORT,
  •   REQUEST_METHOD,
  •   PATH_INFO,
  •   PATH_TRANSLATED,
  •    SCRIPT_NAME,
  •   QUERY_STRING,
  •   REMOTE_HOST,
  •   REMOTE_ADDR,
  •   REMOTE_USER
  •   ... 121990 2000 2012 12
  • CGIprintf("%s%c%cn", "Content-Type:text/html", 13, 10);printf("<html><head><title>Multiplication results" "</title></head><body");printf("<h3>results</h3>");char *data = getenv("QUERY_STRING");if(data == NULL) { printf("<p>Error!</p>");} else if(sscanf(data,"m=%ld&n=%ld",&m,&n) != 2) { printf("<p>Error!</p>");} else { printf("<p>The product of %ld and %ld is " "<b>%ld</b>.</p>",m,n,m*n);}printf("</body></html>"); 13 13
  • CGIMultiplication resultsThe Product of 10 and 20 is 200. 14 14
  • WAS 웹과
  •   Multi-tier의
  •   만남, WAS의
  •   등장 Web
  •   +
  •   Application
  •   Server 웹서버는
  •   웹브라우저의
  •   요청을 “WAS라는
  •   응용프로그램”에게
  •   “위임”하고, WAS는
  •   이를
  •   다시
  •   “WAS가
  •   관리”하는 “개별
  •   웹
  •   응용프로그램”에게
  •   “전달”. WebLogic,
  •   WebSphere
  •   and
  •   ... Netscape
  •   Enterprise
  •   Server
  •   /
  •   NSAPI
  •   /
  •   Livewire,
  •   IIS
  •   /
  •   ISAPI
  •   /
  •   Active
  •   Server
  •   Pages,
  •   Java
  •   Web
  •   Server...
  •   /
  •   Servlet
  •   /
  •   Java
  •    Server
  •   Pages,
  •   Tomcat,
  •   Resin,
  •   JBoss,
  •   JRun,
  •   ColdFusion,
  •   NetDynamics,
  •   ... 151990 2000 2012 15
  • WAS<%@ page language=”java”%><html><head><title>Multiplication results</title></head><body><h3>Multiplication results</h3><% try {long m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParamter(“n”));%><p>The product of <%= m %> and <%= n %> is<b><%= (m*n) %></b>.</p><% } catch(Exception e) { %><p>Error!</p><% } %></body></html> 16 16
  • WASMultiplication resultsThe Product of 10 and 20 is 200. 17 17
  • 프레임웍 수동적
  •   프로그래밍의
  •   시대, 프레임웍
  •   Returns 라이브러리
  •   vs
  •   프레임웍 A
  •   library
  •   is
  •   essentially
  •   a
  •   set
  •   of
  •   functions
  •   that
  •   you
  •   can
  •   call,
  •   these
  •   days
  •   usually
  •   organized
  •   into
  •   classes.
  •   Each
  •   call
  •   does
  •    some
  •   work
  •   and
  •   returns
  •   control
  •   to
  •   the
  •   client. A
  •   framework
  •   embodies
  •   some
  •   abstract
  •   design,
  •   with
  •   more
  •   behavior
  •   built
  •   in.
  •   In
  •   order
  •   to
  •   use
  •   it
  •   you
  •   need
  •   to
  •   insert
  •    your
  •   behavior
  •   into
  •   various
  •   places
  •   in
  •   the
  •   framework
  •   either
  •   by
  •   subclassing
  •   or
  •   by
  •   plugging
  •   in
  •   your
  •   own
  •   classes.
  •   The
  •    frameworks
  •   code
  •   then
  •   calls
  •   your
  •   code
  •   at
  •   these
  •   points. You
  •   call
  •   Library
  •   &
  •   
  •   Framework
  •   calls
  •   You. Inversion-of-Control Where
  •   is
  •   main()? 181990 2000 2012 18
  • 프레임웍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
  • 프레임웍YourCode 20 20
  • PresentModel-View-Controller Ruby on Rails Struts Spring1990 2000 2012 21
  • MVC 생산성
  •   향상의
  •   유혹, MVC
  •   Returns 2004,
  •   Tim
  •   O’Reilly,
  •   Web
  •   2.0 Model-View-Controller 웹
  •   요청
  •   해석
  •   /
  •   전달
  •   /
  •   응답
  •   처리,
  •   입출력값
  •   검증,
  •   세 션
  •   관리,
  •   템플릿,
  •   데이터베이스
  •   접근,
  •   보안,
  •   AJAX,
  •   ... Turbine,
  •   Struts,
  •   ASP.NET,
  •   WebWork,
  •   Zope,
  •   JSF,
  •    Spring,
  •   Rails,
  •   Django,
  •   Grails,
  •   Play,
  •   ... Prototype.JS,
  •   jQuery,
  •   YUI,
  •   Dojo,
  •   ... 221990 2000 2012 22
  • MVCclass ProductModel { long multiplier, multiplicant, product; ... M}class CalcService { long getProduct(long m, long n) { return m * n; } ...}<jsp:useBean id=”model” class=”ProductBean”/><h3>Multiplication results</h3> V<p>The product of <jsp:getProperty name=”model” property=”multiplier”/> and<jsp:getProperty name=”model” property=”multiplicand”/> is<b><jsp:getProperty name=”model” property=”product”/></b>.</p>long 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
  • MVCMultiplication resultsThe Product of 10 and 20 is 200. 24 24
  • 루비
  •   온
  •   레일즈 Easy
  •   Come
  •   Easy
  •   Go, 루비
  •   온
  •   레일즈 2004,
  •   David
  •   Heinemeier
  •   Hansson, 37signals,
  •   Basecamp.com 15분
  •   만에
  •   블로그
  •   만들기!? “Ruby
  •   할
  •   줄
  •   아는
  •   사람
  •   손~” 管理理 Convention-over-Configuration,
  •   Scaffolding,
  •    RESTful
  •   routing,
  •   ActionRecord,
  •   Template,
  •    不不可 AJAX
  •   Support,
  •   Testing,
  •   Micro
  •   Web
  •   Server,
  •   ... 251990 2000 2012 25
  • 루비
  •   온
  •   레일즈누구나
  •   15분에
  •   블로그를
  •    만들
  •   수
  •   있었다면... 우린
  •   지금쯤... ... 26 26
  • 스트러츠
  •   &
  •   스프링 따뜻한
  •   봄날, 스트러츠
  •   &
  •   스프링 2000,
  •   Craig
  •   McClanahan,
  •   Struts →
  •   MVC
  •   on
  •   Servet
  •   API 管理理 2002,
  •   Rod
  •   Johnson,
  •   Spring
  •   Framework 可能 →
  •   General
  •   Purpose
  •   “IoC”
  •   Container So
  •   what?
  •   Rails?
  •   Django?
  •   Who
  •   cares? 271990 2000 2012 27
  • 스트러츠
  •   &
  •   스프링 서산에
  •   지는
  •   해는 지고
  •   싶어
  •   지나...나를
  •   버리고
  •   가시는
  •   님은 가고
  •   싶어
  •   가나... 28 28
  • Future모바일, 소셜 & 클라우드 비동기 프레임웍 경량 웹프레임웍프론트엔드 웹프레임웍 Play! 프레임웍1990 2000 2012 29
  • 소셜,
  •   모바일
  •   그리고
  •   클라우드T G I F 30 30
  • 앱스토어 31 31
  • N-스크린 32 32
  • 리얼타임 33 33
  • 빅
  •   데이터출처:
  •   http://mashable.com/2011/06/28/data-infographic/ 34 34
  • 소셜,
  •   모바일
  •   그리고
  •   클라우드 Never OTL!
  •   이미지
  •   출처:
  •   http://www.gunchinews.com/blog2/editor_list.php?idxno=161&cidxno=70&page=1&blog_id=mosi 35 35
  • 비동기 Simply
  •   the
  •   Best, 비동기
  •   Returns Async?
  •   Non-Blocking
  •   I/O? 집적도,
  •   발열,
  •   간섭...
  •   물리적
  •   한계
  •   →
  •   CPU
  •   성능
  •   정체 CPU
  •   코어
  •   개수만
  •   증가
  •   →
  •   멀티
  •   코어의
  •   성능
  •   극대화! “어차피
  •   멀티
  •   쓰레드로
  •   감당할
  •   수
  •   없다면,
  •   한
  •   번에
  •   하 나씩~
  •   시간이
  •   걸리는
  •   작업은
  •   맨
  •   뒤로
  •   보내
  •   버리고,
  •    빨리
  •   빨리
  •   처리하자~” Node.js,
  •   Vert.x,
  •   Akka,
  •   Parallel
  •   Python,
  •   ... 361990 2000 2012 36
  • 동기
  •   vs
  •   비동기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)
  •   a-b
  •   
  •   
  •   (2)
  •   b-a
  •   
  •   
  •   (3)
  •   알
  •   수
  •   없음
  •   
  •   
  •   (4)
  •   동시에 37 37
  • 동기
  •   &
  •   멀티쓰레드 서버 ▶ 1 || || 2 ▶클라이언트 ▶ ▶ Long
  •   I/O
  •    Task ▶ ▶ 4 3 응답 38 38
  • 동기
  •   &
  •   멀티쓰레드동기
  •   &
  •   멀티쓰레드 39 39
  • 비동기
  •   &
  •   싱글쓰레드
  •    서버 || || ▶ 1 3클라이언트 Long ▶ ▶ I/O ▶ ▶ Task 5 6 4 응답 40 40
  • 비동기
  •   &
  •   싱글쓰레드
  •   비동기
  •   &
  •   싱글쓰레드 41 41
  • 비동기
  •   &
  •   멀티쓰레드 서버 Worker 1 1 || || ▶ ▶ || || ▶클라이언트 ▶ ▶ 2 2 3 ▶ ▶ 3 Long
  •   I/O
  •    응답 Task 42 42
  • 비동기
  •   &
  •   멀티쓰레드비동기
  •   &
  •   멀티쓰레드 43 43
  • 경량
  •   웹프레임웍 Keep
  •   it
  •   simple,
  •   Stupid! 경량
  •   웹프레임웍 “주류”
  •   웹
  •   프레임웍
  •   Bigger
  •   and
  •   Bigger~ 우리에게
  •   필요한건?
  •   RESTful
  •   API
  •   서비스 요청
  •   파싱
  •   →
  •   라우팅
  •   →
  •   응답!
  •   OK! 데이터베이스
  •   접근?
  •   템플릿?
  •   No
  •   Thank
  •   You! Sinatra(Ruby),
  •   Flask(Python),
  •    Express(Node.js),
  •   Spray(Scala),
  •   Jersey(Java),
  •    Play-mini(Scala),
  •   Gretty(Groovy),
  •   ... 441990 2000 2012 44
  • 경량
  •   웹프레임웍
  •   -
  •   Sinatra$ gem install sinatra$ cat > hello.rbrequire sinatraget /hello/:name do |name| Hello, #{name}end$ ruby -rubygems hello.rb 45 45
  • 경량
  •   웹프레임웍
  •   -
  •   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
  • 경량
  •   웹프레임웍
  •   -
  •   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
  • 경량
  •   웹프레임웍
  •   -
  •   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
  • 프론트엔드
  •   웹프레임웍 HTML5와
  •   웹앱, 프론트엔드
  •   웹프레임웍 Web-as-a-Platform!! URL
  •   해시(#)
  •   기반의
  •   라우팅(단일
  •   페이지
  •   인터페이 스),
  •   템플릿
  •   엔진,
  •   자바스크립트
  •   객체
  •   기반
  •   모델 UI
  •   툴킷
  •   /
  •   바인딩,
  •   WebStorage
  •   &
  •   HTTP를
  •   통한
  •   모 델
  •   퍼시스턴스,
  •   양방향
  •   RPC,
  •   ... Backbone.js,
  •   Knockout.js,
  •   Sencha
  •   EXT
  •   JS,
  •    Javascript
  •   MVC,
  •   SproutCore,
  •   Angular.js,
  •    Batman.js
  •   ,
  •   Ember.js(SprouteCore2),
  •   ... 491990 2000 2012 49
  • 프론트엔드
  •   웹프레임웍
  •   -
  •   Backbone.js<script 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
  • 프론트엔드
  •   웹프레임웍
  •   -
  •   Knockout.js<select data-bind="options:tickets,optionsCaption:Choose...,optionsText:name,value:chosenTicket"></select><button data-bind="enable:chosenTicket,click:resetTicket">Clear</button><p data-bind="with:chosenTicket">You have chosen <b data-bind="text:name"></b>($<span data-bind="text:price"></span>)</p><script type="text/javascript">function 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
  • 프론트엔드
  •   웹프레임웍
  •   -
  •   Sencha
  •   Ext
  •   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}</h2><p>{age} years old</p>’}); 52 52
  • Play!
  •   프레임웍 두
  •   마리
  •   토끼를
  •   한
  •   번에, Play!
  •   프레임웍 자바
  •   &
  •   스칼라
  •   모두
  •   지원 루비
  •   온
  •   레일즈와
  •   유사한
  •   CoC,
  •   Scaffolding,
  •   콘솔,
  •   ... 스칼라
  •   DSL
  •   기반
  •   템플릿 Comet/Long
  •   Polling/WebSocket
  •   지원
  •   내장, JPA(자바),
  •   Ebean
  •   ORM(자바),
  •   Anorm
  •   DAO(스칼 라)를
  •   통한
  •   SQL/NoSQL
  •   데이터베이스
  •   모두
  •   지원 “Akka”
  •   프레임웍을
  •   통한
  •   비동기/분산
  •   처리 531990 2000 2012 53
  • Play!
  •   프레임웍
  •   -
  •   디렉토리
  •   구조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
  • Play!
  •   프레임웍
  •   -
  •   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
  • Play!
  •   프레임웍
  •   -
  •   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("<h1>file 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
  • Play!
  •   프레임웍
  •   -
  •   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("<h1>file uploaded</h1>").as(HTML) }.getOrElse { BadRequest("file upload error!") } } def download = Action { Ok.sendFile(new java.io.File("/tmp/fileToServe.pdf")) }} 57 57
  • Play!
  •   프레임웍
  •   -
  •   View
  •   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) {      <li>Hello @name!</li>    }  </ul>  <p class="buttons">    <a href="@routes.Application.index">Back to the form</a>  </p>} 58 58
  • Play!
  •   프레임웍
  •   -
  •   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
  • Play!
  •   프레임웍종합
  •   선물
  •   세트는 ... 60 60
  • Epilogue “버스와 여자는...떠나면 잡는 게 아니란다.” 61
  • Putting
  •   It
  •   All
  •   Together
  •   -
  •   If
  •   I
  •   were
  •   God... Backbone.js 프론트엔드 Express 경량 정적
  •   컨텐츠 Cherokee 웹
  •   앱 API
  •   서버 웹
  •   서버 웹프레임웍 Angular.js 웹프레임웍 Spray NO
  •   CGI Nginx 분산
  •   객체
  •   캐시 Redis RDBMS SQL 비동기 Akka
  •   +
  •   Spring
  •   IoC 애플리케이션
  •   서버 캐시 & 데이터베이스 & 프레임웍 웹
  •   가속기 Varnish MongoDB NoSQL YOU
  •   CAN’T
  •    YOURBaaS.io
  •   ^^; 백엔드 BaaS 컴퓨팅 AWS
  •   EC2 IaaS 리소스 TOUCH
  •    리거시 STACK MAKE THIS!! OWN 62 62
  • Putting
  •   It
  •   All
  •   Together
  •   -
  •   If
  •   I
  •   were
  •   God... Backbone.js 프론트엔드 Express 경량 정적
  •   컨텐츠 Cherokee 웹프레임웍 Angular.js 웹프레임웍 Spray NO
  •   CGI Nginx 분산
  •   객체
  •   캐시 Redis RDBMS SQL 비동기 Akka
  •   +
  •   Spring
  •   IoC & & 프레임웍 웹
  •   가속기 Varnish MongoDB NoSQL YOU
  •   CAN’T
  •    YOURBaaS.io
  •   ^^; BaaS AWS
  •   EC2 IaaS TOUCH
  •    STACK THIS!! OWN 63 63
  • Putting
  •   It
  •   All
  •   Together
  •   -
  •   If
  •   I
  •   were
  •   God... Backbone.js Express Cherokee Angular.js Spray Nginx Redis RDBMS Akka
  •   +
  •   Spring
  •   IoC & & Varnish MongoDB YOU
  •   CAN’T
  •   BaaS.io
  •   ^^; AWS
  •   EC2 TOUCH
  •    THIS!! STACK 64 64
  • Putting
  •   It
  •   All
  •   Together
  •   -
  •   If
  •   I
  •   were
  •   God... 웹앱 Vanish 정적 웹
  •   서버 정적Backbone 컨텐츠 HTTP Cherokee Javascript 클라이언트 애플리케이션
  •   서버 L4
  •   or
  •   CDN MongoDB JSON/HTTP Akka모바일
  •   앱 RESTful Redis Actor Actor Java API
  •   서버 클라이언트 MySQL Express TCP/IP Actor ActorObjective-C클라이언트 Remote
  •   Akka
  •   with
  •   L4 Spring
  •   IoC or
  •   Distributed
  •   Akka 리거시 JSON/HTTP3rd-Party BaaS
  •   -
  •   BaaS.io IaaS
  •   -
  •   AWS
  •   EC2 매시업 푸시 스토리지 CPU GPU BaaS OpenAPI클라이언트 ... ... ... ... 65 65
  • Epilogue 스프링
  •   KIN! Node.js
  •   짱
  •   좋아~ 스프링은
  •   여전히 정말
  •   좋은
  •   통합
  •   프레임웍! “Lord”
  •   Johnson이 typesafe로
  •   갔다던데... Akka
  •   +
  •   Spring?! 봄날이
  •   다시
  •   찾아
  •   올까? ㅠ..ㅠ 봄
  •   여름
  •   가을
  •   겨울 그리고...
  •   다시
  •   봄~어쩌라고?! -_-+++ 와~
  •   끝났다~ 버스와
  •   여자는... +_+ 떠나면
  •   잡는
  •   게
  •   아니라능~ -ㅅ-;
  •    66 66
  • 참고자료HTTP,
  •   W3C
  •   http://www.w3.org/Protocols/HTTP/AsImplemented.htmlHTTP,
  •   위키피디아
  •   http://en.wikipedia.org/wiki/Hypertext_Transfer_ProtocolCGI,위키피디아
  •   http://en.wikipedia.org/wiki/Common_Gateway_Interface자바
  •   서블릿,
  •   위키피디아
  •   http://en.wikipedia.org/wiki/Java_Servlet소프트웨어
  •   프레임웍,
  •   위키피디아
  •   http://en.wikipedia.org/wiki/Software_framework프레임웍
  •   vs
  •   라이브러리,
  •   스택오버플로
  •   http://goo.gl/4cLE7제어의
  •   역전(IoC),
  •   마틴파울러
  •   http://martinfowler.com/bliki/InversionOfControl.html웹
  •   애플리케이션
  •   프레임웍,
  •   위키피디아
  •   http://en.wikipedia.org/wiki/Web_application_framework웹
  •   애플리케이션
  •   프레임웍
  •   비교표,
  •   위키피디아
  •   http://goo.gl/vnu23자바스크립트
  •   MVC
  •   프레임웍
  •   비교
  •   http://todomvc.com자바스크립트
  •   MVC
  •   프레임웍
  •   비교
  •   http://goo.gl/18BQlSpring
  •   프레임웍
  •   홈페이지
  •   http://www.springsource.org
  •   Play
  •   프레임웍
  •   홈페이지
  •   http://www.playframework.org
  •   Spray
  •   프레임웍
  •   홈페이지
  •   http://spray.ccFlask
  •   프레임웍
  •   홈페이지
  •   http://flask.pocoo.orgSinatra
  •   프레임웍
  •   홈페이지
  •   http://www.sinatrarb.com
  •   Express
  •   프레임웍
  •   홈페이지
  •   http://expressjs.com
  •   Prototype
  •   js
  •   홈페이지
  •   http://prototypejs.orgjQuery
  •   홈페이지
  •   http://jquery.comDojo
  •   Toolkit
  •   홈페이지
  •   http://dojotoolkit.org
  •   Knockout
  •   프레임웍
  •   홈페이지
  •   http://knockoutjs.com
  •   Backbone
  •   프레임웍
  •   홈페이지
  •   http://backbonejs.org
  •   Sencha
  •   Touch
  •   홈페이지
  •   http://www.sencha.com 67 67
  • 감사합니다.앱스프레소Lab
  •   /
  •   장동수
  •   /
  •   @iolothebard 68 68