React in browsers and mobile platforms

This post is based on the speech of Grigori Petrov from VoxImplant at the partner conference "1C-Bitrix".



Generally speaking, our company Voximplant is developing cloud voice telephony solutions. But on the pages of this post, I would like to talk not about this, but about some promising technologies. It so happened that for more than 15 years I have been doing software, both independently and as a leader of development teams and a consultant.

')

Over the past few years, the software industry has evolved at an insane pace. And it is especially well seen on the example of web technologies close to us, which include all 1C-Bitrix products. And one of the directions of development is the transfer to mobile platforms, with the introduction of adaptive layout and much more good and interesting. Technology replaces each other about once every three months. Here I will talk about the use of React technology, which is now presented in two guises: React.js and React Native.

History of

The victorious React march began in 2013, when Facebook had a big problem with displaying the number of new messages in the chat. For years, it was displayed incorrectly, and Facebook engineers could not beat the chat. He showed that there are new messages, although in fact they were not, and vice versa. And all this is very sad. In the end, in 2013, Facebook engineers got together, said a lot of good things and came up with a technology that was supposed to solve all their problems once and for all. Running a little ahead, they could not fix the chat, but it turned out funny.



So, Facebook created React.js - a technology that was designed to solve the problem with the chat. It was supposed to do this with the help of three magic features:

• First, changing the interface without redrawing. As you know, the Facebook interface is quite spreading. There are all sorts of feeds and windows, chat can appear in three different places. There are a lot of different sections in the admin panel. And all this scrolls, appears and disappears, popping notifications and likes.
  
  
  
  But browsers have one little problem. They were developed many, many years ago to display a simple page: text, title, selected text. Like HTML, browsers were not designed to display complex interfaces like Facebook. For example, if a user dials something in the chat, switches to the news feed, and then back to the chat, the focus and the current position of the dialing will disappear.
  
  
  
  React allows you to redraw the interface in small pieces, without touching those parts of the HTML page for which this is critical. Therefore, chat in modern Facebook can be updated separately, as well as the news feed, which does not interfere with calmly continue to type your message.
• Secondly, Facebook engineers had such a dream. More precisely, this dream has been shared by all developers over the past 30 years: to make it so that you can program a button for a chat once, and then use it everywhere, in all of your programs. Therefore, the authors of React said: “Ok. We do React in such a way that you once design the chat window, and then paste it wherever you want. And everything will work for you. ” It does not work, of course, but the attempt is very, very good.
• Finally, the last thing that Facebook engineers did was state control. When you make a huge, complex system of the “Bitrix24” level, then you have a million of some buttons, levers, pop-ups, windows. All this jumps, scrolls, works. Therefore, program elements can have a lot of states: chat is scrolled there, chat is scrolled here, there are messages or not, user is logged in or not logged in. The larger the system, the more these states, the more unexpected combinations arise. And as a result, the program can behave quite strangely. For example, like Facebook chat. In React, the functional paradigm is used: it allows you to make small components, we give a kind of state to the input, on the basis of which they work.

When a company develops a new technology, it does not know whether this technology will take off or not. Or will take off only part of this technology? Usually guessing fails. Facebook first tried React on the chat, they liked it, after which the React code was opened to the developer community. Marketers and engineers of the company focused on the speed of the new product, which is provided by the redrawing of small pieces of pages. But as practice has shown, this property turned out to be very few.



But programmers most liked the fact that the interface is assembled from small components. Before React, web programming was a noodle brew when they were developing a complex system of huge HTML and twice as large CSS spiced with mountains of JavaScript.



And with the introduction of React, all this monstrosity suddenly falls apart into dozens and hundreds of small pieces. In addition, each of them is simple and understandable, which greatly simplifies the process of changing the interface and catching bugs.



This feature provided the explosive success of React.js. There are now thousands of articles on the Internet using this tool. React.js is in great fashion today, large companies are switching to it, because it allows programmers to get rid of the tremendous pain of "noodles" in their code.

React native

All this time, Facebook was lying in wait. And two years after the release of their development, they said: “You know, we liked React.js so much that now we will do mobile apps on it too.” And they rolled out React.js for the iPhone, and six months later - for Android.



It was unexpected. How can the technology for creating a web interface, and even JavaScript, be used on mobile platforms? Facebook approached this with fiction, using the work of the project Appcelerator Titanium . It was created a few years ago, but not gained great popularity. But all at once began to use React Native.



What is React Native? When we make a website with a user interface, then everything is quite simple. We have HTML, DIV, INPUT, BUTTON. There is a designer who paints them in all sorts of funny colors, and we all use it.



But when creating an application for mobile platforms, we have separate Android and iOS, in which a lot of its user interface. Buttons, input'y and drawer on Android do not work quite like the iPhone. Therefore, when you create a mobile application, you can go another way: embed a piece of the browser into the application and draw the usual HTML.



So does, for example, the popular PhoneGap. The advantage of this approach is that the application looks exactly the same on all devices. Disadvantage: it looks equally ugly. Because Android and iOS users are accustomed to the distinctive look of the interface elements, to their beautiful button animation. And when they see your web page, packaged as an application, they are a little surprised.



There is a third way: for each platform, you can create your own interface using native native elements. This was done in Appcelerator Titanium many years before React Native. Actually, the word Native in the title implies that a mobile application using React will use buttons, text fields, input'y and all other elements characteristic of this operating system.

Benefits of React

It all works very simply. The universal application, which should work as a web page on Android and iPhone, consists of JavaScript code. He is responsible for the business logic: what should the application do when the user clicked the Buy button, how to display the elements of the application, etc. This code is the same for all platforms. And the code responsible for the user interface, what React does, is different for each of the platforms.







React allows you to create an application in JavaScript, inside which widgets are created in XML syntax. It looks like this.

Browser	iOS	Android
Common JS code	Common JS code	Common JS code
<HrizontalLayout> <ProgressBar/> </HrizontalLayout>	<TbBarIOS> <TabBarIOS.Item/> </TbBarIOS>	<DrwerLayoutAndroid> <ProgressBarAndroid/> </DrwerLayoutAndroid>

When you make a web application, you have your own widgets, for example, DIV, INPUT, BUTTON. When creating an Android application, widgets will be completely different: Android Button, Drawers, Activity. For an iPhone application, you will have a third set of widgets.



This is the advantage and disadvantage of React. If your application has a lot of business logic, then the bulk of the code will be exactly the same for all three platforms - web, Android and iOS. If the application is a user interface to the database, then the code will mostly differ.



Many companies, trying to “sell” a cross-platform development tool, usually tell stories from the series “Look how great! We made the text “Hello, world!”, An input field, a button, and it looks exactly the same under twenty platforms, and everything works. ”



But in practice, few people need to do such a primitive program. Typically, applications are created in order to earn money and solve business problems, so that they are much more difficult. Sometimes it is very, very difficult. Therefore it is appropriate to ask: “Guys, ok. And if we try to make an application, where there will be 50 buttons, hundreds of inputs and two dozen windows, how will this behave? ”



Unlike other cross-platform solutions, React behaves well. First, a very large number of components are available for the web. If you use React.js to create an application and want it to be displayed as a web page, you can use ready-made sets of blocks. For example, Google Material Design is very popular now. You just take horizontal and vertical layouts, buttons, input fields, and it all looks as beautiful as Bootstrap, but you don’t need to typeset anything. As if collecting Lego bricks.



A huge number of companies and enthusiasts are constantly creating new libraries and user interfaces for React Native. For example, Facebook on GitHub has a small suite for creating applications that should work on Android and iOS. In the search engines you will immediately find maps, billing, databases, grids, a huge number of ported components. True, some of them do not work, but these are open source, very promising technologies.



And finally, many companies make versatile solutions that you can use with React both on the web and on mobile platforms. For example, if you use Voximplant telephony, you can use our SDK both in web and mobile applications. Say you are implementing an application on React for the web, Android and iOS, while our SDK also allows you to make or receive calls on these platforms. Thus, your web developers write the same code, and it turns out three different solutions.

disadvantages

Of course, not everything is so rosy. In addition to many advantages, React.js and React Native have some drawbacks.



The largest of them is if you want to use React on a mobile platform, then you will have native widgets. This greatly speeds up development, the interface looks familiar, but your programmers will have to learn this. That is, take a thick Talmud for developing an application for Android and see what user interface elements are there, how they are interconnected with each other, how to use it all and correctly assemble it. And when the same developers try to make an application for iOS, then you will have to take even more Talmud from Apple and study it, so that the result looks like a normal application. It certainly takes time.



Another disadvantage is that when using React for the web, it does not give you anything at all. Here are divs, type it yourself. For mobile platforms out of the box there are about three dozen widgets available, although each of them has much more user interface elements, under a hundred. And if you want to use something besides a small standard set, then you have to either go to GitHub and get ideas, or write yourself in a low-level language like Java or Objective-C.



The third drawback is related to the youth of the project React Native. This is still a very raw technology, which has not yet been brought to mind, unlike React.js. Of course, the project is developing, Facebook is constantly repairing something, sometimes it breaks something. And if you want to use this technology, then be prepared for the fact that your developers sometimes will not get something, and to fix it, they will spend a lot of time on Stackoverflow.

React and Angular

There are many articles on the Internet that compare these two technologies. Angular is a large full-fledged framework, sharpened for creating websites. Now they are trying to transfer Angular to mobile platforms, like React Native, but this is still an experiment.



If your business is in the pipeline creation of not very complex websites, then Angular is perfect. Its main advantage is that he can do everything out of the box. At the same time, a step to the left and a step to the right are considered as an attempt to take off. As soon as you try to do something that does not fit well into the Angular rails, then you will spend five times more time.



React in this regard is very simple. It allows you to quickly build the user interface, and everything else — the work of the program itself, accessing the database, and so on — is out of sight of React, you have to decide for yourself. So this tool is good for projects with a long lifespan, which is not clear where they will lead in a year and a half. Use React to create a user interface, it will simplify the work and provide an opportunity to make both web and mobile versions.

findings

React.js and React Native are very good technologies if you want to quickly make a prototype. Fast is a few days. If you're lucky, and the developer has already learned how to use the stack - a few hours. If you want to do something serious to order or for sale, on what you want to make money, you will have to work, because the technology is a little more raw. They need to learn how to use and sometimes repair pop-up jambs.