🎨What is Mosaic?
Mosaic is a declarative, front-end JavaScript library for building user interfaces in an efficient and easy to learn way. It is a component-based library, meaning that you can build applications by combining small, reusable components that come together to make an entire web app - just like how a mosaic is a work of art made up of small pieces of painted material.
(Web) Component-Based: Mosaic components are really just extensions of HTMLElements and use the Custom Elements API to create web components. This means that Mosaic is framework-agnostic, so you can write your components with Mosaic and still use them with other libraries like React or Vue.
Smart DOM: Updates in Mosaic work by remembering the position of dynamic content in your markup and only traversing those memorized parts when data changes. This technique is made possible by the use of Tagged Template Literals, which are a built-in feature of the JavaScript langauge.
Observable Data: Component state is managed in a single object called "data" which represents both "state" and "props." This data property is an Observable type, which means that all changes are tracked and will trigger an Update if the value changes. There is no need to call "setState."
Unopinionated: Mosaic is a lightweight library (~27kb) that does not make any assumptions about the rest of your tech stack. It is just as easy to create a large-scale web app with Mosaic as it is to include Mosaic in a small part of your existing project.
Router and State Manager: Mosaic comes with a built-in client-side router as well as a global state manager called Portfolio. The router allows you to use Mosaic components as pages, and the Portfolio allows you to keep a centralized data store and update components that use that data.
🕵️♂️ Check out these apps that use Mosaic!
NYU's Find My Club
Noteworthy
📊 Speed Comparison
Here is a chart detailing the most recent performance test of Mosaic against some other popular JS libraries/frameworks. Be aware that the only performance test done here is with keyed array manipulation. Row operations such as adding and removing items from a keyed array were tested, and each test was computed by taking the average time in milliseconds of five trials. The original times were found from https://krausest.github.io/js-framework-benchmark/current.html , but the results in the chart below were all computed on my own computer (2019 13inch Macbook Pro on Google Chrome). The most recent test was done on August 23th, 2019.
✏️ Author
Version: 0.9.1
Year: 2019
Created By: Adeola Uthman
Tools: JavaScript, Typescript, Parcel