Software Architect day - 웹 프레임워크 종결 - metaworks3

1,497 views

Published on

제발 종결하고 싶다...

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,497
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Software Architect day - 웹 프레임워크 종결 - metaworks3

  1. 1. 소셜 IDE 연계형 웹 프레임워크 기반의 대국민 서비스 구축 사례 Presenter: 유엔진솔루션즈 조진원 somehow@uengine.org
  2. 2. Problem: 왜 우리나라에는 페이스북 이나 구글 같은 회사가 없 나요? But, They Do.
  3. 3. 고난이 요구사항 • 순수웹 • 페이지 비전환 • Lazy Loading • 키/마우스 바인딩 • 모바일 동시지원 • NIO기반 채팅품질 비용 target • 서버/클라이언트 개발• 트랜잭셔널 자 그리고 디자이너 역• 요소간 간섭최소화 할구분어려워 –• 일관성 있는 사용자 CSS/JS/Java/AJAX 경험과 예측성 • 다양한 언어를 넘나드• UI기반의 테스트 는 과정의 커뮤니케이 자동화 션 비용 • 순수자바개발자만 있다.
  4. 4. 1. 가장 좋은 차  빠른차 X, 알아서 운전하는 차2. 가장 좋은 배우자  똑똑한 배우자 X, 내마음을 잘 알아서 알아서 다해주는 배우자그렇담 가장 좋은 프레임워크….란? 요구사항을 알아서 구현해주는 프레임워크??? 그것도 가능한 초짜만 투입하면서, 높은 품질과 기능성을 제공하는.  에잇, 그런게 어딨어???  그냥 개발자 잘 뽑으면 돼  그냥 노력하면 돼  그냥 하면 돼… 화면된다.. 대신 오래걸린다.
  5. 5. 메타데이터 중심 프레임워크 – 메타웍스31. 객체지향언어의 확고한 체계로 객체를 선언하고2. 어노테이션으로 의미 (메타데이터)를 적절히 부여하면3. 도메인 모델 이외의 기술적 디테일 (다음 페이지) 에 관 여되는 구현을 최소화 하는 프레임워크 원래 다른 프레임워크도 다 그런데요???넵, 물론, 그렇습니다, 하지만 약간 크게 다릅니다.+ 거기에 보너스로,4. 내장된 웹 기반 개발도구 (클라우드 IDE) 를 통하여 컴파일, 오류확인, 디버그
  6. 6. 잘 정의된 모델 < 선언형 프로그래밍 모델과 추상성 극대화를 통한 생산성> • 프로그래밍 모델 추상화 • 자바-자바스크립트 간 통신 추상화 • 자바-자바스크립트 간 메타데이터 자동 동기화 • 자바스크립트 인터랙션 (버튼, 키보드/마우스) 추상화 • 네비게이션 추상화 • 롱-폴링 기반 콜백 추상화 • 데이터베이스 접근 추상화 • JPA어노테이션 기반 ORMapping • 데이터베이스 캐시 / 동기화 • 트랜잭션 자동화 (스프링없이 동작가능) <테스트 자동화와 품질 향상> • 매우 짧은 코드 – 품질에 직결 적응력 높고 견고한 • 설계가 곧 구현 – 모델중심의 생산성과 품질 어플리케이션 • 아규먼트 없는 서비스메서드 – 객체의 응집도를 유지 • 웹 기반 테스팅 자동화 • Guided Tour 기능 자동화
  7. 7. 백문이 불여 일타
  8. 8. 법칙 1: 객체 매핑로그인 모듈에 대한 객체 매핑 방법 속성은 프로퍼티로 행위는 Login.java 메서드로 • String email • String password • Main login()
  9. 9. Setter/getter가있으면 „프로퍼티‟라고 하며, 웹상에서는 입출력이요망되는 주요데이터가 된다행위는 일반적 내부 행위와 웹에서출력될(버튼) 행위와의 구분을 위하여@ServiceMethod 애노테이션을준다
  10. 10. 법칙2: 리턴 행위는 객체의 변화를 암시한다. Login.java Main.java UserId Password return Login new Main(); login() 이 실행되면 Main 을 리턴하므로 Main을 화면에 그려라!
  11. 11. Main.java Menu object MenuItem object Contents object
  12. 12. protected 로 생성자가 보안처리되었기 때문에 앞서 Login.login()을 통하지 않고서는 진입할 수 없게된다.
  13. 13. 법칙3 : 리턴객체는 가장 편한 곳으로 자리한다. Login.java Main.java UserId Password return Menu.java Content.java new Main() Login return Selection.java new AContent() AContent.java return new BContent() Bcontent.java (화면에 여러 객체가 이미 존재하 는 경우) 리턴된 객체는 자신이 가 장 부합되는 응집력을 가진 화면 요소에 가서 그려짐
  14. 14. 14
  15. 15. 메타웍스3 프로그래밍 모델 – 전체 Login Content• String email • String title• String password • String html• Main login() returns inherits Main AContent BContent• Menu menu • String title = “a” • String title = “b”• Content content • String html=“XXX • String html=“YYY ” ” part-of returns Menu part-of Selection• Selection[] selections • Content content • Content select()
  16. 16. #퀴즈# 메인화면에서 로그인 화면으로 이동하는 “로그아웃”은 어떻게 하면 될까요?
  17. 17. # 정답 Login Content • String email • String title • String password • String html • Main login()returns returns inherits Main AContent BContent • Menu menu • String title = “a” • String title = “b” • Content content • String html=“XXX” • String html=“YYY” • Login logOut() part-of returns Menu part-of Selection • Selection[] selections • Content content • Content select()
  18. 18. 그외의 법칙들법칙4: 서비스 메서드는 파라미터를 가질 수 없다.<왜요?> Reason1: Simple is good. Reason2: 자연스럽게 당신의 모델은 높은 응집도와 낮은 결합도를 갖게 된다.<그럼 파라미터는?> 멤버 프로퍼티로 받는다: 일종의 Value Object Pattern 멤버 프로퍼티를 남발하는 상황이면?: 세부 포함 객체로 나누어 준다. 참조해야할 객체를 클라이언트에서 넘겨받아야 한다면: @AutowiredFromClient 를 사용한다. 이후 어떤 액션이 어느 객체의 메서드에 의해 제공되는지는 명확하게 추측된다.
  19. 19. @AutowiredFromClient 의 사용 @AutowiredFromClient public Session session; @ServiceMethod(inContextMenu=true, callByContent=true) public Session cut(){ session.setClipboard(this); return session; }
  20. 20. Annotations표현/표시 관련 행위 관련 DB 관련@Face @ServiceMethod @Table@Hidden @AutowiredFromClient @Id @AutowiredToClient@Name @ORMapping데이터 관련 기타@Range @Available@Validator @Test@NonEditable
  21. 21. Annotation: 객체와 필드의 얼굴정보@Face( displayName=“화면에 뿌릴 명칭”, ejsPath=“템플릿 파일 위치”,)@Hidden( when: „보이지 않을 때‟)@Available( when: „보일 수 있는 때‟)
  22. 22. Annotation: 객체와 필드의 얼굴정보 - 용례
  23. 23. Annotation: ejs 템플릿* EJS: Embedded Javascript Template Engine 로, 기존 JSP, PHP 문법을 지원하는 클라이언트 기반 템플릿엔진
  24. 24. Annotation: 서비스 메서드@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” //언제 활성화 될건지)
  25. 25. Annotation: 서비스 메서드
  26. 26. Annotation: 저장관련 정보 (JPA-호환)<선언 관련>@Table( name=“DB 테이블 명”)@Id // 프라이머리 키@NonSavable // 저장 필드 아님@NonLoadable // 읽을 필드 아님<ORMapping 관련>@TypeSelector( values={„값1‟, „값2‟, …}, classes={„서브클래스명1‟, „서브클래스명1‟,…})@ORMapping( objectFields={ „객체속성1‟, „객체속성2‟, ….}, databaseFields={„테이블컬럼1‟, „테이블컬럼2‟,…})
  27. 27. Annotation: 저장관련 정보 (JPA-호환)
  28. 28. Libraries리턴 객체 위치잡기 팝업 관련 레이아웃 잡기ToPrepend Popup ModalWindow LayoutToAppendToNext ToOpener교체하기/제거하기 브로드캐스팅 하기 기본 가젯들Refresh Grid pushClientObjects WindowRemover Chart
  29. 29. Libraries리턴객체의 위치 잡기 A return new ToPrepend( A, //추가될 영역을 가진 객체 B B//추가할 객체 ); A return new ToAppend( A, //추가될 영역을 가진 객체 B//추가할 객체 ); B
  30. 30. Libraries리턴객체의 위치 잡기 목록 return new ToNext( A C, //추가될 영역을 가진 객체 D //추가할 객체 B ); C D
  31. 31. Libraries팝업관련 B public class B{ public Popup action(){ return new Popup( A A //팝업될 객체. ); } } return new ModalWindow( A //팝업될 객체 (중앙배치) );
  32. 32. Libraries: pushClientObjects ToPrepend 를 이용하여 객체를 포장해 서 브로드캐스트 했기 때문에 목록을 보고 있는 유저에게만 추가된 아이템이 사용자2: 목록을 보고 있는 유저 나타남 이름: 오이 사용자1: ‘오이’를 추가함 이름: 감자 이름: 고구마 이름: 오이 사용자3: 디테일 화면에 들어가 있는 유저 추가 이름: 고구마 …… 고구마(학명: Ipomoea batatas)는 메꽃과의 한해살 이 뿌리 채소로, 주로 전분이 많고 단 맛이 나는 혹뿌 리를 가진 재배용 작물이다.
  33. 33. Libraries: pushClientObjects상황: 특정 아이템이나 주제에 대하여 화면상에 해당 아이템을 보고 있 는 유저에게만 영향주기 사용자2: ‘고’로 검색한 상태 이름: 고구마  당근 사용자1: ‘고구마’의 이름을 수정함 이름: 감자 이름: 고사리 이름: 고구마 renam 사용자3: ‘감’으로 검색한 상태 새이름: 당근 e 이름: 감자 …… new Refresh(obj)는 화면 이름: 오이 에 있는 경우만 refresh 시 이름: 감 킨다. ……
  34. 34. 사례: 동시 공유 메모 편집기 추가: new ToNext(node) 수정: new Refresh(node) 삭제: new Remover(node)
  35. 35. Tools개발 테스트 관리 운영 테스트 레코더 소셜 코딩MW3 전용 IDE 테스트 러너 ALMUX 개선 지원가이디드 투어 생성모바일 테스팅
  36. 36. Cloud IDE • Pure Web based IDE • 동적 자바 컴파일 (재기동 불필) • Instant IDE  사용 중 오류 나면 바로 IDE접 속  수정  반영 • Code Assistance  기본 코드 어시스트를 넘어  데이터베이스 객체 생성  웹서비스 호출 객체 생성 • EJS, EJS.JS 개발 및 테스트 용이 • EJS 템플릿 개발을 위한 웹 에디터 (FckEditor) • 모바일 사이즈 시뮬레이터
  37. 37. 앞서 소개된 클라우드IDE (유클립스) 는 페이스북 및 자체 SNS (프로세스 코디) 를기반으로 내부/외부 SNS와 연계된 공개 개발, 피어-리뷰, 크라우드 소싱등을 수행할수 있어요…
  38. 38. • 테스트 자동화를 위한 레코더 (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를 만족시키기 위한 강력한 도구죠???
  39. 39. Metaworks3 IDE eXo IDE Cloud9 IDE Orion (UClipse)License MIT/LGPL Commercial Commercial EPL /SaaS (Free) /SaaS (Free)Online Coding O O O OCompilation O O O (Node.js) XRun O ? (need PaaS) O (Node.js) XDebugging O (LGPL) X O (Node.js) XSCM SVN/Git Git Git GitProcess Modeling O (LGPL) X X XEntity Modeling O (LGPL) X X XRule Modeling O (LGPL) X X XLayout Editor O (LGPL) X X XSecurity O ? (need PaaS) O XSocial Coding Chatting/FB X Chatting XALM Code Review / Code Review / Code Review X CI / Scrum CI (need PaaS)
  40. 40. – 흩어진 메타데이터를 자동으로 관리하는 메타웍스3 General Approach: Using Metaworks3: Spring MVC, JSON, jQuery, Hibernate meta data Controlle r Domain class Controlle (java version) r View DAO You have to meta Synchronize the gap meta Metaworks Metaworks View data DAO data Synchronizes the Proxy meta Synchronizes the Proxy data Domain class Domain class Domain (Hibernate ver (JS version) sion) Class (Java)
  41. 41. 적용 사례 모음
  42. 42. 적용사례: 프로세스 코디 서비스 SaaS워크플로우 및 통합 커뮤니케이 집단지성 및 매시업 기능 개인 직무 및 프로젝트 관리션 • 찾아오는 업무 방식 – 워크 • 집단지성 마인드맵 • 공유 캘린더 리스트 및 프로세스 자동화 • 마인드맵 이슈 트래킹 • 워크리스트 (투두리스트) • 이메일/ SNS/ 채팅 통합 • 마인드맵 콘텐츠 매시업 기 • 업무 예약 • 전자결재 능 • 간트 챠트 기반 프로젝트 관리 • 창의적 의사소통 원활화 • 내부 데이터 매시업 기능 파일(문서) 관리 보안관련 프로세스 관리 기능 • 개인/그룹별/롤별 권한 부여 • 문서 분류 및 버전 관리 • 프로세스 관리 (수정/추가) 기 • 그룹에 부여된 권한에서 일 • 문서 바로 편집 • 공유 캘린더 능 원만 제외 처리 가능 • 폴더 관리 (마인드맵으로) • 워크리스트 (투두리스트) • 프로세스 모니터링 및 분석 기 • 하위 폴더 권한 계승 • 문서 내용 검색 (ppt, doc, xls, • 업무 예약 능 • 문서/프로세스/채팅/마인드 pdf, hwp 등) • 간트 챠트 • 시스템 통합 (EAI) 기능 맵 보안기능44
  43. 43. 적용사례: 클라우드 IDE & PaaS 범위: 1.Cloud IDE 2.Cloud ALM (Application Lifecycle Management) 3.Application Platform 4.Integration Platform 5.Model Platform 6.UI Framework클라우드 IDE 클라우드 ALM 코드 어시스트 컴포넌트 마켓 버저닝(형상관리), 테스팅, 빌드/배포 자동화 플레이스 접근 개발 On 운영모델 플랫폼 (비즈니스 전문가) 어플리케이션 플랫폼 the Cloud 관리 데이터베이스 (Structured/Unstruct 웹어플리케이션 비즈니스 프로세스 비즈니스 룰 ured DBMS) 가상화 프레임워크/서버
  44. 44. 적용사례: OO정보원 • 신청 심사 프로세스 모델링 Model-Driven• 가격산출 룰 모델링 & • 기간계 업무 SOA Maturity Level – 7* • 대고객 홈페이지 수준의 • 테이블 40개 대민 서비스 구축 • 화면 200본 • 계정 업무 화면 및 비즈니스로직 • DAO 생성 / WS호출 및 노출 * IBM’s SOA Maturity Level-7: Dynamically Re-Configurable Services 수준으로 Process- Orchestration Approach를 포함한 가장 높은 SOA수준
  45. 45. 파격실험:문외한에서 시작한 3개월 개발자 vs. 5~6 년차 경력 개발자
  46. 46. • 개발리소스: SW개발 문외한 3명• 미션: 하이엔드급 서비스 사이트의 구축 – 페이스북, G-Market 쇼핑몰, SalesForce.com 중 하나를 만들라!• 프로그램: – 1개월차 : 객체 모델링 (UML)학습만 – 2개월차 : 모델링  자바매핑만 – 3개월차 : HTML 코딩만 – 4개월차 : 미션 수행!
  47. 47. 강서구 과장 (33세)• 직무: 영업 관리• 초등학교 부터 컴퓨터를 좋아했으나, 프로그래밍은 해 본적 없음.• 가장 프로그래밍과 유사한 것으로 엑셀을 잘 사용함. 안병성 사원 (31세) • 직무: 서버 관리 및 SE • PHP 기초 경험김영재사원 (25세)• 직무: 테스팅 및 모델링• 프로그래밍 경험 전무• 산업공학 전공
  48. 48. 실험이 성공하면, 모델링인력(아키텍트)만으로도 (웹 디자이너 포함)하이엔드급 웹 어플리케이션을 개발할 수 있다? 결과는 3개월 후에~ 기대바랍니다. metaworks3.org:8080/mw3/ code.google.com/p/metaworks3/

×