Enterprise UI Architecture Framework Natural-JS
목차 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2. 현표준웹기반엔터프라이즈 UI 개발도구현황 3. Natural-JS 아키텍처구성 4. Natural-JS 특징 5. 기대효과 6. 수행이력 7. DEMO
1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2000 년대이전 2000 년대초반 2000 년대후반 2010 년대초반현재와미래 Web 1.0 서비스제공자중심의웹 Web 2.0 사용자참여와공유의웹 Web 3.0 사용자중심의통합의웹 CS 기반시스템 X-Internet Ajax & RIA 표준웹 HTML5 및 WEB OS C/S 환경에서대부분의업무처리 팀버너스리에의한 WWW( 웹 ) 의등장으로웹환경에서업무처리에대한관심이높아짐 1990 년대말 DHTML 의등장으로서버도움없이클라이언트에서동적인 UI 를표현가능하게됨 Netscape 와 Microsoft 에서각각의표준을정의 2000 년 Forest Research CEO 가개념제시 2003 년 C/S 의풍부한 UI 를웹에서구현하기위한솔루션제시이후급속히발전 2002 년 Adobe 사에서 RIA 개념제시 2005 년 James Garrett 이 AJAX 용어정의 2006 년 ActiveX 문제대두와 Web 2.0 trend 에맞추어 Google, Adobe, MS 등에서 AJAX & RIA 모델급부상 2008 년 3 월 OMG SIG 에서기업용 RIA 솔루션표준화작업시작 X-Internet 과 RIA 기술접목시도 X-Internet 과 RIA 의경계가사라짐 표준웹기술의비약적인발전에의해표준웹기술만으로도 X-Internet 툴이상의 UI 기능을제공하고이를기반한라이브러리들이풍성해지면서표준웹기반의업무 UI 를개발할수있는도구들의등장 Shadow DOM 기술을활용한웹컴포넌트화가능 HTML5 기반 WEB OS 등장 Power Builder Visual Basic Gauce MiPlatform X-Platform MyBuilder Flex Nexacro Websquare Natural-JS Angular-JS Ext-JS Polymer, Vue.js, React.js Web OS Tizen, Chrome OS, Firefox OS, webos 1
2. 현표준웹기반엔터프라이즈 UI 개발도구현황 구분 Natural-JS AngularJS (Google) Vue.js React.js (Facebook) SAPUI5 (SAP) 아키텍처 CVC 패턴기반 AOP 지원 페이지블록단위프로그래밍지원 MVC 패턴기반 DI 지원 MVVM 패턴기반 Virtual DOM Flux 패턴기반 Virtual DOM MVC 패턴기반 데이터 컴포넌트간양방향데이터바인딩지원 강력한포멧, 마스킹, 검증모듈제공 양방향데이터바인딩지원 단방향데이터바인딩지원 단방향데이터바인딩지원 양방향데이터바인딩지원 포멧, 검증지원 UI 컴포넌트지원점수 (10) 9 9( 서드파티를통해지원 ) 9( 서드파티를통해지원 ) 9( 서드파티를통해지원 ) 10 디자인, 퍼블리셔와의협업 매우용이함 어려움 어려움 어려움 매우어려움 학습곡선 심플한 UI 아키텍처와 jquery 플러그인형태로기능들을제공하여학습곡선이낮음. 아키텍처스펙을이해해야하고생소한구문들이많아학습곡선이높음 아키텍처스펙을이해해야하고생소한구문들이많아학습곡선이높음 아키텍처스펙을이해해야하고생소한구문들이많아학습곡선이높음 SAP 아키텍처를이해하는웹개발자에게는학습곡선이낮음. 구동환경 ECMA Script 3+(Suitable 5+) HTML4+ jquery ECMA Script 3+(Suitable 5+) HTML4+ jquery Lite ECMA Script 5+ HTML5 ECMA Script 5+ HTML5 ECMA Script 5+ HTML 4+ 3
3. Natural-JS 아키텍처구성 Natural-JS 는 Natural-CORE, Natural-ARCHITECTURE, Natural-DATA, Natural-UI 로구성됩니다. DataSync Formatter Validator Natural-DATA Alert Button Datepicker Popup Tab Select Form List Grid Pagination Tree Natural-UI.Shell - Notify, Documents Natural-UI Core Utilities Natural Config Communicator View Controller Natural-ARCHITECTURE Natural-CORE 4
3. Natural-JS 아키텍처구성 Natural-ARCHITECTURE 는 CVC(Controller-View-Communicator) 아키텍처패턴 ( 김황만, 김용구, 한국통신 학회, 9 월 2011 년 ) 을구현한아키텍처프레임워크를제공하여웹어플리케이션 UI 개발의복잡성을해결하고 개발생산성향상시켜주며개발된 UI 자원을재활용할수있는아키텍처를제공해줍니다. * Natural Application Context page01.html Controller Communicator View CVC Architecture Pattern Communicator Communication Filter View Controller AOP Natural Application Context Natural-ARCHITECTURE * Communicator N( #main ).comm( block01.html ).submit(); block01.html <article id= view > * VIEW <article> <script> N( #view ).cont({ * Controller }); </script> 5
3. Natural-JS 아키텍처구성 Natural-UI 는표준웹기반의 Rich 한엔터프라이즈웹어플리케이션을쉽게구현할수있도록다양한컴포넌트를제공하고 Natural-DATA 는데이터의검증 (Validate) 및양식화 (Format), 데이터동기화등데이터처리를위한기능을제공합니다. Natural-CORE 는프레임워크내부적으로사용하는공통함수와웹개발을지원하는함수들을제공합니다. 또한이들은상호연동되어작동됩니다. Natural-UI.Shell Select Alert Notify DataSync Formatter Validator Natural-DATA Form List Grid Pagination Button Datepicker Popup Tab Documents Core Utilities Natural Config Natural-CORE Tree Natural-UI 6
4. Natural-JS 특징 웹 UI 안에서개발영역과디자인영역을완벽하게분리할수있는아키텍처제공 Natural-JS 의 Natural-ARCHITECTURE 패키지는클라이언트브라우저영역안에서프리젠테이션 ( 디자인 ) 영역과개발영역을완벽하게분리할수있는프레임워크를제공하여디자인 ( 퍼블리싱 ) 은디자인파트에서로직개발은업무별 UI 개발파트에서따로따로개발을진행할수있는환경을제공해줍니다. 표준기술기반의개발영역과디자인영역을분리할수있는아키텍처를제공하여이미 Natural-JS 로개발된화면들을비즈니스로직 ( 스크립트 ) 수정없이 HTML 과 CSS 만수정함으로서반응형웹, 모바일웹또는모바일하이브리드앱형태로서비스할수있습니다. 7
4. Natural-JS 특징 소스코드재활용 Natural-JS 의 Natural-ARCHITECTURE 패키지는프로그램의구동영역 (Scope) 을완벽하게분리해주어페이 지안의페이지블록들을모두웹컴포넌트화하여재활용할수있는기반을제공합니다. User info Component Search Component System info Component Alerts Component Tasks Component Posts Component Exception Distribution Component Top Contributors Component Trending Now Component 8
4. Natural-JS 특징 템플릿기반의 UI 컴포넌트아키텍처 퍼블리싱된 HTML 요소 ( 템플릿요소 ) 및스타일을기반으로컴포넌트를생성해줘컴포넌트스타일마저별다른작업없이사이트의전체적인디자인컨셉을맞출수있습니다. 폼이나그리드컴포넌트는템플릿요소에데이터입력컨트롤을배치하고포멧룰과검증룰등을선언해놓으면컴포넌트실행시이러한배치나설정들이내부적으로인식되어데이터의입 / 출력및검증, 포멧등을아주쉽게처리할수있습니다. N(data).grid( table ).bind(); 9
4. Natural-JS 특징 웹 UI 개발생산성향상 Formatter, Validator등의비즈니스어플리케이션개발을지원하는모듈들과다양한 UI 컴포넌트들을지원하여표준웹개발의생산성을향상시켜줍니다. AOP(Aspect Oriented Programming) 와 Communication Filter 기능을제공하여함수들이실행되는특정시점이나서버로데이터 / 페이지를요청할때마다공통로직들을간단하게실행시킬수있습니다. 데이터관련 UI 컴포넌트들은내부데이터세트를따로관리하며여러개의컴포넌트들이같은하나의데이터세트를공유한다면이들컴포넌트간데이터값및표현이자동으로동기화되어데이터동기화처리를따로하지않아도돼데이터동기화에소비되는개발시간을단축시켜줍니다. 성능 UI 컴포넌트들은브라우저에서제공하는기본기능들을최대한활용하여 UI 반응속도가빠릅니다. 프레임워크라이브러리의용량이매우작아 (195KB) 초기로딩속도가매우빠릅니다. Grid, List, Pagination 등의컴포넌트를제공하여대용량데이터를빠르게처리할수있습니다. 10
5. 기대효과 웹접근성과웹호환성을충족하는 100% 순수웹표준기술기반 Natural-JS 는순수표준웹기술로만이루어진프레임워크로서웹개발을지원하는자동화툴등을연동하는데전혀제약사항이없고웹호환성과웹접근성을충족하여프로젝트의기본적인요구사항들을충족시켜줍니다. 표준기술의한계때문에비표준기술로웹어플리케이션을구현해야되는시대는이미지났습니다. 세계시장을바라본다면표준기술기반은장점이아니라당연한기본사항입니다. 표준기술기반으로개발을진행하여개발자들의학습에좋은영향을미칠수있음 비표준기술기반의상용 UI 툴은아무리연마하고익혀도해당툴을사용하지않는프로젝트에서는무용지물이고제조사에서의지원이중단되면문제를복구할수없는상태가됩니다. 표준기술은대부분이전기술과의호환성을유지하기때문에개발자들은앞으로등장할웹표준기술들에대해유연하게대처할수있습니다. 웹 UI 개발을위한통합프레임워크제공으로시스템의품질과생산성을동시에증대 프로젝트에 Natural-JS 를도입함으로서웹어플리케이션품질의기준이자연스럽게높아지고일관성을가 지게되며개발생산성은개발기간과개발숙련도에비례하여큰폭으로증가하게됩니다. 11
7. DEMO Natural-JS 홈페이지 : http://bbalganjjm.github.io/natural_js Natural-JS 의소개및사용법, API 문서, DEMO, 예제등을정리해놓은사이트 13
End of Document