“Getting Ready to Switch to Angular 4”: Tinkoff.ru on JS Development

As you know, Tinkoff.ru clients see before themselves not a bank branch, but the interface of a site or a mobile application - so these two things are especially important for a company. We have already asked about mobile development recently . And now, on the eve of the HolyJS conference, where Tinkoff.ru developer Alexei Nosov will give a presentation, they asked questions about the JS / frontend: both Alexey himself and Olga Shpuntenko, the HR project manager of the company .

Alexey Nosov

- Introductory question: what are you working on in the company?

- I am involved in remote customer service projects. Although I have internal customers, we are strategically involved in improving the quality of our service. For example, a certain number of wishes from customers for a specific user story are accumulated, and they do not get backlogged, but are executed quite quickly. We do not always optimize our existing projects within the framework of the product, but as part of customer service, we influence the conversion.

- A year ago, under the habrapost “How we are developing a new Tinkoff.ru frontend,” you could read that the company does not feel the need for Redux, and now you can see its references in your vacancies. Has the situation changed in a year?

- When we started, Redux was in its infancy, it is not clear where and how it would develop. We are now using Flux, it is much more suited to our architecture requirements. However, this does not stop us from taking useful stuff from Redux. In vacancies, we write about Redux, because the experience of using it is an indicator for us: the candidate understands something about the modern application architecture, how to manage the data flows of React / Redux applications, and, therefore, will quickly figure out our architecture.

- Both the bank as a whole and you personally use RxJS - can you tell us more? Why did you initially feel the need for it? Faced with pitfalls?

- We had a problem with taipings for specific Rx classes used in testing. RxJS itself is quite heavy, but if you choose the right build, then the weight can be reduced. In general, RxJS is a library that allows you to work with asynchronous data streams, which can be considered as arrays and implement the reactive programming paradigm for interconnecting application components that generate and consume these events. Using Rx, you can implement complex logic in a few lines using pure functions, getting rid of possible side-effects and problems at the debugging stage.

At Tinkoff for Business, we use RxJS everywhere. You can google the benefits - at a minimum, it’s convenient data binding, one way data flow, which allows you not to get confused with the direction of the data. We felt the need for RxJS when it became difficult to maintain old applications on the first Angular using promises and emitters that were loosely coupled and that could be forgotten. When we rewrote our messenger on Angular 2 and RxJS, productivity immediately improved, support became easier. There are no pitfalls, but, of course, there is a threshold for entry - you need to restructure your thinking (the so-called data streams).

- Among the back-endors, the bank is known for its active use of Scala, which is rather unusual - but is there anything unexpected in the technology stack of the front-end?

- We do not have a goal to bring more exotic: many new people come to projects, I do not want to waste their time and force them to wade through the jungle. We use trending and popular approaches, but also experiment. For example, with a functional approach - we use the ramda library (alternative to lodash).

- What to expect from your report on HolyJS ?

- I will talk about cobraising - a demonstration of the screen of our client to the call center operator. The report is entitled “How to Do It Easy,” but it’s not at all easy to explain to Tambov’s grandmother how to buy Amazon shares. I will not disclose technical details, come to the report :)

Olga Shpuntenko

- Tinkoff.ru is a very atypical bank - but how does this unusualness affect JS development, what is your specificity?

- Our specifics is to first do MVP, test the idea, and if it shoots, optimize and develop it further.

There is such an interesting compromise - on the one hand, you need to make such code so that a quickly tested idea can then be easily developed. At the same time, it is necessary to strictly comply with security requirements - we are a financial organization, we work with private customer data, all this requires additional control. On the other hand, if you write beautiful academic code, but the idea does not pass the test, you just have to throw it away, which is insulting.

Our priority is interface performance. When the test phase has already passed, we, of course, optimize and compress everything that is possible - the sizes of bundles, cache requests, and, in principle, try to reduce their number.

- The company has long used AngularJS, then moved on to the new Angular ("Angular 2"). And has the recent release of 4.0 become a significant event for you and are you going to switch to it?

- We are preparing for the transition to Angular 4, we have already transferred one of our projects - Starter (this is a bootstrap from which we launch all our new projects). The advantages are that it optimized work with AOT and server rendering. There are some difficulties for hybrid applications - for example, problems with the upgrade adapter, but we will soon fully translate them into Angular 2.

- Tinkoff.ru also conductsMitap on Angular, and from the last there are no videos - in the future it is worth watching the schedule carefully to force them personally? Why did mitaps focus on Angular from the possible technologies?

- The last mitap was with an online broadcast, because we no longer accommodate everyone :) We will put all the videos on the official channel of our mitap on YouTube, and on our site meetup.tinkoff.ru. You can also leave your e-mail there to receive notifications of upcoming meetings, so do not miss it.

We are happy to host different communities, and our guys participate in various meetings and conferences. We decided to hold the Mitap on Angular, for a very simple reason - at that time no one did them :) There was little documentation at that time (in Russian there wasn’t any), and we already had something to show on the prod. And the eternal holivar between React and Angular is generally a fertile topic - there is always something to discuss, share approaches. Well, and sketch, of course.