(Archive) Matreshka.js - the long-awaited implementation of TodoMVC

    Matreshka.js v0.1
    Matreshka.js v0.2
    Implementation of TodoMVC

    Website Matryoshka
    Github repository .

    Hello! In this short post, I present to the public for a long-awaited implementation of "Hello, world on steroids" - TodoMVC based on the Matryoshka framework.

    Let me remind you that one of Matryoshka’s ideas is the convenient linking of data and HTML elements using simple functions, which has the following advantages over solving the same problem in other frameworks:

    1.No logic in the HTML code. As a person with trepidation about JavaScript and HTML, I would like the programming language to remain the programming language, I am the markup language - the markup language.
    2. No need to separately listen to data events in order to update the UI, and listen to UI events in order to update the data. This allows you to avoid errors, such as "forgot to hang the handler," since you do not have to store several entities in your head at once. You set the rules for how data is synchronized with the view, and then you work exclusively with data.

    this.bindNode( 'x', 'select.my-select' );

    TodoMVC is a reference application that includes the most common and "inconvenient" tasks, which has a specification and which is designed to help the programmer choose the framework they like. The site of the same name contains a list of application implementations using the most popular frameworks. On github of the project - more (labs folder).

    You can see the implementation of the application based on Matryoshka here . And on this link - the source code with annotations. For those who prefer Russian to English, I ask here .

    The application, as you can see, consists of three files:
    app.js - initialization of global variables (required by TodoMVC specification) and the application.
    todos.js - the application itself (to-do list) and a collection of these to-do items. It includes the main part of the application logic and the reaction of the interface. There you can see a special overridable method itemRendererthat returns the HTML node (or HTML string), which is the HTML node of the model. Let me remind you that you can change the array: add, delete elements, sort (using the methods borrowed from Array.prototype), the UI will react independently, without the intervention of the developer.
    todo.js - collection item (to-do item).

    Pay attention to several features of the implementation:

    1. Almost all the logic responsible for the appearance is in the bindings. HTML code is almost untouched, except for connecting scripts and outputting one template in a separate tag.
    2.Minimum Entities. In fact, there are two classes: the class responsible for the collection (Todos) and the class responsible for the model (Todo). Here they may object to me, they say, but what about the design patterns, and they will be right: Matryoshka does not dictate the requirements for using MVC, which, in my opinion, is often redundant. A question of ideology and approach: I am impressed by the idea that all the logic responsible for a certain widget is in one single file. If the widget consists of other widgets, their logic is also completely output to JS files. Splitting a widget into several entities seems uncomfortable to me. Although ... if you think about it, you can say that Model is the application data, View is the HTML code, Controller is the bindings. If you really want to, you can separate Model and Controller (or, more precisely, ViewModel), placing them in two separate files and link them with dependencies.
    3. A minimum of abstractions. There is no annoying “smart” code, only code that does what it is supposed to do (a stone in the garden of the JavaScriptMVC framework).
    4. Minimum code: take a look for yourself, due to the lack of excessive abstraction, the code is really not enough.
    (Here was a text saying that more than 90% of the code is understandable to people who are not familiar with the framework, but I found this dishonest and put it to the poll)

    In conclusion, I want to say that I do not think other frameworks are bad. Angular, for example, is very good, but the implementation of the MVVM pattern, which migrated from the .NET environment to the web, seems to me superfluous. This question, of course, is controversial, and whether it is good or bad, you decide. Another Backbone question: with it, the HTML code remains the HTML code. But its API does not suit me, and the terminology seems strange (well, how could the controller be called “View”?).

    I will be objective. Matryoshka is an alternative framework, but it is constantly evolving. All functionality is overtaken in practice, excess functionality that has not passed subjective tests "in battle" is thrown out, not having time to get into the release and documentation. Today, Matryoshka’s task is to get rid of the word “alternative,” which I’m going to do in the near future.

    Good to all. I hope for constructive criticism in the comments.

    Only registered users can participate in the survey. Please come in.

    Is the code presented in the TodoMVC implementation clear?

    • 18.8% Yes, everything is clear 17
    • 37.7% In general, it is understandable, but some places have remained beyond the scope of understanding 34
    • 20% So-so: I understood something, but for the most part - no 18
    • 23.3% didn't understand anything 21

    Is logic acceptable in HTML code?

    • 19.1% Yes, that's fine 28
    • 41% Controversial issue, but generally acceptable 60
    • 39.7% This is wrong, you can’t do this 58

    Is Matryoshka theme interesting? In your opinion, is it worth writing more detailed articles?

    • 31.1% Yes, I'm very interested 43
    • 30.4% Yes, I'm curious 42
    • 25.3% I don't care 35
    • 13% No, stop it! 18

    Also popular now: