Front-End Architecture

the synchronization concept in mind make your team more efficient

Every successful project needs a clear architecture, which is understood by all team members.

.

https://hackernoon.com/architecting-single-page-applications-b842ea633c2e

Spotlight

The State

Vue.js

Vue / Vuex / Vue Router

Framework / Library

Update and render just the right components when your data change.

4 Layer

https://hackernoon.com/architecting-single-page-applications-b842ea633c2e

By functional team, not by business unit

Layer

Layer is a concept which is not about the folder structure

Role

Technical choices and convention

Domain

Represents the core of our application and should be agnostic to the view layer

Domain

Should be able to use our domain regardless of the framework we choose.

Side-effect free

Domain

• Enities / Type definition

• Validations

• Transformation

• Other business logic

• CRUD

Enities / Type definition

• With Flow, TypeScript ...
• Anemic Model

no business logic; separates logic from data

CRUD

• Work close with Store
• Provide single source of rule to manipuldate entity ...

Validation

• Work with CRUD
• Imported by view layer; inputs in UI component

Transformation

• Work with api request

Other business logic

• When and how should we process data ...

Store Layer

• Hold and update the state. Single source of truth.
   
• Vuex for example
  accessible state, mutation ...
   
• Immutability

Application Layer

• axios, date-fns ...
• functionality of client router ...
• service worker ...

Component

Container Component

• Receive/Update state from store
   
• Supply state to presentational component
   
• May work with some Domain logic through services

Presentational Component

• Receive key state from props
• Emit new state from events

Folder Structure

END

END