엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
23 likes11,976 views
차세대 기업용 웹애플리케이션 개발 솔루션인 ExtJS와 Sencha Touch 관련 자료입니다. 문의 [email protected] http://miraeweb.com/sencha
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
- 1. 엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS 5 2015. 04. 14 조만영 기술총괄이사 Ext JS
- 2. 목차 § 기업내 전산환경의 변화에 따른 대안 제안 § ExtJS 특징 - 기업 환경에 최적화된 UI - 고수준의 차트기능 기본내장 - Dashboard 개발에 적합한 UI - 반응형 레이아웃 기본 지원 - 개방형 개발 환경 지원 - 강력한 전용 개발 도구 - ExtJS Architecture - 기업용 애플리케이션을 위한 Full Stack 솔루션 - 모바일 대응 § 고객사례 § 결론 Page 2
- 3. 기업내 전산 환경의 변화에 따른 대안 제안
- 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
- 10. ExtJS 의 특징 Page 10
- 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
- 14. 기업 환경에 최적화된 UI Page 14
- 15. ExtJS UI
- 16. ExtJS UI Page 16
- 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
- 21. Multi Sort Grid Page 21
- 22. Big Data Grid Page 22
- 24. Live Cell Editing Page 24
- 25. Row 확장 기능 Page 25
- 26. Tree § 9가지 트리형태 지원 - Basic Trees - Tree Reorder - Tree Grid - Two Grid - Check Tree - XML Tree - Filtered Tree - Linear Data Geographical Tree Page 26
- 31. 업무용 화면 요소 기본 제공 § Tab § Button § Toolbar Page 31
- 32. 폼 § 20여가지 이상의 폼필드를 지원 § 폼 상세 예제 페이지 the examples page
- 33. 업무용 화면 요소 기본 제공 Page 33
- 34. 테마시스템 Page 34
- 35. 고수준의 차트기능 기본내장 Page 35
- 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
- 38. Page 38
- 39. Page 39
- 42. Dashboard 개발에 적합한 UI Page 42
- 43. 임원용 Dashboard 개발 예제
- 46. Multi Window Desktop Page 46
- 47. 반응형 레이아웃 기본 지원 Page 47
- 48. 반응형 레이아웃 지원 PC MOBILE
- 49. 고객 레퍼런스 Page 49
- 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 기반 § 이베이코리아 - 쇼핑몰 통계 시스템
- 52. 금융감독원 전자공시 시스템 DART § ExtJS 그리드 사용 Page 52
- 53. 삼성 KNOX EMM 시스템
- 54. 삼성 KNOX EMM 시스템 Page 54
- 55. 한솔 NexG FW Page 55 § FW 모니터링 관리화면 적용
- 56. 뛰어난 웹브라우저 호환성 Page 56
- 57. ExtJS 웹브라우저 호환성 § IE6, 7, 8, 9, 10, 11 § Opera § Chrome § Safari § Firefox
- 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
- 61. ExtJS Framework
- 62. Angular JS 와의 비교 Page 62
- 64. ExtJS vs AngularJS § http://www.techferry.com/articles/ExtJS-vs-AngularJS.html Page 64
- 65. jQuery+jQuery UI+Plugins 과의 비교 Page 65
- 66. 개방형 개발 환경 지원 Page 66
- 67. 개방형 개발환경 지원 § ExtJS 는 JS 기반의 라이브러리 § 특정 개발 도구 종속 이슈 없음 § Eclipse, EditPlus, Sublime Text, NotePad++ 어떤 에디터에서도 개발 가능
- 68. 디버깅 환경 § 웹브라우저 내장 디버거로 디버깅 가능 § 크롬 개발자 도구, 모질라 파이어버그 등등 Page 68
- 69. 강력한 전용 개발 도구 Page 69
- 70. 비쥬얼 저작도구 Sencha Architect § http://www.sencha.com/products/architect/ Page 2-70
- 71. Sencha Architect § Demo : Making Twitter App Client in 5 mins with Sencha Architect § http://www.youtube.com/watch?v=sXZ4dfZ8kf0
- 72. 전용 비쥬얼 저작도구를 활용한 빠른 화면 개발 Page 72
- 73. 이클립스와 매끄러운 협업 § 센차 아키텍트에서 프로젝트 WebContent 폴더내에 저장 Page 73
- 75. 멀티 클라이언트 대응 웹애플리케이션 트렌드 Page 75
- 76. 백엔드 호환성 과 비동기 커뮤니케이션 § Ext JS 는 백엔드 기술에 대한 종속성이 없음 § 아래 기술에 대한 기본 지원 - JSON - YQL - AJAX § 비동기 데이타를 주고 받음 § 같은 도메인에서는 AJAX § 크로스 도메인에서는 JSONP
- 77. 클래스 기반 프로그래밍 § 클래스, 서브클래스 정의 가능 § 컴포넌트 생성과 상속지원 § 클래스 기반언어의 장점과 자바스크립트 유연성 동시 활용가능
- 78. MVC 아키텍쳐 § Ext JS의 MVC 프레임워크는 비즈니스 로직을 UI와 데이타 스토어와 분리시킴
- 79. 배포 도구 : 센차 커맨드 § 센차 커맨드 배포툴을 통해 애플리케이션 개발에 활용된 Ext 컴포넌트들만 포함된 하나의 최소화된 자바스크립트 파일 생성 가능 § 센차 커맨드를 통해 수정되고 최소화된 CSS 도 생성가능
- 80. 모바일 대응 Page 80
- 81. Sencha Touch UI Component § http://www.sencha.com/products/touch Page 2-81
- 82. 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
- 83. ExtJS와 같은 코드 기반 § ExtJS 와 같은 코드 기반으로 동일 개발 환경에서 진행 § 센차 아키텍트를 통한 개발 지원
- 85. 미래웹기술연구소 기술지원 § 미래웹기술연구소 라이센스 구매 고객 대상 § 유료 서비스 제공 - 기업 방문 교육 5일 - 프로젝트 컨설팅 - 온사이트 기술지원 - 온라인 기술지원 § 일반 개발자 대상 - Sencha 국제공인교육 실시 http://miraeweb.com/training/sencha/ § 문의 : 미래웹기술연구소 [email protected]
- 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
- 88. 청강대학교 프로젝트사례 § 도입목적 Page 88
- 89. 청강대학교 사례 § Jquery+Bootstrap 외 여러 프레임워크 조합으로 프로젝트 시작 § 여러 프레임워크 유지 보수에 따른 부담과 재사용 문제로 프로젝트 실패 § ExtJS 는 애플리케이션 개발에 필요한 Full Stack 보유 § 미래웹기술연구소에서 ExtJS 교육 트레이닝후 추가 컨설팅 진행 § 추후 4개월동안 성공적으로 프로젝트 진행 § 센차 아키텍트의 경우 대학생들도 금방 익혀서 프로젝트에 투입이 가능하였음 Page 89
- 90. 결론 • 차세대 기업용 애플리케이션을 위한 새로운 솔루션이 필요 • 웹기술기반 ExtJS와 Sencha Touch 는 크로스 디바이스 크로스 플랫폼 환경에 최적화된 솔루션임 • ExtJS 는 기업용 웹애플리케이션 개발을 위한 풀스택을 제공 • 전용 저작도구, 교육, 기술지원, 컨설팅, 인력파견, 외주 개발에 이르는 지원체계를 갖춤 • 국내 기술 지원, 교육, 컨설팅 서비스 : 미래웹기술연구소
- 91. 감사합니다. § 미래웹기술연구소 § http://miraeweb.com § 조만영 대표이사 ([email protected]) Page 91