bce.design

Quickstarter and sample application for building non-trivial web applications with minimal tooling, essential dependencies, high productivity, and no migrations.

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

Visit https://bce.design for more information.

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.

<img src="https://repository-images.githubusercontent.com/355100926/4731b900-979e-11eb-9014-3b30688cc691" alt="Boundary Control Entity quickstarter -> with web components" height="400"/>

run

Launch with browsersync:

Install browsersync
git clone https://github.com/AdamBien/bce.design
cd app
Perform: browser-sync src -f src -b "google chrome" --no-notify

Launch with vite:

Install vite
git clone https://github.com/AdamBien/bce.design
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:

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

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

Run in development mode:

cd [APP_DIR]
mvn quarkus:dev

Access the application at http://localhost:8080
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

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

update dependencies

Update package.json in libs

external ingredients

lit-html
redux toolkit
vaadin router (suggestion / optional)
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
Import Maps - Map bare module specifiers to URLs
Container Queries - Responsive layouts based on container size
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

Bce.design

Install / Use

README