Mobile application cross-platform framework will the present Terminator? To visit react Native from Facebook.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/59/85/wKioL1TW2K-BHVlgAAaGVpwHp5g726.jpg "title=" react-native1 watermark. png "alt=" wkiol1tw2k-bhvlgaaagvpwhp5g726.jpg "/>

Preliminary study on the use of React native

February 06 2015

Facebook lets all react conf participants get a taste of react native's source---a way to write native mobile apps. This method uses all the powerful features of React.js to apply it to native applications. You can write JavaScript-based components by using the underlying elements embedded in them, which are supported by iOS and Android controls.

First of all, I know that Facebook is not yet fully open-source, but they are now moving the project in the direction of open source. They are now removing the code related to the Facebook environment and are preparing to build a process that will accept the developer's contribution and participation in the open source project. I think it's a good thing they're trying to move in the direction of open source, which means they really care about the react community. I believe this project will soon be fully open source.

In fact, I do not think that the process of open source is a fundamental mistake. I would be happy to discuss it with you if you think so, but allow me to put that discussion on another topic.

Because if you are interrupted by this discussion, you may miss the discussion we have today on how to write the current trend of native mobile apps through react native. The biggest change is that it's more like writing a Web application.

I have been a veteran of the development of iOS for many years, so I have a lot of experience in native application development. After hooking up with react native, I can only express my feelings with the following expressions:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/59/89/wKiom1TW1-7D7iBwAAI1SheeB9E789.jpg "title=" Jawdrop watermark. png "alt=" wkiom1tw1-7d7ibwaai1sheeb9e789.jpg "/>

We've all heard of JavaScript-driven, cross-platform native application development frameworks such as titanium, PHONEGAP, and a variety of other projects that allow different levels of transformation with native environments. All of these frameworks look like a bit of a setback: whether you're trying to wrap a Web application in a webview, or want to have a hard-html&css set of technologies that are hard to build on mobile apps. For the latter, you almost always face the native object, which is destined to be a failed attempt in terms of performance. React native is not the same, its layout is actually running in a separate thread inside, so the main thread of the UI can be as usual as possible to free up the interface animation and other rendering processing (it also provides the flexbox to simplify the layout, This is not available in all frameworks).

Here you just need to taste the infinite potential hidden by react native. It works to make you feel like you're doing web development. And the fact that you are actually developing a real native application is actually not the difference between the two. At the UI level, this is virtually indistinguishable, using native uiviews like the normal glare slide.

This is actually the credit of software engineering. At the same time, this is a complete proof of the fact that React.js is the right way to build a cross-platform application. I can use this approach to write a native application just like writing a Web application. We can take DOM as an implementation detail from now on, just like Uiviews.

I do not deny that I am very fond of network programming, but if we take a step-by-step to carefully examine every mistake, we can easily put some important problems and ignore. The way the network is programmed to write applications is fundamentally a curious thing: the clutter caused by HTML plus CSS creates roadblocks to various frameworks rather than making them better. Perhaps react native will ultimately be the right way to guide you back to the right path. I'm looking forward to seeing how it makes network programming a better way to program your mobile applications. Let's not think of it as a thing that runs counter to network programming, but to think of it as a prototype that goes from network programming to another direction.

Are you feeling overwhelmed when you get here? Okay, I'll show you how react native works with an example! Of course you can learn more about it here and here through video.

React native uses JavaScriptCore on iOS to run JavaScript (Android and other platforms will be supported in the future). The important thing is that it runs JavaScript on a separate thread (other frameworks like titanium do). There is no big difference between using JavaScript to write a control and using React.js, except that you should use things like view and text rather than div and a. You will get all the benefits of using react to generate UI components (conservatively speaking, this is a very bull x!!!). Keep in mind that JavaScript is not just a language, it's also a platform. There are a lot of excellent "JS conversion" tools for you to use.

React native sends you a UI written in JavaScript on another thread to send the minimum amount of data to the UI thread to bridge it to the native component. For example, convert a view to UIView. The best part is that you don't have to worry about updating your UI main thread to make the latest changes; you just have to declare that you're going to need the UI to bridge the transition on a certain state, react uses a unique algorithm that sends the smallest amount of necessary changes to the bridge to reflect changes in the UI ( Heaven Zhuhai Branch Rudder Note: If you know the concept of incremental storage it will be easy to understand this phrase.

Writing a native UI has never been easier, and it will not appear as a problem such as playing the animation, because JS is running in a thread that is independent of the main threads of the UI. The animation will be smoother than a laxative!

An OpenGL application based on react native

My first react native application is actually not a traditional application: I am writing a Wavefront object model demo application. I personally have been interested in game development, but I am disgusted with writing native UIs. React native just gave me a scenario for writing a native UI using the way you write Web UI.

I'm sure you'll see a lot of traditional app demos that use native navigation and animations. I think it's a cool thing to do the work by putting react native on the OpenGL control very simply.

To integrate react native into your project is actually a very simple thing, you just need to create a rctrootview in your controller, and then tell it where your JS is placed and add it to the window to complete. In my attempt, I first created an OpenGL control and then added Rctrootview as a child control to the control. The process of integration is completely a * * * process, oh, sorry, is a completely painless process. ( Heaven Zhuhai Branch Rudder Note: Recently by the television and roadside advertising bombing halo, everywhere are * * * ads, see no pain two words immediately nerve reflex link to the * * * come )

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/59/85/wKioL1TW2Tzgw3VWAAg-KYjQ4yk399.gif "title=" React-native-demo.gif "alt=" Wkiol1tw2tzgw3vwaag-kyjq4yk399.gif "/>

You can press Cmd+r to refresh your UI immediately to realistically update any updates you have modified. This is only rctrootview, so I can easily make changes to the UI and refresh the UI to get the most recent changes without reloading the OpenGL layer.

Var objlist = react.createclass ({  // a few methods clipped ....   selectmodel: function (file)  {    controller.loadmesh (file);   },  renderrow: function (file)  {    return view (       null,      touchablehighlight (         { onPress:  ()  => this.selectmodel (file),           underlayColor:  ' Rgba (0, 0, 0, .6) '  },         text ({ style: { height: 30, color:  ' White '  }}, file       )     );  },   render: function ()  {    var source = this.getdatasource ( This.props.files);  &nbsP;  return listview ({      style: { flex: 1 } ,      renderrow: this.renderrow,       datasource: source    });   });

In my app control I have a Handlsearch method to change the corresponding text input. Here I make some changes to the state of the control and let the app and the Objlist control accept the latest state changes to display the most recent file list.

Handlesearch:function (e) {var text = E.nativeevent.text;  var files = allfiles.filter (x = X.indexof (Text.tolowercase ())!==-1); This.setstate ({files:files});}

Notice the Controller.loadmesh () call inside the Objlist control. This is actually a objective-c method, here I have made it an export identity, so that the bridge will find it and make it available in JS. Working together with the bridge is a very simple thing, and it will become more and more simple. Here is the implementation code for Loadmesh:

-(void) Loadmesh: (NSString *) path {rct_export ();        Dispatch_async (Dispatch_get_main_queue (), ^{teapotNode_.material.diffuse = [self randomcolor];        Teapotnode_.wavefrontmesha = [Remeshcache Meshnamed:path];    [Self reset]; });}

Rct_export () identifies the method as a way to make an export method (in fact, there is a bit more work to instantiate the class elsewhere). These methods will be called in a separate thread, but what I need here is to load the mesh on the main thread (because it will load the data into OpenGL), so here I queue a piece of code running in the main thread.

The following video will give you a more complete demonstration: Https://www.youtube.com/embed/OPFf53fdUmQ

The ability to build our UI controls in a declarative process and to respond to the events generated by simply changing the state is very powerful, and react.js must prove it. At this point, we suddenly have to do the same with the native application. "One-time learning, multi-platform authoring," as react developers have advocated. Also check out: Facebook to teach me how we write websites.

--------------Finish------------------

reproduced please respect the original/translation
author: Heaven Zhuhai Branch Rudder
resource sharing public number: Techgogogo or scan with chip QR code

This article is from the "Heaven Zhuhai Rudder" blog, please be sure to keep this source http://techgogogo.blog.51cto.com/3851580/1612779

Mobile application cross-platform framework will the present Terminator? To visit react Native from Facebook.