“The notion that this framework is outdated is wrong”: Andrey Gritsevich (Solar Security) about Ext JS

In the online broadcast of our conference HolyJS, we approached the sponsors' stands and asked them about JavaScript development. At the Solar Security stand, Andrei gritsev Gritsevich (head of Solar Dozor solution development) told us about the Ext JS framework used - and we thought that his words might be interesting not only to viewers of the broadcast, but also to Habr's readers who did not work with this framework. Therefore, we have deciphered this dialogue and, after editing a little, we publish it here.



“Not everyone knows Solar Security, so the introductory question is: what does the company do, and in which products do you use JavaScript?”



- Our company is a Russian software vendor and service provider in the field of information security. Of all the range of our products for JavaScript developers, two are probably interesting: the IGA platform Solar inRights and the DLP system Solar Dozor.

')

- And what exactly are they interesting from the point of view of JavaScript, what is inside?



- The interface of these products is built on the Ext JS JS framework. Probably, the younger generation is now a bit twisted, because the community has an idea that this framework is outdated. But actually it is not. It is very actively developing, and in my opinion, it is ideally suited for a complex interface that an enterprise needs.



Its advantage is that it offers a large component base, which virtually eliminates the need to write components on its own. We take grids and tables in a ready-made form, and then partially customize them. This significantly speeds up development.



The same applies to a very convenient themeization - customers often want to customize the visual interface solution, and Ext JS allows you to quickly and easily modify existing products to their requirements.



- I want more details: is there, for example, some embedded graphics?



- Of course. In my opinion, a few years ago Sencha (owners of the Ext JS code) bought the Raphaël library, and now the graphics in Ext JS are among the most sophisticated in the industry. It is possible to generate them in both Canvas and SVG; there are three-dimensional graphs, there are bars, line graphs, approximation - that is, almost everything that may be required. Although our designers manage to come up with things that are not even there. But there is a class system. You are inherited, change those things that are necessary for you: renderers of curves and points, colors, gradients, tooltips. If you and this is not enough, you can attach D3.js.



- Concerning the “outdated” Ext JS: how long have you been using it, and how much has it changed during this time?



- We have been using for 6-7 years, approximately from 2010. We started with the third version of Ext JS, now the sixth. Everything has changed very much, the third version was actually a class system of Java-like style, then in the fourth version the MVC model appeared. The fifth and sixth versions are already full-fledged MVVM and a combination of frameworks for a mobile application and for desktop browsers.

The latest version has bidirectional binders, View models, native support for ECMAScript 6, its own build system, which allows you to build an application with one command — all CSS, resources, S CCS, and so on.



If you need to create a new application, you can generate the backbone of it in a minute or two, start with the basic theme and in one day distribute a prototype or even a working system consisting of some number of grids, panels, tables. In a day or two or three, you can prototype a fairly complex system, quickly write a backend, for example, on Node, and go with this prototype to a customer or investor.



- From what appeared lately - was there something

the most critical for you, after which you realize that it becomes more convenient for you

live?



- I would call binding. In Ext JS, each component is a separate class, a separate file. And bidirectional binding allows you to write these components, as a rule, in a declarative style. There is no need to write data handler functions, you simply create links in a template form - very clearly and very briefly. Building connections between components has become so convenient that it has already passed from the programming category to the design level.



You simply draw in your head a system of components from connections, layouting. All these interrelations occupy very little space in the code. And then look at this code and attract other developers to support becomes noticeably easier. If we are talking about some kind of basic functionality, the class takes literally 15 lines of code - and this is a complete component, for example, a table.



At this conference we were approached by participants who had experience with Ext JS, and there were not so few of them - 20-30 people. Of these, 80% percent worked fully with Ext JS, that is, a year and a half, and they are very pleased with this framework. For their tasks, to build enterprise systems, this is a very cool thing.





view full size



- As far as we understand, you are making applications for a “large enterprise.” You have already mentioned customization, and large customers usually have high requirements for it. How exactly does Ext JS help with this?



- This is a very good question, I hope, sooner or later it will be the subject of a separate report. We have several examples of using this type of thing. For example, Solar inRights has a kernel, which is a completely complete, separately working product. And there is a large customer, for which you need not only to customize colors and logos, but also to change the functionality, to add or remove a column somewhere, to create some new window, to change the login system.



In Ext JS there is such a package system - a bundle of code and class, CSS resources, such a full-fledged mini-application, and there is an inheritance of these packages. You simply take the core package of the kernel, take a special application, a separate package for this new product, inherit the base and locally, point changes functions, colors - whatever you want. Since Solar inRights is divided into many small components, small classes, it is possible to change only those of them that are needed by the customer. During the assembly, Sencha Cmd (a special command line utility that collects the whole thing) passes these dependencies and collects the solution that is necessary for a specific customer.



The advantages of this model are obvious: you can develop the kernel and automatically update it at the customer, without losing customization.



- And what if you don’t need to “make several versions for different clients to one application”, but “make the same features to several applications”?



- There is a separate theme engine - this is such a special package, in which there are S CSS, variables, resources. You inherit from the basic theme, change the basic variables (there are 10-15 of them there) and get a completely different topic. Naturally, you then complicate things, change indents and backgrounds, transparency and so on - it all depends on your imagination. And this topic can be attached to any Ext-application, which is very convenient.



There was one case: our main theme was dark, and the customer wanted a light one, and in two weeks, changing the background, backgrounds and colors of the buttons, we made a bright theme, the customer was satisfied.



- How does the production of an application written in Ext JS occur? Do you start with some design layouts?



- Our Solar Dozor DLP product as a whole is about 17 years old, and its earlier versions were also written in Ext JS, but in an older one. Then, no designer or analyst participated in the development of the interface of this product. I may say a seditious thing, but this is very bad. We, the developers, after all, the brain is a little differently turned, we do not think like ordinary people. It seems to us obvious that here you need to make a checkbox, and here - a button. But, unfortunately or fortunately, users think differently, and therefore it is necessary to hire designers and usability specialists in the team.



Therefore, when it came to the realization that even for an enterprise product, a good and thoughtful interface was needed, a team of very serious analysts, a design team were recruited, and they, together with the developers, re-created the product for about a year, drew designs, thought through usability.

Now we are coming to conferences in Arab countries, showing the interface of our product, and people are delightedly saying “how can this be,” they ask if we come from America, from California, and what we wrote all about. Even my wife, when I work at home, passing by, involuntarily stops, looks at the interface and says: "What good fellows you are."



And the process is this: we have business requirements, our system analysts have them

analyze and communicate with the designer, he draws layouts using the generated Style Guide, and then we, the developers, just take

it is in work and realizable. We have feedback from the designer - he

checks what we did. Of course, it is not always the first time everything is fine,

but this is a standard workflow. Over time, we learned to quickly do what

what the designer wants, i.e. so that everything in the product is comfortable and understandable.



- Thank you, Andrei!



- Thank you! We will begin to change the preconceptions of developers that Ext JS is an outdated framework. It is modern and very cool!