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

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

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

Ext JS

목차

§  기업내 전산환경의 변화

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

§  ROI를 따져보자

§  타프레임워크와의 비교

§  적정기술의 선택이 중요

§  결론

기업내 전산 환경의 변화


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

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

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

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


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

- Windows 7 판매 중단

- Windows 8 라이센스 구매 필요

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

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

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


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

§  BYOD(Bring Your Own Device) 환경

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

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

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

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

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

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

PC 와 모바일 환경 대응 기술

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

Rich 애플리케이션 UI

모던 웹서비스 아키텍쳐

웹기술역할의 확장

HTML/CSS/JS ActiveX Flash

JAVA

Plugins

HTML5

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

Web Developers

Java Developers

.Net Developers Others

HTML5 Development

여기서 문제가 발생

언어장벽 Language barrier

Programming Language

Java, C, C#

Markup HTML, CSS

Script language

JS

HTML5 도입의 어려움

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sencha 솔루션이 적합한 대상

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

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

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

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

ExtJS 의 특징

ExtJS 의 특징

§  순수 웹표준 방식

§  플러그인 기술 필요없음

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

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

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

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

§  반응형 레이아웃

§  태블릿 기본 지원

§  지원브라우저

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

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

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

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

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

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

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

기업 환경에 최적화된 UI

UI 위젯과 컴포넌트

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

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

•  Panels •  Grids •  Trees

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

ExtJS UI

Grid

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

§  대용량 데이타 지원

-  BufferedRender

§  순수 웹표준 기술 방식

Array Grid

Widget Grid

Tree

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

-  Tree Reorder

-  Tree Grid

-  Two Grid

-  Check Tree

-  XML Tree

-  Filtered Tree

-  Linear Data Geographical Tree

Basic Tree

폼

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

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

업무용 화면 요소 기본 제공

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

고품질의 웹표준 차트

§  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

ROI 를 따져보자

ExtJS 웹브라우저 호환성

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

§  Opera

§  Chrome

§  Safari

§  Firefox

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

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

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

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

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

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

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

단일 코드 문법을 쓰는 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 형태로 뿌려집니다.

타프레임워크와의 비교

ExtJS Framework

Angular JS 와의 비교

AngularJS

ExtJS vs AngularJS

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

jQuery+jQuery UI+Plugins 과의 비교

적정기술의 선택이 중요

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

목적과 상황에 대한 판단

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

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

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

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

전용 비쥬얼 저작도구 Sencha Architect

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

Page 2-50

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

결론

§  기업내 전산환경의 변화

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

§  ROI를 따져보자

§  타프레임워크와의 비교

§  적정기술의 선택이 중요

§  결론

감사합니다.

§  미래웹기술연구소

§  http://miraeweb.com

§  조만영 기술총괄이사 ([email protected])

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

Internet