SPA (Single Page Applications) stand among other concepts by their ability to re-render any part of the user interface without needing an external request to get some HTML (AJAX). Such approach is made thanks to the abstraction and separation of the data from the model layer, so you can work independently with the view layer.
As a developer, I like to keep the code so easy to read as possible, so there's always need to be an easy way to do it and that's a constant struggle for every developer, because the easiest thing is to add complexity to your application using dependencies in order to solve stupid problems, but it's complicated to reduce that complexity. That's why today, I want to share with you yet another SPA Framework that will help you to solve all that struggle, Matreshka.js.
What is Matreshka.js?
Matreshka.js is a very simple JavaScript framework that allows you to create single page applications quickly. It fills the gap between a junior and a senior developer because of its simple and very intuitive API based on the JavaScript classes and accessors. Everything you need to get started is a very basic JavaScript knowlege. Its Reactive API will allow you to solve difficult problems easily with a couple of lines of code. You will be able to build applications of high robustness and have the ability as well, to refactor legacy application without making everything from the ground. You will only need a couple of hours to understand the framework because the absence of complex programming concepts, just focus on the important, the functionality of your application and how you quick you can produce it.
Although this framework mentions that it's very easy to use, it is not only for programming beginners, but for experimented frontend developers as well. It has a tidy repository with examples and tutorials as well. Like the set of wooden dolls that are placed in decreased size one inside another, the framework will allow you to abstract the complexity of your application with a couple of lines of code.
Getting started
The official website of Matreshka has a very intuitive and explained tutorial where you can start to learn how Matreshka works, so you can start to using it so soon as possible.
Basic example
As you know, talking is cheap, so the following code snippet will show you how easy is to get started with Matreshka:
1. Document
The HTML document will keep a normal structure and normal tags, you only need to include the matreshka library and the code of your app:
<!DOCTYPE html>
<html>
<head>
<title>My first Matreshka.js application</title>
</head>
<body>
<div>
<input type="text" class="my-input">
<div class="output"></div>
</div>
<!-- Include the matreshka source code -->
<script src="https://matreshkajs.github.io/matreshka/matreshka.min.js"></script>
<!-- The code of your application -->
<script src="app.js"></script>
</body>
</html>2. Application with Matreshka (app.js)
As any SPA example, we'll show how easily is to bind some values into some element. In this case the bindNode function of Matreshka allows you to do this:
// Store the HTML binder in a short variable
const htmlBinder = Matreshka.binders.html;
// Create the class which inherits Matreshka
class Application extends Matreshka {
constructor() {
super();
// Bind a property "x" and the text field
this.bindNode('x', '.my-input');
// bind the property "x" and the ".output" block
this.bindNode('x', '.output', htmlBinder());
// When the property "Ñ
" changes, do something
// in this case show some info on the console
this.on('change:x', () => {
console.log(`x is changed to "${this.x}"`);
});
}
}
// Create your application
const app = new Application();
// Triggers the console.log defined in on "change:x"
app.x = "Hello World";And that's it ! An application written with Matreshka.js usually represents one nested JavaScript object where every branch is Matreshka instance. The new branches are created using Matreshka#instantiate which ensures the integrity of the application and allows to replace a state of the application using ordinary assignment. It's important to know that all the examples of Matreshka that you can find are ES6 based, so if you are willing to make your code work on outdated browsers, you will need to use a transpiler (Babel).
How to contribute?
Matreshka is a very ellaborated project, the development and support of it (including the documentation in 3 different languages) requires hundreds of hours of work. If you have a business and your team uses Matrehka.js, that's the good reason to support it. You can be sure that the project will be maintained because the developer gets actual profit. If you're individual developer you can buy something simple to the main maintainer making a donation via Patron, LiqPay.
Besides, the project is licensed under the MIT license, so you can make contributions with code as well, report issues etc, so don't forget to take a loot to the official repository at Github here.
