Más contenido relacionado

Presentaciones para ti(20)


Más de uEngine Solutions(20)



Metaworks4 intro

  1. Metaworks4 UI Platform
  2. Micro Service Architecture Design Factor for Front-end One Page N-Screen Responsive Dynamic Real-time
  3. Front-end Image Server (Python) Business Logic Server (Java) Extended Role of Front-end in Cloud Applications Aggregator for multiple (polyglot programmed) micro-services Component Service (C) AJAX, RESTful Concurrent Cloud Applications are composed of multiple Micro Services and front-end serves as an aggregator of the services
  4. Writing One Page Web App Problems: One Page Web App  Low Cohesion and High Coupling <style> style for A style for B style for C </style> <html> element for A element for B element for C </html> <script> script for A script for B script for C </script>
  5. W3C Web Component Standard • Provides Cohesive Component Model • Component Composition by HTML markup • Dynamic Data Binding • Responsive Web by Material Design • Standard • Google is one of major committer
  6. VueJS: Web Component Framework Polymer: W3C standard for Web Components <style> style for A style for B style for C </style> <html> element for A element for B element for C </html> <script> script for A script for B script for C </script> #A.html <style> style for A </style> <html> element for A </html> <script> script for A </script> #B.html <style> style for B </style> <html> element for B </html> <script> script for B </script> #C.html <style> style for C </style> <html> element for C </html> <script> script for C </script> #index.html <A> <A> <B> <B> <B> <C>
  7. Concepts & Backgrounds 도메인 주도 설계 마이크로 서비스 아키텍처 머터리얼 디자인
  8. Domain-Driven Design 1. Using ‘Ubiquitous Language’ so that the domain expert and developer can communicate
  9. DDD 기반 개발 방법론 생성 생성 • Full-fledged Responsive Web Single Page Application • With google-material design• POJO based Domain Model • Add annotations (JAX-RS, JPA, Jackson, metaworks) • Domain Class Analysis 도메인 클래스 모델링 애노테이 션 UI 컴포넌 트 배치
  10. Entity-Relationship Diagram 10
  11. Generate ERD and Entity Classes (ORM) • Open the Class Diagram in the Project Explorer > Diagram Navigator > ClassDiagram • Set the type of attributes • String for most types • boolean for gender • int for options • double for money • java.util.Date for Dates, timestamp • Modeling > ORM > Generate Code • Database Code Generation Options: • Framework: JPA • Persistence API: POJO • Be careful: • All attributes must have its type • All classes should be belong to any package 11
  12. Generated Domain Classes 12
  13. Add Annotations
  14. Mashup UI Components & Bind
  15. The Size of Code 15 323Lines For Developing Full-CRUD, RESTful, MSA-based, Material-Designed, Responsive, Grid+Form, Multi- tenant and Self-Served Application: • Number of fields of the entity: 10 • Total lines of code per an entity: 92 for front-end, 215 for domain class, 16 lines for repository.
  16. URL for sample project 16 service-architecture-vuejs
  17. Building Sample Application 17 Backend server (Runs on 8080) mvn spring-boot:run Front-end server (Runs on 8081 or any other port) cd src/main/resources/static npm install npm run dev Go to http://localhost:8081/login.html
  18. Dependencies 18 - MySQL DB and Couchbase Installation - Setting the connection info to the vuejs/wiki
  19. Running Sample App - login 19 Default login id / pw is / test Login will be processed through the IAM server:
  20. Running Sample App – Product - Master 20 • Main Screen is in a material- design fashion • You may reduce the screen size to see it is responsive to the device
  21. Product – Insert 21
  22. Product – Delete 22
  23. Progress 23
  24. Progress – Referencing Master Values 24
  25. Self Service – Object management 25 Add property
  26. Model metadata Front (Vue.js / polymer) REST backend (Spring hateoas) ORM (Spring JPA) Domain Class Developer generates generates generates How it works
  27. Multi-tenant / Self service Support Self service Self service portal • Add new attribute • Attributes can be String, number, Data from referenced class (table) • Change the title, order of attributes • Hide/Show attribute
  28. Model metadata Front (Vue.js / polymer) REST backend (Spring hateoas) ORM (Spring JPA) Domain ClassSelf-Service Portal couchbase Tenant Admin Developer overrides Overriding metadata generates generates generates How it works
  29. Front REST Service Persistence OSS Stack Vue.js Vue Material
  30. Metaworks for early prototyping • Metaworks generates Dynamic Web Applications on the fly from your domain class model with minimal technical details. • By reading the metadata declared by class model itself and the additional annotations. • Metaworks doesn’t generate any source codes so doesn’t requires any round-trip job for source codes while MDA need such a job.
  31. FAQ • Is MW4 a code-generation tool? No. MW4 is framework that promotes DDD approach. Programming convention is annotation-driven, so the configuration remains in the model. Not the code. • MW4 fits only for CRUD application? No. You can develop any kind of applications like social network services or mobile apps. Examples will be available soon. • License? MIT