React in browsers and mobile platforms
This post is based on a presentation by Grigory Petrov from VoxImplant at the 1C-Bitrix partner conference .
Generally speaking, our company Voximplant is developing solutions for cloud voice telephony. 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 been growing at an insane pace. And this is especially clearly seen in the example of web technologies that are 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 succeeds about once every three months. Here I will talk about the use of React technology, which is now presented in two guides: React.js and React Native.
History of occurrence
The winning React procession began in 2013, when Facebook had a big problem with displaying the number of new chat messages. For many years, it did not display correctly, and Facebook engineers could not defeat the chat room. He showed that there were new messages, although in fact there were none, and vice versa. And all this was 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 room, but it turned out funny.
So, Facebook created React.js, a technology that was designed to solve the chat problem. This was supposed to be done with the help of three magic features:
- Firstly, changing the interface without redrawing. As you know, Facebook’s interface is pretty big. There are all sorts of feeds and windows, chat can appear in three different places. The admin panel has many different sections. And all this will scroll, appear and disappear, notifications and likes pop up.
But browsers have one small 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 sophisticated interfaces like Facebook. For example, if a user types in a chat, switches to the news feed, and then back to the chat, then the focus and the current position of the set will disappear.
React allows you to redraw the interface in small pieces without touching the parts of the HTML page for which it is critical. Therefore, the chat in modern Facebook can be updated separately, like a news feed that does not interfere with calmly continuing 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 possible to program the chat button once, and then use it everywhere, in all of its programs. Therefore, the authors of React said: “OK. We do React in such a way that you design the chat window once, 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 Facebook engineers did was to control the state. When you make a huge, complex Bitrix24 level system, you have a million buttons, levers, pop-ups, and windows. All this jumps, scrolls, works. Therefore, program elements can have a lot of states: the chat is scrolled there, the chat is scrolled here, there are messages or not, the user is logged in or not logged in. The larger the system, the more these states, the more unexpected combinations occur. And as a result, the program can behave rather strangely. For example, like a Facebook chat. React uses a functional paradigm: it allows you to make small components, give the input some state, based on which they work.
When a company develops a new technology, it does not know whether this technology will take off or not. Or will only a fraction of this technology take off? Usually guessing fails. Facebook first tried React on the chat, they liked it, after which the React code was open to the developer community. Marketers and engineers of the company focused on the speed of the new product, which is ensured by redrawing small pieces of pages. But as practice has shown, few people need this property.
But most of all, programmers liked the fact that the interface is assembled from small components. Before React, web programming was a “noodle cooker" when they developed a complex system of huge HTML and twice as large CSS, flavored with mountains of JavaScript.
And with the introduction of React, all this monstrosity suddenly falls apart into tens and hundreds of small pieces. At the same time, each of them turns out to be simple and understandable, which greatly facilitates the process of changing the interface and catching bugs.
This property ensured the explosive success of React.js. Now there are thousands of articles on the Internet devoted to the use of this tool. React.js today is in great fashion, large companies are switching to it, because it allows programmers to get rid of the enormous pain of "noodles" in their code.
React native
All this time, Facebook has been ambushed. And two years after the release of their development, they said: “You know, we liked React.js so much that now we will also be using mobile applications on it.” And rolled out React.js for the iPhone, and after another six months - for Android.
This was unexpected. How can technology for creating a web interface, and even JavaScript, be used on mobile platforms? Facebook approached this with fiction, using the experience of the Appcelerator Titanium project . It was created several years ago, but did not gain much popularity. But all at once began to use React Native.
What is React Native? When we create 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 separately Android and iOS, in which a bunch of its user interface. Buttons, inputs and drawers on Android do not work quite the same as on the iPhone. Therefore, when you create a mobile application, you can go the other way: introduce 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 users of Android and iOS are used to the characteristic 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: you can create your own interface for each platform using "native", native elements. This was done back in Appcelerator Titanium many years before React Native. Actually, the word Native in the name seems to imply that a mobile application using React will use buttons, text fields, inputs and all other elements specific to this operating system.
React Benefits
It all works very simply. A 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 the application should do when the user clicks the Buy button, how to display application elements, etc. This code is the same for all platforms. And the user interface code - what React does - is different for each platform.
React allows you to create a JavaScript application, inside of which widgets are created in XML syntax. It looks something like this.
| Browser | iOS | Android |
|---|---|---|
| Generic JS code | Generic JS code | Generic JS code |
| | |
When you make a web application, then 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 the iPhone app, you will have a third set of widgets.
This is both the advantage and the 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 - the web, Android and iOS. If the application is a user interface to the database, then the code for the most part will be different.
Many companies, trying to “sell” a cross-platform development tool, usually tell stories from the series “See how wonderful! We made the text “Hello, world!”, The input field, the button, and it looks exactly the same under twenty platforms, and everything works. ”
But in practice, few people need to make such primitive programs. Typically, applications are created in order to make money and solve business problems, so they are much more complicated. Sometimes very, very complicated. Therefore, it will be appropriate to ask: “Guys, approx. And if we try to make an application with 50 buttons, hundreds of inputs and two dozen windows, how will this behave? ”
Unlike other cross-platform solutions, React will behave well. Firstly, a very large number of components for the web are available. If you use React.js to create an application and want it to appear as a web page, then you can use ready-made sets of blocks. For example, Google Material Design is now very popular. You just take horizontal and vertical layouts, buttons, input fields, and it all looks as beautiful as Bootstrap, but you don’t have to impose anything. Like building 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 set to create applications that should run 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 this is open source, very promising technology.
Finally, many companies make universal 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 applications and in mobile. Let's say you are implementing a React application 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 you get three different solutions.
disadvantages
Of course, not everything is so rosy. In addition to many advantages, React.js and React Native have a few drawbacks.
The biggest of them - 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 it. That is, take the thick Talmud for developing an application for Android and see what elements of the user interface are there, how they are interconnected with each other, how to use it all and how to correctly assemble it. And when the same developers try to make an application for iOS, you will have to take an even greater Talmud from Apple and study to make the result look like a normal application. It certainly takes time.
Another drawback is that when using React for the web, it does not give you anything at all. Here are the DIVs, typeset yourself. About three dozen widgets are available for mobile platforms out of the box, although each of them has much more user interface elements, under a hundred. And if you want to use something other than a small standard set, you will either have to 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 React Native project. This is still a very crude technology, which has not yet been brought to mind, unlike React.js. Of course, the project is developing, Facebook is constantly repairing something, sometimes breaking something. And if you want to use this technology, then be prepared for the fact that sometimes your developers will not succeed, and to fix this, 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 great full-fledged framework for web sites. Now they are trying to port Angular to mobile platforms, like React Native, but this is still an experiment.
If your business is pipelining not-so-sophisticated websites, then Angular is perfect. His main advantage is that he can do everything out of the box. In this case, a step to the left, a step to the right, is considered as an attempt to take off. As soon as you try to do something that doesn’t fit very well on the Angular rails, you will spend five times more time.
React in this regard is very simple. It allows you to quickly assemble the user interface, and everything else - the work of the program itself, accessing the database and so on - this is outside the scope of React, you have to decide for yourself. So this tool is good for projects with a long lifespan, which is unclear where they will lead in a year and a half. Use React to create a user interface, it will simplify the work and give the opportunity to make both web and mobile versions.
conclusions
React.js and React Native are very good technologies if you want to quickly 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, where you want to earn money, you will have to work, because the technology is still a little damp. They need to learn to use and sometimes repair pop-up jambs.