엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS 5

2015. 04. 14 조만영 기술총괄이사

Ext JS

목차

§  기업내 전산환경의 변화에 따른 대안 제안

§  ExtJS 특징

- 기업 환경에 최적화된 UI

- 고수준의 차트기능 기본내장

- Dashboard 개발에 적합한 UI

- 반응형 레이아웃 기본 지원

- 개방형 개발 환경 지원

- 강력한 전용 개발 도구

-  ExtJS Architecture

- 기업용 애플리케이션을 위한 Full Stack 솔루션

- 모바일 대응

§  고객사례

§  결론

Page 2

기업내 전산 환경의 변화에 따른 대안 제안

기업내 전산 환경의 변화

§  직원들 컴퓨터 환경의 변화 - 데스크탑 환경: Windows XP, Windows 7, Windows 8, Mac, Linux 등

- 모바일 환경 : 아이폰, 안드로이드 스마트폰과 태블릿 PC 혼재

§  클라우드 컴퓨팅 환경의 일반화

- 설치형 소프트웨어보다 웹기반 소프트웨어 사용 증대

Page 4

기업내 전산환경의 변화

§  Windows 플랫폼 종속에 따른 문제점 - Windows XP 단종에 따른 보안 위협 증가

- Windows 7 판매 중단

- Windows 8 라이센스 구매 필요

- 기업내 MS Windows 라이센스 구매 비용 증가

- 이 문제는 추후 에서도 계속 지연 될 것임

-  ActiveX 와 같은 MS 종속적 기술 사용을 중단해야함.

Page 5

기업내 전산 환경의 변화

§  크로스 디바이스, 크로스 플랫폼 이슈

§  BYOD(Bring Your Own Device) 환경

§  다양한 스크린 사이즈 대응 이슈

§  특정 플랫폼 종속적 기술의 사용 배제 필요

-  ActiveX : MS Windows 환경외에 사용 불가

§  특정 디바이스 종속적 기술의 사용 배제 필요 - 플래시 : 모바일 사용 불가

Page 6

차세대 기업 애플리케이션 솔루션의 조건

크로스 플랫폼, 크로스 디바이스 기술

PC 와 모바일 환경 대응 기술

특정 회사 OS 에 종속되지 않는 기술

Rich 애플리케이션 UI

Page 7

HTML5 와 웹기술의 장점

§  웹브라우저 설치된 어떤 환경에서도 동작한다. -  Internet Explorer, Chrome, Safari, Opera, Firefox

§  모바일에서도 동작

§  특정 벤더에 종속적이지 않음

§  웹애플리케이션 별도의 설치가 필요하지 않음.

§  배포와 관리의 용이

Page 8

HTML5 와 웹기술의 단점

§  HTML, CSS, Javascript 를 별도로 학습해야 하는 부담

§  강력한 저작도구가 존재하지 않음

§  개발 방법론이 확립되지 않음

§  기술지원 체계가 존재하지 않음

§  전문 교육 과정이 존재하지 않음

§  솔루션 형태의 상용화 제품이 많지 않음

Page 9

ExtJS 의 특징

Page 10

Ext JS 소개

§  Ext JS 는 데스크탑 스타일의 웹기반 애플리케이션 자바스크립트 라이브러리

§  개발사 : Sencha Inc. http://www.sencha.com

§  2007년 Ext JS 2.0 시작

§  2014년 Ext JS 5.0

§  2015년 ExtJS 6.0

§  개발사의 지속적인 사후 관리 및 버전 업그레이드

§  한국 총판 미래웹기술연구소(주) http://miraeweb.com/sencha

ExtJS 의 특징

§  순수 웹표준 방식

§  플러그인 기술 필요없음

§  기업 업무 환경에 최적화된 UI 컴포넌트 제공

§  기업 환경에 적합한 그래프와 차트 제공

§  빠른 업무 화면 개발을 위한 비쥬얼 저작도구 제공

§  ExtJS 라이브러리로 개발 웹브라우저 HTML5/CSS3/JS 로 표현

§  반응형 레이아웃

§  태블릿 기본 지원

§  지원브라우저

-  IE 8 이상, Chrome, Firefox, Opera, iOS, Android 브라우저

Page 12

Sencha ExtJS 를 써야하는 3가지 이유

1.  고품질의 미려한 UI 컴포넌트 셋 100종 기본 제공 -  트리메뉴, 버튼, 탭, 캘린더 등등

2.  압도적인 성능의 고수준의 차트 솔루션

-  50종의 2D, 3D 고품질 차트 기본 내장

3.  쾌속 개발이 가능한 비쥬얼 저작도구 Sencha Architect 제공

-  에디터 개발과는 비교할 수 없는 개발 생산성을 보장

Page 13

기업 환경에 최적화된 UI

Page 14

ExtJS UI

ExtJS UI

Page 16

UI 위젯과 컴포넌트

§  Ext JS 는 수백가지 크로스 브라우저가 지원되는 사용자 인터페이스 컴포넌트들을 지원

§  기업용 업무 화면에 필요한 요소들은 거의 모두 갖추고 있음.

•  Panels •  Grids •  Trees 

•  Toolbars, Buttons, Menus •  Windows •  컴포넌트 상세 예제 페이지  the examples page 

Grid

§  총 18 종의 그리드 형태 지원 -  Array Grid, Multi Sort Grid, Big Data Grid, Widget Grid 등등

§  대용량 데이타 지원

-  BufferedRender

§  순수 웹표준 기술 방식

Page 18

Array Grid

Page 19

Grouped Grid

Page 20

Multi Sort Grid

Page 21

Big Data Grid

Page 22

Widget Grid

Page 23

Live Cell Editing

Page 24

Row 확장 기능

Page 25

Tree

§  9가지 트리형태 지원 -  Basic Trees

-  Tree Reorder

-  Tree Grid

-  Two Grid

-  Check Tree

-  XML Tree

-  Filtered Tree

-  Linear Data Geographical Tree

Page 26

Basic Tree

Page 27

Tree Grid

Page 28

Check Tree

Page 29

Filtered Tree

Page 30

업무용 화면 요소 기본 제공

§  Tab

§  Button

§  Toolbar

Page 31

폼

§  20여가지 이상의 폼필드를 지원

§  폼 상세 예제 페이지 the examples page

업무용 화면 요소 기본 제공

Page 33

테마시스템

Page 34

고수준의 차트기능 기본내장

Page 35

고품질의 웹표준 차트

§  50종의 차트 기본 제공

§  차트 에니메이션 기본 지원

§  섬세한 커스터마이징 가능

§  3D 차트 제공

§  차트 예제 보기

§  http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#column-basic

50종의 고급 차트 기본 내장

§  http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#column-basic

Page 38

Page 39

Dashboard 개발에 적합한 UI

Page 42

임원용 Dashboard 개발 예제

Project Management Dashboard

ExtJS 적용사례

Page 45

Multi Window Desktop

Page 46

반응형 레이아웃 기본 지원

Page 47

반응형 레이아웃 지원

PC MOBILE

고객 레퍼런스

Page 49

국내 도입 레퍼런스

§  삼성전자

§  삼성SDS

§  LGCNS

§  안랩

§  동아제약

§  티켓링크

§  안그라픽스

§  유쎄스파트너스

§  DDK 코리아

§  아스텔라스코리아

Page 50

§  롯데 하이마트

§  CJ 정보통신

§  MRO 코리아

§  EMC 코리아

§  한솔넥스지

§  이지웰페어

§  KIS정보통신

§  청강대학교

§  연세대학교

§  연암대학교

§  서울시스템즈

§  이베이 코리아

§  다보링크

§  KT DS

§  인젠트

§  하나로TNS

§  삼양시스템즈

§  나우드림

§  유엠솔루션

§  코리아스코어링

§  KCB

§  레드비씨

§  넥슨코리아

§  BGF 리테일

§  STECO

§  나우드림

§  대한항공

고객 프로젝트 사례

§  CJ프레시웨이 - 전사적으로 ExtJS 도입. 내부 ERP Sencha

ExtJS 기반

§  삼정KPMG

- 내부 회계 시스템 ExtJS 기반

§  한국전력공사 - 내부 전력 통계 시스템 ExtJS 기반

§  BGF 리테일 (CU) - 물류관리 시스템, Sencha ExtJS 기반

§  이베이코리아

- 쇼핑몰 통계 시스템

금융감독원 전자공시 시스템 DART

§  ExtJS 그리드 사용

Page 52

삼성 KNOX EMM 시스템

삼성 KNOX EMM 시스템

Page 54

한솔 NexG FW

Page 55

§  FW 모니터링 관리화면 적용

뛰어난 웹브라우저 호환성

Page 56

ExtJS 웹브라우저 호환성

§  IE6, 7, 8, 9, 10, 11

§  Opera

§  Chrome

§  Safari

§  Firefox

웹브라우저 파편화 / 크로스 브라우징 제작 이슈

§  각 웹브라우저는 회사마다 고유한 엔진을 사용

§  웹브라우저별로 웹표준을 해석하는 방식에 차이존재

§  같은 회사의 웹브라우저라도 맥/윈도우/리눅스 별로 미세한 차이 존재 - 참고 : IE, 오페라, 파이어폭스와 함께하는 크로스 브라우징 가이드

http://www.mozilla.or.kr/docs/web-developer/standard/crossbrowsing.pdf

§  웹사이트 개발자들에게 크로스 브라우징 이슈는 큰 골치거리

§  ExtJS 는 크로스 브라우저를 알아서 처리함. 개발자가 신경쓸 필요가 없음.

Page 58

단일 코드 문법을 쓰는 ExtJS 장점

§  ExtJS 는 배우기 어렵다? -  ExtJS 는 자바스크립트 라이브러리의 일종

-  ExtJ = HTML+CSS+JS

- 빠른 생산성이 담보되어야하는 기업환경에서 HTML, CSS, Javascript 별도로 학습해야하는 부담감을 오히려 경감시켜줌

- HTML, CSS, Javascript 각각 코드 관리 및 유지보수 가능하실런지요?

- HTML, CSS 는 Java/C 와 같은 프로그램 언어가 아닙니다.

- 참고 : 프론트엔드 개발자는 왜 구하기 어렵나요? http://mygony.com/archives/4810

§  UI 를 고치기 위해 HTML, CSS 를 직접 타자하는 순간부터 크로스 브라우저는 개발사의 몫이 됩니다

§  ExtJS 는 하나만 배워서 컨텐츠를 작성하면 웹페이지에서 알아서 HTML, CSS, Javascript 형태로 뿌려집니다.

Page 59

타프레임워크와의 비교

Page 60

ExtJS Framework

Angular JS 와의 비교

Page 62

AngularJS

Page 63

ExtJS vs AngularJS

§  http://www.techferry.com/articles/ExtJS-vs-AngularJS.html

Page 64

jQuery+jQuery UI+Plugins 과의 비교

Page 65

개방형 개발 환경 지원

Page 66

개방형 개발환경 지원

§  ExtJS 는 JS 기반의 라이브러리

§  특정 개발 도구 종속 이슈 없음

§  Eclipse, EditPlus, Sublime Text, NotePad++ 어떤 에디터에서도 개발 가능

디버깅 환경

§  웹브라우저 내장 디버거로 디버깅 가능

§  크롬 개발자 도구, 모질라 파이어버그 등등

Page 68

강력한 전용 개발 도구

Page 69

비쥬얼 저작도구 Sencha Architect

§  http://www.sencha.com/products/architect/

Page 2-70

Sencha Architect

§  Demo : Making Twitter App Client in 5 mins with Sencha Architect

§  http://www.youtube.com/watch?v=sXZ4dfZ8kf0

전용 비쥬얼 저작도구를 활용한 빠른 화면 개발

Page 72

이클립스와 매끄러운 협업

§  센차 아키텍트에서 프로젝트 WebContent 폴더내에 저장

Page 73

ExtJS Application Framework

멀티 클라이언트 대응 웹애플리케이션 트렌드

Page 75

백엔드 호환성 과 비동기 커뮤니케이션

§  Ext JS 는 백엔드 기술에 대한 종속성이 없음

§  아래 기술에 대한 기본 지원

-  JSON

-  YQL

-  AJAX

§  비동기 데이타를 주고 받음

§  같은 도메인에서는 AJAX

§  크로스 도메인에서는 JSONP

클래스 기반 프로그래밍

§  클래스, 서브클래스 정의 가능

§  컴포넌트 생성과 상속지원

§  클래스 기반언어의 장점과 자바스크립트 유연성 동시 활용가능

MVC 아키텍쳐

§  Ext JS의 MVC 프레임워크는 비즈니스 로직을 UI와 데이타 스토어와 분리시킴

배포 도구 : 센차 커맨드

§  센차 커맨드 배포툴을 통해 애플리케이션 개발에 활용된 Ext 컴포넌트들만 포함된 하나의 최소화된 자바스크립트 파일 생성 가능

§  센차 커맨드를 통해 수정되고 최소화된 CSS 도 생성가능

모바일 대응

Page 80

Sencha Touch UI Component

§  http://www.sencha.com/products/touch

Page 2-81

Sencha Charts Library

§  Animated HTML5 based chart solution

§  Over 20 charts supported

§  Customizable

§  http://dev.sencha.com/deploy/touch-charts-1.0.0/examples/

Page 2-82

ExtJS와 같은 코드 기반

§  ExtJS 와 같은 코드 기반으로 동일 개발 환경에서 진행

§  센차 아키텍트를 통한 개발 지원

Professional Service

Page 2-84

미래웹기술연구소 기술지원

§  미래웹기술연구소 라이센스 구매 고객 대상

§  유료 서비스 제공

- 기업 방문 교육 5일

- 프로젝트 컨설팅

- 온사이트 기술지원

- 온라인 기술지원

§  일반 개발자 대상 -  Sencha 국제공인교육 실시 http://miraeweb.com/training/sencha/

§  문의 : 미래웹기술연구소 sales@miraeweb.com

결론 All in one solution

§  Sencha Framework : Professional HTML5 solution for the enterprise

Page 1-86

HTML5 Apps

Mobile UI Framework

Sencha Touch

Mobile App Framework Desktop UI

Framework

ExtJS

Desktop App Framework

Sencha Desktop Packaging

Sencha Mobile Packaging

Development Tools

Sencha Architect

Sencha Eclipse Plugin

Lib

Sencha Animator

Sencha Charts

Enterprise Data Con.

Support

Sencha Care

Sencha Market

Sencha.io

미래웹기술연구소 서비스

Page 87

청강대학교 프로젝트사례

§  도입목적

Page 88

청강대학교 사례

§  Jquery+Bootstrap 외 여러 프레임워크 조합으로 프로젝트 시작

§  여러 프레임워크 유지 보수에 따른 부담과 재사용 문제로 프로젝트 실패

§  ExtJS 는 애플리케이션 개발에 필요한 Full Stack 보유

§  미래웹기술연구소에서 ExtJS 교육 트레이닝후 추가 컨설팅 진행

§  추후 4개월동안 성공적으로 프로젝트 진행

§  센차 아키텍트의 경우 대학생들도 금방 익혀서 프로젝트에 투입이 가능하였음

Page 89

결론

•  차세대 기업용 애플리케이션을 위한 새로운 솔루션이 필요

•  웹기술기반 ExtJS와 Sencha Touch 는 크로스 디바이스 크로스 플랫폼 환경에 최적화된 솔루션임

•  ExtJS 는 기업용 웹애플리케이션 개발을 위한 풀스택을 제공

•  전용 저작도구, 교육, 기술지원, 컨설팅, 인력파견, 외주 개발에 이르는 지원체계를 갖춤

•  국내 기술 지원, 교육, 컨설팅 서비스 : 미래웹기술연구소

감사합니다.

§  미래웹기술연구소

§  http://miraeweb.com

§  조만영 대표이사 (sales@miraeweb.com)

Page 91