Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Big Data platform을 위한 Sencha Ext JS 사례.

809 views

Published on

Sencha Roadshow Seoul 발표자료

Published in: Engineering
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ,Download or read Ebooks here ... ......................................................................................................................... Download FULL PDF EBOOK here { https://urlzs.com/UABbn }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS 1NTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ..................................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookeBOOK Crime, eeBOOK Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Big Data platform을 위한 Sencha Ext JS 사례.

  1. 1. 클라우다인 2015.05.19 / 박효근 Big Data Platform을 위한 ExtJS
  2. 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. 3. Big Data Platform Flamingo 왜? ExtJS를 선택했는가 우리가 ExtJS를 사용하는 방법 데모 시연
  4. 4. Big Data Platform Flamingo
  5. 5. Flamingo Project 웹 기술을 활용하여 빅데이터 인 프라 및 데이터를 편리하게 사용 하도록 한다. 사용자가 데이터를 잘 활용할 수 있도록 한다. 하나의 화면에서 자유롭게 다양한 작업을 할 수 있는 작업공간을 제 공한다. 다양한 분석 및 처리 Map Reduce 를 쉽게 재활용 할 수 있도록 한다. 오픈소스 기반으로 모든 시스템을 제대로 갖추고 진행한다. 각 화면은 최대한 독립 개발이 가 능 하도록 분리하여 구성 재사용 가능한 것은 컴포넌트화 하여 코드 작성을 최소화 누구나 추가 할 수 있도록 최대한 구조를 단순화하고 대중적인 프레 임워크를 사용
  6. 6. 빅데이터 플랫폼 이란? 출처 : [지금 빅데이터로 갑니다] Big Data Platform이란 무엇인가? (http://blog.skcc.com/m/post/1734) Big Data 시스템의 Best Practice는 Ecosystem을 구성할 Software들을 선택하는 것부터, 물리적 구성, 개발 도구 선택, 응용 개발 표준 및 분석 모델에 이르기까지 광범위한 영역에서 고려할 수 있다. 이 Best Practice들은 전체적으로 재활용 가능한 기반을 구성하며, 이는 Big Data 시스템을 위한 Platform 으로 생각할 수 있다.
  7. 7. Flamingo 2
  8. 8. 라이선스
  9. 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. 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. 11. Flamingo2 Demo
  12. 12. 왜? ExtJS를 선택했는가
  13. 13. HTML5? CSS3? 웹표준? • 웹 브라우저 파편화 (IE, Chrome, Firefox, Safari 등등) – IE는 버전에 따른 파편화가 심한 브라우저 • 라이브러리의 홍수 – AngularJS, Bootstrap, Jquery, Skeleton, Montage 등등
  14. 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. 15. 급변하는 빅데이터 기술
  16. 16. 웹 기반 통합 프레임워크 필요성
  17. 17. 우리는 답을 찾을 것이다. 늘 그래왔듯이
  18. 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. 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. 20. 우리가 ExtJS를 사용하는 방법
  21. 21. ExtJS는 전지전능하지 않다. ExtJS Bootstrap + Jquery
  22. 22. 그러나 많은 것을 포용한다. xTemplate를 활용하면 Bootstrap의 컴포넌트를 ExtJS에서 사용할 수 있다.
  23. 23. 외부 라이브러리 라이브러리 비 고 Ace Editor SQL Editor, Log Tail Bootstrap 상단, 좌측 메인메뉴 Codemirror 각종 Code Editor OpenGraph Workflow Designer 도형 그리기 Stomp.js 웹소켓 Term.js 터미널 구현 • 외부 라이브러리를 ExtJS Plugin형태로 개발 • MVC구조를 사용하면서 ExtJS에 부족한 기능을 손쉽게 사용
  24. 24. 상속(Extend) 서로 다른 화면이지만 동일한 기능이 존재할 경우 상속을 적극적으로 활용한다.
  25. 25. ViewController • ExtJS 5부터 새롭게 추가 • ViewController는 View에 종속되어 있고 개별 Instance로 동작하기 때문에 잘 활용하면 코딩의 양을 엄청나게 줄일 수 있음.
  26. 26. ViewController Apache hive MetaStore Query Editor Editor Log/Result
  27. 27. 테마 구성 • 디자이너 도움 없이 단 몇줄의 변수값 변경으로 내가 원하는 테마 구성 • Sencha Architect를 활용하면 이마저도 필요 없이 자동으로 생성된 코드를 Sencha CMD 통해 빌드 후 즉시 사용 가능.
  28. 28. 결론
  29. 29. ExtJS를 반드시 사용해야 하는 이유 • 뛰어난 개발 생산성 – ExtJS에 익숙해지면 그 어떤 웹 프레임워크 보다 빠르게 개발할 수 있다. • 적은 학습기간 – HTML, CSS, Javascript를 전부 학습하지 않아도 개발할 수 있다. • 크로스 브라우징에 대해서 전혀 신경 쓸 필요가 없다. • 개발자는 비즈니스 로직에 더 집중해서 개발 할 수 있다. • 모바일 환경으로의 전환이 쉽다.
  30. 30. ExtJS 단점 • Sencha 의존적 – ExtJS버그 발생 시 수정될 때 까지 기다리거나 직접 소스를 수정해야 한다. • Upgrade – ExtJS 3, 4, 5 Major 버전이 올라가면 아키텍처에 많은 변화 – 이전 버전 소스를 상위버전에 맞게 재개발하는 과정이 만만치 않음. • Sencha Architect – 화면 그리기 또는 테마 변경시에는 최고! – 비즈니스 로직을 코딩하는데 있어서는 최악!
  31. 31. ExtJS 6 • PC와 모바일 환경의 통합 – UI구성은 따로, 비즈니스 로직은 함께 사용 • 진정한 One Source Multi Use의 실현 • ExtJS 5 -> 6 변경은 소스의 큰 수정 없이 가능
  32. 32. Q&A
  33. 33. 감사합니다.

×