The website: matreshka.io Examples: github/matreshkajs/examples-and-tutorials On Github: github/matreshkajs/matreshka Just to remind: Matreshka.js is an alternative JavaScript framework for single page apps. Main functions function binds a property of an object to HTML node. bindNode object = { name: 'Brendan' }; node = document.querySelector('.name'); Matreshka.bindNode(object, 'name', node);object.name = 'Doug'; const const A property change also changes bound node and vice versa (e. g. if a user types something). Matreshka.js handles all HTML form elements out of the box. Custom element binding is described at . the documentation function makes one property to be dependent from others. calc .calc( , 'fullName**'**, ['firstName', 'lastName'], (firstName, lastName) { `${firstName} ${lastName}`}); Matreshka object => return .firstName = 'Brendan'; .lastName = 'Eich';_// …_console.log( .fullName); object object object // “Brendan Eich” When a source property is changed ( or ) then the target property ( ) is recalculated. firstName lastName fullName and makes possible to define long chains of dependencies: a property is dependent on an element , a property is dependent on the property , a property is dependent on elements and and also on property . As the result a change of the property also changes , , and so on… calc bindNode a e1 b a c e2 e3 b b e1 e2 e3 You can imagine such dependencies as a an Excell table. Every moment of time you think about one formula but not about multitudinous dependencies of all cells. As the result, you get less bugs because it’s not obligatory to keep all the “table” (application) logic in you mind. At the you’ll find more information about . documentation calc function listens for events and function fires them. on trigger .on( , 'something', () => {alert('something is happened')}); Matreshka object .trigger( , 'something'); Matreshka object function can listen for property change event to execute custom code. In this way you can add another thing to the dependencies chain (for example fetch request). on { on } = ; const Matreshka on( , 'change:fullName', () => { fetch('/api/name', { method: 'post', body: this.fullName });// …}); object async await Events at Matreshka.js is wide and interesting topic. With them it’s possible to listen for delegated events of an object (e. g. listen for changes deep inside object tree), DOM events, delegated DOM events etc. You can read about them at article. “The events” function adds runtime validation and conversion of a property values. For example, you can define a property of definite type, you can limit the property to a specified range, you can throw an exception if needed. mediate .mediate(object, 'x', x => String(x));object.x = 42;console.log(object.x, object.x); Matreshka typeof // “42”, “string” Classes class instances have the same set of methods with one difference: is used instead of an object argument. Matreshka this {constructor() { (); .bindNode('fullName', '.full-name'); .calc('fullName', ['firstName', 'lastName'],(firstName, lastName) => `${firstName} ${lastName}`); }} class User extends Matreshka super this this // also chained call can be used there:// super().bindNode(...).calc(...); This class unites classes and described below making them to have a common method set. Matreshka.Object Matreshka.Array Class is responsible for key-value type of data. In Matreshka.js terms “data” means properties that a developer might want to send to a server or store at local DB. Thus, the framework need to know which properties are responsible for data (e. g. user name) and which are responsible for temporary application state (e. g. is DOM element hidden or not). Such properties are defined by method. Matreshka.Object addDataKeys . {constructor() { (); .firstName = 'Brendan'; .lastName = 'Eich'; .language = 'JavaScript'; .addDataKeys(['firstName', 'lastName']); class User extends Matreshka Object super this this this this _// '{“firstName”: “Brendan”, “lastName”: “Eich”}'_   
console.log(**JSON**.stringify(**this**)); }} More detailed about the class you can read . Matreshka.Object there is responsible for array-like collections at the framework. In addition to the methods inherited from , instances of include all the methods from native Array (push, splice, map, reduce…). Matreshka.Array Matreshka Matreshka.Array Similar to Backbone.Collection, you can define a “model” ( property). The difference is that it can be any JavaScript class. Model . {get () { ; }constructor() { (); .push({ firstName: 'Brendan', lastName: 'Eich' });console.log( [0] instanceof ); }} class Users extends Matreshka Array Model return User super this this User // true A collection can be automatically rendered when its items are changed. To do this, you need to set where to insert newly created DOM elements and how to render them. To set a place where the elements should be rendered you need to bind the container element to or property (the difference is described at the documentation). To declare how to render DOM elements you should define virtual method (or for class). sandbox container itemRenderer renderer Model . {itemRenderer(){return '<div>Hello, world!</div>'} class Foo extends Matreshka Array constructor() { (); .bindNode('sandbox', '.sandbox-node'); .push({});}} super this // inserts <div>Hello, world!</div> to .sandbox-node this You can read more detailed about the class. there Matreshka.Array All functions and classes can be imported as CJS/ES2015 module. calc 'matreshka/calc'; MatreshkaArray 'matreshka/array'; import from import from Routing A library called is responsible for the routing. It binds properties to parts of a page address. matreshka-router .initRouter( , ‘ ’); . = 'foo'; . = 'bar'; . = 'baz'; Matreshka object /a/b/c/ object a object b object c // makes location.hash to be #!/foo/bar/baz/ Conclusion Matreshka.js fills the gap between a junior and a senior and allows to write modular and extensible applications at the beginning of web developer’s career. Everything you need to know to get started is JavaScript.

Chain

Fetch

Super

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Matreshka.js 2 — tl;dr

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Andrey Gubanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Matreshka.js 2 — tl;dr

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Andrey Gubanov

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES