Sencha ExtJS를 활용한 Big Data Platform 개발 사례 ExtJS를 활용한 고도로 복잡한 웹애플리케이션 UI 개발사례 클라우다인 - 박효근 선임

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

2. Big Data Platform
Flamingo

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

4. Flamingo 2

5. 라이선스

6. Flamingo2 차별성
모든 분석 및 사용환경을 하나의 단일
통합 웹 환경으로 구현
인프라 SW의 한계를 넘어서 빅데이터 분석가
를 위한 고성능 분석 알고리즘 실행을 위한 통
합 환경 제공
분석 알고리즘과 시각화 기능 통합 SQL on Hadoop을 위한 쿼리 도구
빅데이터 분석을 위한 최적화된 환경 제공

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

8. 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을 연계하여 실행하는 디자이너
이력 관리 워크플로우를 실행한 실행 이력을 표시
배치작업관리 배치작업 등록 워크플로우를 배치작업형태로 등록하여 관리
배치작업 중지/일시중지 등록한 배치작업의 생명주기를 관리

9. Flamingo2
Demo

10. 왜?
ExtJS를 선택했는가

11. HTML5? CSS3? 웹표준?
• 웹 브라우저 파편화 (IE, Chrome, Firefox, Safari 등등)
– IE는 버전에 따른 파편화가 심한 브라우저
• 하루가 멀다 하고 새롭게 생겨나는 UI 라이브러리
– Bootstrap, Foundation, Skeleton, Montage 등등

12. 프론트엔드 개발자가 하는 일
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)

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

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

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

16. 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

17. 국내 HTML5 기반 RIA툴 비교
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

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

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

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

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

23. ViewController
• 한 개의 View만 개발 하면 각 개별 Instance로 동작을 하기 때문에
추가적인 개발이 전혀 필요 없음.

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

25. 결론

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

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

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

29. Q&A
?

30. 감사합니다.