슬라이드 1

Similar documents
슬라이드 1

[Brochure] KOR_TunA

Windows Live Hotmail Custom Domains Korea

서현수

<4D F736F F F696E74202D20B5A5C0CCC5CDBAA3C0CCBDBA5F3130C1D6C2F75F32C2F7BDC32E >

슬라이드 1

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

슬라이드 1

Microsoft PowerPoint - chap01-C언어개요.pptx

HTML5가 웹 환경에 미치는 영향 고 있어 웹 플랫폼 환경과는 차이가 있다. HTML5는 기존 HTML 기반 웹 브라우저와의 호환성을 유지하면서도, 구조적인 마크업(mark-up) 및 편리한 웹 폼(web form) 기능을 제공하고, 리치웹 애플리케이 션(RIA)을

슬라이드 1

<4D F736F F F696E74202D20C1A632C8B8C7D1B1B9BDBAC7C1B8B5BBE7BFEBC0DAB8F0C0D32D496E E D56432E BC8A3C8AF20B8F0B5E55D>

HTML5* Web Development to the next level HTML5 ~= HTML + CSS + JS API

NCS : ERP(SAP) ERP(SAP) SW IT,. SW IT 01., 05., 06., 08., 15., , 05. SW IT,,,, SAP HR,,, 4,,, SAP ABAP HR SCHEMA, BSP,

Æí¶÷4-¼Ö·ç¼Çc03ÖÁ¾š

Egretia_White_Paper_KR_V1.1.pages

!K_InDesginCS_NFH

UX410 SAP Fiori UI 개발. 과정개요 과정버전 : 02 학습시간 : 5 일

TTA Journal No.157_서체변경.indd

슬라이드 1

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

슬라이드 1


<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E C8A3292E687770>

Web Scraper in 30 Minutes 강철

untitled

MVVM 패턴의 이해

PowerPoint Presentation

PowerPoint 프레젠테이션

VS 2013 Global Launch in a Box

슬라이드 1

고재도 표즌프레임워크오픈커미터리더 4기 GDG Korea WebTech 운영자시작하세요 AngularJS 프로그래밍집필 kt 소프트웨어개발센터, IoT 플랫폼개발

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

Microsoft PowerPoint - 11주차_Android_GoogleMap.ppt [호환 모드]

52 l /08

PowerPoint 프레젠테이션

untitled

Office 365, FastTrack 4 FastTrack. Tony Striefel FastTrack FastTrack

Flex Builder 2 & 차트

마켓온_제품소개서_ key

SproutCore에 홀딱 반했습니다.

PCServerMgmt7

1,000 AP 20,000 ZoneDirector IT 5, WLAN. ZoneFlex AP ZoneDirector. WLAN. WLAN AP,,,,,,., Wi-Fi. AP. PSK PC. VLAN WLAN.. ZoneDirector 5000 WLAN L

Microsoft PowerPoint - web-part03-ch19-node.js기본.pptx

Flex Builder 2 & 차트


Intro to Servlet, EJB, JSP, WS

DE1-SoC Board

2파트-07

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES ActiveX 컴포넌트가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

1. 제품 개요 AhnLab Policy Center 4.6 for Windows(이하 TOE)는 관리대상 클라이언트 시스템에 설치된 안랩의 안티바이러스 제품인 V3 제품군에 대해 보안정책 설정 및 모니터링 등의 기능을 제공하여 관리대상 클라이언트 시스템에 설치된 V3

Microsoft PowerPoint - HTML5-교육컨설팅.ppt

제8장 자바 GUI 프로그래밍 II


2 PX-8000과 RM-8000/LM-8000등의 관련 제품은 시스템의 간편한 설치와 쉬운 운영에 대한 고급 기술을 제공합니다. 또한 뛰어난 확장성으로 사용자가 요구하는 시스템을 손쉽게 구현할 수 있습니다. 메인컨트롤러인 PX-8000의 BGM입력소스를 8개의 로컬지

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

<4D F736F F F696E74202D20332DC1F6B9DDC1A4BAB8BDC3BDBAC5DB>

대규모 자바스크립트 웹어플리케이션개발하기 with BackboneJS and RequireJS 넷스루개발 2 팀이병주

표준프레임워크로 구성된 컨텐츠를 솔루션에 적용하는 것에 문제가 없는지 확인

FMX M JPG 15MB 320x240 30fps, 160Kbps 11MB View operation,, seek seek Random Access Average Read Sequential Read 12 FMX () 2

2009방송통신산업동향.hwp

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

untitled

untitled

Ä¡¿ì³»ÁöÃÖÁ¾

웹개발을위한 ASP.NET Framework 기반의 ComponentOne 사용법 권대건 부산대학교컴퓨터공학과 Abstract 최근 Twitter 나 Facebook 과같이웹을이용한 SNS 가폭발적으로증가한데이어웹기반온라인게임시장이활성

<4D F736F F F696E74202D E20C0CEC5CDB3DD20C0C0BFEB20B9D720BCADBAF1BDBA20B1E2BCFA E >

..,. Job Flow,. PC,.., (Drag & Drop),.,. PC,, Windows PC Mac,.,.,. NAS(Network Attached Storage),,,., Amazon Web Services*.,, (redundancy), SSL.,. * A

< FC8A8C6E4C0CCC1F620B0B3B9DF20BAB8BEC8B0A1C0CCB5E5C3D6C1BE28C0FAC0DBB1C7BBE8C1A6292E687770>

1. VBA 로웹문서접근및웹페이지정보수집하는방법엑셀 VBA 를통해웹페이지또는웹문서에접근하여정보를수정하고데이터를수집하기위해서는아래와같이크게 2 가지방법을사용합니다. 1-A. WinHTTP ( 또는 MSXMLHTTP) 이용 VBA 에서는 WinHTTP 또는 MSXMLHTT

PowerPoint Presentation

슬라이드 1

웹 그리드 컴포넌트 SBGrid ver2.x

목차 전략적 우위 달성... 3 비즈니스 응용 프로그램 프레임워크의 중요성... 3 비즈니스 응용 프로그램의 가치 측정... 3 xrm의 기능... 4 xrm은 어떻게 가치를 제공하는가... 4 위험의 완화... 4 고객 사례... 5 개발 기간의 단축... 5 고객

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

PowerPoint Template

Microsoft PowerPoint - 09_이우철_HTML5포럼_발표자료_V1.0_print_최종.pptx

PowerPoint Presentation

Microsoft Word - KSR2014S042

<4D F736F F F696E74202D FC5F5BAF1BCD2C7C1C6AE20C0CCBFECC3B65F48544D4C35C6F7B7B35FB9DFC7A5C0DAB7E15FBCF6C1A4>

슬라이드 1


다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

웹개발을위한 ComponentOne 사용법 (2) 권대건 부산대학교컴퓨터공학과 Abstract 최근웹개발이활성화되면서전문가를위한여러가지 Tool 웹애플리케이션형태로제공하는경우가늘고있다. ComponentOne 은.NET 기반의 UI C

Service-Oriented Architecture Copyright Tmax Soft 2005

본보고서는 yfiles AJAX에대해소개하고, 구현을위해필요한서버 / 클라이언트의구성을알아보고자한다. 더불어간단한예제를통해어플리케이션이어떻게동작하는지소개한다. 2장은 yfiles AJAX를알기위해필요한개념에대해서술한다. 3장에서는 yfiles AJAX의서버와클라이언트가

슬라이드 1

Ⅰ. 서론 1989년 CERN의 팀 버너스 리에 의해 만들어진 월드 와이드 웹 기술은 HTML(HyperText Markup Language), URL(Unified Resource Locator, HTTP(Hyper- Text Transfer Protocol)이라는

PowerPoint Presentation

Microsoft PowerPoint - F3-1-이원석

슬라이드 1

Microsoft PowerPoint - Smart CRM v4.0_TM 소개_ pptx

HTML5 와리포팅툴구현사례

NCRM HTML5

PowerPoint 프레젠테이션

Analyst Briefing

Social Network

AMP는 어떻게 빠른 성능을 내나.key

Transcription:

Enterprise UI Architecture Framework Natural-JS 2018.10.

목차 1. 엔터프라이즈어플리케이션 UI 개발기술의변화 2. 현표준웹기반엔터프라이즈 UI 개발도구현황 3. Natural-JS 아키텍처구성 4. Natural-JS 특징 5. 기대효과

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 개발생산성향상 AOP(Aspect Oriented Programming) 와 Communication Filter 기능을제공하여함수들이실행되는특정시점이나서버로데이터 / 페이지를요청할때마다공통로직들을간단하게실행시킬수있습니다. 데이터관련 UI 컴포넌트들은내부데이터세트를따로관리하며여러개의컴포넌트들이같은하나의데이터세트를공유한다면이들컴포넌트간데이터값및표현이자동으로동기화되어데이터동기화처리를따로하지않아도돼데이터동기화에소비되는개발시간을단축시켜줍니다. Formatter, Validator등의비즈니스어플리케이션개발을지원하는모듈들과다양한 UI 컴포넌트들을지원하여개발생산성을향상시켜줍니다. 뛰어난데이터처리성능과반응속도 UI 컴포넌트들은브라우저에서제공하는기본기능들을최대한활용하여 UI 반응속도가빠릅니다. 프레임워크라이브러리의용량이매우작아 ( 전체 :208KB) 초기로딩속도가매우빠릅니다. Grid, List, Pagination 등의컴포넌트를제공하여대용량데이터를빠르게처리할수있습니다. 여러프로젝트의성능점검을통해데이터처리및 UI 렌더링, 이벤트바인딩부분에대한튜닝이여러차례이루어져속도가최적화되어있습니다. 10

4. Natural-JS 특징 웹 UI 안에서개발영역과디자인영역을완벽하게분리할수있는아키텍처제공 Natural-JS 의 Natural-ARCHITECTURE 패키지는클라이언트브라우저영역안에서프리젠테이션 ( 디자인 ) 영역과개발영역을완벽하게분리할수있는프레임워크를제공하여디자인 ( 퍼블리싱 ) 은디자인파트에서로직개발은업무별 UI 개발파트에서따로따로개발을진행할수있는환경을제공해줍니다. 표준기술기반의개발영역과디자인영역을분리할수있는아키텍처를제공하여이미 Natural-JS 로개발된화면들을비즈니스로직 ( 스크립트 ) 수정없이 HTML 과 CSS 만수정함으로서반응형웹, 모바일웹또는모바일하이브리드앱형태로서비스할수있습니다. 7

4. Natural-JS 특징 소스코드재활용 Natural-JS의 Natural-ARCHITECTURE 패키지는프로그램의구동영역 (Scope) 을완벽하게분리해주어 SPA(Single Page Application) 개발을넘어페이지안의페이지블록들을모두웹컴포넌트화하여재활용할수있는기반을제공합니다. User info Search System info Alerts Tasks Posts Exception Distribution Top Contributors Trending Now 8

4. Natural-JS 특징 템플릿기반의 UI 컴포넌트아키텍처 퍼블리싱된 HTML 요소 ( 템플릿요소 ) 및스타일을기반으로컴포넌트를생성해줘컴포넌트스타일마저별다른작업없이사이트의전체적인디자인컨셉을맞출수있습니다. 폼이나그리드컴포넌트는템플릿요소에데이터입력컨트롤을배치하고포멧룰과검증룰등을선언해놓으면컴포넌트실행시이러한배치나설정들이내부적으로인식되어데이터의입 / 출력및검증, 포멧등을아주쉽게처리할수있습니다. N(data).grid( table ).bind(); 9

5. 기대효과 100% 순수웹표준기술기반 표준기술기반으로개발을진행하여개발자들의학습에좋은영향을미칠수있습니다. 비표준기술기반의상용 UI 툴은아무리연마하고익혀도해당툴을사용하지않는프로젝트에서는무용지물이고제조사에서의지원이중단되면문제를복구할수없는상태가됩니다. 표준기술은대부분이전기술과의호환성을유지하기때문에개발자들은앞으로등장할웹표준기술들에대해유연하게대처할수있습니다. Natural-JS 는순수표준웹기술로만이루어진프레임워크로서웹개발을지원하는자동화툴등을연동하는데전혀제약사항이없고웹호환성과웹접근성을충족하여프로젝트의기본적인요구사항들을충족시켜줍니다. 웹 UI 개발을위한통합프레임워크제공으로시스템의품질과생산성을동시에증대 프로젝트에 Natural-JS 를도입함으로서웹어플리케이션품질의기준이자연스럽게높아지고일관성을가 지게되며개발생산성은개발기간과개발숙련도에비례하여큰폭으로증가하게됩니다. 11

End of Document