News for hackers. Stuff that matters.
Re:Use ReactJS to Build Native Apps by jordwalke on Wednesday January 28, 2015 @02:30PM (#8961937)
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.

Re:Use ReactJS to Build Native Apps by peterhunt on Wednesday January 28, 2015 @02:36PM (#8961988)
There will be more detail tomorrow, but at a high level:

* JS engine on a background thread

* Communicates via batched, async messaging protocol to a native (objc or android) server running on the main thread (basically create_view(), update_view(), destroy_view(), on_event() etc)

* Plug-in for React that speaks that protocol

* Tools to make cross-platform dev a bit easier (standard text component, cross-platform flexbox layout system)

* Designed to take advantage of native platform views, NOT be the next Java Swing

Re:Use ReactJS to Build Native Apps by abalone on Wednesday January 28, 2015 @03:01PM (#8962187)
How does it compare to Appcelerator Titanium? That's also a JavaScript-to-native-UI layer utilizing a JS runtime. http://www.appcelerator.com/titanium/

I know one complaint among many was that wrapping native API in a new framework can limit access to functionality and customization; you're limited to the choices of the framework designer. Another is debugging is harder since native tools don't understand the framework and you're dependent on the tool chain provided by the framework makers.

Re:Use ReactJS to Build Native Apps by yuchi on Wednesday January 28, 2015 @03:33PM (#8962373)
That’s why they (Appcelerator) have a pretty solid but not well documented plugin infrastructure. At the same time they are moving to a more native-friendly infrastructure, code-named Hyperloop.
Re:Use ReactJS to Build Native Apps by drcode on Wednesday January 28, 2015 @02:52PM (#8962114)
Please, please have constraint-based layout support- I know you want to have it, given your work on react-gss :-)
Re:Use ReactJS to Build Native Apps by gshearer on Friday January 30, 2015 @11:44AM (#8972825)
What would be awesome and truly useful is real constraints, like in CAD software. I should be able to express every width, height, x, and y value as a variable, or as a function of other variables. So I call the device height "A", the width "B", and express the rest of the UI in terms of those variables. Then at runtime "A" and "B" are defined, and the rest of the layout magically does its thing.

What Apple calls "constraint-based layout" is cool, but does not follow the classical definition of what a constraint-based layout actually is. They don't use variables anywhere in the IB UI. You can only define proportions in code which is incredibly clunky.

Re:Use ReactJS to Build Native Apps by mlvljr on Saturday February 07, 2015 @03:58AM (#9013514)
QML has exactly this -- and you write the constraints (arbitrary complex, almost) in Javascript :)
Re:Use ReactJS to Build Native Apps by yuchi on Wednesday January 28, 2015 @03:34PM (#8962383)
Given the presence of https://github.com/facebook/css-layout it will probably flex-based. Not cool as a constraint based layout but good enough for easier portability of knowledge.
Re:Use ReactJS to Build Native Apps by drcode on Wednesday January 28, 2015 @03:46PM (#8962457)
Can I create the largest possible square div in a rectangular div with this library? That is my standard test as to whether a layout framework is advanced enough to meet my basic needs. (vanilla CSS fails this test of course, even with the most recent extensions, AFAIK)
Re:Use ReactJS to Build Native Apps by carterehsmith on Wednesday January 28, 2015 @06:30PM (#8963244)
With css-flexbox, you probably can. Your DIV should have flex-grow: 1 which will make it take the allowable space along the "main axis" (shared with other flex-growers) and then align-items: stretch, to pick up all available space along the "cross axis". With some nesting, you can do pretty much whatever you want except for the grid layout. Grid layout is another thing coming but barely implemented in the today's browsers.

Anyways, flex-box is not available in IE < 10. IE10 requires ms- prefix. If React makes it available everywhere (IE8+) that will be really great.

Re:Use ReactJS to Build Native Apps by drcode on Wednesday January 28, 2015 @07:38PM (#8963611)
Thanks, but last I looked into this it wasn't possible for this to work for a square in a parent rectangle of arbitrary dimensions. Can you find an example that works, using jsfiddle or something similar?
Re:Use ReactJS to Build Native Apps by vkjv on Thursday January 29, 2015 @01:26PM (#8967929)
Are you excluding hacks? Because you can do this pretty easily in CSS2 since padding is always relative to width. Make your square div { width: 100%; height: 0; padding-bottom: 100% (or whatever ratio you want, doesn't have to be 1:1); };
Re:Use ReactJS to Build Native Apps by drcode on Thursday January 29, 2015 @03:31PM (#8968648)
That only works for one dimension, can't handle square in landscape rect.
Re:Use ReactJS to Build Native Apps by yuchi on Wednesday January 28, 2015 @03:56PM (#8962498)
You can do that with some funny inline-block wizardy on Vanilla CSS by the way. I don’t currently know if flex-box helps here. I think not.
Re:Use ReactJS to Build Native Apps by carterehsmith on Wednesday January 28, 2015 @06:35PM (#8963274)
Source? AFAIK if you want your border, padding and margin respected, there is no way to do the above in vanilla CSS. Which is why css-flexbox was proposed.
Re:Use ReactJS to Build Native Apps by yuchi on Thursday January 29, 2015 @02:31AM (#8964807)
Here it is (it’s border-{top, bottom} based, not inline-block) http://www.mademyday.de/css-height-equals-width-with-pure-cs...

The issue is that it’s only width-constrained.

Re:Use ReactJS to Build Native Apps by OlavHN on Wednesday January 28, 2015 @03:14PM (#8962281)
You guys better be filming the talks! :)
Re:Use ReactJS to Build Native Apps by jordwalke on Wednesday January 28, 2015 @09:12PM (#8963930)
You can see this particular keynote presentation here: https://www.youtube.com/watch?v=KVZ-P-ZI6W4
Re:Use ReactJS to Build Native Apps by AnSavvides on Wednesday January 28, 2015 @04:03PM (#8962526)
When would this be open to the world? :)
Re:Use ReactJS to Build Native Apps by mmgutz on Wednesday January 28, 2015 @03:33PM (#8962372)
ha "NOT be the next Java Swing"

TBH, I don't use React right now but this is a game changer.

Re:Use ReactJS to Build Native Apps by bceagle on Wednesday January 28, 2015 @02:44PM (#8962045)
So it won't actually use web views? Interesting.
Re:Use ReactJS to Build Native Apps by josebalius on Wednesday January 28, 2015 @02:42PM (#8962024)
Cannot wait!
Re:Use ReactJS to Build Native Apps by phoenixbox on Wednesday January 28, 2015 @02:44PM (#8962039)
Bananas
Re:Use ReactJS to Build Native Apps by malandrew on Wednesday January 28, 2015 @06:16PM (#8963180)
Will this layer be released as a separate project so that other projects like raynos/mercury [2] or elm [1] can target this interop layer?

mercury was fully decoupled from virtual-dom [0] (such that you can use virtual canvas or virtual-gl). Would be really nice if this stuff can be used by other libraries easily.

[0] https://github.com/Matt-Esch/virtual-dom

[1] http://elm-lang.org/

[2] https://github.com/Raynos/mercury

Re:Use ReactJS to Build Native Apps by doublerebel on Wednesday January 28, 2015 @07:51PM (#8963664)
Yes pleaseeeee tell me I can take advantage of just the View layer and use my own Model and Controller setup. With Titanium views are 'just' JS objects, so I can use Spine, Backbone, and other libraries for business and data logic.
Re:Use ReactJS to Build Native Apps by danabramov on Friday January 30, 2015 @08:44AM (#8971927)
Um, you can do that in React just fine.

It's just you don't really need Backbone with React because plain object/array models are more convenient, and controllers aren't needed because there's no need to “orchestrate changes” between view and model. Check out Flux as an example of architecture (not a framework) that works really well with React.

Re:Use ReactJS to Build Native Apps by mercer on Saturday January 31, 2015 @09:14AM (#8976738)
Exactly. I once started a project with backbone and used React for the view layer. I quickly realized I didn't need the Backbone models and collections, and ended up only using the router and a few small other things. Eventually i replaced these remaining parts with some 'micro-frameworks' like lo-dash, page.js, superagent, etc.
Re:Use ReactJS to Build Native Apps by mcintyre1994 on Wednesday January 28, 2015 @04:24PM (#8962635)
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?
Re:Use ReactJS to Build Native Apps by Xuzz on Wednesday January 28, 2015 @04:25PM (#8962638)
Facebook Groups is available for Android: https://play.google.com/store/apps/details?id=com.facebook.g...
Re:Use ReactJS to Build Native Apps by mcintyre1994 on Wednesday January 28, 2015 @04:33PM (#8962675)
I think that answers my question! Sorry, I only searched on my phone and it didn't show up.
Re:Use ReactJS to Build Native Apps by arasmussen on Wednesday January 28, 2015 @04:45PM (#8962746)
Actually currently only the iOS Groups app is built on top of React Native. (I'm Andrew, I work at FB on React Native)
Re:Use ReactJS to Build Native Apps by nunocostapt on Wednesday January 28, 2015 @05:01PM (#8962829)
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 by arasmussen on Wednesday January 28, 2015 @06:09PM (#8963149)
A significant portion of it, yes
Re:Use ReactJS to Build Native Apps by mcjiggerlog on Wednesday January 28, 2015 @02:34PM (#8961973)
Can you let us know a bit more about what this is? Native to what? Android / iOS? Desktops?

Does it allow you to render native components with JSX as opposed to only DOM elements? Can you mix the two, somehow?

Re:Use ReactJS to Build Native Apps by jordwalke on Wednesday January 28, 2015 @02:59PM (#8962171)
React has, from day one, sought to liberate itself from the underlying low level building blocks of a particular environment. There were always good reasons to so (normalizing browser inconsistencies etc). There is another benefit of the specific way in which we've built this library level layer of abstraction - we've formed a serializable boundary that allows vanilla React to sit on one side, and any set of lower level building blocks on the other. Before today, we simply had the DOM renderers sitting on the other side of that boundary. React Native replaces the DOM renderers with native renderers which allows people to render platform <View>/<ScrollView>/<NativeWhatever> instead of <div>/<span>. Other than that, you get to use the exact same React API that you already know (even down to the event bubbling). You can bridge to things that are only available on the platform, and can in general make higher performance granular building blocks that cannot be accomplished with web technology (such as <Image> components that decode images more efficiently or with different concurrency models). As with everything, JSX is not required to take advantage of this - and you can use any of the compile-to-js languages that you use with React today.
Re:Use ReactJS to Build Native Apps by zpao on Wednesday January 28, 2015 @02:47PM (#8962071)
iOS and android right now. And yes, native components can be rendered directly with JSX. And you won't need to mix with DOM. <h2> For example doesn't mean anything on iOS.
Re:Use ReactJS to Build Native Apps by jordwalke on Thursday January 29, 2015 @03:47AM (#8965015)
I also covered some of the performance related questions in another HN thread here ("zero DOM not virtual DOM"): https://news.ycombinator.com/item?id=8964935

I'll try to address some of the other more specific questions inline.

Re:Use ReactJS to Build Native Apps by kcorbitt on Wednesday January 28, 2015 @02:44PM (#8962040)
I know it's a bit of an orthogonal concern, but will this project provide a way to style native apps using web technologies (e.g. CSS) as well? I'm very excited about building native apps with React, and would be even more so if I could also leave behind the very-poorly-designed Android style primitives.
Re:Use ReactJS to Build Native Apps by peterhunt on Wednesday January 28, 2015 @03:01PM (#8962194)
Yes, a subset of CSS was ported
Re:Use ReactJS to Build Native Apps by magnatronus on Thursday January 29, 2015 @03:32AM (#8964972)
Apologies - In at the deep end with a very specific (hardcore?) question.

In Titanium it is difficult, if not impossible without resorting to a Native plug-in (which kinda defeats the object of using it IMHO as this is not 'Learn once, use anywhere'), to re-create an interface similar to the Facebook app. i.e. the vertical scrolling timeline with embedded horizontal scrolling images in each post. (on Android it really does suck) due to issue with memory, threading etc.

So I guess my question is, is it something to that React Native could cope with, or would it potentially suffer from the same memory, threading issues?

And my guess is that at some point it has to surface, so a good architectural comparison would be fab.

Perhaps the Hyperloop/React Native race is on :-)

Re:Use ReactJS to Build Native Apps by danabramov on Wednesday January 28, 2015 @02:35PM (#8961983)
Does it run using JavaScriptCore? Can we implement something like Hot Module Replacement a la react-hot-loader[1] for it?

I dreaded my Xamarin build times..

[1]: http://gaearon.github.io/react-hot-loader/

Re:Use ReactJS to Build Native Apps by spicyj on Wednesday January 28, 2015 @02:54PM (#8962128)
Yes, that should be possible – it loads JS packages from a custom server right now but there's no reason it can't use Webpack. You'll be able to reload immediately (without recompiling) already by pressing Cmd-R in the simulator.
Re:Use ReactJS to Build Native Apps by danabramov on Wednesday January 28, 2015 @02:59PM (#8962170)
Oh that's sooooo great. Thank you.
Re:Use ReactJS to Build Native Apps by Feeble on Wednesday January 28, 2015 @02:34PM (#8961971)
Hi Jordan, when you say native apps what platform(s) will it be possible to target? E.g. windows, osx, ios, android etc?
Re:Use ReactJS to Build Native Apps by arasmussen on Wednesday January 28, 2015 @04:48PM (#8962762)
We're currently working on just iOS and Android.
Re:Use ReactJS to Build Native Apps by dengar007 on Wednesday January 28, 2015 @02:44PM (#8962044)
I'm not at the conference and haven't had a chance to read too much into this yet (so if the answer is just wait you'll see that's good :D)

Can I use the same kind of jsx I am on the web today or is there going to be something different? Will sharing components between web and native mobile apps be possible?

Re:Use ReactJS to Build Native Apps by rajington on Wednesday January 28, 2015 @03:11PM (#8962255)
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.

Re:Use ReactJS to Build Native Apps by arasmussen on Wednesday January 28, 2015 @04:47PM (#8962759)
There won't be a livestream but presentation videos will be uploaded shortly afterwards!
Re:Use ReactJS to Build Native Apps by zkhalique on Wednesday January 28, 2015 @03:16PM (#8962300)
Wow. It looks like we're going to have to make our platform (http://platform.qbix.com) integrate with React out of the box. This sounds pretty awesome.

In short, how will it work and do you have any links we should check out, or people I can contact? The React virtual DOM has all kinds of elements that map to DOM elements, so how would it render in a native app? What about native APIs and Javascript that can interface with it e.g. like it does in PhoneGap? What is the equivalent here?

Is it like Titanium in some way?

Re:Use ReactJS to Build Native Apps by mrdrozdov on Wednesday January 28, 2015 @02:40PM (#8962011)
Is there sample code? Will this be open sourced?
Re:Use ReactJS to Build Native Apps by zpao on Wednesday January 28, 2015 @02:48PM (#8962078)
No sample code yet and yes it will be open sourced.
Re:Use ReactJS to Build Native Apps by mrdrozdov on Wednesday January 28, 2015 @02:59PM (#8962165)
Great! Looking forward to it!
Re:Use ReactJS to Build Native Apps by hitlin37 on Wednesday January 28, 2015 @02:52PM (#8962113)
are you targeting arm platform support as well? I'm interested to know if any plans to have it on embedded devices.
Re:Use ReactJS to Build Native Apps by thramp on Wednesday January 28, 2015 @02:38PM (#8961997)
How does it compare to AsyncDisplayKit?
Re:Use ReactJS to Build Native Apps by dkasper on Wednesday January 28, 2015 @04:23PM (#8962631)
According to FB it is conceptually a continuation of AsyncDisplayKit https://twitter.com/fbOpenSource/status/560512580326674432
Re:Use ReactJS to Build Native Apps by arasmussen on Wednesday January 28, 2015 @06:53PM (#8963383)
React Native uses similar principles of AsyncDisplayKit (doing as much work as possible on a background thread and only doing what we absolutely need to on the main/UI thread) but does not depend on AsyncDisplayKit.
Re:Use ReactJS to Build Native Apps by peterhunt on Wednesday January 28, 2015 @05:02PM (#8962841)
I believe AsyncDisplayKit is a dependency of the iOS plugin for React Native.
Re:Use ReactJS to Build Native Apps by jnbiche on Wednesday January 28, 2015 @05:51PM (#8963075)
Any word on SVG support?
Re:Use ReactJS to Build Native Apps by curiously on Wednesday January 28, 2015 @04:53PM (#8962787)
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 by spicyj on Wednesday January 28, 2015 @07:15PM (#8963499)
http://conf.reactjs.com/

Yes, with React Native you'll be able to write native mobile apps completely in JavaScript.

Re:Use ReactJS to Build Native Apps by curiously on Wednesday January 28, 2015 @07:40PM (#8963616)
but for iOS I need to develop it on an Apple machine correct?
Re:Use ReactJS to Build Native Apps by spicyj on Wednesday January 28, 2015 @07:44PM (#8963629)
Yes, you need a Mac in order to run the simulator or build to a device.
Re:Use ReactJS to Build Native Apps by curiously on Wednesday January 28, 2015 @10:12PM (#8964109)
Okay I will buy a Mac...just so I can develop for both Android and iOS using Javascript.