❤
npm
Sign UpSign In

applit
TypeScript icon, indicating that this package has built-in type declarations

0.0.6 • Public • Published

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 the reducer to 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 parcel

Create 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.html

Status

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

Readme

Keywords

Package Sidebar

Install

npm i applit

Weekly Downloads

1

Version

0.0.6

License

MIT

Unpacked Size

25.1 kB

Total Files

23

Last publish

Collaborators

  • alber70g
Try on RunKit
Report malware