Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Metaworks4 UI Platform
www.Metaworks4.io
Micro Service Architecture
Design Factor for Front-end
One Page
N-Screen
Responsive
Dynamic
Real-time
Front-end
Image
Server
(Python)
Business
Logic Server
(Java)
Extended Role of Front-end in Cloud Applications
Aggregator f...
Writing One Page Web App
Problems: One Page Web App  Low Cohesion and High Coupling
<style>
style for A
style for B
style...
W3C Web Component Standard
• Provides Cohesive Component Model
• Component Composition by HTML
markup
• Dynamic Data Bindi...
VueJS: Web Component Framework
Polymer: W3C standard for Web Components
<style>
style for A
style for B
style for C
</styl...
Concepts & Backgrounds
도메인 주도 설계 마이크로 서비스 아키텍처 머터리얼 디자인
Domain-Driven Design
1. Using ‘Ubiquitous Language’ so that the domain expert and developer
can communicate
DDD 기반 개발 방법론
생성
생성
• Full-fledged Responsive Web Single
Page Application
• With google-material design• POJO based Domain...
Entity-Relationship Diagram
10
Generate ERD and Entity Classes (ORM)
• Open the Class Diagram in the
Project Explorer > Diagram Navigator >
ClassDiagram
...
Generated Domain Classes
12
Add Annotations
Mashup UI Components & Bind
The Size of Code
15
323Lines
For Developing Full-CRUD, RESTful, MSA-based,
Material-Designed, Responsive, Grid+Form, Multi...
URL for sample project
16
https://github.com/TheOpenCloudEngine/micro-
service-architecture-vuejs
Building Sample Application
17
Backend server (Runs on 8080)
mvn spring-boot:run
Front-end server (Runs on 8081 or any oth...
Dependencies
18
- MySQL DB and Couchbase Installation
- Setting the connection info to the WebConfig.java:
https://github....
Running Sample App - login
19
Default login id / pw is
jyjang@uengine.org / test
Login will be processed through the IAM s...
Running Sample App – Product - Master
20
• Main Screen is in a material-
design fashion
• You may reduce the screen
size t...
Product – Insert
21
Product – Delete
22
Progress
23
Progress – Referencing Master Values
24
Self Service – Object management
25
Add property
Model
metadata
Front
(Vue.js /
polymer)
REST
backend
(Spring
hateoas)
ORM
(Spring
JPA)
Domain
Class
Developer
generates ge...
Multi-tenant / Self service Support
Self service
Self service
portal
• Add new attribute
• Attributes can be String,
numbe...
Model
metadata
Front
(Vue.js /
polymer)
REST backend
(Spring hateoas)
ORM
(Spring
JPA)
Domain ClassSelf-Service Portal
cou...
Front
REST Service
Persistence
OSS Stack
Vue.js Vue Material
Metaworks for early prototyping
• Metaworks generates Dynamic Web Applications on the fly
from your domain class model wit...
FAQ
• Is MW4 a code-generation tool?
No. MW4 is framework that promotes DDD approach. Programming
convention is annotation...
Upcoming SlideShare
Loading in …5
×

Metaworks4 intro

1,662 views

Published on

Metaworks 4 is a progressive enterprise web framework that promotes POJO-based domain driven development, micro-services architecture-ready, and material design and responsive web. Metaworks 4 utilizes VueJS, Spring Data, and Spring Hateoas. Plus, Metaworks4 can be composed with OCE's components like IAM, API-GW, Billing to enable MSA architecture.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Metaworks4 intro

  1. 1. Metaworks4 UI Platform www.Metaworks4.io
  2. 2. Micro Service Architecture Design Factor for Front-end One Page N-Screen Responsive Dynamic Real-time
  3. 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. 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. 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. 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. 7. Concepts & Backgrounds 도메인 주도 설계 마이크로 서비스 아키텍처 머터리얼 디자인
  8. 8. Domain-Driven Design 1. Using ‘Ubiquitous Language’ so that the domain expert and developer can communicate
  9. 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. 10. Entity-Relationship Diagram 10
  11. 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. 12. Generated Domain Classes 12
  13. 13. Add Annotations
  14. 14. Mashup UI Components & Bind
  15. 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. 16. URL for sample project 16 https://github.com/TheOpenCloudEngine/micro- service-architecture-vuejs
  17. 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. 18. Dependencies 18 - MySQL DB and Couchbase Installation - Setting the connection info to the WebConfig.java: https://github.com/TheOpenCloudEngine/micro-service-architecture- vuejs/wiki
  19. 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. 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. 21. Product – Insert 21
  22. 22. Product – Delete 22
  23. 23. Progress 23
  24. 24. Progress – Referencing Master Values 24
  25. 25. Self Service – Object management 25 Add property
  26. 26. Model metadata Front (Vue.js / polymer) REST backend (Spring hateoas) ORM (Spring JPA) Domain Class Developer generates generates generates How it works
  27. 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. 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. 29. Front REST Service Persistence OSS Stack Vue.js Vue Material
  30. 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. 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

×