Sencha Roadshow Seoul 발표자료

1. 클라우다인
2015.05.19 / 박효근
Big Data Platform을 위한
ExtJS

2. Ext.define(‘Cloudine.hyokun.park’, {
extend: ‘Ext.developer’,
company: ‘Cloudine’,
project: ‘Flamingo2’,
name: ‘박효근’,
email: ‘hyokun.park@cloudine.co.kr’
tools: [
‘PowerBuilder’,
‘Miplatform’,
‘Xplatform’,
‘ExtJS’
]
});

3. Big Data Platform Flamingo
왜? ExtJS를 선택했는가
우리가 ExtJS를 사용하는 방법
데모 시연

4. Big Data Platform
Flamingo

5. Flamingo Project
웹 기술을 활용하여 빅데이터 인
프라 및 데이터를 편리하게 사용
하도록 한다.
사용자가 데이터를 잘 활용할 수
있도록 한다.
하나의 화면에서 자유롭게 다양한
작업을 할 수 있는 작업공간을 제
공한다.
다양한 분석 및 처리 Map Reduce
를 쉽게 재활용 할 수 있도록 한다.
오픈소스 기반으로 모든 시스템을
제대로 갖추고 진행한다.
각 화면은 최대한 독립 개발이 가
능 하도록 분리하여 구성
재사용 가능한 것은 컴포넌트화
하여 코드 작성을 최소화
누구나 추가 할 수 있도록 최대한
구조를 단순화하고 대중적인 프레
임워크를 사용

6. 빅데이터 플랫폼 이란?
출처 : [지금 빅데이터로 갑니다] Big Data Platform이란 무엇인가? (http://blog.skcc.com/m/post/1734)
Big Data 시스템의 Best Practice는 Ecosystem을 구성할 Software들을
선택하는 것부터, 물리적 구성, 개발 도구 선택, 응용 개발 표준 및 분석
모델에 이르기까지 광범위한 영역에서 고려할 수 있다.
이 Best Practice들은 전체적으로 재활용 가능한 기반을 구성하며,
이는 Big Data 시스템을 위한 Platform 으로 생각할 수 있다.

7. Flamingo 2

8. 라이선스

9. Flamingo2 기능목록
대분류 중분류 주요 기능 및 설명 비고
모니터링
Hadoop 2
Resource Manager Monitoring
Flamingo 2에서 기능 개선
YARN Application Monitoring
Namenode Monitoring
Hive Server Monitoring
MapReduce Job Monitoring
YARN Cluster Node Monitoring
Datanode Monitoring
시스템 System Resource Monitoring
Flamingo 2의 신규 기능
아카이브
YARN Application 실행한 YARN Application 자동 수집 기능
MapReduce Job 실행한 MapReduce Job 자동 수집 기능
User Interface Framework 업그레이드 ExtJS 4 > ExtJS 5로 업그레이드하여 성능 개선 Flamingo 2의 기능 개선

10. Flamingo2 기능목록
대분류 중분류 주요 기능 및 설명 비고
아키텍처 Web + Engine Web과 Engine을 필요에 따라서 결합할 수 있도록 구조 변경 Flamingo 2의 신규 기능
Apache Hive Hive Metastore 관리 Hive의 테이블 및 데이터베이스를 관리 Flamingo 2에서 기능 개선
Hive QL 실행 Hive QL를 실행하고 쿼리 결과를 표시 Flamingo 2에서 기능 개선
Pivotal HAWQ HAWQ Metastore 관리 HAWQ용 데이터베이스 및 테이블을 관리 Flamingo 2의 신규 기능
HAWQ SQL 실행 HAWQ에서 동작하는 SQL을 실행하고 결과를 표시 Flamingo 2의 신규 기능
시각화 HDFS 연동 HDFS에 저장되어 있는 로그 파일을 시각화 Flamingo 2의 신규 기능
시각화 차트 ggplot 기반 25종의 시각화 차트 지원 Flamingo 2의 신규 기능
워크플로우 디자이너 다양한 알고리즘 및 ETL을 연계하여 실행하는 디자이너
이력 관리 워크플로우를 실행한 실행 이력을 표시
배치작업관리 배치작업 등록 워크플로우를 배치작업형태로 등록하여 관리
배치작업 중지/일시중지 등록한 배치작업의 생명주기를 관리

11. Flamingo2
Demo

12. 왜?
ExtJS를 선택했는가

13. HTML5? CSS3? 웹표준?
• 웹 브라우저 파편화 (IE, Chrome, Firefox, Safari 등등)
– IE는 버전에 따른 파편화가 심한 브라우저
• 라이브러리의 홍수
– AngularJS, Bootstrap, Jquery, Skeleton, Montage 등등

14. 프론트엔드 개발자가 하는 일
1. 디자이너와 엔지니어 간의 시각적 언어 확립
2. 시각 디자인으로부터 콘텐츠, 브랜드, 기능 등을 표현할 컴포넌트 세트 정의.
3. 컨벤션, 프레임워크, 요구 사항, 시각적 언어, 스펙 면에서 웹 애플리케이션의 기준 확립
4. 웹 애플리케이션의 범위를 기기, 브라우저, 화면, 애니메이션의 측면에서 정의
5. 브랜드 충성도, 코드 품질, 관계자의 상품 리뷰를 위한 품질 보증 가이드라인 개발
6. 적절한 간격, 타이포그래피, 헤딩, 글꼴, 아이콘, 여백, 그리드 등을 사용해 웹 애플리케이션 꾸미기
7. 디자인 가이드라인을 따르며 다양한 해상도에 대응하는 이미지, 디바이스별 목업 등을 사용해 웹 애플리케이션 꾸
미기
8. 시맨틱, 접근성, 검색엔진 최적화, 스키마, 마이크로포맷 등을 고려하여 웹 애플리케이션 마크업하기
9. API에 접근하여 사용하기 편하고 배터리 소모가 없는 디바이스 및 클라이언트가 인지하는 방식으로 정보를 가져오
기
10. 부드러운 애니메이션, 트랜지션, 게으른 로딩lazy loading, 인터랙션, 애플리케이션 워크플로우를 수행하는 클라이
언트 사이드 코드 개발. 대부분 점진적 기능 향상 및 하위 표준 호환성까지 고려.
11. CORSCross Origin Resource Sharing을 고려하는 한편 XSSCross Site Scripting와 CSRFCross Site Request Forgery
공격을 막아낼 수 있도록 백엔드 접속에 대한 안전성 확보
12. 엄격한 데드라인, 관계자들의 요구, 기기별 제한에도 불구하고 항상 사용자가 최우선이라는 점을 잊지 않는 것
출처 : [번역]프론트엔드 개발자는 왜 구하기 어렵나요? (http://taegon.kim/archives/4810)

15. 급변하는 빅데이터 기술

16. 웹 기반 통합 프레임워크 필요성

17. 우리는 답을 찾을 것이다. 늘 그래왔듯이

18. ExtJS Framework
Basic Widgets
(Buttons, Bars, textfields…..)
Compound Widgets
(trees, grids, gauges…..)
Visualization
(Charts, infographics….)
Containers & Windows
(panels, cards, modals)
Themes Styles
Layout Manager
(absolute, flex)
Interrations
(gestures, drag&drop)
Drawing
(vector, bitmap)
Theming
(computed styles)
Templating
(iterations, conditionals..)
Visual Effects
(animations, filters….)
Localization
(RTL, locale libraries)
Accessibility
(focus manager, ARIA…)
State Manager
(history, undo, routes..)
Data binding
(1way, 2way)
Modularity
(components, modules)
Testing
(IDC, test hooks)
Data Objects
(queues, hashtables)
Data Models & Stores
(group, sort, validate)
Persistent Data
(cache & sync)
Multi-Media
(3D, Audio, Video)
Interface
Elements
View
System
Logic &
Data

19. 국내 HTML5 기반 Web UI툴 비교
Basic Widgets
(Buttons, Bars, textfields…..)
Compound Widgets
(trees, grids, gauges…..)
Visualization
(Charts, infographics….)
Containers & Windows
(panels, cards, modals)
Themes Styles
Layout Manager
(absolute, flex)
Interrations
(gestures, drag&drop)
Drawing
(vector, bitmap)
Theming
(computed styles)
Templating
(iterations, conditionals..)
Visual Effects
(animations, filters….)
Localization
(RTL, locale libraries)
Accessibility
(focus manager, ARIA…)
State Manager
(history, undo, routes..)
Data binding
(1way, 2way)
Modularity
(components, modules)
Testing
(IDC, test hooks)
Data Objects
(queues, hashtables)
Data Models & Stores
(group, sort, validate)
Persistent Data
(cache & sync)
Multi-Media
(3D, Audio, Video)
Interface
Elements
View
System
Logic &
Data

20. 우리가 ExtJS를
사용하는 방법

21. ExtJS는 전지전능하지 않다.
ExtJS
Bootstrap + Jquery

22. 그러나 많은 것을 포용한다.
xTemplate를 활용하면 Bootstrap의 컴포넌트를 ExtJS에서 사용할 수 있다.

23. 외부 라이브러리
라이브러리 비 고
Ace Editor SQL Editor, Log Tail
Bootstrap 상단, 좌측 메인메뉴
Codemirror 각종 Code Editor
OpenGraph Workflow Designer 도형 그리기
Stomp.js 웹소켓
Term.js 터미널 구현
• 외부 라이브러리를 ExtJS Plugin형태로 개발
• MVC구조를 사용하면서 ExtJS에 부족한
기능을 손쉽게 사용

24. 상속(Extend)
서로 다른 화면이지만 동일한 기능이 존재할 경우 상속을 적극적으로 활용한다.

25. ViewController
• ExtJS 5부터 새롭게 추가
• ViewController는 View에 종속되어 있고 개별 Instance로 동작하기 때문에
잘 활용하면 코딩의 양을 엄청나게 줄일 수 있음.

26. ViewController
Apache
hive
MetaStore
Query
Editor
Editor
Log/Result

27. 테마 구성
• 디자이너 도움 없이 단 몇줄의 변수값 변경으로 내가 원하는 테마 구성
• Sencha Architect를 활용하면 이마저도 필요 없이 자동으로 생성된 코드를
Sencha CMD 통해 빌드 후 즉시 사용 가능.

28. 결론

29. ExtJS를 반드시 사용해야 하는 이유
• 뛰어난 개발 생산성
– ExtJS에 익숙해지면 그 어떤 웹 프레임워크 보다 빠르게 개발할 수 있다.
• 적은 학습기간
– HTML, CSS, Javascript를 전부 학습하지 않아도 개발할 수 있다.
• 크로스 브라우징에 대해서 전혀 신경 쓸 필요가 없다.
• 개발자는 비즈니스 로직에 더 집중해서 개발 할 수 있다.
• 모바일 환경으로의 전환이 쉽다.

30. ExtJS 단점
• Sencha 의존적
– ExtJS버그 발생 시 수정될 때 까지 기다리거나 직접 소스를 수정해야 한다.
• Upgrade
– ExtJS 3, 4, 5 Major 버전이 올라가면 아키텍처에 많은 변화
– 이전 버전 소스를 상위버전에 맞게 재개발하는 과정이 만만치 않음.
• Sencha Architect
– 화면 그리기 또는 테마 변경시에는 최고!
– 비즈니스 로직을 코딩하는데 있어서는 최악!

31. ExtJS 6
• PC와 모바일 환경의 통합
– UI구성은 따로, 비즈니스 로직은 함께 사용
• 진정한 One Source Multi Use의 실현
• ExtJS 5 -> 6 변경은 소스의 큰 수정 없이 가능

32. Q&A

33. 감사합니다.