%100 React Native Mobile & Web App at Turkish Bank

It’s very hard to develop banking softwares which includes recent technological innovations in Turkey. Because the Banking Supervisory and Disciplinary Committee(BDDK) and the government have very severe regulations on these issues. However, Turkey has an important place in the world for finance technologies. Of course, there are different providers of being so successful in financial technologies. The most important of these can be shown as, banks have millions of customers. In banking sector, where competition is very high, banks are trying to offer the best products for their customers. In order to achieve this, investments are made at a very good level. With the investments, the best software developers in the country come to this sector, and as it comes, there is a huge increase in both quality and emerging products.

I have been developing a software for about 7 years in different banks in Turkey. The corporate cultures and ways of doing business are almost completely different and their targeted perseverance is almost similar. In this way, there is a sweet competition as I mentioned among the institutions. In business developments where the strategies determine the winner, there are sometimes those who present the application with the most valuable product and then choose to develop it, and sometimes those who doesn’t choose to present the product until it reaches the final. At this point, we started a project for one of Turkish Bank, where I have been working as a consultant for 2 years, that includes the entire alternative distribution channels. React Native was chosen to develop all of the bank’s new iOS, Android and web applications to be opened to customers.

Why we choose React Native?

The bank, which has a growing technology team, wanted an application that would not cause problems in the long term with its development and maintenance, and that could take place in the market quickly. Specifically, building teams to develop native iOS, Android, and responsive web applications would have made the agile and dynamic team quite bulky. In addition, it also imposed obligations, such as rewriting the codes and tests that did the same job and testing the product separately for iOS & Android by the test team. In this project, where cost and time are very important, React Native was chosen as a development tool by predicting that there will be no major losses in terms of performance.

What are the advantages of a team which developing applications with React Native?

• Time Efficiency: It takes less for the time-to-market compared to the native code projects. We can summarize it by saying “very fast”.
• Performance: Thanks to communicating with operating system via its APIs, it does not have a serious problem that the user can feel in terms of performance.
• Growing Community: The React Native Community is growing very quickly. In this way, developments are adapted, problems are solved quickly.
• Ready-made Components: There are a wide variety of component libraries that will not need to be developed from scratch.
• Reliable & Stable: It offers problem-free, stable use thanks to its support by very large technology companies.
• Ability to target multiple OS with less native code: Code sharing is one of the most important thing for software development teams. It provides reusability.
• Better than hybrid experience: It’s a real app. Even comparing is not very correct. :)
• JS as a programming language: It is very difficult to create teams that will write native code. However, when it turns to JavaScript, the options increase considerably. The adaptation process is fast for the software developers.

Challenge

As far as I research, it is the first banking application written entirely in React Native, where iOS, Android and Responsive Web applications are written in a single code base.

Development

Technology Stack:

• React Native for iOS and Android, React Native Web for Responsive Web Application. React Native is an exciting framework that enables web developers to create robust mobile applications using their existing JavaScript knowledge. It offers faster mobile development, and more efficient code sharing across iOS, Android, and the Web, without sacrificing the end user’s experience or application quality.
• TypeScript was used because it is a banking project. Thanks to functionalities that TypeScript comes with, it’s easier and more intuitive for a software developer to write a program. One of the main conveniences is that you know not only the name of the variable, but also what kind of data it stores. You can focus more on big stuff like logic in the application, and care less about small details.
• ESLint as a code standart, ESLint as linter. No need to explain. We don’t have any other alternative.
• Gerrit for source code management. Code review was very important on our behalf, as it was a framework that the whole team would learn from scratch. That’s why we wanted code review to be on every commit, not on every pull request. In these conditions, we used Gerrit developed by Google instead of alternatives such as GitLab, TFS, which we had before. Instead of pushing the commit you created in the local to remote, you send it to Gerrit. If it gets confirmation in the review, the code goes to the remote branch.
• Redux for state management, #ReduxForm for form screens. Quite obvious.
• Axios to call APIs
• Zeplin for designer & developer communication

The design process generally took place between the business unit and the agency. It was also supported by the developer when necessary.

We used agile as a software development method. Tried to meet every requirement of the scrum framework as much as possible.

The analyzes were prepared in such a way that the developer would not need another question and would continue throughout the form of a storyboard.

The component to be used, the service to be called and the flow of the screen were included in the analyzes.

Troubles

Differences between iOS and Android
Sometimes, you need to make feel users experience they are used to. So it means that you have to develop different code blocks for different operating systems. Also different UI designs, test codes and tests carried out by analysts.

Development and debugging
Even minor changes are sometimes enough for the emulator not to work. Especially when a new feature needs to be checked for both iOS and Android, it happens that cold sweats are pouring for the emulator to work. Because in order to perform tests in different environments such as development, test, UAT and preprod, the environment properties of the emulator must be changed. You may also be overwhelmed by problems with the npm cache or compilation errors received in Xcode / Android Studio.

In order to debug, the MacBook and iPhone you use must be on the same network. If one of these 2 devices does not have a chance to be on the network of the institution you are working with, the possibility of debugging on the device is eliminated. In this case, it becomes impossible to see the real performance and flow on the device.

Web & Mobile development
Developing web and mobile application on a single project is crazy thing. Because yu have to use different libraries for different needs. Your application may crash because libraries do not support different environments. To prevent this, you have to produce files containing null rotating methods with .web extension so that the components or pages you develop for mobile applications do not cause problems in the web application.

Conclusion

It was a framework not recommended for corporate and financial applications with a lot of users when you researched react native. Especially it was said that it is impossible to write a bank’s application with 100% react native. Until we do. We are proud of the product that came out as a result of a great effort.

This project, which is one of the most important experiences of my professional career, is very important for me. The pleasure of touching almost every part of an application used by nearly 1,000,000 users can not be described. Also, despite the restrictions imposed by the regulations, the importance of this project, which is the only one in the world in terms of technology, is clear. But most importantly, it has been successfully completed and is currently open to the user on the App Store, Google Play and bank’s official web site.