2. 목차
기업내 전산환경의 변화에 따른 대안 제안
ExtJS 특징
- 기업 환경에 최적화된 UI
- 고수준의 차트기능 기본내장
- Dashboard 개발에 적합한 UI
- 반응형 레이아웃 기본 지원
- 개방형 개발 환경 지원
- 강력한 전용 개발 도구
- ExtJS Architecture
- 기업용 애플리케이션을 위한 Full Stack 솔루션
- 모바일 대응
고객사례
결론
Page 2
4. 기업내 전산 환경의 변화
직원들 컴퓨터 환경의 변화
- 데스크탑 환경: Windows XP, Windows 7, Windows 8, Mac, Linux 등
- 모바일 환경 : 아이폰, 안드로이드 스마트폰과 태블릿 PC 혼재
클라우드 컴퓨팅 환경의 일반화
- 설치형 소프트웨어보다 웹기반 소프트웨어 사용 증대
Page 4
5. 기업내 전산환경의 변화
Windows 플랫폼 종속에 따른 문제점
- Windows XP 단종에 따른 보안 위협 증가
- Windows 7 판매 중단
- Windows 8 라이센스 구매 필요
- 기업내 MS Windows 라이센스 구매 비용 증가
- 이 문제는 추후 에서도 계속 지연 될 것임
- ActiveX 와 같은 MS 종속적 기술 사용을 중단해야함.
Page 5
6. 기업내 전산 환경의 변화
크로스 디바이스, 크로스 플랫폼 이슈
BYOD(Bring Your Own Device) 환경
다양한 스크린 사이즈 대응 이슈
특정 플랫폼 종속적 기술의 사용 배제 필요
- ActiveX : MS Windows 환경외에 사용 불가
특정 디바이스 종속적 기술의 사용 배제 필요
- 플래시 : 모바일 사용 불가
Page 6
7. 차세대 기업 애플리케이션 솔루션의 조건
크로스 플랫폼, 크로스 디바이스 기술
PC 와 모바일 환경 대응 기술
특정 회사 OS 에 종속되지 않는 기술
Rich 애플리케이션 UI
Page 7
8. HTML5 와 웹기술의 장점
웹브라우저 설치된 어떤 환경에서도 동작한다.
- Internet Explorer, Chrome, Safari, Opera, Firefox
모바일에서도 동작
특정 벤더에 종속적이지 않음
웹애플리케이션 별도의 설치가 필요하지 않음.
배포와 관리의 용이
Page 8
9. HTML5 와 웹기술의 단점
HTML, CSS, Javascript 를 별도로 학습해야 하는 부담
강력한 저작도구가 존재하지 않음
개발 방법론이 확립되지 않음
기술지원 체계가 존재하지 않음
전문 교육 과정이 존재하지 않음
솔루션 형태의 상용화 제품이 많지 않음
Page 9
11. 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
12. ExtJS 의 특징
순수 웹표준 방식
플러그인 기술 필요없음
기업 업무 환경에 최적화된 UI 컴포넌트 제공
기업 환경에 적합한 그래프와 차트 제공
빠른 업무 화면 개발을 위한 비쥬얼 저작도구 제공
ExtJS 라이브러리로 개발 웹브라우저 HTML5/CSS3/JS 로 표현
반응형 레이아웃
태블릿 기본 지원
지원브라우저
- IE 8 이상, Chrome, Firefox, Opera, iOS, Android 브라우저
Page 12
13. Sencha ExtJS 를 써야하는 3가지 이유
1. 고품질의 미려한 UI 컴포넌트 셋 100종 기본 제공
- 트리메뉴, 버튼, 탭, 캘린더 등등
2. 압도적인 성능의 고수준의 차트 솔루션
- 50종의 2D, 3D 고품질 차트 기본 내장
3. 쾌속 개발이 가능한 비쥬얼 저작도구 Sencha Architect 제공
- 에디터 개발과는 비교할 수 없는 개발 생산성을 보장
Page 13
17. UI 위젯과 컴포넌트
Ext JS 는 수백가지 크로스 브라우저가 지원되는 사용자 인터페이스 컴포넌트들을 지원
기업용 업무 화면에 필요한 요소들은 거의 모두 갖추고 있음.
• Panels
• Grids
• Trees
• Toolbars, Buttons, Menus
• Windows
• 컴포넌트 상세 예제 페이지
the examples page
18. Grid
총 18 종의 그리드 형태 지원
- Array Grid, Multi Sort Grid, Big Data Grid, Widget Grid 등등
대용량 데이타 지원
- BufferedRender
순수 웹표준 기술 방식
Page 18
26. Tree
9가지 트리형태 지원
- Basic Trees
- Tree Reorder
- Tree Grid
- Two Grid
- Check Tree
- XML Tree
- Filtered Tree
- Linear Data Geographical Tree
Page 26
36. 고품질의 웹표준 차트
50종의 차트 기본 제공
차트 에니메이션 기본 지원
섬세한 커스터마이징 가능
3D 차트 제공
차트 예제 보기
http://dev.sencha.com/ext/5.1.0/exa
mples/kitchensink/?charts=true#colu
mn-basic
37. 50종의 고급 차트 기본 내장
http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#column
-basic
50. 국내 도입 레퍼런스
삼성전자
삼성SDS
LGCNS
안랩
동아제약
티켓링크
안그라픽스
유쎄스파트너스
DDK 코리아
아스텔라스코리아
Page 50
롯데 하이마트
CJ 정보통신
MRO 코리아
EMC 코리아
한솔넥스지
이지웰페어
KIS정보통신
청강대학교
연세대학교
연암대학교
서울시스템즈
이베이 코리아
다보링크
KT DS
인젠트
하나로TNS
삼양시스템즈
나우드림
유엠솔루션
코리아스코어링
KCB
레드비씨
넥슨코리아
BGF 리테일
STECO
나우드림
대한항공
51. 고객 프로젝트 사례
CJ프레시웨이
- 전사적으로 ExtJS 도입. 내부 ERP Sencha
ExtJS 기반
삼성 웰니스
- 전국 사업장 식단관리 시스템 개발 Sencha
ExtJS 기반
대한항공
- 내부 물류시스템 및 모바일앱 Sencha
프레임워크 도입
삼정KPMG
- 내부 회계 시스템 ExtJS 기반
한국전력공사
- 내부 전력 통계 시스템 ExtJS 기반
BGF 리테일 (CU)
- 물류관리 시스템, Sencha ExtJS 기반
이베이코리아
- 쇼핑몰 통계 시스템
58. 웹브라우저 파편화 / 크로스 브라우징 제작 이슈
각 웹브라우저는 회사마다 고유한 엔진을 사용
웹브라우저별로 웹표준을 해석하는 방식에 차이존재
같은 회사의 웹브라우저라도 맥/윈도우/리눅스 별로 미세한 차이 존재
- 참고 : IE, 오페라, 파이어폭스와 함께하는 크로스 브라우징 가이드
http://www.mozilla.or.kr/docs/web-developer/standard/crossbrowsing.pdf
웹사이트 개발자들에게 크로스 브라우징 이슈는 큰 골치거리
ExtJS 는 크로스 브라우저를 알아서 처리함. 개발자가 신경쓸 필요가 없음.
Page 58
59. 단일 코드 문법을 쓰는 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
85. 미래웹기술연구소 기술지원
미래웹기술연구소 라이센스 구매 고객 대상
유료 서비스 제공
- 기업 방문 교육 5일
- 프로젝트 컨설팅
- 온사이트 기술지원
- 온라인 기술지원
일반 개발자 대상
- Sencha 국제공인교육 실시 http://miraeweb.com/training/sencha/
문의 : 미래웹기술연구소 sales@miraeweb.com
86. 결론 All in one solution
Sencha Framework : Professional HTML5 solution for the enterprise
Page 1-86
HTML5 Apps
Mobile UI
Framework
Sencha Touch
Mobile App
FrameworkDesktop 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
89. 청강대학교 사례
Jquery+Bootstrap 외 여러 프레임워크 조합으로 프로젝트 시작
여러 프레임워크 유지 보수에 따른 부담과 재사용 문제로 프로젝트 실패
ExtJS 는 애플리케이션 개발에 필요한 Full Stack 보유
미래웹기술연구소에서 ExtJS 교육 트레이닝후 추가 컨설팅 진행
추후 4개월동안 성공적으로 프로젝트 진행
센차 아키텍트의 경우 대학생들도 금방 익혀서 프로젝트에 투입이 가능하였음
Page 89
90. 결론
• 차세대 기업용 애플리케이션을 위한 새로운 솔루션이 필요
• 웹기술기반 ExtJS와 Sencha Touch 는 크로스 디바이스 크로스 플랫폼 환경에 최적화된
솔루션임
• ExtJS 는 기업용 웹애플리케이션 개발을 위한 풀스택을 제공
• 전용 저작도구, 교육, 기술지원, 컨설팅, 인력파견, 외주 개발에 이르는 지원체계를 갖춤
• 국내 기술 지원, 교육, 컨설팅 서비스 : 미래웹기술연구소