Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?

Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?

2015. 05. 19 조만영 기술총괄이사 | 미래웹기술연구소

Ext JS

목차

§  기업내 전산환경의 변화

§  모던 웹서비스 아키텍쳐 이해하기

§  ROI를 따져보자

§  타프레임워크와의 비교

§  적정기술의 선택이 중요

§  결론

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

모던 웹서비스 아키텍쳐

Page 8

웹기술역할의 확장

Page 9

HTML/CSS/JS ActiveX Flash

JAVA

Plugins

HTML5

다른 영역 개발자들의 HTML5 개발로의 이전

Web Developers

Java Developers

.Net Developers Others

Page 10

HTML5 Development

여기서 문제가 발생

Page 11

언어장벽 Language barrier

Page 12

Programming Language

Java, C, C#

Markup HTML, CSS

Script language

JS

HTML5 도입의 어려움

§  엔터프라이즈 개발 SI 업체의 상황 - 웹기술 전문가들의 보유도가 낮음

-  SI 프로젝트의 특성상 웹UI의 중요도가 높게 평가되지 않음

- 섬세한 화면 기획이나 UI 기획없이 프로젝트 진행

- 백엔드의 웹서비스의 기능적인 요소에 중점을 둠

-  Front-End 개발자의 비중이 낮음

-  jQuery 기반으로 웹 인터페이스를 많이 개발

- 기획 -> 디자인 -> 마크업 코딩 -> 백엔드 프로그래밍으로 이어지는 단계에서 마크업 코딩과 백엔드 프로그래밍 사이의 커뮤니케이션 코스트가 높음

- UI 개발 업무와 백엔드 개발 업무가 클리어하게 구별이 되기 힘든 구조

- 최근 기업들의 HTML5 기반의 업무 환경 전환에 대한 요구사항을 받고 있음(ActiveX 배제)

Page 13

HTML5 개발관련 기업들의 고민사례

§  “난 자바개발자인데 내가 HTML/CSS 를 배워야 하나요?”

§  “크로스 브라우저 이슈는 미처 경험해 보지 못한 분야”

§  “수많은 웹 UI 프레임워크가 존재하나 무얼 선택해야 할지 고민”

§  “모든 기대를 충족시켜주는 것이 없거나 기술 자체의 성숙도가 낮음”

§  고도로 복잡한 앱 혹은 데스크탑용 웹애플리케이션 개발시 UI 개발을 어떻게 해야할지 방법론에 대한 고민이 많음

§  “우리 전산실에는 웹개발자가 없어요” (차세대는 HTML5 로 가라고 위에서 지시)

Page 14

Sencha 솔루션이 적합한 대상

§  웹기술의 응용범위가 넓어 짊으로서 웹기술이 필요없던 기업들이 웹기술을 도입하게 됨 - 웹기술에 대한 전문성이 낮고 웹기술을 처음 도입하는 기업들

- HTML, CSS, Javascript 와 같은 기술에 대한 지식이 낮은 기업

- 좀 더 진일보한 웹 UI 개발을 원하는 기업

- 그러나 늘 일정과 시간은 촉박한 기업들.

Page 15

ExtJS 의 특징

Page 16

ExtJS 의 특징

§  순수 웹표준 방식

§  플러그인 기술 필요없음

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

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

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

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

§  반응형 레이아웃

§  태블릿 기본 지원

§  지원브라우저

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

Page 17

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

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

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

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

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

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

Page 18

기업 환경에 최적화된 UI

Page 19

UI 위젯과 컴포넌트

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

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

•  Panels •  Grids •  Trees 

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

ExtJS UI

ExtJS UI

Page 22

Grid

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

§  대용량 데이타 지원

-  BufferedRender

§  순수 웹표준 기술 방식

Page 23

Array Grid

Page 24

Widget Grid

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

폼

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

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

업무용 화면 요소 기본 제공

Page 29

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

Page 30

고품질의 웹표준 차트

§  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 33

Page 34

ROI 를 따져보자

Page 37

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 39

단일 코드 문법을 쓰는 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 40

타프레임워크와의 비교

Page 41

ExtJS Framework

Angular JS 와의 비교

Page 43

AngularJS

Page 44

ExtJS vs AngularJS

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

Page 45

jQuery+jQuery UI+Plugins 과의 비교

Page 46

적정기술의 선택이 중요

Page 47

어떤 기술을 선택할 것인가?

목적과 상황에 대한 판단

§  어떤 프로젝트를 할건인가? -  B2B, Enterprise 용

§  숙련된 웹기술 전문가를 보유하고 있는가?

- 아니라면 Sencha 기술 사용이 유리

§  높은 생산성이 요구되는 개발 프로젝트 인가?

Page 49

전용 비쥬얼 저작도구 Sencha Architect

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

Page 2-50

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

Page 51

결론

§  기업내 전산환경의 변화

§  모던 웹서비스 아키텍쳐 이해하기

§  ROI를 따져보자

§  타프레임워크와의 비교

§  적정기술의 선택이 중요

§  결론

감사합니다.

§  미래웹기술연구소

§  http://miraeweb.com

§  조만영 기술총괄이사 (manyoung@miraeweb.com)

Page 53