Introduction
Welcome to Demo App — a simple demonstration application designed specifically for developers learning the InviCMS App Module structure.
Learning Purpose
A minimal example showing modular CSS, ES6 JavaScript, basic interactions, and clean structure following best practices.
Perfect For
Understanding app structure, learning modular organization, and using as a quick reference when creating new apps.
Key difference: Unlike functional apps (Calculator, Unit Converter), Demo App is intentionally simple and designed as a learning reference, not a production tool.
How It Works
Basic Functionality
1
Input Field
Enter your name
2
Say Hello
Updates greeting with your name
3
Reset
Clears input and resets greeting
Code Structure
Frontend Architecture
js/apps/demo-app/
├── demo-app.js ← Entry point
└── modules/
├── DemoApp.js ← Main coordinator
├── DemoAppDisplay.js ← Display updates
└── DemoAppHandlers.js ← Event handlersStyling Architecture
css/apps/demo-app/
├── demo-app.css ← Main import file
├── _container.css ← Container styles
├── _greeting.css ← Greeting section
├── _controls.css ← Controls (input, buttons)
├── _info.css ← Info box
└── _responsive.css ← Mobile adjustmentsKey Features
- Separation of Concerns: Display logic separate from event handling
- Multilingual Support: All text uses
__d()function - Input Validation: Shows alert if name is empty
- Keyboard Support: Press Enter to greet
For Developers
Using as a Template
1
Copy Structure
Duplicate the controller, view, CSS, and JavaScript files from Demo App.
2
Rename Files
Replace "DemoApp" with your app name throughout all files and classes.
3
Add Logic
Implement your app's specific functionality in the modules.
4
Customize Styles
Update colors, layout, and responsive breakpoints for your design.
Best Practices Demonstrated
CSS Best Practices
- Main file imports all partials with
@import - Each component in separate file (e.g.,
_controls.css) - Responsive styles in dedicated
_responsive.css - BEM-like naming convention:
.demo-app-container,.demo-btn
JavaScript Best Practices
- ES6 modules with
import/exportstatements - Main class coordinates sub-modules
- Display logic separate from event handlers
- Clear method naming:
handle*(),init(),bind*()
Multilingual Implementation
- All text wrapped in
__d()function - Proper key prefixing:
app.demo.key - Default values provided for fallback
Documentation & Resources
App Module Guide
DocumentationHow to Add App
Tutorial