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.
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>
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 컴포넌
트 배치
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
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
https://github.com/TheOpenCloudEngine/micro-
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 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
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
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