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/
examples/kitchensink/?
charts=true#column-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 기반
§ 삼정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 는 기업용 웹애플리케이션 개발을 위한 풀스택을 제공
• 전용 저작도구, 교육, 기술지원, 컨설팅, 인력파견, 외주 개발에 이르는 지원체계를 갖춤
• 국내 기술 지원, 교육, 컨설팅 서비스 : 미래웹기술연구소