Composi is a framework for creating desktop and mobile apps. With Composi you can create a dynamic website with reactive components, a progressive web app, or a hybrid app for mobile app stores.
Composi is small. The core is only 3KB gzipped. It therefore loads fast. Its virtual DOM updates components efficiently and quickly.
Components can be stateless or stateful. Stateful components are reactive. When you change a component's state, that triggers the component's render function. That in turn creates a new virtual DOM based on the data changes. It then patches the DOM to match the changes. If there are no changes, nothing will happen.
A component's markup is written with JSX. This means you can create custom tags to organize your component's template. You can also pass props to a component tag. If you prefer, you can instead use the h function to define the component's markup with hyperscript. Actually, at render time the JSX is converted to this as well.
Composi is compatible with browsers back to IE 9 on Windows 7.
To install Composi, you'll need to have Nodejs installed. Open your terminal and run:
npm run i -g composiAfter installing Composi, you can use it to create a new project. The simplest way to do this is to provide a project name following the -n flag:
composi -n myprojectThis will create a project named "myproject" on your desktop. If you want to have the project placed somewhere else, you can provide a path with the -p flag:
npm -n myproject -p dev/New \ProjectsOn Windows use the standard Windows file system path notation to define your project's path.
A new project will have the following folder structure:
|- my-project
| |- css
| |--- styles.css
| |- dev
| |--- app.js
| | |- components
| | |--- title.js
| |- js
| |--- app.js
|--- index.html
To build your project, cd to its folder and run:
npm iYou'll also need to have the gulp-cli installed:
npm i -g gulp-cliThen, while in your project's root folder, run:
gulpThis will build and launch your project in your default browser.
With this structure, you can add other sub-folders to components, or create other folders inside the dev folder as necessary.
styles.css is a CSS reset. We are using the Bootstrap 4 rest since it provides a consistent baseline for HTML across all browsers. app.js is the core of your website/app. components folder has one component: list.js. You can add more files for other component as needs. Feel free to add more folders and files to the dev folder as you see fit to achieve the structure your app needs. Import them into app.js. At build time the build script uses app.js to bundle all your files and output them to js/app.js. The index.html is automatically setup to import that script. index.html is your main page. npm
To learn how to use Composi, open the docs folder.
Composi is all about components. These provide a great way to organize your code into modular and reusable chunks. The virtual dom means you never have to touch the DOM to change something.
Because Composi uses JSX, there are many similarities to React patterns. Please note that Composi is not a React clone. It is not trying to be compatible with React and the React ecosystem the way Preact and Inferno do. Component state is managed quite differently from React. Components lack the React refs and context properties. Also lacking, PropTypes. Events are not synthetic. They are either real inline events or the handleEvent interface. Props and custom tags are supported only because JSX provides these by default. The component architecture is actually adapted from the Component class of ChocolateChip-UI. Changes were made to the API to work with a virtual dom.
Composi is small, just 3KB for the gzipped core. It loads quickly. Its small and focused API means you can learn everything in half a day and be productive. If you're already familiar with JSX, then you only need to learn the Component API. You can easily do that in an hour.
Composi is focused on one thing - providing a solution for components as the means to build and structure a project. That means there are certain things it does not address.
Composi provides the barest support for state through the component's state property and setState method. However for a more robust solution you may prefer to use Redux, Mobx, or some other state management solution. When you do so, you'll want to create stateless components. Read the documentation for Component to learn more about stateless components. If yo want something really minimal, take a look at trkl and pure. You could event roll your own state management solution by defining a class and using Composi's pubsub functions, subscribe and dispatch for making it reactive. Another possibility for state management is freezer-js
Composi does not provide a client-side router. Currently the most popular choices for client-side routing are Page.js, Universal Router, Navigo or rlite-router.
Composi does not provide a means of aquiring remote data. If you only need to support current, ever-green browsers, you an use fectch. If you would like to use fetch with older browsers, you can provide the WHATWG polyfill. If don't need every possible feature of fetch and are concerned about the polyfill size, you can consider unfetch. It's tiny and provides good support for the basics.
If you would prefer an approach more like tradition Ajax championed by jQuery, you can take a look at Axios.
If you need to persist data locally, you could use the browser's localStorage. If you need greater storage or a more sophisticated API, you might look at IndexedDB. If you need support for older browsers, you might consider localForage. This is a libarary that uses whatever local dataStore is the best choice for the browser. It provides a simple interface that works the same for localStorage, WebSQL and IndexedDB.
Composi was not conceived in a vacuum. Inspiration came for exposure to: