자바스크립트 프레임워크 살펴보기

5,001 views

Published on

HTML5JS 모임 발표자료

Published in: Technology, Education
5 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total views
5,001
On SlideShare
0
From Embeds
0
Number of Embeds
273
Actions
Shares
0
Downloads
60
Comments
5
Likes
13
Embeds 0
No embeds

No notes for slide

자바스크립트 프레임워크 살펴보기

  1. 1. HTML5JS Study GroupJavaScript Framework. 고재도
  2. 2. 발표자 고재도회사 : 대우정보시스템Email : haibane84@gmail.comFace book : http://www.facebook.com/jeado.ko관심 IT 분야 : JavaScript Framework, Java Framework, Software Design, etc.
  3. 3. 오모리 찌개이야기
  4. 4. 고객 김치찌개 주문 김치찌개!
  5. 5. 김치찌개를 만들려면뭘 해야 하지?
  6. 6. 주문한 날 김장을 한다!
  7. 7. 주문 후 두째 날돼지를 잡는다!
  8. 8. 재료 준비 끝? 주문 후 셋째 날 고민 중…
  9. 9. 고객을 위해서더욱 더 첨가해~ 주문 후 넷째 날 요리 시작!!
  10. 10. 5일이 걸려 만들어진 김치찌개
  11. 11. 고객의 반응[response; 反應]
  12. 12. 하지만 이 모든 것이표준 웹 기반의 어플리케이션을 만드는 우리의 현실
  13. 13. 가령Google의 Gmail을 만들어야 한다면 ?
  14. 14. 메시지창
  15. 15. 트리 메뉴
  16. 16. 버튼들
  17. 17. 테이블 or 그리드
  18. 18. 자동완성 기능
  19. 19. 캘린더
  20. 20. 하지만 고려할 점이이게 다가 아니죠
  21. 21. Routers & History Class System DOM Event HandlingModularity Manipulation MVP Data Bound MVC AMD Views MVVM SASS & LESS Cross Browsing Ajax Production Packaging
  22. 22. Routers & History Class System DOM Event HandlingModularity Manipulation MVP Data Bound MVC AMD Views MVVM SASS & LESS Cross Browsing Ajax Production Packaging
  23. 23. •  Spaghetti Code•  심한 커플링•  무분별한 코드 복사•  재사용성 제로
  24. 24.  Hope                                                                                                                                 
  25. 25. JavaScript Framework
  26. 26. 김치찌개 만든다고김장하고 돼지 잡지 마세요!
  27. 27. ! 하지만 Framework는 다양합니다.
  28. 28. ExtJS 4.1
  29. 29. All-in-One Framework Mini Framework
  30. 30. ExtJS 4.1All-in-One Fr amework
  31. 31. Mini Framework
  32. 32. Routers History Class System DOM Event HandlingModularity Manipulation MVP Data Bound Views MVC CSS Animation MVVM SASS LESS Cross Browsing Ajax Production Packaging
  33. 33. Class System DOM Event HandlingModularity Manipulation Data Bound Views MVC Cross Browsing Ajax
  34. 34. Class System DOM Event HandlingModularity Manipulation MVC Ajax
  35. 35. Class System DOM Manipulation Event Handling 6가지 Feature에의지원 여부 및 방식으로 분석 Modularity MVC Ajax
  36. 36. Class SystemExt.define(My.sample.Person, { name: Unknown, constructor: function(name) { if (name) { this.name = name; } }, eat: function(foodType) { alert(this.name + is eating: + foodType); }});var aaron = Ext.create(My.sample.Person, Aaron); aaron.eat(Salad); // alert(Aaron is eating: Salad);
  37. 37. Class SystemExt.define(Computer, { statics: { instanceCount: 0, factory: function(brand) { return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); this.self.instanceCount ++; }});var dellComputer = Computer.factory(Dell);var appleComputer = Computer.factory(Mac);alert(appleComputer.getBrand()); // using the auto-generated getter to get the valueof a config property. Alerts Macalert(Computer.instanceCount); // Alerts 2
  38. 38. DOM Manipulation
  39. 39. DOM Manipulation//by idvar el = Ext.get(my-div);// by DOM element referencevar el = Ext.get(myDivElement);// css3 쿼리 셀렉터 스펙을 통한 처리var el = Ext.query(div .help);
  40. 40. Event Handlingel.on({ click : { fn: this.onClick, scope: this, delay: 100 }, mouseover : { fn: this.onMouseOver, scope: this }, mouseout : { fn: this.onMouseOut, scope: this }});el.on({ click : this.onClick, mouseover : this.onMouseOver, mouseout : this.onMouseOut, scope: this});
  41. 41. Modularity MVC를 통한 Decoupling과 모듈화 Dynamic Loading을 통한 의존성 관리
  42. 42. Ext.require(Ext.Window, function() { new Ext.Window({ title : Loaded Dynamically!, width : 200, height: 100 }).show();});Ext.define(Ext.Window, { extend: Ext.Panel, requires: [Ext.util.MixedCollection], mixins: { draggable: Ext.util.Draggable }});
  43. 43. MVC Ext.application({ requires: [Ext.container.Viewport], name: AM, appFolder: app, launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: panel, title: Users, html : List of users will go here } ] }); } });
  44. 44. MVC
  45. 45. MVC - ViewExt.define(AM.view.user.List ,{ extend: Ext.grid.Panel, alias: widget.userlist, title: All Users, initComponent: function() { this.store = { fields: [name, email], data : [ {name: Ed, email: ed@sencha.com}, {name: Tommy, email: tommy@sencha.com} ] }; this.columns = [ {header: Name, dataIndex: name, flex: 1}, {header: Email, dataIndex: email, flex: 1} ]; this.callParent(arguments); }});
  46. 46. MVC - View
  47. 47. MVC - ControllerExt.define(AM.controller.Users, { extend: Ext.app.Controller, views: [ user.List ], init: function() { this.control({ userlist: { itemdblclick: this.editUser } }); }, editUser: function(grid, record) { console.log(Double clicked on + record.get(name)); }});
  48. 48. MVC - Controller
  49. 49. MVC - Model
  50. 50. MVC - ModelExt.define(AM.model.User, { extend: Ext.data.Model, fields: [name, email]});Ext.define(AM.store.Users, { extend: Ext.data.Store, model: AM.model.User, data: [ {name: Ed, email: ed@sencha.com}, {name: Tommy, email: tommy@sencha.com} ]});Ext.define(AM.controller.Users, { extend: Ext.app.Controller, stores: [Users], models: [User], ...});
  51. 51. Ajax
  52. 52. AjaxExt.define(AM.store.Users, { extend: Ext.data.Store, model: AM.model.User, autoLoad: true, proxy: { type: ajax, url: data/users.json, reader: { type: json, root: users, successProperty: success } }});
  53. 53. Ajax{ success: true, users: [ {id: 1, name: Ed, email: ed@sencha.com}, {id: 2, name: Tommy, email: tommy@sencha.com} ]}proxy: { type: ajax, api: { read: data/users.json, update: data/updateUsers.json }, reader: { type: json, root: users, successProperty: success }}
  54. 54. AjaxExt.Ajax.request({ url: page.php, params: { id: 1 }, success: function(response){ var text = response.responseText; // process server response here }});Ext.Ajax.timeout = 120000; // 120 secondsExt.Ajax.request({ url: page.aspx, timeout: 60000});
  55. 55. UI Components
  56. 56. 그리드, 스케쥴러, 메뉴, 콤보박스, 차트, 각종 입력 필드, 윈 도우, 텝 등… 엄청 많다! http://www.sencha.com/products/extjs/examples/
  57. 57. 그 외 특징들
  58. 58. 훌륭한 매뉴얼과 예제
  59. 59. 하지만 모두 영어
  60. 60. 그래도 번역서도 출판되고Sencha Touch로 인한 인지도 상승
  61. 61. 하지만 공짜가 아니다!
  62. 62. 개발소스 다 공개(GPL)하면 공짜
  63. 63. 그래도 배워두면 Sencha Touch 2.x 개발 바로 들어갈 수 있다!
  64. 64. Internet Explorer 8에서 성능 이슈 발생(클라이언트 PC의 사양에 영향을 많이 받음)
  65. 65. Class System 없습니다.
  66. 66. DOM Manipulation 없습니다. jQuery or Zepto 필요
  67. 67. Modularity 없습니다.
  68. 68. MVC - Model
  69. 69. MVC - Model
  70. 70. MVC - Model
  71. 71. MVC - View HTML 템플릿을 이용
  72. 72. script  type=text/template  id=stats-­‐template    span  id=todo-­‐count      strong%=  remaining  %/strong  %=  remaining  ==  1  ?  item  :  items  %  left    /span    ul  id=filters      li        a  class=selected  href=#/All/a      /li      li        a  href=#/activeActive/a      /li      li        a  href=#/completedCompleted/a      /li    /ul    %  if  (completed)  {  %          button  id=clear-­‐completedClear  completed  (%=  completed  %)/button    %  }  %  /scriptwindow.app.AppView  =  Backbone.View.extend({   ...   statsTemplate:  _.template($(#stats-­‐template).html()),   ...   render:  function()  {   ...   if  (window.app.Todos.length)  {   ...   this.$footer.html(this.statsTemplate({   completed:  completed,   remaining:  remaining   }));   ...   },   ...  });
  73. 73. Ajax API는 있으나 구현체는 없습니다. jQuery or Zepto 필요
  74. 74. Event Handling
  75. 75. UI Components 단 하나도 없습니다.
  76. 76. 그 외 특징들
  77. 77. All-in-One 과 전혀 다른 사상
  78. 78. 무한 확장성 하지만그에 따른 책임도…
  79. 79. 디지이너, 퍼블리셔와 협업하기 좋다
  80. 80. BackBone.js 기반의 개발방식은국내 대규모 시스템 개발에서는 어려울 듯.
  81. 81. 아 놔!요약 좀 해봐
  82. 82. YUI 3.6, Dojo, ExtJS 4 BackBone, Ember, Angurlar•  모두 다 있음 •  UI 컴포넌트 전혀 없음•  배우는데 큰 시간이 필요함 •  배우기 매우 쉬움•  한글화 매뉴얼 필요함 •  한글화 매뉴얼 필요함•  구매비용 발생(ExtJS만) •  다 공짜•  제약이 심함 •  제약이 없음•  디자이너와 협업이 어려움 •  다른 라이브러리 사용필요 •  UI 아키텍쳐링이 필요함 •  디자이너와 협업이 쉬움
  83. 83. https://github.com/addyosmani/todomvc
  84. 84. QnA

×