📁 AppML Folder Structure Best Practices – Organize Your AppML Projects Smartly
🧲 Introduction – Why Folder Organization Matters in AppML Projects
Even though AppML is a lightweight, no-build framework, maintaining a well-organized folder structure is essential for scalability, clarity, and debugging efficiency. A clean directory layout allows you to separate models, views, controllers, and assets, making it easier to manage data-driven applications—especially as your project grows.
🎯 In this article, you’ll learn:
- The ideal folder structure for AppML projects
- How to organize models, controllers, and views
- Folder naming conventions for better readability
- Real examples for single-page and multi-page AppML apps
- Tips to future-proof your file organization
🗂️ Recommended Folder Structure for AppML Projects
Here is a modular folder structure that works for most small to medium AppML applications:
/appml-project/
├── index.html
├── /data/
│ └── products.json
├── /controller/
│ └── appml-controller.js
├── /model/
│ └── schema.json
├── /views/
│ └── product-view.html
├── /css/
│ └── styles.css
├── /js/
│ └── custom-scripts.js
└── /assets/
├── /images/
└── /icons/
💡 Tip: Place reusable HTML blocks or templates inside
/views, and API-returned models inside/data.
📦 Folder Breakdown and Naming Best Practices
| 📁 Folder | 📘 Description |
|---|---|
/data/ | Stores JSON, XML, or server-returned data files |
/controller/ | Contains custom controller logic (JavaScript) |
/model/ | Holds static schema definitions (optional) |
/views/ | Stores modular HTML templates or AppML-rendered views |
/css/ | Stylesheets for layout, theme, responsiveness |
/js/ | Custom JS not managed by AppML (optional) |
/assets/ | Static resources like images, icons, fonts |
🧪 Example: Connecting Folder Paths in HTML
Let’s say you’re loading a product list with AppML using this structure:
<!-- index.html -->
<div appml-data="data/products.json" appml-controller="controller/appml-controller.js">
<h3>{{name}}</h3>
<p>Price: ${{price}}</p>
</div>
✅ Make sure relative paths are correct so AppML can load the model and apply controller logic.
🔁 Reusable Views and Modular HTML Blocks
Use the /views/ folder to maintain reusable HTML templates. For example, product cards or form components:
<!-- views/product-view.html -->
<div>
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
Then you can include this inside your main page with AppML includes:
<div appml-include-html="views/product-view.html"></div>
🧰 Tips for Organizing Multi-Page AppML Projects
If you’re building a larger site or admin dashboard:
- 🔹 Create subfolders for each module or feature.
- 🔹 Group models and controllers by feature.
- 🔹 Keep all AppML-related files in a dedicated root folder (
/appml/).
/admin-dashboard/
├── /appml/
│ ├── /products/
│ │ ├── data.json
│ │ └── controller.js
│ ├── /orders/
│ │ ├── order-data.json
│ │ └── order-controller.js
│ └── shared/
│ └── view-header.html
📌 Summary – Recap & Next Steps
Creating a well-structured AppML project folder enhances code readability, simplifies updates, and enables collaborative development. It’s a best practice that pays off as your app scales.
🔍 Key Takeaways:
- Store data in
/data/, logic in/controller/, and views in/views/ - Use consistent naming and relative paths for easier maintenance
- Organize by feature for large, multi-module applications
- Keep custom JavaScript and styles in separate folders (
/js/and/css/)
⚙️ Whether you’re building a small product list or a large admin panel, clean folder structure is your foundation for success.
❓ FAQs – AppML Project Folder Organization
❓ Do I need to follow a specific folder structure in AppML?
✅ No, but following a modular structure helps keep your project maintainable and scalable—especially for larger apps.
❓ Where should I place my JSON data files?
✅ Place them in a /data/ or /model/ folder to keep them organized and easily referenced using appml-data.
❓ Can I load AppML views from other HTML files?
✅ Yes! Use appml-include-html="views/filename.html" to dynamically include HTML templates or fragments.
❓ What’s the best place to store controller files?
✅ Store all logic scripts in a /controller/ folder. Reference them using appml-controller="controller/logic.js".
❓ How do I organize multi-feature apps?
✅ Create subfolders inside /appml/ or /modules/ for each feature (e.g., /users/, /products/, /reports/) and group their data and controllers inside them.
Share Now :
