Embed Size (px)
DESCRIPTION
제발 종결하고 싶다...
Citation preview
왜 우리나라에는 페이스북이나 구글 같은 회사가 없나요 ?
Problem:
But, They Do.
어떤 장비를 사용하시나요 ?
고난이 요구사항
• 순수웹• 페이지 비전환• Lazy Loading• 키 / 마우스 바인딩• 모바일 동시지원• NIO 기반 채팅
품질
• 트랜잭셔널• 요소간 간섭최소화• 일관성 있는 사용자
경험과 예측성• UI 기반의 테스트
자동화
비용• 서버 / 클라이언트
개발자 그리고 디자이너 역할구분어려워 – CSS/JS/Java/AJAX
• 다양한 언어를 넘나드는 과정의 커뮤니케이션 비용
• 순수자바개발자만있다 .
tar-get
가장 좋은 프레임워크의 정의 ?
1. 가장 좋은 차
빠른차 X, 알아서 운전하는 차
2. 가장 좋은 배우자
똑똑한 배우자 X, 내마음을 잘 알아서 알아서 다해주는 배우자
그렇담 가장 좋은 프레임워크… . 란 ?
요구사항을 알아서 구현해주는 프레임워크 ??? 그것도 가능한 초짜만 투입하면서 , 높은 품질과 기능성을 제공하는 .
에잇 , 그런게 어딨어 ???
그냥 개발자 잘 뽑으면 돼 그냥 노력하면 돼 그냥 하면 돼… 화면된다 .. 대신 오래걸린다 .
가장 좋은 프레임워크의 정의 ?
메타데이터 중심 프레임워크 – 메타웍스 3
1. 객체지향언어의 확고한 체계로 객체를 선언하고
2. 어노테이션으로 의미 ( 메타데이터 ) 를 적절히 부여하면
3. 도메인 모델 이외의 기술적 디테일 ( 다음 페이지 ) 에 관여되는 구현을 최소화 하는 프레임워크
원래 다른 프레임워크도 다 그런데요 ???넵 , 물론 , 그렇습니다 , 하지만 약간 크게 다릅니다 .
+ 거기에 보너스로 ,4. 내장된 웹 기반 개발도구 ( 클라우드 IDE) 를 통하여 컴파일 , 오류확인 , 디버그
메타웍스 3 우산
< 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성 >• 프로그래밍 모델 추상화
• 자바 - 자바스크립트 간 통신 추상화 • 자바 - 자바스크립트 간 메타데이터 자동 동기화• 자바스크립트 인터랙션 ( 버튼 , 키보드 / 마우스 ) 추상화• 네비게이션 추상화• 롱 - 폴링 기반 콜백 추상화
• 데이터베이스 접근 추상화• JPA 어노테이션 기반 ORMapping• 데이터베이스 캐시 / 동기화 • 트랜잭션 자동화 ( 스프링없이 동작가능 )
< 테스트 자동화와 품질 향상 >• 매우 짧은 코드 – 품질에 직결• 설계가 곧 구현 – 모델중심의 생산성과 품질• 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지• 웹 기반 테스팅 자동화• Guided Tour 기능 자동화
잘 정의된 모델
적응력 높고 견고한
어플리케이션
백문이 불여 일타
법칙 1: 객체 매핑
Login.java
• String email• String pass-
word• Main login()
로그인 모듈에 대한 객체 매핑 방법
행위는 메서드로
속성은 프로퍼티로
Setter/getter 가 있으면 ‘프로퍼티’라고 하며 , 웹상에서는 입출력이 요망되는 주요데이터가 된다
행위는 일반적 내부 행위와 웹에서 출력될 (버튼 ) 행위와의 구분을 위하여 @Ser-viceMethod 애노테이션을 준다
UserIdPassword
Login
Login.java Main.java
return new Main();
login() 이 실행되면 Main 을 리턴하므로
Main 을 화면에 그려라 !
법칙 2: 리턴 행위는 객체의 변화를 암시한다 .
Contents objectMenu object MenuItem object
Main.java
protected 로 생성자가 보안처리 되었기 때문에 앞서 Lo-gin.login() 을 통하지 않고서는 진입할 수 없게된다 .
UserIdPassword
Login
Login.java Main.java
Content.javaMenu.java
Selection.java
return new Main()
return new AContent()AContent.java
Bcontent.javareturn new BContent()
( 화면에 여러 객체가 이미 존재하는 경우 ) 리턴된 객체는 자신이 가장
부합되는 응집력을 가진 화면 요소에 가서 그려짐
법칙 3 : 리턴객체는 가장 편한 곳으로 자리한다 .
14
메타웍스 3 프로그래밍 모델 – 전체
Login
• String email• String password• Main login()
Main
• Menu menu• Content content
Menu• Selection[] selec-
tions
Selection
• Content con-tent
• Content select()
Content
• String title• String html
returns
AContent
• String title = “a”
• String html=“XXX”
BContent
• String title = “b”
• String html=“YYY”
inherits
part-of
part-of
part-of
returns
# 퀴즈
# 메인화면에서 로그인 화면으로 이동하는 “로그아웃”은 어떻게 하면 될까요 ?
# 정답
Login
• String email• String password• Main login()
Main
• Menu menu• Content content• Login logOut()
Menu• Selection[] selec-
tions
Selection
• Content con-tent
• Content select()
Content
• String title• String html
returns
AContent
• String title = “a”• String
html=“XXX”
BContent
• String title = “b”• String
html=“YYY”
inherits
part-of
part-of
part-of
returns
returns
그외의 법칙들
법칙 4: 서비스 메서드는 파라미터를 가질 수 없다 .
< 왜요 ?> Reason1: Simple is good. Reason2: 자연스럽게 당신의 모델은 높은 응집도와 낮은 결합도를 갖게 된다 .
< 그럼 파라미터는 ?> 멤버 프로퍼티로 받는다 : 일종의 Value Object Pattern 멤버 프로퍼티를 남발하는 상황이면 ?: 세부 포함 객체로 나누어 준다 . 참조해야할 객체를 클라이언트에서 넘겨받아야 한다면 : @AutowiredFromClient
를 사용한다 .
이후 어떤 액션이 어느 객체의 메서드에 의해 제공되는지는 명확하게 추측된다 .
@AutowiredFromClient 의 사용
@AutowiredFromClientpublic Session session;
@ServiceMethod(inContextMenu=true, callByContent=true)public Session cut(){
session.setClipboard(this);return session;
}
@Face
@Hidden
@Name
표현 / 표시 관련
@Range
@Validator
@NonEditable
데이터 관련
@Table
@Id
@ORMapping
DB 관련
@ServiceMethod
@AutowiredFromClient
@AutowiredToClient
행위 관련
@Available
@Test
기타
Annotations
@Face( displayName=“ 화면에 뿌릴 명칭” , ejsPath=“ 템플릿 파일 위치” ,)
@Hidden( when: ‘ 보이지 않을 때’)
@Available( when: ‘ 보일 수 있는 때’)
Annotation: 객체와 필드의 얼굴정보
Annotation: 객체와 필드의 얼굴정보 - 용례
Annotation: ejs 템플릿
* EJS: Embedded Javascript Template Engine 로 , 기존 JSP, PHP 문법을 지원하는 클라이언트 기반 템플릿엔진
@ServiceMethod( target=“self | popup | auto”, callByContent=true|false, payload={‘field1’, ‘field2’,…}, except={‘field1’, ‘field2’,…}, keyBinding=“Alt|Shift|Ctrl+Key”, mouseBinding=“left|right|dblclick”, inContextMenu=true|false, needToConfirm=true|false, when=“context”)
// 리턴값을 어디로 ?// 속성값을 태울것인가 ?// 요 속성들만 태워라// 요 속성들은 빼고 태워라// 키가 눌려지면 콜// 마우스가 눌려지면 콜// 컨텍스트 메뉴에 걸어// 정말 할건지 물어// 언제 활성화 될건지
Annotation: 서비스 메서드
Annotation: 서비스 메서드
< 선언 관련 >@Table( name=“DB 테이블 명”)@Id // 프라이머리 키@NonSavable // 저장 필드 아님@NonLoadable // 읽을 필드 아님
<ORMapping 관련 >@TypeSelector( values={‘ 값 1’, ‘ 값 2’, …}, classes={‘ 서브클래스명 1’, ‘ 서브클래스명 1’,…})@ORMapping( objectFields={ ‘ 객체속성 1’, ‘ 객체속성 2’, ….}, databaseFields={‘ 테이블컬럼 1’, ‘ 테이블컬럼 2’,…})
Annotation: 저장관련 정보 (JPA- 호환 )
Annotation: 저장관련 정보 (JPA- 호환 )
ToPrepend
ToAppend
ToNext
리턴 객체 위치잡기
Refresh
Remover
교체하기 / 제거하기
Layout
레이아웃 잡기
Popup
ModalWindow
ToOpener
팝업 관련
pushClientObjects
브로드캐스팅 하기
Libraries
GridWindowChart
기본 가젯들
Libraries
리턴객체의 위치 잡기
A
Breturn new ToPrepend(
A, // 추가될 영역을 가진 객체B// 추가할 객체
);
A
B
return new ToAppend(A, // 추가될 영역을 가진 객체B// 추가할 객체
);
리턴객체의 위치 잡기
return new ToNext(C, // 추가될 영역을 가진 객체D // 추가할 객체
);
목록
C
B
A
D
Libraries
B
팝업관련
public class B{ public Popup action(){
return new Popup(A // 팝업될 객체 .
);}
}
A
return new ModalWindow(A // 팝업될 객체 ( 중앙배치 )
);
Libraries
Libraries: pushClientObjects
이름 : 감자
이름 :
오이 추가
이름 : 고구마
이름 : 오이
……
이름 : 고구마
고구마 ( 학명: Ipomoea batatas) 는 메꽃과의 한해살이 뿌리 채소로 , 주로 전분이 많고 단 맛이 나는 혹뿌리를 가진 재배용 작물이다 .
사용자 2: 목록을 보고 있는 유저
사용자 3: 디테일 화면에 들어가 있는 유저
사용자 1: ‘ 오이’를 추가함
ToPrepend 를 이용하여 객체를 포장해서 브로드캐스트 했기 때문에 목록을 보고 있는 유저에게만 추가된
아이템이 나타남
Libraries: pushClientObjects
이름 : 감자
이름 : 고구마 새이름 : 당근
re-name
이름 : 오이
……
이름 : 고구마 당근
이름 : 고사리
…… 이름 : 감자
이름 : 감
사용자 2: ‘ 고’로 검색한 상태
사용자 3: ‘ 감’으로 검색한 상태
사용자 1: ‘ 고구마’의 이름을 수정함
상황 : 특정 아이템이나 주제에 대하여 화면상에 해당 아이템을 보고 있는
유저에게만 영향주기
new Refresh(obj) 는 화면에 있는 경우만 re-
fresh 시킨다 .
사례 : 동시 공유 메모 편집기
추가 :new ToNext(node)
수정 :new Refresh(node)
삭제 :new Remover(node)
MW3 전용 IDE
개발
가이디드 투어 생성
모바일 테스팅
UX 개선 지원
소셜 코딩
ALM
관리 운영
테스트 레코더
테스트 러너
테스트
Tools
지원도구 : mw3 기반 어플 개발에 최적화된 IDE
Cloud IDE
• Pure Web based IDE
• 동적 자바 컴파일 ( 재기동 불필 )
• Instant IDE 사용 중 오류 나면 바로 IDE접속 수정 반영
• Code Assistance 기본 코드 어시스트를 넘어 데이터베이스 객체 생성 웹서비스 호출 객체 생성
• EJS, EJS.JS 개발 및 테스트 용이
• EJS 템플릿 개발을 위한 웹 에디터 (FckEditor)
• 모바일 사이즈 시뮬레이터
앞서 소개된 클라우드 IDE ( 유클립스 ) 는 페이스북 및 자체 SNS ( 프로세스 코디 ) 를 기반으로 내부 / 외부 SNS 와 연계된 공개 개발 , 피어 - 리뷰 , 크라우드 소싱등을 수행할 수 있어요…
지원도구 : mw3 기반 어플의 소셜코딩 지원
• 테스트 자동화를 위한 레코더 (Shift + F12)• Shift + F12 를 누르면 mw3 기반
어플리케이션의 입력값 , 버튼 클릭 순서를 기록• 기록된 테스트는 JSON( 텍스트 ) 으로 콘솔에
남음 ( 크롬 )
• 콘솔에 남은 JSON 을 저장해 놓았다가
• 자동화 테스팅을 만들거나 e.g.
mw3.testSet={"testScenario": <Recorded Test JSON Here>]};mw3.test("testScenario");
• 가이디드 투어를 만들 수 있습니다 . e.g.
mw3.testSet={"testScenario": <Recorded Test JSON Here>]};mw3.test("testScenario“, {guidedTour: true});
mw3 기반 어플리케이션들의 품질과 UX 를 만족시키기 위한 강력한 도구죠 ???
지원도구 : 테스트 및 가이드 투어
지원 도구 비교
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
– 흩어진 메타데이터를 자동으로 관리하는 메타웍스 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
메타웍스 동작 메커니즘
현존 프레임워크들과의 비교
적용 사례 모음
44
SaaS
워크플로우 및 통합 커뮤니케이션
• 찾아오는 업무 방식 – 워크리스트 및 프로세스 자동화
• 이메일 / SNS/ 채팅 통합• 전자결재• 창의적 의사소통 원활화
집단지성 및 매시업 기능
• 집단지성 마인드맵• 마인드맵 이슈 트래킹• 마인드맵 콘텐츠 매시업 기능• 내부 데이터 매시업 기능
파일 ( 문서 ) 관리
• 공유 캘린더• 워크리스트 ( 투두리스트 )• 업무 예약• 간트 챠트
프로세스 관리 기능
• 프로세스 관리 ( 수정 / 추가 ) 기능• 프로세스 모니터링 및 분석 기능• 시스템 통합 (EAI) 기능
개인 직무 및 프로젝트 관리
• 공유 캘린더• 워크리스트 ( 투두리스트 )• 업무 예약• 간트 챠트 기반 프로젝트 관리
보안관련
• 문서 분류 및 버전 관리• 문서 바로 편집• 폴더 관리 ( 마인드맵으로 )• 문서 내용 검색 (ppt, doc, xls, pdf, hwp 등 )
• 개인 / 그룹별 / 롤별 권한 부여• 그룹에 부여된 권한에서 일원만 제외 처리 가능• 하위 폴더 권한 계승• 문서 / 프로세스 / 채팅 /마인드맵 보안기능
적용사례 : 프로세스 코디 서비스
클라우드 ALM클라우드 IDE
범위 :
1.Cloud IDE 2.Cloud ALM (Application Lifecycle Management)3.Application Platform 4.Integration Platform5.Model Platform6.UI Framework
코드 어시스트 컴포넌트 마켓플레이스 접근
버저닝 ( 형상관리 ), 테스팅 , 빌드 / 배포 자동화
모델 플랫폼 ( 비즈니스 전문가 )
비즈니스 프로세스 비즈니스 룰
어플리케이션 플랫폼
데이터베이스 (Structured/Un-structured DBMS) 가상화
웹어플리케이션프레임워크 / 서버
운영
관리
개발On
the Cloud
적용사례 : 클라우드 IDE & PaaS
적용사례 : OO 정보원
Model-Driven &SOA Matu-rity Level – 7*수준의 대민 서비스 구축
• 가격산출 룰 모델링
• 계정 업무 화면 및 비즈니스로직
• DAO 생성 / WS 호출 및 노출
* IBM’s SOA Maturity Level-7: Dynamically Re-Configurable Services 수준으로 Process-Orchestration Approach 를 포함한 가장 높은 SOA 수준
• 신청 심사 프로세스 모델링
• 기간계 업무 • 대고객 홈페이지• 테이블 40 개• 화면 200 본
파격실험 :
문외한에서 시작한 3 개월 개발자 vs. 5~6 년차 경력 개발자
실험 시나리오
• 개발리소스 : SW 개발 문외한 3 명• 미션 : 하이엔드급 서비스 사이트의 구축
– 페이스북 , G-Market 쇼핑몰 , SalesForce.-com 중 하나를 만들라 !
• 프로그램 :– 1 개월차 : 객체 모델링 (UML) 학습만 – 2 개월차 : 모델링 자바매핑만– 3 개월차 : HTML 코딩만– 4 개월차 : 미션 수행 !
강서구 과장 (33 세 ) • 직무 : 영업 관리• 초등학교 부터 컴퓨터를 좋아했으나 , 프로그래밍은
해본적 없음 .• 가장 프로그래밍과 유사한 것으로 엑셀을 잘 사용함 .
안병성 사원 (31 세 )
• 직무 : 서버 관리 및 SE• PHP 기초 경험
김영재사원 (25 세 )
• 직무 : 테스팅 및 모델링• 프로그래밍 경험 전무• 산업공학 전공
3 개월 후 이들이 만들어 낼 mw3 기반 어플리케이션 !!!
감사합니다 .
실험이 성공하면 , 모델링인력 ( 아키텍트 ) 만으로도
( 웹 디자이너 포함 ) 하이엔드급 웹 어플리케이션을 개발할 수 있다 ?
결과는 3 개월 후에 ~ 기대바랍니다 .
metaworks3.org:8080/mw3/code.google.com/p/metaworks3/
