Mosaic is a declarative front-end JavaScript library for building user interfaces.
💠Component-Based: Mosaic components are reusable pieces of code that keep track of their own data, actions, lifecycle functions, and more.
⚡️Observable Data: Mosaic uses Observables to keep track of changes to a component's data. This means that there is no need to call "setState" or anything like that, instead just change the data directly.
🧠Smart DOM: Updates in Mosaic work by remembering which nodes are dynamic (i.e. subject to change) and traveling directly to those nodes to make changes, rather than traversing the tree again.
🔀Built-in Router: Comes with a basic, client-side routing solution.
🌐State Manager: Comes with a built-in global state manager called Portfolio.
👌Small Library Size: Mosaic is extremely small, with the minified JavaScript file being only 14.7KB.
🔖Tagged Template Literals: Views are written using tagged template literals, which means there is no need for a compiler:
const name = "Mosaic";
html`<h1>Welcome to ${name}!</h1>`The easiest way to use Mosaic is to first install the npm package by using:
npm install --save @authman2/mosaicor with a script tag.
<script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>(Optional) For fast builds and hot reloading, install the build tool "Parcel." This is not required, though, as Mosaic uses built-in JavaScript features. This means that no build tool is required, but any may be used if it helps the overall project structure.
npm install --save-dev parcel-bundlerNow you are ready to use Mosaic!
Here is an example of a simple Mosaic application. All you need is an index.html file and an index.js file. For a more detailed example, run the project inside the "example" folder.
index.html:
<html>
<head>
<title>My Mosaic App</title>
</head>
<div id='root'></div>
<script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>
<script type="text/javascript" src='./index.js'></script>
</html>index.js:
// Import Mosaic
import Mosaic from '@authman2/mosaic';
// Create a label component. Data is not defined yet,
// however, it will be injected later on.
const Label = new Mosaic({
view: function() {
return html`<div>
<h2>${ this.data.text }</h2>
<p>This is a custom label component!</p>
</div>`;
}
});
// Create an app component.
const app = new Mosaic({
element: '#root',
data: { title: "Mosaic App" },
actions: {
sayHello: function() {
console.log("Hello World!!");
console.log("This component is ", this);
}
},
view: function() {
return html`<div>
<h1>This is a ${this.data.title}!</h1>
<p>Click below to print a message!</p>
<button onclick="${this.actions.sayHello}">Click Here</button>
${ Label.new({ text: "Welcome to Mosaic!" }) }
</div>`;
}
});
// Paint the Mosaic onto the page.
app.paint();- Year: 2019
- Programmer: Adeola Uthman
- Languages/Tools: JavaScript, Parcel