html-app
v1.0.1
Published
A simple JavaScript library for enhancing HTML pages
Downloads
10
Maintainers
aaronleocooperReadme
HTMLApp
Need just a sprinkling of JS to enhance your HTML pages? ✨
Create a HTML page, stick this JavaScript somewhere and off you go. Simple web apps done simply.
Example
Define your view with HTML:
<body>
<!-- define your app view -->
<div data-htmlapp>
<input data-ha="userName" />
<span data-ha="userNameError"></span>
</div>
<script src="html-app.browser.min.js"></script>
<script src="app.js"></script>
</body>Define your app logic with JavaScript:
// app.js
new HTMLApp({
eventHandlers: [
{
id: 'userName',
onChange: function(e, el, app) {
if (!e.target.value) {
app.getEl('userNameError').setText('This field is required!');
el.addClass('has-error');
} else {
app.getEl('userNameError').setText('');
el.removeClass('has-error');
}
}
}
]
});Job done! 🎉
Features
- HTML is your view, JavaScript is your controller/model (the way we used to do web development!)
- Easily react to as many events as required with no drop in performance
- Thin DOM element wrappers provide just the right amount of helper methods for your app logic
- Dependency-free and super small: less than 2kb gzipped
- No build/transpilation/configuration setup needed— stick it in a HTML page and off you go! 🚀
Installation
The compressed library JavaScript file can downloaded and included in your HTML pages, or linked to directly via the Unpkg CDN:
<script src="https://unpkg.com/html-app/dist/html-app.browser.min.js"></script>Or alternatively if you're compiling your JS files with a bundler like Parcel or Webpack, it can be installed via NPM and included as an ES6 import in your JavaScript files:
npm i html-appimport HTMLApp from 'html-app';