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.

Sencha ExtJS를 활용한 Big Data Platform 개발 사례

1,419 views

Published on

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

Published in: Internet
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       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

Sencha ExtJS를 활용한 Big Data Platform 개발 사례

  1. 1. 클라우다인 2015.06.18 / 박효근 Big Data Platform을 위한 ExtJS
  2. 2. Big Data Platform Flamingo
  3. 3. Flamingo Project 3   웹 기술을 활용하여 빅데이터 인프라 및 데이터를 편리하게 사용하도록 한다 . 사용자가 데이터를 잘 활용할 수 있도 록 한다. 하나의 화면에서 자유롭게 다양한 작업 을 할 수 있는 작업공간을 제공한다. 다양한 분석 및 처리 Map Reduce를 쉽게 재활용 할 수 있도록 한다. 오픈소스 기반으로 모든 시스템을 제대 로 갖추고 진행한다. 각 화면은 최대한 독립 개발이 가능 하 도록 분리하여 구성 재사용 가능한 것은 컴포넌트화 하여 코드 작성을 최소화 누구나 추가 할 수 있도록 최대한 구조 를 단순화하고 대중적인 프레임워크를 사용
  4. 4. Flamingo 2
  5. 5. 라이선스
  6. 6. Flamingo2 차별성 모든 분석 및 사용환경을 하나의 단일 통합 웹 환경으로 구현 인프라 SW의 한계를 넘어서 빅데이터 분석가 를 위한 고성능 분석 알고리즘 실행을 위한 통 합 환경 제공 분석 알고리즘과 시각화 기능 통합 SQL on Hadoop을 위한 쿼리 도구 빅데이터 분석을 위한 최적화된 환경 제공
  7. 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. 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. 9. Flamingo2 Demo
  10. 10. 왜? ExtJS를 선택했는가
  11. 11. HTML5? CSS3? 웹표준? •  웹 브라우저 파편화 (IE, Chrome, Firefox, Safari 등등) –  IE는 버전에 따른 파편화가 심한 브라우저 •  하루가 멀다 하고 새롭게 생겨나는 UI 라이브러리 –  Bootstrap, Foundation, Skeleton, Montage 등등
  12. 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. 13. 급변하는 빅데이터 기술
  14. 14. 웹 기반 통합 프레임워크 필요성
  15. 15. 우리는 답을 찾을 것이다.  늘 그래왔듯이
  16. 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. 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. 18. 우리가 ExtJS를 사용하는 방법
  19. 19. ExtJS는 전지전능하지 않다. ExtJS Bootstrap + Jquery
  20. 20. 그러나 많은 것을 포용한다. xTemplate를 활용하면 Bootstrap의 컴포넌트를 ExtJS에서 사용할 수 있다.
  21. 21. ViewController •  ExtJS  5부터 새롭게 추가   •  ViewController는 View에 종속되어 있고 개별 Instance로 동작하기 때문에            잘 활용하면 코딩의 양을 엄청나게 줄일 수 있음.  
  22. 22. ViewController •  한 개의 View만 개발 하면 각 개별 Instance로 동작을 하기 때문에 추가적인 개발이 전혀 필요 없음.
  23. 23. 테마 구성 •  디자이너 도움 없이 단 몇줄의 SCSS변수값 변경으로 내가 원하는 테마 구성 •  Sencha Architect를 활용하면 이마저도 필요 없이 자동으로 생성된 코드를 Sencha CMD 통해 빌드 후 즉시 사용 가능.
  24. 24. 결론
  25. 25. ExtJS를 반드시 사용해야 하는 이유 •  뛰어난 개발 생산성 –  ExtJS에 익숙해지면 그 어떤 웹 프레임워크 보다 빠르게 개발할 수 있다. •  적은 학습기간 –  HTML, CSS, Javascript를 전부 학습하지 않아도 개발할 수 있다. •  크로스 브라우징에 대해서 전혀 신경 쓸 필요가 없다. •  개발자는 비즈니스 로직에 더 집중해서 개발 할 수 있다. •  UI를 조금만 변경하면 모바일 환경으로의 전환이 쉽다.
  26. 26. ExtJS 단점 •  Sencha 의존적 –  ExtJS버그 발생 시 수정될 때 까지 기다리거나 직접 소스를 수정해야 한다. •  Upgrade –  ExtJS 3, 4, 5 Major 버전이 올라가면 아키텍처에 많은 변화 –  이전 버전 소스를 상위버전에 맞게 재개발하는 과정이 만만치 않음. •  Sencha Architect –  화면 그리기 또는 테마 변경시에는 최고! –  비즈니스 로직을 코딩하는데 있어서는 최악!
  27. 27. ExtJS 6 •  PC와 모바일 환경의 통합   –  UI구성은 따로,  비즈니스 로직은 함께 사용   •  진정한 One  Source  Mul:  Use의 실현   •  ExtJS  5  -­‐>  6    변경은 소스의 큰 수정 없이 가능
  28. 28. Q&A ?
  29. 29. 감사합니다.

×