Metaworks4 intro

Metaworks4 intro
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 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
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>
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
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>
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 Model • Add annotations (JAX-RS, JPA, Jackson, metaworks) • Domain Class Analysis 도메인 클래스 모델링 애노테이 션 UI 컴포넌 트 배치
Entity-Relationship Diagram 10
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
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- 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.
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 other port) cd src/main/resources/static npm install npm run dev Go to http://localhost:8081/login.html
Dependencies 18 - MySQL DB and Couchbase Installation - Setting the connection info to the WebConfig.java: https://github.com/TheOpenCloudEngine/micro-service-architecture- vuejs/wiki
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
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
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 generates generates How it works
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
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
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 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.
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

Check these out next

Metaworks4 intro

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Similar a Metaworks4 intro(20)

Más de uEngine Solutions(20)

Último(20)

Metaworks4 intro