tatsunori-iwaki / iwaki-onion-architecture-for-vuejs

Vuejs implementation pattern using onion architecture

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


Markdownify
iwaki-onion-architecture-for-vuejs

Vuejs web example implemented based on onion architecture.
This is a very simple TODO application using TypeScript.
Implements API calls by axios up to mock. with in-memory nedb.


Screenshot - webapp case

Enriching implementations by allowing program boundaries by architecture.

Vue, located in the presentation layer, can focus solely on the duties of expressing.

Screenshot - electron case

electron is very simple. Almost all creation is completed just by adding the electron-builder module

Most of the content implemented with "onion architecture" is the same. The only difference is whether the app has become a webapp or a desktop app.

Screenshot - native case

Native apps have some difficulties, but everything can be programmed with javascript. This is amazing.

Vue version of react native with expo. Base built using vue-native. Further expansion to "TypeScript".

Presentation

Traditional layered architecture

Dependency reversal principle

HelloRepository became Interface

Onion architecture

Class diagram

How to use

๐Ÿบ clone projects

cd ~/IdeaProjects
git clone https://github.com/tatsunori-iwaki/iwaki-onion-architecture-for-vuejs.git

๐Ÿบ web application case

cd ~/IdeaProjects/iwaki-onion-architecture-for-vuejs/onion-architecture-webapp
yarn
yarn test:unit
yarn serve

๐Ÿบ electron develop application case

cd ~/IdeaProjects/iwaki-onion-architecture-for-vuejs/onion-architecture-electron
yarn
yarn electron:serve

๐Ÿบ electron package application case

cd ~/IdeaProjects/iwaki-onion-architecture-for-vuejs/onion-architecture-electron
yarn
yarn electron:build
ls -l ./dist_electron/mac/
open ./dist_electron/mac/onion-architecture-electron.app

๐Ÿบ native package application case

cd ~/IdeaProjects/iwaki-onion-architecture-for-vuejs/onion-architecture-native
yarn
yarn start

Initial build documentation

README-PROCEDURE-VUE.md

README-PROCEDURE-ELECTRON.md

README-PROCEDURE-NATIVE.md

how to e2e

README-E2E-NIGHTWATCH-VUE.md

About

Vuejs implementation pattern using onion architecture

License:MIT License


Languages

Language:TypeScript 43.6%Language:Vue 29.3%Language:JavaScript 25.5%Language:HTML 1.3%Language:CSS 0.3%