Enterprise UI Architecture Framework Natural-JS 2016.11.11. 빨간짜장면팀
목차 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2. 현엔터프라이즈 UI 개발도구현황 3. 현엔터프라이즈 UI 개발도구의문제점및개선방향 4. Natural-JS 아키텍처구성 5. Natural-JS 특징 6. 기대효과 7. 발전방향 8. 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 Angular-JS Ext-JS Polymer Web OS Tizen, Chrome OS, Firefox OS, webos 1
2. 현엔터프라이즈 UI 개발도구현황 제조사제품장점단점라이선스 투비소프트 X-Platform WYSIWYG 툴을제공하여탁월한개발생산성제공 Active-X 기반의비표준기술기반이어서시장에서사장되고있음 상용 국내 투비소프트 Nexacro WYSIWYG 툴을제공하여탁월한개발생산성제공 X-Platform 의사상이웹기술기반으로이관됨에따른자원의낭비와수행속도저하 상용 인스웨이브 Websquare WYSIWYG 툴을제공하여탁월한개발생산성제공 개발된소스코드를기반으로스크립트와태그를실시간렌더링하는방식으로수행속도가느림 상용 국외 Google Angular-JS 세계적으로많은사용자를확보하고있음 프레임워크에적응하는시간이길고선언형태그가많아디자인 ( 퍼블리싱 ) 과개발의경계가애매함 MIT Sencha Ext-JS 역사가오래되었고많은기능을제공함. 프레임워크에적응하는시간이길고요소들을자바스크립트로생성하는구조여서디자인 ( 퍼블리싱 ) 과개발의경계가애매함 GPL, 상용 2
3. 현엔터프라이즈 UI 개발도구의문제점및개선방향 문제점 비표준기술기반이거나웹표준을충족하지못하여개발자들이비표준기술에대하여따로학습하는기간이필요하고웹개발을지원하는도구들을연동하기어려움 100% 표준웹기반기술제공 개선방향및목표 UI 표현을위한 UI 요소렌더링과정이별도로존재하여화면표시속도가느리고오류처리가어려움 개발자가작성한소스코드를실행 ( 브라우저 ) 환경에서빌드나렌더링과정없이바로인식가능해야함 UI 소스코드안에서디자인 ( 퍼블리싱 ) 과개발 ( 스크립트 ) 의경계가애매하여퍼블리셔와의협업이어려움 UI 소스코드안에서디자인과개발의영역을완벽하게구분해줄수있는아키텍처를제공 학습곡선이높아프레임워크에적응을위한노력이많이필요함 웹개발자에게가장친숙한언어나라이브러리기반으로프레임워크기능을제공하고복잡한코딩규칙등을최대한지양 프레임워크리소스를활용하여컴포넌트를직접제작할수있는 API 와확장공간을제공하지않아제조사및제작자의의존도가큼 컴포넌트를손쉽게제작할수있도록내부 API 와소스코드를모두공개하고 DATA 를손쉽게핸들링할수있는라이브러리들을지원. 3
4. Natural-JS 아키텍처구성 Natural-JS 는 Natural-CORE, Natural-ARCHITECTURE, Natural-DATA, Natural-UI 로구성됩니다. DataSync Formatter Validator Natural-DATA Alert Button Datepicker Popup Tab Select Form Grid Pagination Tree Core Utilities Natural Config Natural-UI Communicator View Controller Natural-ARCHITECTURE Natural-CORE 4
4. Natural-JS 아키텍처구성 Natural-ARCHITECTURE 는 CVC(Controller-View-Communicator) 아키텍처패턴 ( 김황만, 김용구, 한국통신 학회, 9 월 2011 년 ) 을구현한아키텍처프레임워크를제공하여웹어플리케이션 UI 개발의복잡성을해결하고 개발생산성향상시켜주며개발된 UI 자원을재활용할수있는아키텍처를제공해줍니다. * Natural Application Context page01.html Controller Communicator View CVC Architecture Pattern Communicator View Controller 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
4. Natural-JS 아키텍처구성 Natural-UI 는표준웹기반의 Rich 한엔터프라이즈웹어플리케이션을쉽게구현할수있도록다양한컴포넌트를제공하고 Natural-DATA 는데이터의검증 (Validate) 및양식화 (Format), 데이터동기화등데이터처리를위한기능을제공합니다. Natural-CORE 는프레임워크내부적으로사용하는공통함수와웹개발을지원하는함수들을제공합니다. 또한이들은상호연동되어작동됩니다. DataSync Formatter Validator Natural-DATA Core Utilities Natural Config Natural-CORE Select Form Grid Pagination Tree Alert Button Datepicker Popup Tab Natural-UI 6
5. Natural-JS 특징 웹 UI 안에서개발영역과디자인영역을완벽하게분리할수있는아키텍처제공 Natural-JS 의 Natural-ARCHITECTURE 패키지는클라이언트브라우저영역안에서프리젠테이션 ( 디자인 ) 영역과개발영역을완벽하게분리할수있는프레임워크를제공하여디자인 ( 퍼블리싱 ) 은디자인파트에서로직개발은업무별 UI 개발파트에서따로따로개발을진행할수있는환경을제공해줍니다. 웹 UI 개발생산성향상 Natural-JS는 Formatter, Validator등의비즈니스어플리케이션개발을지원하는모듈들과다양한 UI 컴포넌트들을지원하여표준웹개발의생산성을향상시켜줍니다. 데이터관련 UI 컴포넌트들은내부데이터세트를따로관리하며여러개의컴포넌트들이같은하나의데이터세트를공유한다면이들컴포넌트간데이터값및표현이자동으로동기화되어데이터동기화처리를따로하지않아도돼데이터동기화에소비되는개발시간을단축시켜줍니다. 성능 UI 컴포넌트들은브라우저에서제공하는기본기능들을최대한활용하여 UI 반응속도가빠릅니다. 프레임워크라이브러리의용량이매우작아 (134KB) 초기로딩속도가매우빠릅니다. Natural-JS는 Grid 컴포넌트와 Pagination 컴포넌트를제공하여대용량데이터를빠르게처리할수있습니다. 7
5. Natural-JS 특징 템플릿기반의 UI 컴포넌트아키텍처 퍼블리싱된 HTML 요소 ( 템플릿요소 ) 및스타일을기반으로컴포넌트를생성해줘컴포넌트스타일마저별다른작업없이사이트의전체적인디자인컨셉을맞출수있습니다. 폼이나그리드컴포넌트는템플릿요소에데이터입력컨트롤을배치하고포멧룰과검증룰등을선언해놓으면컴포넌트실행시이러한배치나설정들이내부적으로인식되어데이터의입 / 출력및검증, 포멧등을아주쉽게처리할수있습니다. N(data).grid( table ).bind(); 8
6. 기대효과 소스코드재활용 (1/2) 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 9
6. 기대효과 소스코드재활용 (2/2) 더나아가소스코드저장소에정제된웹컴포넌트들을저장하여다른프로젝트에서활용한다면개발생산성과품질, 프로젝트관리측면에서아주큰효과를기대할수있습니다. 이러한방식이활성화된다면웹개발방법론과개발방식의변화를가져올것입니다. Natural-ARCHITECTURE 기반으로작성된페이지또는블록페이지 ( 웹컴포넌트 ) 들을저장하고재활용함으로서 UI 개발공정단축 front-end(ui) 개발을미리확정하여프로젝트손실최소화 테스트데이터를생성하여서버로직개발없이 UI 를구동할수있음 Natural-JS 기반의 front-end 개발은 DB나 WAS가필요없어원격지에서개발이가능함 back-end( 서버로직 ) 개발은확정된 UI를기반으로원활하게진행할수있음 요구사항정의 DB 설계 front-end 개발통합테스트 운영및유지보수 화면설계 ( 화면 정의서 ) 시활용 화면설계 front-end 테스트 front-end 확정 back-end 개발 Natural- Repository 저장및재활용 단위테스트 10
6. 기대효과 웹접근성과웹호환성을충족하는 100% 순수웹표준기술기반 표준기술의한계때문에비표준기술로웹어플리케이션을구현해야되는시대는이미지났습니다. Natural-JS 는순수표준웹기술로만이루어진프레임워크이어서웹개발을지원하는자동화툴등을연동하는데전혀제약사항이없고웹호환성과웹접근성을충족하여프로젝트의기본적인요구사항들을충족시켜줍니다. 세계시장을바라본다면표준기술기반은장점이아니라당연한기본사항입니다. 표준기술기반으로개발을진행하여개발자들의학습에좋은영향을미칠수있음 비표준기술기반의상용 UI 툴은아무리연마하고익혀도해당툴을사용하지않는프로젝트에서는무용지물이고제조사에서의지원이중단되면문제를복구할수없는상태가됩니다. 표준기술은대부분이전기술과의호환성을유지하기때문에개발자들은앞으로등장할웹표준기술들에대해유연하게대처할수있습니다. 웹 UI 개발을위한통합프레임워크제공으로시스템의품질과생산성을동시에증대 프로젝트에 Natural-JS 를도입함으로서웹어플리케이션품질의기준이자연스럽게높아지고일관성을가 지게되며개발생산성은개발기간과개발숙련도에비례하여큰폭으로증가하게됩니다. 11
7. 발전방향 Natural-JS 에서 Natural Enterprise Platform 으로의발전 Natural-Mobile Portal Natural-Portal 응용기반 응용기반 Natural-JS Natural-Mobile Natural-META Natural-Builder Natural-Repository 생산성 생산성 생산성 생산성 생산성 Natural-EE Natural-Live Natural-Chart 보안과성능 편의성 생산성 12
8. DEMO Natural-JS 홈페이지 : http://bbalganjjm.github.io/natural_js Natural-JS 의소개및사용법, API 문서, DEMO, 예제등을정리해놓은사이트 13
End of Document