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 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?

1,010 views

Published on

Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?
미래웹기술연구소 - 조만영

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. 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

Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는?

  1. 1. Sencha 가 기업용 WebApps 를 위한 최적의 솔루션인 이유는? 2015. 05. 19 조만영 기술총괄이사 | 미래웹기술연구소 Ext JS
  2. 2. 목차 §  기업내 전산환경의 변화 §  모던 웹서비스 아키텍쳐 이해하기 §  ROI를 따져보자 §  타프레임워크와의 비교 §  적정기술의 선택이 중요 §  결론 Page 2
  3. 3. 기업내 전산 환경의 변화
  4. 4. 기업내 전산 환경의 변화 §  직원들 컴퓨터 환경의 변화 -  데스크탑 환경: Windows XP, Windows 7, Windows 8, Mac, Linux 등 -  모바일 환경 : 아이폰, 안드로이드 스마트폰과 태블릿 PC 혼재 §  클라우드 컴퓨팅 환경의 일반화 -  설치형 소프트웨어보다 웹기반 소프트웨어 사용 증대 Page 4
  5. 5. 기업내 전산 환경의 변화 §  Windows 플랫폼 종속에 따른 문제점 -  Windows XP 단종에 따른 보안 위협 증가 -  Windows 7 판매 중단 -  Windows 8 라이센스 구매 필요 -  기업내 MS Windows 라이센스 구매 비용 증가 -  이 문제는 추후 에서도 계속 지연 될 것임 -  ActiveX 와 같은 MS 종속적 기술 사용을 중단해야함. Page 5
  6. 6. 기업내 전산 환경의 변화 §  크로스 디바이스, 크로스 플랫폼 이슈 §  BYOD(Bring Your Own Device) 환경 §  다양한 스크린 사이즈 대응 이슈 §  특정 플랫폼 종속적 기술의 사용 배제 필요 -  ActiveX : MS Windows 환경외에 사용 불가 §  특정 디바이스 종속적 기술의 사용 배제 필요 -  플래시 : 모바일 사용 불가 Page 6
  7. 7. 차세대 기업 애플리케이션 솔루션의 조건 크로스 플랫폼, 크로스 디바이스 기술 PC 와 모바일 환경 대응 기술 특정 회사 OS 에 종속되지 않는 기술 Rich 애플리케이션 UI Page 7
  8. 8. 모던 웹서비스 아키텍쳐 Page 8
  9. 9. 웹기술역할의 확장 Page 9 HTML/CSS/JS ActiveXFlash JAVA Plugins HTML5
  10. 10. 다른 영역 개발자들의 HTML5 개발로의 이전 Web Developers Java Developers .Net Developers Others Page 10 HTML5 Development
  11. 11. 여기서 문제가 발생 Page 11
  12. 12. 언어장벽 Language barrier Page 12 Programming Language Java, C, C# Markup HTML, CSS Script language JS
  13. 13. HTML5 도입의 어려움 §  엔터프라이즈 개발 SI 업체의 상황 -  웹기술 전문가들의 보유도가 낮음 -  SI 프로젝트의 특성상 웹UI의 중요도가 높게 평가되지 않음 -  섬세한 화면 기획이나 UI 기획없이 프로젝트 진행 -  백엔드의 웹서비스의 기능적인 요소에 중점을 둠 -  Front-End 개발자의 비중이 낮음 -  jQuery 기반으로 웹 인터페이스를 많이 개발 -  기획 -> 디자인 -> 마크업 코딩 -> 백엔드 프로그래밍으로 이어지는 단계에서 마크업 코딩과 백엔드 프로그래밍 사이의 커뮤니케이션 코스트가 높음 -  UI 개발 업무와 백엔드 개발 업무가 클리어하게 구별이 되기 힘든 구조 -  최근 기업들의 HTML5 기반의 업무 환경 전환에 대한 요구사항을 받고 있음(ActiveX 배제) Page 13
  14. 14. HTML5 개발관련 기업들의 고민사례 §  “난 자바개발자인데 내가 HTML/CSS 를 배워야 하나요?” §  “크로스 브라우저 이슈는 미처 경험해 보지 못한 분야” §  “수많은 웹 UI 프레임워크가 존재하나 무얼 선택해야 할지 고민” §  “모든 기대를 충족시켜주는 것이 없거나 기술 자체의 성숙도가 낮음” §  고도로 복잡한 앱 혹은 데스크탑용 웹애플리케이션 개발시 UI 개발을 어떻게 해야할지 방법 론에 대한 고민이 많음 §  “우리 전산실에는 웹개발자가 없어요” (차세대는 HTML5 로 가라고 위에서 지시) Page 14
  15. 15. Sencha 솔루션이 적합한 대상 §  웹기술의 응용범위가 넓어 짊으로서 웹기술이 필요없던 기업들이 웹기술을 도입하게 됨 -  웹기술에 대한 전문성이 낮고 웹기술을 처음 도입하는 기업들 -  HTML, CSS, Javascript 와 같은 기술에 대한 지식이 낮은 기업 -  좀 더 진일보한 웹 UI 개발을 원하는 기업 -  그러나 늘 일정과 시간은 촉박한 기업들. Page 15
  16. 16. ExtJS 의 특징 Page 16
  17. 17. ExtJS 의 특징 §  순수 웹표준 방식 §  플러그인 기술 필요없음 §  기업 업무 환경에 최적화된 UI 컴포넌트 제공 §  기업 환경에 적합한 그래프와 차트 제공 §  빠른 업무 화면 개발을 위한 비쥬얼 저작도구 제공 §  ExtJS 라이브러리로 개발 웹브라우저 HTML5/CSS3/JS 로 표현 §  반응형 레이아웃 §  태블릿 기본 지원 §  지원브라우저 -  IE 8 이상, Chrome, Firefox, Opera, iOS, Android 브라우저 Page 17
  18. 18. Sencha ExtJS 를 써야하는 3가지 이유 1.  고품질의 미려한 UI 컴포넌트 셋 100종 기본 제공 -  트리메뉴, 버튼, 탭, 캘린더 등등 2.  압도적인 성능의 고수준의 차트 솔루션 -  50종의 2D, 3D 고품질 차트 기본 내장 3.  쾌속 개발이 가능한 비쥬얼 저작도구 Sencha Architect 제공 -  에디터 개발과는 비교할 수 없는 개발 생산성을 보장 Page 18
  19. 19. 기업 환경에 최적화된 UI Page 19
  20. 20. UI 위젯과 컴포넌트 §  Ext JS 는 수백가지 크로스 브라우저가 지원되는 사용자 인터페이스 컴포넌트들을 지원 §  기업용 업무 화면에 필요한 요소들은 거의 모두 갖추고 있음. •  Panels •  Grids •  Trees  •  Toolbars, Buttons, Menus •  Windows •  컴포넌트 상세 예제 페이지  the examples page 
  21. 21. ExtJS UI
  22. 22. ExtJS UI Page 22
  23. 23. Grid §  총 18 종의 그리드 형태 지원 -  Array Grid, Multi Sort Grid, Big Data Grid, Widget Grid 등등 §  대용량 데이타 지원 -  BufferedRender §  순수 웹표준 기술 방식 Page 23
  24. 24. Array Grid Page 24
  25. 25. Widget Grid Page 25
  26. 26. Tree §  9가지 트리형태 지원 -  Basic Trees -  Tree Reorder -  Tree Grid -  Two Grid -  Check Tree -  XML Tree -  Filtered Tree -  Linear Data Geographical Tree Page 26
  27. 27. Basic Tree Page 27
  28. 28. 폼 §  20여가지 이상의 폼필드를 지원 §  폼 상세 예제 페이지 the examples page
  29. 29. 업무용 화면 요소 기본 제공 Page 29
  30. 30. 고수준의 차트기능 기본내장 Page 30
  31. 31. 고품질의 웹표준 차트 §  50종의 차트 기본 제공 §  차트 에니메이션 기본 지원 §  섬세한 커스터마이징 가능 §  3D 차트 제공 §  차트 예제 보기 §  http://dev.sencha.com/ext/5.1.0/ examples/kitchensink/? charts=true#column-basic
  32. 32. 50종의 고급 차트 기본 내장 §  http://dev.sencha.com/ext/5.1.0/examples/kitchensink/? charts=true#column-basic
  33. 33. Page 33
  34. 34. Page 34
  35. 35. ROI 를 따져보자 Page 37
  36. 36. ExtJS 웹브라우저 호환성 §  IE6, 7, 8, 9, 10, 11 §  Opera §  Chrome §  Safari §  Firefox
  37. 37. 웹브라우저 파편화 / 크로스 브라우징 제작 이슈 §  각 웹브라우저는 회사마다 고유한 엔진을 사용 §  웹브라우저별로 웹표준을 해석하는 방식에 차이존재 §  같은 회사의 웹브라우저라도 맥/윈도우/리눅스 별로 미세한 차이 존재 -  참고 : IE, 오페라, 파이어폭스와 함께하는 크로스 브라우징 가이드 http://www.mozilla.or.kr/docs/web-developer/standard/crossbrowsing.pdf §  웹사이트 개발자들에게 크로스 브라우징 이슈는 큰 골치거리 §  ExtJS 는 크로스 브라우저를 알아서 처리함. 개발자가 신경쓸 필요가 없음. Page 39
  38. 38. 단일 코드 문법을 쓰는 ExtJS 장점 §  ExtJS 는 배우기 어렵다? -  ExtJS 는 자바스크립트 라이브러리의 일종 -  ExtJ = HTML+CSS+JS -  빠른 생산성이 담보되어야하는 기업환경에서 HTML, CSS, Javascript 별도로 학습해야하는 부담 감을 오히려 경감시켜줌 -  HTML, CSS, Javascript 각각 코드 관리 및 유지보수 가능하실런지요? -  HTML, CSS 는 Java/C 와 같은 프로그램 언어가 아닙니다. -  참고 : 프론트엔드 개발자는 왜 구하기 어렵나요? http://mygony.com/archives/4810 §  UI 를 고치기 위해 HTML, CSS 를 직접 타자하는 순간부터 크로스 브라우저는 개발사의 몫이 됩니다 §  ExtJS 는 하나만 배워서 컨텐츠를 작성하면 웹페이지에서 알아서 HTML, CSS, Javascript 형태로 뿌려집니다. Page 40
  39. 39. 타프레임워크와의 비교 Page 41
  40. 40. ExtJS Framework
  41. 41. Angular JS 와의 비교 Page 43
  42. 42. AngularJS Page 44
  43. 43. ExtJS vs AngularJS §  http://www.techferry.com/articles/ExtJS-vs-AngularJS.html Page 45
  44. 44. jQuery+jQuery UI+Plugins 과의 비교 Page 46
  45. 45. 적정기술의 선택이 중요 Page 47
  46. 46. 어떤 기술을 선택할 것인가?
  47. 47. 목적과 상황에 대한 판단 §  어떤 프로젝트를 할건인가? -  B2B, Enterprise 용 §  숙련된 웹기술 전문가를 보유하고 있는가? -  아니라면 Sencha 기술 사용이 유리 §  높은 생산성이 요구되는 개발 프로젝트 인가? Page 49
  48. 48. 전용 비쥬얼 저작도구 Sencha Architect §  http://www.sencha.com/products/architect/ Page 2-50
  49. 49. 전용 비쥬얼 저작도구를 활용한 빠른 화면 개발 Page 51
  50. 50. 결론 §  기업내 전산환경의 변화 §  모던 웹서비스 아키텍쳐 이해하기 §  ROI를 따져보자 §  타프레임워크와의 비교 §  적정기술의 선택이 중요 §  결론
  51. 51. 감사합니다. §  미래웹기술연구소 §  http://miraeweb.com §  조만영 기술총괄이사 (manyoung@miraeweb.com) Page 53

×