Skip to content

Commit a32320a

Browse files
aklessakless
authored
Refactor README for clarity and structure
Updated the README to improve clarity and structure, including reformatting sections and enhancing descriptions of key features and the core API.
1 parent aac9312 commit a32320a

1 file changed

Lines changed: 38 additions & 61 deletions

File tree

‎README.md‎

Lines changed: 38 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,14 @@
77
![Runtime](https://img.shields.io/badge/runtime-browser-blue)
88
![Version Isolation](https://img.shields.io/badge/versioning-isolated-important)
99

10-
> Buildless. Composable. Runtime.
10+
> **Buildless. Composable. Runtime.**
1111
> No installation. No build. Just include and start.
1212
1313
**ccmjs** is a lightweight JavaScript framework that implements the **Client-side Component Model (CCM)** — an architecture for building modular, reusable, and dynamically composed web applications.
1414

15-
Unlike typical frontend frameworks, **ccmjs operates entirely at runtime** and does not require build tools, bundlers, or compilation.
15+
Components are loaded, configured, and composed dynamically at runtime — even across different framework versions.
1616

17-
Components can be loaded, configured, and composed dynamically at runtime — even across different framework versions.
18-
19-
# 🚀 Quick Start
17+
## 🚀 Quick Start
2018

2119
Include ccmjs:
2220

@@ -30,33 +28,7 @@ Start a component:
3028
ccm.start(component, config, document.body);
3129
```
3230

33-
# What is CCM?
34-
35-
The **Client-side Component Model (CCM)** is an architectural approach for building web applications from independent, reusable components that are composed at runtime.
36-
37-
Each component
38-
39-
- defines its own configuration schema
40-
- declares dependencies declaratively
41-
- can be loaded dynamically
42-
- runs in an isolated runtime environment
43-
44-
This allows applications to be composed from independently evolving components while maintaining compatibility across versions.
45-
46-
**ccmjs** provides the reference implementation of this model in JavaScript.
47-
48-
# Key Features
49-
50-
- Runtime component loading
51-
- Declarative configuration (JSON-based)
52-
- Automatic dependency resolution
53-
- Version isolation (framework + components)
54-
- Multiple versions can coexist
55-
- No build step required
56-
- Fully client-side execution
57-
- Instance-level DOM isolation (Shadow DOM)
58-
59-
# Quick Example
31+
## 💡 Quick Example
6032

6133
```html
6234
<!DOCTYPE html>
@@ -88,39 +60,22 @@ ccm.start(component, config, document.body);
8860

8961
This loads the quiz component dynamically, instantiates it, and renders it into the page.
9062

91-
# Core API
92-
93-
| Function | Purpose |
94-
|--------|--------|
95-
| `ccm.load()` | Load resources dynamically |
96-
| `ccm.component()` | Register or load components |
97-
| `ccm.instance()` | Create component instances |
98-
| `ccm.start()` | Create and start component instances |
99-
| `ccm.store()` | Create datastore accessors |
100-
| `ccm.get()` | One-time data retrieval |
101-
102-
# First Steps
63+
## What is CCM?
10364

104-
1. Include the framework in your page
105-
106-
```html
107-
<script src="https://ccmjs.github.io/framework/ccm.js"></script>
108-
```
65+
The **Client-side Component Model (CCM)** is an architectural approach for building web applications from independent, reusable components that are composed at runtime.
10966

110-
2. Start a component
67+
Each component
11168

112-
```js
113-
ccm.start(componentURL, config, element);
114-
```
69+
- defines its own configuration schema
70+
- declares dependencies declaratively
71+
- can be loaded dynamically
72+
- runs in an isolated runtime environment
11573

116-
That's it — the framework performs the full lifecycle automatically:
74+
This allows applications to be composed from independently evolving components while maintaining compatibility across versions.
11775

118-
- load the component
119-
- resolve dependencies
120-
- create an instance
121-
- render it.
76+
**ccmjs** provides the reference implementation of this model in JavaScript.
12277

123-
# Why CCM?
78+
## Why CCM?
12479

12580
Most frontend frameworks assume
12681

@@ -144,10 +99,32 @@ This enables
14499
- integration of independently developed components
145100
- dynamic applications that evolve over time
146101

147-
# Documentation
102+
## Key Features
103+
104+
- Runtime component loading
105+
- Declarative configuration (JSON-based)
106+
- Automatic dependency resolution
107+
- Version isolation (framework + components)
108+
- Multiple versions can coexist
109+
- No build step required
110+
- Fully client-side execution
111+
- Instance-level DOM isolation (Shadow DOM)
112+
113+
## Core API
114+
115+
| Function | Purpose |
116+
|--------|--------|
117+
| `ccm.load()` | Load resources dynamically |
118+
| `ccm.component()` | Register or load components |
119+
| `ccm.instance()` | Create component instances |
120+
| `ccm.start()` | Create and start component instances |
121+
| `ccm.store()` | Create datastore accessors |
122+
| `ccm.get()` | One-time data retrieval |
123+
124+
## Documentation
148125

149126
Full documentation is available in the [ccmjs Wiki](https://github.com/ccmjs/framework/wiki).
150127

151-
# License
128+
## License
152129

153130
ccmjs is released under the **MIT License**.

0 commit comments

Comments
 (0)