هل لا يزال يستحق تعلم React Native في 2021؟

لقد مرت حوالي ست سنوات منذ إتاحة React Native كمصدر مفتوح. فما هو شكلها الآن؟ 

تحدثت مع Tomasz Malysz, our Senior Frontend Software Engineer about React Native’s beginnings and how it has developed since then, what advantages it still holds and if it’s still an attractive framework career-wise. 

If you know JavaScript, have experience in web development and want to create state-of-the-art mobile apps without limiting yourself to a single native environment, then… keep on reading to find out if React Native is the path still worth following.  

لنبدأ من البداية. 

ما هو React Native؟ كيف بدأ كل شيء؟ 

React Native هو إطار عمل أنشأته Facebook، ويتيح تطوير تطبيقات جوال أصلية لنظامي Android وiOS في الوقت نفسه.  

It provides a number of components for creating a user interface, which translate into native controls corresponding to a given platform. For example, when we want to display a line of text, we will use the `Text` component in React Native. Then, the framework will ensure that the Android application uses the native` TextView` control, while the iOS one uses`UITextView` control. 

Now, let’s take a short trip back in time. The beginning of the React Native framework dates back to 2012 – 2015 when Facebook creators wanted to release its mobile app version. At first, they tried to do it using web software development technologies. However, they turned out to be insufficient, considering the growing popularity of mobile applications and the importance of user experience. Providing a good UX for Facebook in the mobile version became one of their main goals. 

The turning point was the discovery of a way to create native iOS controls using JavaScript. A Hackathon was then organized. It allowed for the development of this idea and the development of the React Native prototype.  

ثم، في عام 2015، أصدرت Facebook الإصدار الأول من React Native وكشفت أن Ads Manager كان أول تطبيق مكتوب بالكامل بـ React Native. وسرعان ما تبعت ذلك تطبيقات أخرى. 

أمثلة على التطبيقات التي تستخدم React Native 

Instagram هو عملاق آخر معروف باستخدامه React Native في نطاق معين (على سبيل المثال، عرض الإشعارات مكتوب بـ React Native). 

كما كان Skype يستخدم هذا الإطار، على الأقل حتى عام 2020، عندما قررت Microsoft استبدال تطبيق React Native بـ Electron (لمستخدمي Windows 10). 

من الأمثلة الإضافية على التطبيقات التي استخدمت أو تستخدم حالياً React Native: Airbnb وWix وWalmart وUber Eats وTesla وDiscord وGyroscope، على سبيل المثال لا الحصر من الأدوات الشائعة والمعروفة. 

لماذا تتجه كبرى الشركات في العالم إلى React Native؟ 

يوفر عملًا مضاعفًا 

In the case of native technologies, companies need two teams of developers specialising in each technology: one for iOS apps, and the other one for Android. In React Native, thanks to a single code base, you can build one app for two different platforms simultaneously, with one shot, using one language. The logic layer is written in JavaScript and the views are defined using React Native. React determines which control will be used for each platform: iOS or Android.  

في نهاية المطاف، لا يزال علينا التعامل مع منصتين مختلفتين. قد يتضح أن بعض المتطلبات المحددة سيتعين معالجتها بشكل منفصل، مع مراعاة الاختلافات. 

Additionally, not every functionality of a mobile device is available on the framework level. It may be necessary to write a native module, which the React Native application will then use. It means that the teams specialising in native technology may also be needed on an ad hoc basis. 

يقلل من وقت التطوير 

تطوير ونشر تطبيقات React Native يستغرقان وقتاً قصيراً نسبياً. بفضلالتحديث السريع feature, with each save, a local version is refreshed in just a few seconds. If you change a control in the code, once you save the change it will be instantly visible in the simulator. In the case of native apps, a full app recompilation must be processed to see your change, and thus the deployment takes longer. 

In the case of native apps, a full app recompilation must be processed to see a change that was made. Thus, the deployment takes longer. Although, there may be helpful tools such as “Preview” for SwiftUI in xCode, which give a similar option to التحديث السريع. 

تتحول الفرق الموجهة نحو المنصات إلى فرق موجهة نحو المنتجات 

عند استخدام React Native، يمكن للشركات التركيز على المنتج نفسه وتخصيص فريق واحد من المطورين للعمل عليه، بدلاً من فريقين منفصلين لكل منصة. 

حان وقت الأمور التقنية. لنلقِ نظرة تحت غطاء إطار عمل React Native ونرى كيف يعمل فعليًا. 

كيف يعمل React Native؟ وما التحديثات التي تم إدخالها مؤخرًا؟ 

بشكل عام، تعتمد طريقة عمل React Native على 3 أجزاء: الخيط الرئيسي (الأصلي)، وخيط JavaScript، والأداة المستخدمة للتواصل بينهما، والتي تُعرف باسم Bridge.

The JavaScript part is responsible for the business logic, functionality and defining what the user interface should look like. However, it is the native part and the main thread that are responsible for displaying the appropriate controls and direct handling of any actions performed by the user. 

When a user performs an action, such as pressing a button, it is registered by the main, native thread. Then, the information about this action goes through the bridge to the JavaScript virtual machine, where the code you wrote that is assigned to this action, is called. A new state of the application is computed and passed back through the bridge to the main thread. 

You can also imagine the process as a conversation: the native module runs the application and asks JS “what do you want to do?”. Then JS comes back with a specific message “I want to have such and such view displayed”.  

The important thing is that there are two call threads, not one, so they never interfere or get in each other’s ways. However, since it’s an asynchronous process, sometimes when there’s a lot of operations going on, the bridge becomes quite busy. This may sometimes result in a lower performance or imperfect UX, causing problems with formatting, for example when a user enters their credit card number.  

Facebook engineers continuously work on improving the efficiency of React Native, which then translates to a better User Experience of the apps built using this framework. The plan is to change the way of communication between the JS thread and the native one so that it is synchronous and more efficient.  

في غضون ذلك، مع إصدار الإصدار 0.64 من React Native، أصبح من الممكن الآن استخدام محرك JavaScript آخر – Hermes. As a result, applications run faster and take up less memory. Such improvements are proof that React Native still evolves and is kept in pretty good shape by its creators, despite already being six years old. 

So if you were asking yourself the question, whether it’s still worth learning React Native in 2021, this is one of the reasons why it’s still a good career path to choose. However, there are still more advantages. 

لماذا لا يزال يستحق تعلم React Native في عام 2021 

If you already have web development experience, then learning React Native will give you even bigger opportunities with very minimal effort. You already have a bunch of skills that are useful when learning React Native: the knowledge of React and its related tools, declarative UI or a component approach to building apps. That’s a really solid knowledge base for a start. 

Being a React Native Developer opens the door to interesting, cutting-edge projects that often use innovative technologies, such as Augmented Reality. An example of such a project may be an app that allows users to see how the furniture they consider buying will look like in their apartment, or to check how a house they had designed will fit in the building plot they want to buy. Sounds pretty cool to me. 

Since more and more companies choose to build mobile apps in React Native due to faster development and deployment time, the job opportunities for React Native Developers are plentiful and it’s definitely a path worth taking.  

كيف يقارن Flutter في هذا الصدد؟ 

Flutter, just like React Native, is an open-source framework that allows creating native mobile apps for both Android and iOS simultaneously, using one codebase. It was released in 2017 by Google. Since then it has gained a lot of popularity and is considered React Native’s main competitor due to its high performance.  

While React Native and Flutter share some common ground, they also differ in some key aspects. One of them is especially important from a learner’s perspective: the language. Flutter uses Dart, a programming language developed by Google. The knowledge of Dart is much less common among developers than JavaScript used in React Native. That’s why React Native is considered by many an easier framework to learn because if you know JavaScript, you have the basics already covered.  

ماذا تتعلم لتصبح مطور React Native؟ 

As already mentioned React Native is based on web development technologies, so if you come from a front-end environment, have solid web development knowledge and your toolset includes HTML, CSS, JS, you already have a good foundation to become a React Native Developer. If not, then getting familiar with web development first will make learning React Native much easier.  

If you already have this knowledge and skills base, you can get on with making yourself familiar with React Native documentation and the deployment process. You’ll also need to familiarise yourself with some crucial aspects of the day-to-day work as a mobile developer, which differ from the “web” world: navigation, managing the approvals for the particular parts of the system, as well as using libraries working with mobile’s functionalities, such as a camera.  

بعد ذلك، يتعلق الأمر كله بالتدريب على مشاريع واقعية والتحسن المستمر فيها. 

هل ينبغي لي تعلم React قبل تعلّم React Native؟ 

Creating native mobile apps in React Native is very similar to developing web apps in React in some respect. If you don’t have much technical knowledge and experience with web development yet, it’s worth you get familiar with React first. 

هل تساعد معرفة التقنيات الأصلية في تعلم React Native؟ 

Definitely. The experience in creating applications using native technologies can for example help in application distribution or working with mobile devices in general. However, creating both the user interface and business code in JavaScript may require a slight change of mindset. 

ما هي أفضل المصادر للبدء مع React Native؟ 

هناك الكثير من المصادر عبر الإنترنت لتعلّم React Native. ابدأ بقراءة الوثائق الرسمية، لفهم الأساسيات جيدًا وتكون قادرًا على اتخاذ خطواتك الأولى في تطوير React Native. 

Once you know the ABC of this framework, try your hand at real-life projects. Put your own ideas into action. You can create an app based on open API. Learn through solving specific problems that you encounter while coding.  

You can always count on React Native’s open and helpful community that greatly supports knowledge sharing. You can find a lot of articles with great insights on medium and many tutorial videos on YouTube.