SlideShare uma empresa Scribd logo
1 de 89
Baixar para ler offline
HTML5JS Study Group
JavaScript Framework.




                        고재도
발표자
                                        고재도
회사 : 대우정보시스템

Email : haibane84@gmail.com

Face book : http://www.facebook.com/jeado.ko

관심 IT 분야 : JavaScript Framework, Java Framework, Software Design, etc.
오모리 찌개
이야기
고객 김치찌개 주문


         김치찌개!
김치찌개를 만들려면
뭘 해야 하지?
주문한 날 김장을 한다!
주문 후 두째 날
돼지를 잡는다!
재료 준비 끝?




           주문 후 셋째 날
           고민 중…
고객을 위해서
더욱 더 첨가해~




 주문 후 넷째 날 요리 시작!!
5일이 걸려 만들어진 김치찌개
고객의 반응[response; 反應]
하지만 이 모든 것이
표준 웹   기반의 어플리케이션을 만드는
          우리의 현실
가령
Google의 Gmail을 만들어야 한다면 ?
메시지창
트리 메뉴
버튼들
테이블 or 그리드
자동완성 기능
캘린더
하지만 고려할 점이
이게 다가 아니죠
Routers & History          Class System
                      DOM        Event Handling
Modularity          Manipulation
                               MVP

 Data Bound         MVC              AMD
   Views
                    MVVM
                              SASS & LESS
  Cross Browsing                       Ajax
                Production Packaging
Routers & History          Class System
                      DOM        Event Handling
Modularity          Manipulation
                               MVP

 Data Bound         MVC              AMD
   Views
                    MVVM
                              SASS & LESS
  Cross Browsing                       Ajax
                Production Packaging
•    Spaghetti Code
•    심한 커플링
•    무분별한 코드 복사
•    재사용성 제로
 
Hope

                                                                                                                                        
JavaScript Framework
김치찌개 만든다고
김장하고 돼지 잡지 마세요!
!
             하지만
       Framework는 다양합니다.
ExtJS 4.1
All-in-One Framework




  Mini Framework
ExtJS 4.1


All-in-One Fr
  amework
Mini Framework
Routers  History          Class System
                      DOM        Event Handling
Modularity          Manipulation
                               MVP

 Data Bound
   Views
                    MVC              CSS Animation


                    MVVM
                              SASS  LESS
  Cross Browsing                             Ajax
                Production Packaging
Class System
                DOM        Event Handling
Modularity    Manipulation

 Data Bound
   Views
              MVC

  Cross Browsing                 Ajax
Class System
               DOM        Event Handling
Modularity   Manipulation


             MVC

                                Ajax
Class System

                  DOM Manipulation

                  Event Handling
  6가지 Feature에의
지원 여부 및 방식으로 분석
                  Modularity

                  MVC

                  Ajax
Class System
Ext.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);
Class System
Ext.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 value
of a config property. Alerts Mac
alert(Computer.instanceCount); // Alerts 2
DOM Manipulation
DOM Manipulation
//by id
var el = Ext.get(my-div);

// by DOM element reference
var el = Ext.get(myDivElement);

// css3 쿼리 셀렉터 스펙을 통한 처리
var el = Ext.query(div  .help);
Event Handling
el.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
});
Modularity




       MVC를 통한 Decoupling과 모듈화
      Dynamic Loading을 통한 의존성 관리
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'
    }
});
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'
                    }
                 ]
             });
          }
      });
MVC
MVC - View
Ext.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);
      }
});
MVC - View
MVC - Controller
Ext.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'));
      }
});
MVC - Controller
MVC - Model
MVC - Model
Ext.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'],
    ...
});
Ajax
Ajax
Ext.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'
        }
      }
});
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'
  }
}
Ajax
Ext.Ajax.request({
    url: 'page.php',
    params: {
       id: 1
    },
    success: function(response){
       var text = response.responseText;
       // process server response here
    }
});

Ext.Ajax.timeout = 120000; // 120 seconds
Ext.Ajax.request({
    url: 'page.aspx',
    timeout: 60000
});
UI Components
그리드, 스케쥴러, 메뉴, 콤보박스, 차트, 각종 입력 필드, 윈
         도우, 텝 등… 엄청 많다!



 http://www.sencha.com/products/extjs/examples/
그 외 특징들
훌륭한 매뉴얼과 예제
하지만 모두 영어
그래도 번역서도 출판되고
Sencha Touch로 인한 인지도 상승
하지만 공짜가 아니다!
개발소스 다 공개(GPL)하면

     공짜
그래도 배워두면 Sencha Touch 2.x
       개발 바로 들어갈 수 있다!
Internet Explorer 8에서 성능 이슈 발생
(클라이언트 PC의 사양에 영향을 많이 받음)
Class System




               없습니다.
DOM Manipulation




                  없습니다.
            jQuery or Zepto 필요
Modularity




             없습니다.
MVC - Model
MVC - Model
MVC - Model
MVC - View




         HTML 템플릿을 이용
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	
  
             	
  %	
  }	
  %	
  
/script

window.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	
  
                     }));	
  
                     ...	
  
             },	
  
     ...	
  
});
Ajax




       API는 있으나 구현체는 없습니다.
          jQuery or Zepto 필요
Event Handling
UI Components




                단 하나도 없습니다.
그 외 특징들
All-in-One 과 전혀 다른 사상
무한 확장성 하지만
그에 따른 책임도…
디지이너, 퍼블리셔와 협업하기 좋다
BackBone.js 기반의 개발방식은
국내 대규모 시스템 개발에서는 어려울 듯.
아 놔!
요약 좀 해봐
YUI 3.6, Dojo, ExtJS 4   BackBone, Ember, Angurlar


•    모두 다 있음                   •    UI 컴포넌트 전혀 없음
•    배우는데 큰 시간이 필요함            •    배우기 매우 쉬움
•    한글화 매뉴얼 필요함               •    한글화 매뉴얼 필요함
•    구매비용 발생(ExtJS만)           •    다 공짜
•    제약이 심함                    •    제약이 없음
•    디자이너와 협업이 어려움             •    다른 라이브러리 사용필요
                               •    UI 아키텍쳐링이 필요함
                               •    디자이너와 협업이 쉬움
https://github.com/addyosmani/todomvc
QnA

Mais conteúdo relacionado

Mais procurados

Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
yongwoo Jeon
 
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
NAVER Engineering
 

Mais procurados (20)

Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
 
Vuejs 시작하기
Vuejs 시작하기Vuejs 시작하기
Vuejs 시작하기
 
[12]MVVM과 Grab Architecture : MVVM에 가기 위한 여행기
[12]MVVM과 Grab Architecture : MVVM에 가기 위한 여행기[12]MVVM과 Grab Architecture : MVVM에 가기 위한 여행기
[12]MVVM과 Grab Architecture : MVVM에 가기 위한 여행기
 
Angular js quick start
Angular js quick startAngular js quick start
Angular js quick start
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
 
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development
 
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
정적 컨텐츠 제너레이터 GatsbyJS에 대해서 알아봅시다.
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개
 
[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기[NEXT] Andorid에 MVC 패턴 적용하기
[NEXT] Andorid에 MVC 패턴 적용하기
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
 
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3처음배우는 자바스크립트, 제이쿼리 #3
처음배우는 자바스크립트, 제이쿼리 #3
 
Dependency Injection 소개
Dependency Injection 소개Dependency Injection 소개
Dependency Injection 소개
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 

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

프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
중선 곽
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)
Channy Yun
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
지수 윤
 

Semelhante a 자바스크립트 프레임워크 살펴보기 (20)

Nodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjsNodejs, PhantomJS, casperJs, YSlow, expressjs
Nodejs, PhantomJS, casperJs, YSlow, expressjs
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
Dreamweaver CS5.5 를 이용한 jQueryMobile 개발
 
HeadFisrt Servlet&JSP Chapter 3
HeadFisrt Servlet&JSP Chapter 3HeadFisrt Servlet&JSP Chapter 3
HeadFisrt Servlet&JSP Chapter 3
 
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
Actionbar and fragment
Actionbar and fragmentActionbar and fragment
Actionbar and fragment
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)
 
알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations알아봅시다, Polymer: Web Components & Web Animations
알아봅시다, Polymer: Web Components & Web Animations
 
Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기Meteor React Tutorial 따라하기
Meteor React Tutorial 따라하기
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)04.실행환경 교육교재(화면처리)
04.실행환경 교육교재(화면처리)
 
테스트
테스트테스트
테스트
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
Vue.js 기초 실습.pptx
Vue.js 기초 실습.pptxVue.js 기초 실습.pptx
Vue.js 기초 실습.pptx
 
Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발Jenkins를 활용한 javascript 개발
Jenkins를 활용한 javascript 개발
 

Último

Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
Wonjun Hwang
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
Wonjun Hwang
 

Último (6)

MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
 
캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)
 

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