Live data from Hacker News

Use ReactJS to Build Native Apps

twitter.com

111–120 of 175 posts

Re: Use ReactJS to Build Native Apps

#111

Hi, I'm Jordan from the React team. I'm happy to answer any questions about React Native, but @vjeux will be giving a more thorough talk tomorrow that you won't want to miss (if you're at ReactJSConf), so I might wait for him to answer some of them. This is not the DOM. This is not a web view. If you know ReactJS, you can build native apps with React Native.

I understand Facebook Groups for iOS uses it, but how mature is the current component library (compared to Ionic for example)? If it's still small do you plan on the majority of future components to be first-party or third-party (community)? Extremely exciting either way, wish there was a livestream of tomorrow.

There won't be a livestream but presentation videos will be uploaded shortly afterwards!

Re: Use ReactJS to Build Native Apps

#112
post #33

Hi, I'm Jordan from the React team. I'm happy to answer any questions about React Native, but @vjeux will be giving a more thorough talk tomorrow that you won't want to miss (if you're at ReactJSConf), so I might wait for him to answer some of them. This is not the DOM. This is not a web view. If you know ReactJS, you can build native apps with React Native.

Hi Jordan, when you say native apps what platform(s) will it be possible to target? E.g. windows, osx, ios, android etc?

We're currently working on just iOS and Android.

Re: Use ReactJS to Build Native Apps

#113

Hi, I'm Jordan from the React team. I'm happy to answer any questions about React Native, but @vjeux will be giving a more thorough talk tomorrow that you won't want to miss (if you're at ReactJSConf), so I might wait for him to answer some of them. This is not the DOM. This is not a web view. If you know ReactJS, you can build native apps with React Native.

Jordan, where is this conf taking place and what time (PST here).

You say this is not DOM or some hybrid solution?

Either this is too good to be true or ground breaking stuff.

Do you mean that react could completely get rid of having to write stuff in Java or Objective-C?

Re: Use ReactJS to Build Native Apps

#114
Everyone felt that in terms of Javascript rendering on mobile you guys had the best shot.

Did you feel that JS had hit it's limits with rendering and wasn't strong enough for mobile sites/apps?

Looking forward to hearing more about React Native!

Re: Use ReactJS to Build Native Apps

#115
post #52

Earlier quoted context omitted.

No, it skips the DOM entirely and works with native elements (iOS views) directly.

This is where I get confused. How is it compiling to these elements?

One possibility: You have a JS interpreter running your React code. You generate a virtual DOM and hand it off to React. React sends the virtual DOM through a message bus to native code. So far, nothing crazy here, this is how frameworks like cordova work. That native code dynamically translates the virtual DOM into native UI elements.

Re: Use ReactJS to Build Native Apps

#116

Earlier quoted context omitted.

Since we've heard Facebook Groups is built with it, and it's said to be iOS/Android - to what extent is the choice to build Groups with this responsible for the fact it's not in the Play store? Basically, if Groups is ever coming to Android is this helping or hindering porting?

Actually currently only the iOS Groups app is built on top of React Native. (I'm Andrew, I work at FB on React Native)

Hey Andrew, this https://itunes.apple.com/us/app/facebook-groups/id931735837?... app is build on top of ReactJs?

Re: Use ReactJS to Build Native Apps

#117
post #96

Earlier quoted context omitted.

So let's assume I have a listbox with N elements in it. I assume the render() method has to visit each of these elements every time an updates takes place, so it is O(N). Please correct me if I'm wrong here. Now for a certain value of N, things will become slow, unresponsive. I'm guessing now that this value of N is above the value where the browser cannot handle this number of elements anyway. Is this correct? PS: I…

A render in react doesn't return DOM elements. Render is a pure function which projects app state into a description of the view. Let's call this description A, so render(state) -> A. When state changes and render is called a second time we get a new description, render(newState) -> B. A diff is then applied to them diff(A, B). The diff can then be translated to an update strategy for the actual DOM (or in this case,…

But how do I remove non-visible elements from the render-tree? Is this something I have to do explicitly like I would have to do without React? Or does React somehow take care of this for me?

Re: Use ReactJS to Build Native Apps

#118
post #42

Earlier quoted context omitted.

How does it compare to AsyncDisplayKit?

According to FB it is conceptually a continuation of AsyncDisplayKit https://twitter.com/fbOpenSource/status/560512580326674432

I believe AsyncDisplayKit is a dependency of the iOS plugin for React Native.

Re: Use ReactJS to Build Native Apps

#120
post #96

Earlier quoted context omitted.

So let's assume I have a listbox with N elements in it. I assume the render() method has to visit each of these elements every time an updates takes place, so it is O(N). Please correct me if I'm wrong here. Now for a certain value of N, things will become slow, unresponsive. I'm guessing now that this value of N is above the value where the browser cannot handle this number of elements anyway. Is this correct? PS: I…

A render in react doesn't return DOM elements. Render is a pure function which projects app state into a description of the view. Let's call this description A, so render(state) -> A. When state changes and render is called a second time we get a new description, render(newState) -> B. A diff is then applied to them diff(A, B). The diff can then be translated to an update strategy for the actual DOM (or in this case,…

Amelius, I cannot reply to you directly for some reason. Anyway...

So say you're rendering some long list of items. Because react is just plain JS (no templates!), you will map the array of items to components in your render. You give each item a key so that react can reconcile components across renders. If component with same key is returned from render next time then it's kept in the DOM (and any updates applied), if not then it's removed. So the involved part becomes determining what is visible or not, and then slicing your list of items to only map a subset. This is the more involved part. I haven't built anything like this myself, but I'm guessing it basically boils down to: listening to scroll events on container, determining y offset, get height of contaoner and height of elements, use that to determine which items in list should be mapped to components in render. That bit is the same whether react or not.

See James Longster's epic blog post "Reducing User Interface Complexity, Or Why React Is Awesome" [0]. Where he details this kind of approach with his for-demp-purposes-only react-like lib.

[0] http://jlongster.com/Removing-User-Interface-Complexity,-or-...

Post reply on HN