웹표준 프레임워크 메타웍스3의 적용 사례와 생산성

웹표준 프레임워크 – 메타웍스 3 의 적용 사례와 생산성

제 2 회 유엔진 오픈 - 아키텍트 데이 - 2012

조진원 선임커미터2012. 06. 07

Presenter:

- 메타웍스 3 기반의 프레임워크 이해

- 메타웍스 3 를 이용한 개발 실전

- 메타웍스 3 기반의 프로세스 코디 구현방안 공유

AGENDA.

어떤 도구를 사용할 것인가 ?

고난이 요구사항

• 순수웹• 페이지 비전환• Lazy Loading• 키 / 마우스 바인딩• 모바일 동시지원• NIO 기반 채팅

품질

• 트랜잭셔널• 요소간 간섭최소화• 일관성 있는 사용자

경험과 예측성• UI 기반의 테스트

자동화

생산성• 서버 / 클라이언트

개발자 그리고 디자이너 역할구분어려워 – CSS/JS/Java/AJAX

• 다양한 언어를 넘나드는 과정의 커뮤니케이션 비용

• 순수자바개발자만있다 .

시장의 요구수준

프로그램 언어를 학습하기 좋은 도구

POJO 프레임워크 – 메타웍스 3

1. 웹 / 모바일 어플리케이션을 다양한 언어 및 기술적 디테일의 이해없이 구현함

2. 순수한 자바언어의 문법과 동작구조를 기반으로 어플리케이션을 만들 수 있어 초보 언어 학습자에게 적합

3. 학습자가 적은 노력으로 빠른 결과물을 확인할 수 있어 동기 유발 / 유지 효과가 높음

4. 객체지향 개념을 철저하게 이해시킬 수 있는 기반 구조가 마련됨

5. 내장된 웹 기반 개발도구 ( 클라우드 IDE) 를 통하여 컴파일 , 오류확인 , 디버그 등을 할 수 있으며 ,

6. LMS 와의 연계를 통하면 문제출제 , 시험 등을 온라인 상에서 바로 할 수 있다 .

– 흩어진 메타데이터를 자동으로 관리하는 메타웍스 3

Domain Class(Java)

View DAO

Con-troller

View DAO

Con-troller

metadat

a

metadat

a

metadat

a

metadat

a

Domain class (JS version)

Domain class (java ver-

sion)

Domain class (Hibernate

version)

MetaworksSynchronizes the Proxy

MetaworksSynchronizes the Proxy

General Approach:Spring MVC, JSON, jQuery, Hibernate

Using Metaworks3:

You have toSynchronize the gap

메타웍스 동작 메커니즘

메타웍스 3 우산

< 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성 >• 프로그래밍 모델 추상화

• 자바 - 자바스크립트 간 통신 추상화 • 자바 - 자바스크립트 간 메타데이터 자동 동기화• 자바스크립트 인터랙션 ( 버튼 , 키보드 / 마우스 ) 추상화• 네비게이션 추상화• 롱 - 폴링 기반 콜백 추상화

• 데이터베이스 접근 추상화• JPA 어노테이션 기반 ORMapping• 데이터베이스 캐시 / 동기화 • 트랜잭션 자동화 ( 스프링없이 동작가능 )

< 테스트 자동화와 품질 향상 >• 매우 짧은 코드 – 품질에 직결• 설계가 곧 구현 – 모델중심의 생산성과 품질• 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지• 웹 기반 테스팅 자동화• Guided Tour 기능 자동화

기존 프로그래밍 모델 ( 이벤트 드리븐 ) 과 약간 차이가 있는 “선언형 프로그래밍 모델” – MDA, 메타데이터와 리플랙션을 계승함

1. 모델 중심 아키텍처의 장점은 적은 코드량과 도메인 중심의 비즈니스 목적 중심의 코드로 품질과 생산성을 동시에 높힘

2. 메타웍스 3 의 독특한 POJO 선언은 웹의 입력값과 버튼을 객체의 ‘필드’와 ‘메서드’로 기본매핑하여 ‘모델 기반 기본 앱’을 자동으로 구현해주어 ‘선 - 프로토타이핑’ 이 가능하다 .

3. 이후 객체에 특화된 디자인과 인터랙션을 공통모듈 디자이너와 개발자가 분산되어 작업할수 있으며 , 그 사이에도 도메인 개발자는 작업을 지속할 수 있다 .

4. 컴포넌트가 쌓이면 쌓일수록 개발의 추상성과 생산성은 배가된다 .

UI 프레임워크 – 메타웍스 3

www.metaworks3.org website Social CMS

Applications

http://www.metaworks3.org/

ProcessCodi Cloud IDE

Applications

ProcessCodi Enterprise 2.0 Plat-form

Applications

Steps:

1. 무엇이 ‘객체’인지 파악하기2. 객체를 잘 ( 응집도 높게 ) 모델링하기3. 객체에 화장시키기4. 객체들을 데리고 앱을 만들기

메타웍스 3 기반 개발 과정

Step 1. 분석

무엇이 “객체”인가 ?그리고 .. 무엇이 “컨텍스트”인가 ?


1. Recognizing Objects in facebook - Login.-java

userId property

UserIdPassword

Login

Login.java

Login methodPassword property


1. Recognizing Objects in facebook - Main.-java

Person objectContents objectMenu object Selection object


UserIdPassword

Login

Login.java Main.java

Content.javaMenu.java

Selection.java

return new Main()

return new AContent()AContent.java

Bcontent.javareturn new BContent()


1. Recognizing Objects in facebook - Person objects in different ‘Context’

Where: NORMAL Where: MINIMISED Where: MEDIUM


Step 2. 모델링객체와 화면요소를 최대한 단순하게 매핑하라 !


UserIdPassword

Login



Selection.java

return new Main()

login() 이 실행되면 Main 을 리턴하므로

Main 을 화면에 그려라 !




UserIdPassword

Login



Selection.java

return new Main()

return new AContent()AContent.java

Bcontent.javareturn new BContent()

( 화면에 여러 객체가 이미 존재하는 경우 ) 리턴된 객체는 자신이 가장

부합되는 응집력을 가진 화면 요소에 가서 그려짐


22



모델링이 곧 구현 !

# 객체의 응집도를 따라 서버에서 리턴된 객체가 표시될 위치를 잡는다 타겟을 정의하지 않아도 위치를 찾기 때문에 UI 컨트롤 코드가 배제됨

# 도메인 객체 이외의 UI 와 관련된 컨트롤은 가능한 대표 모델 몇가지만을 사용하고 가능한 어노테이션에 옵션을 준다 (e.g. Face) 일괄적 UI 표준을 적용하기 용이함

# 데이터를 접근하는 ‘ databaseMe()’ 를 통해 데이터와 웹입력 값의 비교 및 처리를 추상화한다 데이터 접근에 대한 구체적인 코드가 줄어들고 모델레벨이 유지됨


Step 3. UX 일관성기반 디자인

디자이너는 매핑된 모델별로 디자인 작업을 ,

그리고 자바스크립트 개발자는 유저 인터랙션이 높은 것들을

최대한 “컴포넌트” 단위로 작성한다 .

* 요구사항 별로 작성하지 않고 , 요구사항을 수집하여 공통사항을 일반화 하여 컴포넌트 단위로 UI 와 , 스크립트를 ‘한번만’ 만든다 .


메타웍스 3 컴포넌트 래핑 예시 – 구글 챠트 컴포넌트

자바 = 모델 HTML = Face

자바스크립트 = Face-Helper


메타웍스 3 컴포넌트 래핑 예시 – 챠트 컴포넌트

자바 = 모델



HTML = Face


자바스크립트 = Face-Helper



Step 4. 추상성 높은 앱 개발1. 자바스크립트와 CSS, 심지어 JSP, 서블릿도 모르는

일반 자바만을 다루는 개발자로 구성된 팀

2. 적당한 도메인 지식을 갖고 있고 ,

3. 고객과 협의를 할 수 있는 커뮤니케이션 스킬을 가졌다고 가정 .


컴포넌트 조합 – 화이트박스 사용

자바 개발자는 UI 요소들을 자바의

관점으로만 통합하여불러쓴다


프로세스 코디 구현방안 공유



Cloud IDE

• Pure Web based IDE

No SDK, IDE download and Installation Re-quired

• Java Compilation on the fly

• Execution and Debugging

• Code Assistance• System Access & Bad

Code Prohibition (e.g. Infinite Loop)

Now, your whole developers don’t require high-end development devices and PCs, just give them a ‘netbook’ or even an iPad since your developer now requires internet connection only.


Cloud IDE – Mobile Simulation for Web App Development

• Phonegap Simulation• Exportation to

phonegap app project targeted to multiple mobile OS

• Accerlometer, Loca-tion Service, Camera, Vibration


Developed app from this platform can be celebrated through their public/private social network to enable peer-review, getting feedback, or triggering others to branch from the source code.


Metaworks3 IDE(UClipse)

eXo IDE Cloud9 IDE Orion

License MIT/LGPL Commercial/SaaS (Free)

Commercial/SaaS (Free)

EPL

Online Coding O O O O

Compilation O O O (Node.js) X

Run O ? (need PaaS) O (Node.js) X

Debugging O (LGPL) X O (Node.js) X

SCM SVN/Git Git Git Git

Process Model-ing

O (LGPL) X X X

Entity Modeling O (LGPL) X X X

Rule Modeling O (LGPL) X X X

Layout Editor O (LGPL) X X X

Security O ? (need PaaS) O X

Social Coding Chatting/FB X Chatting X

ALM Code Review / CI / Scrum

Code Review / CI (need PaaS)

Code Review X

[ 진입 장벽 최소화 ]•프로그래밍 초보자도 쉽게 이해가능한 구현 모델•객체 지향 언어의 이해를 강력하게 유도 ( 응집도 , 다형성 )•개발에 필요한 장비 , 환경 세팅의 최소화•교수와 학습자간의 실시간 학습진도 체크 및 지도 ( 채팅 , 제어 등 ) 가능•온라인 현장지도의 한계극복 ( 설치문제 등 )

[ 숙제 및 평가에 활용 ]•시험시간이 오버되면 자동으로 IDE 사용이 차단•과제제출물의 테스트 자동화로 많은 수강자의 평가 용이•Copy&Paste 의 기능을 차단하여 커닝 방지

[ 학습자 성향 분석 및 소셜네트워크 형성 ]•학습자의 코딩 실수의 패턴을 파악하여 힌트부여•학습자 수준별 클러스터링 통하여 학급 편성•나중엔 SNS 상에서 과외선생이 나올 수 도… . 수익모델로의 연결…

기대효과

1. 서버 관련 FAQ - 1

질문 ) 필드명과 메서드명을 동일하게 작성했더니 실행이 되지 않습니다 .

int indent = 0;@ServiceMethodpublic void indent(){ indent += 10;}

답변 )서비스 메서드와 필드명이 동일한 경우 메타웍스 3 에서는 정상적으로 필드와 메서드를 구분하지 못해 오류를 발생시킵니다 . 위의 코드는 다음과 같이 서로 다른 이름으로 사용하세요 .

int indentDepth = 0;@ServiceMethodpublic void indent(){ indentDepth += 10;}

FAQ


질문 ) 다음과 같이 서비스 메서드가 매개변수를 가질 수 있나요 ?

@ServiceMethodpublic void indent(int x){ indentDepth += x;}

답변 )메타웍스 3 에서는 아키텍처 상에서 서비스 메서드를 호출할 때에는 매개변수를 전달할 수 없도록 하여 응집도 높은 객체설계를 유도합니다 . 이는 개발 생산성과 품질에 직결됩니다 . 만약 특정 값을 사용하고자 할 경우에는 아래 예시처럼 멤버 필드를 선언하거나 @AutowiredFromClient 를 사용하세요 .

int getX() { … }void setX(int x) { … }

@ServiceMethodpublic void indent(){ indentDepth += getX();}

FAQ


질문 ) 다음과 같이 코드를 하였는데 화면이 멈추어 버립니다 .

class Node {Node[] child;

}

답변 )메타웍스 3 에서는 자신과 동일한 객체를 직접 가지면 재귀호출이 발생하게 됩니다 . 따라서 자신과 동일한 객체를 소유하려면 ArrayList 와 같은 Collection 등을 이용하여 우회적으로 사용하여야 합니다 .

class Node {ArrayList<Node> child;

}

FAQ


질문 ) 다음과 같이 서버에서 Annotation 을 사용하여 Client 객체를 얻으려고 하는데 정상동작 하지 않습니다 .

class MainPage {@AutowiredFromClient ClientSession session;

}

답변 )메타웍스 3 에서는 클라이언트를 가져오는 객체에 대해서는 public 접근제한자에 국한해서 지원합니다 .

class MainPage {@AutowiredFromClient public ClientSession session;

}

FAQ


질문 ) ServiceMethod Annotation 을 사용했음에도 불구하고 has no method ‘myMethod' 라는 오류가 발생합니다 .

class MainPage implements IMainPage {@ServiceMethodpublic void myMethod() { … }

}

답변 )메타웍스 3 에서는 인터페이스를 상속하는 클래스에 대해서는 해당 인터페이스 메서드를 주 참조 클래스로 인식합니다 . 따라서 구현되는 서비스 메서드의 원형을 인터페이스에서도 넣어 주어야 합니다 .

Interface IMainPage {@ServiceMethodpublic void myMethod();

}class MainPage implements IMainPage{

public void myMethod() { … }}

FAQ


질문 ) 자바 클래스를 정상적으로 생성했음에도 불구하고 No Converter for ‘your-Class’ 라는 오류가 발생합니다 .

package my.one.two;class yourClass { … }

답변 )메타웍스 3 에서는 사용하려는 패키지에 대해서는 dwr.xml 파일에 선언해 주어야 합니다 . 이는 화면에서 참조하는 클래스를 인식하기 위함입니다 .

dwr.xml

<convert converter="metaworks" match=“my.one.two.*"/>

FAQ


질문 ) ORMapping Annotation 이 인식되지 않는것 같습니다 .

@Table(name=“Login”)interface ILogin extends IDAO {

@Id@ORMapping(databaseFields={“id”}, objectFields={“num”})public int getNum();….@ORMapping(databaseFields={“name”}, objectFields={“name”})public String getName();….

}

답변 )ORMapping 은 DB Table 의 필드명과 자바 클래스의 필드명이 다를 경우에 인식이 됩니다 . 따라서 동일한 이름으로 되어 있을 경우에는 ORMapping 을 사용할 필요가 없습니다 . 만약 사용하게 되면 어떤 공간을 저장 영역으로 써야 할 지에 대한 혼돈이 발생하게 됩니다 .

FAQ

2. 클라이언트 관련 FAQ - 1

질문 ) ejs 를 만들었는데 반영이 되지 않습니다 . 이유가 무엇인가요 ?

답변 )ejs 는 자바클래스와 동일한 폴더에 작성할 수도 있고 , webapps 이하의 contents 영역에 자바클래스의 패키지와 똑같은 이름의 path 상에 작성할 수도 있습니다 . 그러나 만약 두 군데 모두 ejs 가 존재할 경우 자바클래스와 동일한 폴더 내에 작성된 ejs 가 우선 적용됩니다 .만약 자바클래스에서 @Face Annotation 을 통해 특정 ejs 를 지정한 경우에는 @Face 를 통해 지정된 ejs 가 최우선 적용됩니다 .

질문 ) ejs 가 변경되었을 때 반영되는 속도가 느립니다 . 빠르게 할 수 있나요 ?

답변 )ejs 의 경로 URL 을 웹 브라우저로 하나 열어 두고 변경 시 그곳을 refresh 시키면 ejs 의 반영이 빨라 집니다 .


질문 ) 자바클래스로 일부의 값이 전달되어 오지 않습니다 . 이유가 무엇인가요 ?

myEjs.ejs

ID : <%= fields.userId.here() %><br/>PW : <%= fields.password.here() %><br/>

답변 )fields 객체를 사용할 경우 동일명의 필드를 호출하게 되면 가장 마지막에 입력된 값을 가져오게 됩니다 . 위 예시와 같이 fields 의 id 를 잘못하여 두번 사용하게 되면 실제 자바클래스에서는 id 값으로 pw 값이 들어오게 됩니다 .

myEjs.ejs

ID : <%= fields.userId.here() %><br/>PW : <%= fields.password.here() %><br/>

FAQ


질문 ) 화면이 뜨지 않고 깨집니다 . 이유가 무엇인가요 ?

myEjs.ejsHello!!!

답변 )자바클래스와 연동된 객체를 호출하는 것은 ejs 의 코멘트에 의해 실행을 막을 수 없습니다 . 결론적으로 ejs Template 엔진이 계속하여 코멘트 영역에 html 을 넣게 되므로 화면이 깨지게 됩니다 .

FAQ

3. 클라이언트 관련 스크립트 FAQ - 1

질문 ) ejs.js 생성자에서 자바클래스 객체를 얻어오지 못합니다 . 이유는 ?

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { var obj = mw3.getObject(objectId);}

답변 )ejs.js 내의 생성자와 getValue 메서드 내에서는 mw3.getObject(objectId) 대신 mw3.object[objectId] 를 사용해야 합니다 .

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { var obj = mw3.object[objectId];}

FAQ


질문 ) ejs.js 에서 자바클래스 객체의 필드를 얻고자 합니다 .

myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { this.objectId = objectId; this.className = className; alert(this.userId); // 가능한가요 ?}

답변 )ejs.js 내의 this 는 FaceHelper 클래스입니다 . 따라서 자바클래스 객체를 획득 후 해당 필드를 얻으셔야 합니다 .myEjs.ejs.js

var my_one_two_yourClass = function(objectId, className) { …. var obj = mw3.objects[this.objectId]; alert(obj.userId);}

FAQ


질문 ) 다음과 같은 오류는 왜 발생하나요 ?

Error marshalling data. See the logs for more details.

답변 )ejs.js 의 package_className.prototype.getValue 에서 값을 type 에 맞지 않게 넣을때 발생하므로 type 확인 및 넘겨주는 값 (value) 확인하셔야 합니다 .

질문 ) ejs.js 파일이 반영이 되지 않습니다 . 이유가 무엇인가요 ?

답변 )ejs.js 는 기본적으로 ejs 파일이 존재해야 그 경로를 통해 ejs.js 를 찾아내어 실행하게 됩니다 . 따라서 ejs 파일이 존재하는지 확인하세요 .

FAQ

감사합니다 .

Documents

웹표준 프레임워크 메타웍스3의 적용 사례와 생산성