Download to read offline
Uploaded byuEngine Solutions
Metaworks4 intro
The document outlines the design and architecture of the Metaworks4 UI platform, emphasizing its microservice architecture and capabilities for developing one-page responsive applications using frameworks like Vue.js and Polymer. It details the use of domain-driven design and annotations for creating dynamic web applications without traditional code generation, allowing developers to define application behavior through metadata. The document also includes instructions for building a sample application, including necessary dependencies and configuration steps.
More Related Content
Similar to Metaworks4 intro
More from uEngine Solutions
Metaworks4 intro
- 1.
- 2. Micro Service Architecture DesignFactor for Front-end One Page N-Screen Responsive Dynamic Real-time
- 3. Front-end Image Server (Python) Business Logic Server (Java) Extended Roleof 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 PageWeb 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 ComponentStandard • 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 ComponentFramework 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.
- 11. Generate ERD andEntity 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.
- 13.
- 14. Mashup UI Components& Bind
- 15. The Size ofCode 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 sampleproject 16 https://github.com/TheOpenCloudEngine/micro- service-architecture-vuejs
- 17. Building Sample Application 17 Backendserver (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 DBand Couchbase Installation - Setting the connection info to the WebConfig.java: https://github.com/TheOpenCloudEngine/micro-service-architecture- vuejs/wiki
- 19. Running Sample App- login 19 Default login id / pw is jyjang@uengine.org / test Login will be processed through the IAM server: http://iam.uengine.io:8080
- 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.
- 22.
- 23.
- 24. Progress – ReferencingMaster Values 24
- 25. Self Service –Object management 25 Add property
- 26.
- 27. Multi-tenant / Selfservice 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 (Springhateoas) 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.jsVue Material
- 30. Metaworks for earlyprototyping • 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 MW4a 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