Introducing the right-angled library, grid constructor for angular2



    Today we want to talk about how we decided to pay the debt to the open source community and created the right-angled library . Just yesterday, we transferred it to beta status and decided to share this great news with the Habrasociety with the very first.

    What makes right-angled


    First of all, this library is intended for building grids (aka lists, aka tables) in applications on angular 2 .

    Secondly, this is a very advanced selection model. Working not necessarily in conjunction with grids. This is just selection. Anything you want.

    Another (not yet fully formed) idea is the declarative setting of component properties for:

    • conservation
    • recovery
    • reset to default
    • sending in server request parameters

    without writing code manually.

    Is it free?


    Yes, right-angled is licensed under MIT. The source code of the library is available on github .

    We also posted a demo application on github-pages that describes in detail the features of the library with live demos and code samples. If you suddenly want to look at the source code for a demo application, they are here .

    Why did we make “another grid library”?


    When we selected the available grid libraries for angular 2 for work, we came to the conclusion that they are too “heavy” and complicated. For example, a simple grid template with a typical grid library for angular 2 looks something like this:


    This template has too little HTML and too much “library of grids”. Many components, many settings, too much to remember.

    This complexity seemed to us unnecessary with a modern approach to development. And we decided to try to do something more lightweight and enjoyable.

    Also, the consequence of the first drawback is the second - layout, which similar components generate.

    Grid is a rather complicated control. And the HTML generated by such components does not always look good when embedded in the final application. Not to mention that this HTML can just be frankly bad.

    The opposite extreme is universal markup, which takes into account all possible options, but such markup is not always quickly drawn and it is always difficult to style. You can spend many hours styling, and the grid will still look like “not native” in your design.

    A simple styling, by the way, is one of the most important points, since “cloned” bootstrap-style sites have not satisfied customers for a long time. And each new project is often a new, unique design.

    Having comprehended all of the above, we decided to create our own library, and lay the following principles in it:

    1. Minimum components


    The library should contain a minimum of components and be embedded in the layout of the final application, and not generate its own. The same goes for styles - right-angled does not contain any css and the look of your application is entirely up to you.

    The following is an example of a simple list template. As you can see, this is a common layout using bootstrap (its use is not necessary, it is taken just for example) and very few custom directives.

    IdNamePrice in USDIs Discounted
    {{item.Id}}{{item.Name}}{{item.Price}}

    Such a template looks quite simple, because we did not add such concepts as “row”, “column”, “viewing template”, “editing template”, and others that are so familiar to grid libraries to our library. Similar abstractions (and with them the components) are often added to grid libraries. But, in our opinion, they are redundant and introduce unnecessary complexity.

    2. Simple functionality


    So that the “minimum of components” does not turn into the “minimum of functionality”, we have equipped the library with a set of functional services. The components of the library itself are based on them and the user can embed them into their components using Dependency Injection to implement the desired behavior on their own.

    If you make individual components lazily, then access to these services can be obtained directly in the template, referring to the host directives. There are four such directives - rtList with list functionality, rtSelectionArea with selection functionality and the rt-buffered-pager and rt-pager-pager components for working with paging.

    For example, instead of a ready-made pager with a bunch of options, we managed with primitive wrapper components and a couple of auxiliary directives. And they made a detailed example that helps the library user to implement their own fully functional pager.

    Below you can see the code for the list template from the final example in the quick tour of our application. Added to it:

    • selection
    • sorting
    • filters
    • buttons for loading data / canceling a request / resetting parameters
    • paging mentioned above
    • serializing list state in query string

    In this template, we just turn to services in the “lazy” way described above - directly in the template.

    The template turned out to be chubby, but a lot of functionality was added. And this is still pretty clean, stylized HTML, which in addition is very easy to break down into compact and reusable components (this was not done in the demo application for ease of perception of the example).

    IATAAirport nameCountry
    {{airport.iataCode}}{{airport.name}}{{airport.countryName}}

    Surely not everything in this template looks clear. But in order to keep the article compact, we did not copy here the description of the functionality from the demo application, so all the explanations can be found in it .

    3. Minimum dependencies


    right-angled is independent of libraries like bootstrap, jquery, jquery UI, etc. These libraries are certainly good and useful, but the decision to use them is best made by the end user of the library. And with the implementation of grids, it is quite possible to do without them.

    The only dependency, in addition to angular, is the e2e4 library that we wrote , which delivers service frameworks abstract from concrete presentation to implement all the functionality.

    e2e4, in turn, has no dependencies at all. But, if you are working in a browser that does not support es6, then you will need some kind of es6 polyfill. For example, es6 shim or core js . However, shim is already needed for angular to work.

    Further plan


    Just yesterday, we transferred the library to beta status, so there is still a lot of work. Immediate plans are as follows:

    1. Stabilize the library and release it to release.
    2. Translate the demo application into English and compile full documentation with the further withdrawal of the library to the world community.
    3. To finalize the demo application, having pulled out all the features of our library, as a couple of features are still hidden.

    We also want to ask the community to


    If you notice a mistake or you find something incomprehensible, please write to us about it. This is especially true for the demo application. We are well aware that writing good, intelligible documentation is real skill that we do not yet master perfectly.

    In addition to creating an issue on github, you can contact the author of the article and the main developer of the library right here on Habré. You can also subscribe to twitter on your right-angled account , in which we will publish news about our library.

    We say goodbye to this. Thank you for attention :)

    Also popular now: