Barsukov NikitaThe year 2022 was extremely fruitful for our Taiga UI team and, what is more important, we picked up tiger speed in terms of updates and improvements of the library. Within this article, I would like to develop a habit of annual reports about the progress, which might be handy for us to recollect all achievements and failures in order to adjust our strategy for the upcoming years.
If you aren’t acquainted with Taiga and randomly stumbled upon this text, let me introduce Taiga UI — a powerful set of components for Angular, which is used in dozens of Tinkoff’s products and projects! In the following sections I will briefly unpack the overall achievements related to this multifaceted library.
One more year in Open Source
The development of the library has been going on for several years, two of which are in Open Source. We are happy to share our product with the community, and the source code is publically available. Despite the naming, we do not want to be the only people in our forest, hence we eagerly invite everyone else to join the development of the UI Kit!
Alex Inkin has already summed up the project’s results for the first year in Open Source. He described how we organized all processes so that the community could easily contribute to our project. Read more details about our last year's achievements in the article:
The Taiga UI library has a core team that hones and polishes the project's codebase. However, an impressive amount of the improvements come from external contributors. By the end of 2022, their number exceeded a hundred people! Our library is used by a variety of companies from various countries: most oftenly documentation is accessed from Russia, Vietnam, Belarus, USA, India and France. The geography of our users is pretty impressive!
In 2022, external contributors opened over two hundred Pull Requests, which is ~ 15% of all opened PRs for the entire year. Thank you very much to all our contributors for such an active participation in the project!
In October, it was a time for an international online festival devoted to Open Source — Hacktoberfest. Obviously, to stay in the loop and showcase our offspring, the team prepared Taiga UI for participation in this event.
One more major release
In the last days of summer, we introduced the third major release of the library.
We tried to postpone the introduction of breaking changes to our components as much as possible in order to cause little hassle to Taiga UI users. When there was a need to refactor the code and somehow change the public API of the components, we always keeped backward compatibility with the old interfaces.
Long-term efforts to maintain backward compatibility of the product have their costs — there is more and more legacy code, which increases the bundle of product applications. Another reason why breaking changes cannot be avoided is that it is getting harder to maintain the code with every new day. Sooner or later the moment of great changes comes.
More than a year and a half has passed since the last major release 2.0, and we decided that the moment had come. We were preparing the new release for the whole summer. The list of changes within the new version is enormous, and not to kill the vibe of the article, I will highlight the most curious ones:
Angular update. The Angular framework has a rule: if a library is published under any of the older versions of Angular, then it can be used in applications with more modern versions of the framework without problems. But not vice versa! If the library was published under a modern version of Angular (for example, 14.x.x), then it will no longer be possible to use it in applications with an older version of the framework (in our example, this is 13.x.x and less).
In Tinkoff, a plethora of projects use Taiga UI. Some of them use only the most modern versions of all technologies. However, there are some projects with a lower priority which can’t be updated so frequently and don’t use the most up-to-date versions of Angular.
Therefore, we were postponing the increasing the threshold of the minimum supported version of Angular and all this time Taiga UI used the 9th-version and published with the ViewEngine legacy engine. But in 3.0, we bumped Angular to the 12th version and also began publishing using the modern Ivy engine! Now users of our library can finally experience all the benefits of a modern engine.
Dropped support for ancient browsers. Every front-end developer knows what a great feeling that is! We already weren’t supporting Internet Explorer for a long time, but now it's time for those versions of Edge that are based on the ancient EdgeHTML engine. Maintenance for these browsers was extremely cumbersome, so it was more efficient to cut them off, than to keep them alive, and moreover, the demand for these browsers wasn’t there — the number of users is measured in tenths of a percent.
In addition, we bumped the minimum threshold for support for the problematic Safari browser — now it's 12.1+. If the benefit of these solutions is obvious to Taiga UI developers, is it good for our library users?
Definitely yes. Now during development we can use modern browser capabilities, introduce less extra code as polyfills, and drop many different workarounds from the code that existed only for outdated browsers. Our code occupies less storage and is much more stable!
Global styles have become optional. In the third version of Taiga UI, all global styles were moved into a separate package and became optional in usage. Taiga UI has become even more flexible!
Huge component refactoring. The new major release provides us with an opportunity to discard a large number of legacy components’ API and introduce a new one.
In 3.0, many old components got a fresh appearance — after refactoring they became more convenient to use and easier to maintain. The most remarkable examples are the Editor, InputFiles, all components with dropdowns and hints, and all components with sliders. You can read more about the latter in the article:
Migration schematics. The process of updating major versions of any dependencies is always a big headache for product teams. Firstly, developers need to figure out what needs to be changed in the code. Moreover, such updates require a complete regression of applications.
We desire that all teams migrate to up-to-date versions as soon as possible, so we paid great attention to the migration schematics to eliminate at least some of their concerns. Developer who has the second version of Taiga UI in their application just need to write ng update @taiga-ui/cdk in the console to update all Taiga UI packages to the third version. It will solve most of the breaking changes. Such schematic scripts automatically go through all HTML, TypeScript and style project files, find outdated API in it and replace it with a new alternative.
If you want to know more details about this major release, visit the page with its Changelog.
More outstanding features
Beside the new major release, our Taiga UI has been permanently improving. During the whole year, more than 500 issues and more than 1500 Pull Requests have been closed. The tasks were rather all over the place, I will tell you about the main directions.
Localization. Internationalization and localization of our libraries are very important to us. From the very get-go, Taiga UI has supported several languages, and thanks to the active help of the community, support has expanded to 13 languages by the end of 2022. For the convenience of their dynamic switching at runtime, we have added some utilities. Nevertheless, translation only is not enough, countries have much more distinctive features.
At the end of 2021, we set goals to expand the i18n of the product and added support for rtl‑languages for most inputs. Hands down, it wasn’t enough for us, so we continued to expand our localization capabilities in 2022. Now users of our library can set the desired date format, the first day of week (Sunday, Monday, or another day), which days in the calendar should be marked as holidays/weekends, the format for displaying numbers, and other important little things – the devil is in the details, and Taiga UI is all about nuances and tiny aspects!
More component customization. Many people love Angular for its flexible and convenient implementation of the Dependency Injection pattern. We try to use all power of DI in Taiga UI. We use Injection Tokens to customize the default behavior for the majority of our components. Such tokens have a naming consisting of the name of the component + the OPTIONS postfix (for example, TUI_EDITOR_OPTIONS). In 2022, the list of such available tokens has expanded significantly.
Projecting native outputs inside components. In early 2022, we added the ability to project native inputs via <ng-content /> inside Taiga UI input components. The concept is described in more detail in the "Best practices" section of the official Angular documentation.
Let's see an example. Previously, to create an Input with a placeholder and a specific type, you had to use this code:
<tui-input
formControlName="email"
tuiTextfieldType="email"
tuiTextfieldExampleText="mail@mail.ru"
>
Type an email
</tui-input>
And now you can do it like this:
<tui-input formControlName="email">
Type an email
<input
tuiTextfield
placeholder="mail@mail.ru"
type="email"
/>
</tui-input>
Now users can set any available attribute on input and listen to any native event! For the user of our library, everything has become even more transparent. No more need to remember the names of our custom directives and find out which native attributes they map to. All this allowed us to drop a lot of unnecessary code from the TextfieldController.
Custom notifications. We have significantly refactored services for displaying notifications. Now the created abstractions make it easy to create custom notifications and use several types of notifications in the same project. The new Push component is a good demonstration of this new feature.
Improvements for Editor. All year we have been improving our new WYSIWYG, which is based on Tiptap's Open Source solution. Here is a full list of new useful extensions:
- Accordion support. Now you can add collapsible content.
- We added tools to create and edit anchor links.
- Users can now create nested groups/blocks. And also make them draggable.
- Our editor has image support: the user can upload an image, resize it, and control its position in the text. And now it is possible to add previews of uploaded images.
- Dark Mode support.
- Stabilization of editing tables.
Component Harnesses. With the help of the community, we began to actively develop a package for testing components with Harness. The first release of this package happened at the end of December.
Improving processes and DX. In addition to permanently improving the codebase, we are also trying to improve the process of its development. It is important for us that all members of the core team and all external contributors have a high level of Developer Experience. After all, the more comfortable the conditions for the developer, the faster the delivery of new features. In 2022, we achieved new successes in this direction:
- We changed the test framework for unit testing: from Jasmine + Karma to Jest. Now it takes only a few seconds to prepare the test environment before running tests. Moreover, the failed tests generate more comprehensive reports. For integration and screenshot testing, we use the 11th version of Cypress, which allows us to test our components using the real DOM.
- We solved the problem of long execution of tests. We have splitted all tests into many separate parallel Github-jobs: now, when opening a PR, 14 jobs with Cypress tests and 12 jobs with unit tests are launched.
- We use the npm 8 features and workspaces.
- We began to actively use Github Projects for planning and tracking tasks.
- We added BundleMon and Codecov bots that allow you to control changes of the packages’ bundle-size and the code coverage by tests.
Stackblitz workflow. At the end of the year, we added the integration of our repository with a new feature from the StackBlitz team - Codeflow. Now our external contributors do not need to have a powerful computer with a pre-installed IDE. Now the developer can just click on the button from our root README:
And inside the browser an online IDE will be opened where you can serve demo application and open new PR. Now it becomes easier to contribute to Taiga UI!
Wrapping up
The year was rather challenging, but the Taiga UI team continues to develop the product. For the last several years we have achieved significant results, and much more is to come! It should be noted that the success of the library is partly attributed to the community, so, once again, thanks a lot for joining us in this adventure across the dense forest of Taiga!
If you still did not get aboard, we can ensure you that by choosing our library for your projects, you will get a convenient and modern UI Kit with the confidence that support and development will not suddenly stop, not only because Taiga UI is actively used in hundreds of products of our company, but also because we do care about the faith of project and its community.
Do you want to try it? Just write in console and enter the Taiga UI:
ng add taiga-ui
See you there!
