applit
v0.0.6
Published
Applit 🌶: Micro Web App Framework for building Stateful Apps with lit-html 🔥 View Layer
Downloads
9
Maintainers
alber70gReadme
What is Applit 🌶
Applit is a web framework that drastically decreases the concepts to learn in order to build an application.
Concepts
- state: An object that represents the state of the application. (e.g.
{ count: 0 }) - view: The view is a function of state (
view = f(state)). The view is formed by using tagged templates. We use lit-html to create and rerender the DOM. (e.g.state => html`${state.count}`) - reducer: A function that takes a state and returns a modified new state
(e.g.up = state => ({ count: state.count + 1})) - bind: This function is being passed to the
view, in order to bind thereducerto the current state - render cycle: Whenever a call is made to a bound function, a rerender of the view will take place (e.g.
bind(up)())
Example
Try an example here codesandbox.io
Getting Started
This is a very minimal example to get you started.
A simple counter, with up and down actions.
Install applit and parcel (to build and run the app).
npm init -y
npm install --save applit lit-html
npm install --save-dev parcelCreate an src/index.js
import { html } from 'lit-html'
import { applit } from 'applit'
const up = () => state => ({ count: state.count + 1 })
const down = () => state => ({ count: state.count - 1 })
applit(
() => ({ count: 0 }),
(bind, state) => html`
<h1>Counter</h1>
<p>${state.count}</p>
<button onclick=${bind(up, bind)}>Up</bind>
<button onclick=${bind(down, bind)}>Down</bind>
`,
document.body
)
And use it in the src/index.html
<html>
<body>
<script src="./src/index.js"></script>
</body>
</html>Now run Parcel and view it in your browser
(npx is a tool to run node_modules/.bin executables from the project)
npx parcel ./src/index.htmlStatus
Early alpha This project is in development phase. IT'll have breaking changes to the APIs until a first version is released. The roadmap below will give an insight in what will be the focus.
Roadmap and ideas
- 0.0.5 update state outside the view
- lifecycle events (oncreate, ondestroy, etc)
- payload to call 'actions' with dynamic data
- async (for calls to api's)
- lazy components using dynamic imports
- composable
applits.
Contributing
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
- Albert Groothedde - Initial idea - Alber70g
License
This project is licensed under the MIT License