클라우다인 2015.06.18 / 박효근

Big Data Platform을 위한 ExtJS

Big Data Platform Flamingo

Flamingo Project

3  

웹 기술을 활용하여 빅데이터 인프라

및 데이터를 편리하게 사용하도록 한다

.

사용자가 데이터를 잘 활용할 수 있도

록 한다.

하나의 화면에서 자유롭게 다양한 작업

을 할 수 있는 작업공간을 제공한다.

다양한 분석 및 처리 Map Reduce를

쉽게 재활용 할 수 있도록 한다.

오픈소스 기반으로 모든 시스템을 제대

로 갖추고 진행한다.

각 화면은 최대한 독립 개발이 가능 하

도록 분리하여 구성

재사용 가능한 것은 컴포넌트화 하여

코드 작성을 최소화

누구나 추가 할 수 있도록 최대한 구조

를 단순화하고 대중적인 프레임워크를

사용

Flamingo 2

라이선스

Flamingo2 차별성

모든 분석 및 사용환경을 하나의 단일 통합 웹 환경으로 구현

인프라 SW의 한계를 넘어서 빅데이터 분석가를 위한 고성능 분석 알고리즘 실행을 위한 통합 환경 제공

분석 알고리즘과 시각화 기능 통합 SQL on Hadoop을 위한 쿼리 도구

빅데이터 분석을 위한 최적화된 환경 제공

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의 기능 개선

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을 연계하여 실행하는 디자이너

이력 관리 워크플로우를 실행한 실행 이력을 표시

배치작업관리 배치작업 등록 워크플로우를 배치작업형태로 등록하여 관리

배치작업 중지/일시중지 등록한 배치작업의 생명주기를 관리

Flamingo2 Demo

왜? ExtJS를 선택했는가

HTML5? CSS3? 웹표준?

•  웹 브라우저 파편화 (IE, Chrome, Firefox, Safari 등등)

–  IE는 버전에 따른 파편화가 심한 브라우저

•  하루가 멀다 하고 새롭게 생겨나는 UI 라이브러리

–  Bootstrap, Foundation, Skeleton, Montage 등등

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

급변하는 빅데이터 기술

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

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

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

국내 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

우리가 ExtJS를 사용하는 방법

ExtJS는 전지전능하지 않다.

ExtJS

Bootstrap + Jquery

그러나 많은 것을 포용한다.

xTemplate를 활용하면 Bootstrap의 컴포넌트를 ExtJS에서 사용할 수 있다.

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

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

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

결론

ExtJS를 반드시 사용해야 하는 이유

•  뛰어난 개발 생산성

–  ExtJS에 익숙해지면 그 어떤 웹 프레임워크 보다 빠르게 개발할 수 있다.

•  적은 학습기간

–  HTML, CSS, Javascript를 전부 학습하지 않아도 개발할 수 있다.

•  크로스 브라우징에 대해서 전혀 신경 쓸 필요가 없다.

•  개발자는 비즈니스 로직에 더 집중해서 개발 할 수 있다.

•  UI를 조금만 변경하면 모바일 환경으로의 전환이 쉽다.

ExtJS 단점

•  Sencha 의존적

–  ExtJS버그 발생 시 수정될 때 까지 기다리거나 직접 소스를 수정해야 한다.

•  Upgrade

–  ExtJS 3, 4, 5 Major 버전이 올라가면 아키텍처에 많은 변화

–  이전 버전 소스를 상위버전에 맞게 재개발하는 과정이 만만치 않음.

•  Sencha Architect

–  화면 그리기 또는 테마 변경시에는 최고!

–  비즈니스 로직을 코딩하는데 있어서는 최악!

ExtJS 6

•  PC와 모바일 환경의 통합  

–  UI구성은 따로,  비즈니스 로직은 함께 사용  

•  진정한 One  Source  Mul:  Use의 실현  

•  ExtJS  5  -­‐>  6    변경은 소스의 큰 수정 없이 가능

Q&A ?

감사합니다.