Taiga UI: A year in Open Source
Tags: angular, opensource, typescript, javascript
Published: 2021-12-24 13:28:19

[Taiga UI](https://taiga-ui.dev) is a huge Angular components library. We at [Tinkoff](https://www.tinkoff.ru/eng) were developing it closed-source for a couple of years before finally going public with a second major version. It’s been a year since our open source release and today I want to look back at this part of our journey and lay down some plans for 2022. Let’s go!

# Open source

Over this time the community started to build up. One benefit for going [open source on GitHub](https://github.com/TinkoffCreditSystems/taiga-ui) is contribution made simpler even for colleagues from different projects. The environment is familiar, no extra authentication or VPN required and the pipeline is clear. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54ae293y2mv6yqvz1671.png)

We also spent quite some time to improve our processes utilizing many different tools to help us ship new versions safer and faster. 

Taiga UI is a monorepo that includes several libraries and a demo application that we deploy using GitHub Pages. Now it is managed by [NX tools](https://nx.dev/) that provide a lot of useful commands and increase speed of building and testing at both local development and CI/CD pipelines. If you plan on working with monorepos you should definitely try NX!

Whenever a Pull Request is created we need to be able to quickly checkout the changes. Reading code diff is great, but sometimes you just need to tinker with the new version, test it on mobile, different browsers and OS. Cloud services are perfect for this case, they allow you to deploy the code temporarily and access it with a link from any device. We chose [Firebase](https://firebase.google.com/) to host it for us and a Github action posts a link to the deployment as a comment in the Pull Request. It works like a charm and speeds up code reviews a lot. Read [this article](https://firebase.google.com/docs/hosting/github-integration) to set it up on your repository!

Moreover, every PR runs a set of [Cypress](https://www.cypress.io/) screenshot tests that iterates over the demo portal and compares current components with their reference from the main branch. Cypress has a commercial solution where you can easily access failed screenshots through a dashboard. But we created a little [Github bot](https://github.com/TinkoffCreditSystems/argus) that stores failed screenshots in a temporary branch and posts them to the PR as a comment, updating it on every push. This makes identifying problems with the UI library fast and easy. We opensourced this bot so you can use it too, read [this article](https://medium.com/its-tinkoff/bots-should-work-developers-should-think-writing-github-app-with-node-js-2e8eb049d7e4) going over it in detail!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/delq3c2gp2joqbe69yaj.png)

There’s also a [husky](https://github.com/typicode/husky) precommit hook with [ESlint](https://github.com/eslint/eslint) and [Prettier](https://github.com/prettier/prettier) fixing and formatting changed code on every commit with [lint-staged](https://github.com/okonet/lint-staged) which makes sure malformed code doesn't even make it to the Pull Request. Combined with [standard-version](https://github.com/conventional-changelog/standard-version) and strict commit messages it makes releasing and changelog generation a breeze. For a contributor the workflow is as smooth as:

fork → npm ci → npm start → code → commit → push

# What’s new?

When 2.0 went public it already was pretty big. But over the course of 2021 we added and improved a lot of things. With ideas and help from the community we significantly expanded customization and localization capabilities. This would be very helpful for our own international projects too. Taiga UI today has over 10 languages for built-in texts, RTL support for most of the components and various formats for money and dates. We also provide “ng add” schematic to get you started smoothly with Taiga UI. Let’s look at the most notable additions to our 150+ components base this year!

## New components

**[Sheet](https://taiga-ui.dev/components/sheet)** — mobile sliding dialog


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmrmtd9tqoyi7j1qgtnp.png)

**[Tree](https://taiga-ui.dev/components/tree)** — a flexible component to display tree-like data structures


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmdc5346q5tefw14kiif.png)

**[PdfViewer](https://taiga-ui.dev/components/pdf-viewer)** — a custom dialog to preview PDFs in iframe


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpnrss9fhyq5bjayazgi.png)

**[Carousel](https://taiga-ui.dev/components/carousel)** — a common UI pattern for slider of images


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1rmy7sguc6tpi29uiwj.png)

**[ArcChart](https://taiga-ui.dev/components/arc-chart)** — a new way to display numerical data


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2xr0u9vmcpm9ic5j335.png)

## New add-on packages

**[Table](https://taiga-ui.dev/components/table)** — an interactive table component and related utilities

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlyh5dfe2wz4jqtd9rp5.png)

**[Editor](https://taiga-ui.dev/components/editor-new)** — a rich text editor based on [tiptap 2](https://tiptap.dev/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k09jqb9rzbm2bbeldjt7.png)

**[Preview](https://taiga-ui.dev/components/preview)** — a custom dialog to preview aribtrary content such as images and documents

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0alvb5kmnig0f8nx893.png)

We’ve also added a bunch of helpful utils, tokens, services and directives, such as Pan, Swipe, DropdownHover and more and a night theme for all components:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khkbdzh9ei1jy0h9jy06.png)

# What’s coming?

It was a productive year. We’ve grown a lot in infratructure and content, we started to build community of users, most notably from cryptocurrency area as it seems from the screenshots that come with user questions 🙂 In the coming year we plan to exapand our localization and internationalization options so that developers from across the globe can enjoy Taiga UI and use it in whatever project they are working on. Here’s a brief overview of what we plan to focus on in 2022:



* Improve and stabilize new Editor add-on package
* Make all native inputs accessible from the outside of Taiga UI controls so it’s easy to assign attributes and listen to native events
* Rework some of our internals to rely more on CSS and less on JavaScript which would reduce change detection cycles
* Utilize DI more for customization
* Drop dependency on global styles
* Create ComponentHarnesses for Taiga UI components so they can be easily tested
* Support different implementations of notifications, like we do now for dialogs
* Reduce tech debt such as old components waiting for refactor and outdated mask library
* Prepare for the next major release with Angular 13 and Ivy distribution

I hope you’re happy with Taiga UI and if you didn’t try it — please give it a shot! Feel free to open [GitHub discussion](https://github.com/TinkoffCreditSystems/taiga-ui/discussions) or contact us over at [Angular Discord](https://discord.gg/zrB2EdJjEy). For Russian speaking users we have a [Telegram chat](https://t.me/taiga_ui). Our issues list is open for feature requests and bug reports. And it also always has [some things for you to try and solve](https://github.com/TinkoffCreditSystems/taiga-ui/issues?q=is%3Aissue+is%3Aopen+label%3A%22contributions+welcome%22) if you want to contribute! Merry Christmas and an awesome New Year to you all! 🎄