https://github.com/adambien/bce.design

minimal magic, minimal tooling, essential dependencies, high productivity, no transpilations and no migrations. The Web Components starter ships with integrated lit-html, redux-toolkit and vaadin router components.
https://github.com/adambien/bce.design

bce best-practices customelements flexbox flux-architecture javascript lit-html pattern-javascript patterns-design pwa quickstarter redux redux-toolkit rollup routing spa template vaadin-router webcomponents

Last synced: 5 days ago
JSON representation

minimal magic, minimal tooling, essential dependencies, high productivity, no transpilations and no migrations. The Web Components starter ships with integrated lit-html, redux-toolkit and vaadin router components.

• Host: GitHub
• URL: https://github.com/adambien/bce.design
• Owner: AdamBien
• License: mit
• Created: 2021-04-06T07:40:39.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-16T08:21:24.000Z (6 months ago)
• Last Synced: 2024-12-04T05:07:48.493Z (18 days ago)
• Topics: bce, best-practices, customelements, flexbox, flux-architecture, javascript, lit-html, pattern-javascript, patterns-design, pwa, quickstarter, redux, redux-toolkit, rollup, routing, spa, template, vaadin-router, webcomponents
• Language: JavaScript
• Homepage:
• Size: 212 KB
• Stars: 84
• Watchers: 9
• Forks: 20
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# bce.design

minimal tooling, essential dependencies, high productivity, no migrations, web component starter for non-trivial web applications



# run

## Launch with vite:

1. Install [vite](https://vitejs.dev)

2. `git clone https://github.com/AdamBien/bce.design`

3. Perform: `npx vite`

## Launch with browsersync:

1. Install [browsersync](https://www.browsersync.io)

2. `git clone https://github.com/AdamBien/bce.design`

3. `cd app`

4. Perform: `browser-sync src -f src -b "google chrome" --no-notify`

## Launch with jwebserver:

If you have installed Java 18 or later, you can serve the assets with `jwebserver` from `app/src`;

[![BCE overview](https://i.ytimg.com/vi/LYzGgCW0OxY/mqdefault.jpg)](https://www.youtube.com/embed/LYzGgCW0OxY?rel=0)

## e2e tests

The e2e tests are available from:

[tests](./tests/)

## code coverage

The e2e tests with configured global code coverage is available from: [codecoverage](./codecoverage/)

# IDE

1. [Visual Studio Code](https://code.visualstudio.com)

2. Setup: [JS imports](https://www.adam-bien.com/roller/abien/entry/fixing_es_6_import_autocompletion)

3. lit-html [plugin](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) for syntax highlighting inside html templates

4. redux devtools chrome [extension](https://github.com/zalmoxisus/redux-devtools-extension)

# update dependencies

Checkout [libs](https://github.com/AdamBien/bce.design/tree/main/libs)

# external ingredients

1. [lit-html](https://lit.dev/docs/libraries/standalone-templates/)

2. [redux toolkit](https://redux-toolkit.js.org)

3. [vaadin router](https://vaadin.com/router) (suggestion / optional)

4. [rollup](https://rollupjs.org/) (for updates / optional)

# what is BCE?

Boundary Control Entity (BCE) pattern is used to organize elements according to their responsibilities:  [https://en.wikipedia.org/wiki/Entity-control-boundary](https://en.wikipedia.org/wiki/Entity-control-boundary).

Why it is needed? BCE was published in 1992 and since then described in various books and articles. Also: the boundary, control, entity icons are available in all modelling, drawing and designing tools. 

The best of all: with BCE we don't have to discuss the naming anymore and therefore completely ignore the [Parkinson's law of triviality](https://en.wikipedia.org/wiki/Law_of_triviality) :-).

## unidirectional data flow

[![unidirectional data flow](https://i.ytimg.com/vi/zjtaLLs2eSM/mqdefault.jpg)](https://www.youtube.com/embed/zjtaLLs2eSM?rel=0)

## vaadin router

[![vaadin router intro](https://i.ytimg.com/vi/Fxi9YdM0qFw/mqdefault.jpg)](https://www.youtube.com/watch?v=Fxi9YdM0qFw)

## static hosting on Amazon S3

[![static web hosting on Amazon S3 intro](https://i.ytimg.com/vi/EtvyaUJjg_E/mqdefault.jpg)](https://www.youtube.com/watch?v=EtvyaUJjg_E)

# resources

https://github.com/adambien/mockend is useful as a mock backend with throttling functionality. 

Mockend can slow down responses, what simplifies the testing of asynchronous view updates. Fetch-requests in the `control` layer can be delayed for test purposes.

Article: [Web Components, Boundary Control Entity (BCE) and Unidirectional Data Flow with redux](https://adambien.blog/roller/abien/entry/web_components_boundary_control_entity)