tooppoo / separate-model-on-front

frontend software-design example

example of frontend software design that separates Model and View.

concept

• There is no need to embed logic for UI directly in the UI components provided by the UI library.
• You can create UI logic that is independent of the UI library without using the UI library or its functions.
• You can use common software design techniques to create UI logic independent of the UI library. No special theory or technique is necessarily required.
• By making the logic for UI independent, you can easily test only the logic for UI.
• By making the UI logic independent, you can make the software and UI library loosely coupled.
• By making the UI logic independent, knowledge of UI become more explicit.

usage

initialize

install and setup dependencies with lerna

make

launch

launch all examples

yarn serve

launch an example

yarn vue:serve
yarn react:serve
yarn jquery:serve

build

build all packages

yarn build
yarn build:watch

build a package

yarn domain:cart:build
yarn vue:build
yarn react:build
yarn jquery:build

test

test all packages

yarn test

test a package

yarn domain:cart:test
yarn vue:test
yarn react:test

packages

domain

examples of Models that should be core knowledge in frontend software.

for example, a shopping cart for an e-commerce site.

vue

Vue implementation of View that relies on Model to build the UI

react

React implementation of View that relies on Model to build the UI

jquery

jQuery implementation of View that relies on Model to build the UI

separate-model-on-front's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @types/jquery to v3.5.31
• Update dependency @types/node to v16.18.111
• Update dependency @types/react to v18.3.9
• Update dependency core-js to v3.38.1
• Update dependency @vue/eslint-config-prettier to v9
• Update dependency @vue/eslint-config-typescript to v13
• Update dependency eslint to v9
• Update dependency eslint-plugin-prettier to v5
• Update dependency lerna to v8
• Update dependency lint-staged to v15
• Update dependency prettier to v3
• Update dependency rimraf to v6
• Update dependency stylus-loader to v8
• Update dependency typescript to v5
• Update dependency vue-router to v4
• Update dependency web-vitals to v4
• Update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• Update typescript-eslint monorepo to v8 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update vue-cli monorepo to v5 (major) (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-plugin-typescript, @vue/cli-plugin-unit-jest, @vue/cli-service)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency stylus to v0.63.0
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @types/node to v20
• Update dependency @vue/test-utils to v2
• Update dependency eslint-plugin-vue to v9
• Update dependency vue to v3
• Update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• Update react monorepo to v18 (major) (@types/react-dom, react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/node.js.yml

• actions/checkout v3
• actions/setup-node v3
• actions/cache v3

npm

package.json

• lerna 5.6.2
• node >=14.0.0 || >=16.0.0 <17.0.0

packages/domain/cart/package.json

• @types/jest 27.5.2
• @typescript-eslint/eslint-plugin 5.62.0
• @typescript-eslint/parser 5.62.0
• eslint 7.32.0
• jest 26.6.3
• rimraf 3.0.2
• ts-jest 26.5.6
• typescript 4.9.5

packages/jquery/package.json

• jquery ^3.6.0
• regenerator-runtime ^0.14.0
• @types/jest 27.5.2
• @types/jquery 3.5.29
• jest 26.6.3
• rimraf 3.0.2
• ts-jest 26.5.6
• typescript 4.9.5

packages/react/package.json

• @testing-library/jest-dom 5.17.0
• @testing-library/react 13.4.0
• @testing-library/user-event 14.5.2
• @types/node 16.18.96
• @types/react 18.2.79
• @types/react-dom 17.0.25
• react 17.0.2
• react-dom 17.0.2
• react-scripts 5.0.1
• typescript 4.9.5
• web-vitals 2.1.4
• rimraf 3.0.2

packages/vue/package.json

• core-js 3.36.1
• domain 0.0.1
• vue 2.7.16
• vue-class-component 7.2.6
• vue-property-decorator 9.1.2
• vue-router 3.6.5
• @types/jest 27.5.2
• @typescript-eslint/eslint-plugin 5.62.0
• @typescript-eslint/parser 5.62.0
• @vue/cli-plugin-babel 4.5.19
• @vue/cli-plugin-eslint 4.5.19
• @vue/cli-plugin-typescript 4.5.19
• @vue/cli-plugin-unit-jest 4.5.19
• @vue/cli-service 4.5.19
• @vue/eslint-config-prettier 6.0.0
• @vue/eslint-config-typescript 10.0.0
• @vue/test-utils 1.3.6
• eslint 7.32.0
• eslint-plugin-prettier 4.2.1
• eslint-plugin-vue 7.20.0
• jest 26.6.3
• lint-staged 12.5.0
• prettier 2.8.8
• rimraf 3.0.2
• stylus 0.59.0
• stylus-loader 3.0.2
• ts-jest 26.5.6
• typescript 4.9.5
• vue-template-compiler 2.7.16

---

• Check this box to trigger a request for Renovate to run again on this repository