bce.design

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

Built on web standards and browser APIs - no framework lock-in, just native Web Components, ES modules, and modern JavaScript

Core Architecture

This project implements unidirectional data flow using Redux Toolkit for predictable state management. All state changes flow in one direction: Actions → Reducers → Store → View Components. The application follows the Boundary Control Entity (BCE) pattern for clear separation of concerns.

run

Launch with browsersync:

1. Install browsersync
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 vite:

1. Install vite
2. git clone https://github.com/AdamBien/bce.design
3. Perform: npx vite

Launch with zws (zero dependencies web server):

If you have installed recent Java or later, you can serve the assets with zws from app/src with: cd app/src Perform: zws.sh (which executes the following behind the scenes: java zws.java)

Launch with Quarkus:

Serve the application as static resources using Quarkus:

1. Copy the app/src contents to src/main/resources/META-INF/resources/:

cp -r app/src/* [APP_DIR]/src/main/resources/META-INF/resources/

2. Run in development mode:

cd [APP_DIR]
mvn quarkus:dev

4. Access the application at http://localhost:8080

5. Build for production and run:

mvn package
java -jar target/quarkus-app/quarkus-run.jar

Quarkus automatically serves static files from META-INF/resources/ and provides production-ready features like compression, caching headers, and efficient resource serving.

e2e tests

The e2e tests are available from:

tests

code coverage

The e2e tests with configured global code coverage is available from: codecoverage

IDE

1. Visual Studio Code
2. Setup: JS imports
3. lit-html plugin for syntax highlighting inside html templates
4. redux devtools chrome extension

update dependencies

Update package.json in libs

external ingredients

1. lit-html
2. redux toolkit
3. vaadin router (suggestion / optional)
4. rollup (for updates / optional)

what is BCE?

Boundary Control Entity (BCE) pattern organizes code by responsibility:

• Boundary: UI components (Web Components) - user interaction layer
• Control: Business logic and orchestration - application behavior
• Entity: State management and data models - domain objects

In this project:

• bookmarks/boundary/ - UI components like List.js, Add.js
• bookmarks/control/ - Logic like CRUDControl.js
• bookmarks/entity/ - State like BookmarksReducer.js

BCE eliminates naming debates and provides instant code organization, helping avoid Parkinson's law of triviality. Learn more about BCE

unidirectional data flow

vaadin router

static hosting on Amazon S3

resources

Web Standards and Browser APIs Used

• Web Components - Custom Elements, Shadow DOM, HTML Templates
• Custom Elements - Define new HTML elements
• ES Modules - Native JavaScript module system
• localStorage - Browser storage for state persistence
• JSON - Data serialization for storage
• querySelector/querySelectorAll - DOM element selection
• ES6 Classes - JavaScript class syntax
• Template Literals - String templates with embedded expressions
• Arrow Functions - Concise function syntax
• Destructuring - Extract values from objects/arrays
• Spread Syntax - Expand arrays/objects
• HTML5 History API - Client-side routing support

Testing & Development Tools

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