First, a PPT, but it seems to be going over the wall, the content is basically the same as this article, can not see the first ignore

Here is a test project of React Native that I wrote temporarily. When you open it, you will see a GIF demo. Github.com/xinyu198736… Welcome star and Watch.

Three ends and three views

Don’t shoot me, everyone. The title is to draw you in. Don’t be too careful with words. Let me introduce myself first. I am an ordinary developer. I like to tinker with technology by myself, so I have a wide range of experience. This article is my little view on React Native as a “three-terminal” developer. It will not be too specific, but I hope to give you a different perspective on how to understand React Native.

As an ios developer, my experience about 2 years, though not a professional player, but an app development to be involved in the basic contact, pit wade also many, in fact the ios development experience is good, skilled build app or soon after, but it also has a lot of trouble, such as:

  • Large amount of code (long method name)
  • Layout headaches (especially AutoLayout, which takes days just to understand and is difficult to use)
  • Compile and debug time (much faster than Android, but still slow)
  • The OC language and Cocoa framework have some redundancy (stacks of properties and inherited methods)
  • It’s hard to define styles with code (Cocoa, add a shadow to UIView, border to UIView, font, etc., that code is hard to look at)
  • Sometimes it was difficult to locate the problem. I often reported an error of main thread, but I couldn’t do it at all (maybe I didn’t have a good command of the method).
  • Pods manage the code, wait a long time to install the code, sometimes have to jump over the wall, very unstable, compared to NPM and so on.

On the front end, there are other questions about ios development, such as:

  • I wish I could write styles in CSS
  • It would be nice to be able to debug interface styles in real time
  • It would be nice to support closures
  • If only callbacks were as easy to write as JS.
  • If only the code were as clean as JS

React Native is actually a mobile development framework based on the advantages of the three terminals in response to these problems.

Let’s take a look at some of the interesting things about him.

The beautiful RN

First, I picked up the React Native was thoroughly impressed by it, despite his grammar, for the front-end strange JSX (discussed later), it solved my as a three-terminal engineers in different technical side switch time has some problems, so that night, I couldn’t sleep, toss and turn, He then went to moments to post: “Exciting technology, future direction”. The next morning, I woke up an hour or two earlier and continued to write a few sentences RN, which was sour and cool. It may be hard to understand as a pure front-end or pure ios development, but for an engineer working on three ends, I see a truly unified solution, and it’s simple enough.

React Native is quick to learn. If you look at its documentation, there are just a few things: getting started, components, and features. Each page is one or two pages short, and it really is that simple. However, I’m not going to write this article as an introductory tutorial, so I’m not going to teach you how to build a simple RN application.

To summarize, React Native makes me think it’s worth mentioning the following touching points:

1. Combine controller and view in Cocoa into Component. Component is the only component in RN that can act as either a page-level component (controller) or a module-level component (UIView). The barriers to entry have been lowered. 2. Dynamic binding: The basic function of React has been introduced into client development. Data and views are dynamically bound. 3. Style management similar to CSS (a subset) is introduced, which can be embedded in modules or used globally, making defining styles very simple and universal. 4. Flexbox layout was introduced to simplify the complex AutoLayout of ios, making it easy to use and learn. Introduction of convenient NPM management. There are a number of off-the-shelf NodeJS packages (such as moment, underscore, and other generic modules) that can be used to make your own project modules into internal NPM as well as many react Native plugins written by others. Take this one. 6. There is a component in the third-party component that can introduce icon font into the project. It can be directly displayed with icon font wherever the icon is displayed, which is very convenient. 7. Debugging is very convenient, once compiled, every time changed JS code, just need to command+R in the simulator to reload the code. If there is a problem, an error will be reported directly, which contains the number of lines of code and other details. 8. Fully encapsulates various built-in JS methods, such as setTimeout, setInterval, XMLHttpRequest, localstorage, console.log, etc., which are encapsulated with oc native methods. 9. With the introduction of ES6 support, you can use various new features, such as the most commonly used arrow function, to solve the problem of messy this scope.

Enumerating so many touching places in one breath, ReactNative is really an unusual girl, she is a school belle. (Episode: I think React is girly, sensual and simple, whereas Angularjs is a tough guy, heavy but down-to-earth and well-rounded.) However, no one is perfect. At present, ReactNative also has many shortcomings, some of which may restrict its development and are in urgent need of improvement. Fortunately, RN is only in the development stage, not the official version.

Not perfect

In my opinion, ReactNative has at least the following major problems:

  • The components are not complete, and the third-party components are not complete. Some special functions need to be tampered with for a long time, such as camera-related, file reading and writing, file uploading and other components.
  • Performance is not as good as native, and there are still some wear and tear, especially when exchanging big data, such as reading photo albums.
  • Only available for ios, limited use in some corporate production environments. The Android version doesn’t know what the current status is.
  • Ios and Android code are not universal, and you may need to maintain both or make some judgments within the code.
  • Not online we say, write a code, multi-terminal general, web version and client version is not a concept, only part of the code can be reused.
  • I don’t know if Apple would be too happy with the idea of putting all the code in a bundle.
  • In the actual development, we still need to understand the underlying principles and develop components that bridge with the native, which is a big challenge for the common front-end.

Some problems will be solved over time, while others will be difficult to say, such as the development approach.

What does it mean for front-end and client development?

When ReactNative comes out, some people dive in and study it. Most people just get to know it a little bit and then jump into the debate. For example, people criticize React JSX development and React component-based development. Again, the problem is that any discussion of technology off the scene is a hooligan. React isn’t a panacea. It’s not designed to solve all of the front-end problems. It’s actually designed to solve a small set of problems, so don’t expect your product to use React to solve problems it’s not good at. As for ReactNative, in fact, I think this is a scene that perfectly matches the value of React. React’s role in this problem is that he solved the problems mentioned above. There are enough of them and they are perfect. This is the value of his existence, which cannot be denied.

Therefore, we should look at new technologies from a rational perspective, rather than blindly rejecting them and applying existing thinking and scenarios. When you look at RN with this attitude, you can see his strengths and weaknesses and make your own choices.

I looked at ReactNative from a front-end perspective and had this feeling:

  • It’s not a panacea, it’s a high-efficiency solution, don’t expect it to solve all your problems, it needs to be measured in context, not in isolation to say it’s good or bad.
  • In fact, client development is a better fit for RN at the moment, because it’s expensive for the front end to understand the concept of client development, whereas for client development, the cost is just to understand a language.
  • RN is not in conflict with Html5, it is not the same scenario, it is replacing part of the original client development, not the H5 page, because it does not have obvious advantages in these scenarios.
  • It’s a great way to expand your technology stack for a front end that’s stuck, fun to play with, and fun to play with.

From a client development perspective:

  • Using ReactNative does simplify many of the tedious steps of OC development, and is also better than Swift.
  • The JS and React communities are very active and there is a lot of open source component development space, which is a good opportunity to participate in the open source community. People are in great need of some new bridge native components.
  • NPM is so convenient and fast! There are countless libraries of tools available in the community, not common in the OC world.
  • Is RN a front-end invasion of client development? It’s hard to say, like NodeJS, it’s trying to intrude into another area, but it’s very hard to get deep, and most people are just scratching the surface, helping you take on the most annoying top-level parts of the business.
  • However, you might find js really sloppy, callbacks painful, closures strange, and scopes hard to understand. Maybe it’s time to put aside my old understanding of JS, and now ES6 is a very advanced language.

The future of development?

I’ve been testing the waters lately, and THEN I’m really going to push it in the company, because I think it really makes sense, and it’s a huge improvement in productivity, but at this point it’s just a trial run, because there’s no official release, and then there’s only ios. But the pit is also to accumulate, after the official release of the version we can quickly cut in, when the time will be a quick step.

But you can imagine the future in the development of production mode, with NodeJS middleware is used to do, in fact an RN finally should undertake a front-end business role, this part of the development work, can be done is the front, but also the client to do, mainly complete the business development with basic components, are similar to the form of the middleware.

The main work of client development is to build basic components and encapsulate some natively bridged components for RN to use, which are basically common components and should be the concept of a company-wide client architecture group.

Front end do surface business + client do bottom component support. Perfect, is really looking forward to it!

Keep your head down and learn

Don’t always try to comment on a technology, but to catch up when everyone else is learning, learning will not be wasted, you see the top performers, although their previous learning technology is constantly being eliminated, but when they fall behind.

List some information:

Try to write an app first. It’s fun to learn while doing it

Also welcome to ReactNative QQ group: 456662818