Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Use ReactJS to Build Native Apps

twitter.com

Post reply on HN
Print view View original

161–170 of 175 posts

Re: Use ReactJS to Build Native Apps

#161

Post by TheCoelacanth »

amelius wrote: post #155
drcode wrote: post #78

Earlier quoted context omitted.

DOM is stateful, whereas the render() method is stateless. For instance, if you add a to the DOM, it will stay there forever. On the other hand if the next call to render() no longer includes the then React will do the work of removing it from the DOM.

But then render() has to re-generate all the stuff over and over again, which could be slow.

There are two things that stop it from being slow in practice:

1. The virtual DOM that render deals with is several orders of magnitude faster than the real DOM, so you need to have thousands of elements before it starts taking longer than making the one change to the real DOM for the one element that changed

2. You can skip calling render on subcomponents that haven't changed, so while updating a list of 10000 elements where one has changed would require iterating through 10000 elements, updating a list of 100 elements that each contains 100 elements where one of the bottom level elements has changed would only require iterating through 200 elements.

Re: Use ReactJS to Build Native Apps

#163

Post by vkjv »

drcode wrote: post #91
yuchi wrote: post #86

Earlier quoted context omitted.

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.

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)

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

#164

Post by drcode »

vkjv wrote: post #163
drcode wrote: post #91

Earlier quoted context omitted.

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)

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); };

That only works for one dimension, can't handle square in landscape rect.

Re: Use ReactJS to Build Native Apps

#166

Post by danabramov »

doublerebel wrote: post #139
malandrew wrote: post #129

Earlier quoted context omitted.

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/merc…

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.

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

#167

Post by danabramov »

devgeeks wrote: post #156
sudhirj wrote: post #71

Summary of what I can make out so far: * Write JS as usual. Write React as usual, but don't use the DOM JSX elements (or the React.DOM) factories - instead use the new 'NativeView' elements. * The code you write runs in a Javascript interpreter on the background thread. * The NativeView elements communicate transparently with a native server running on the main thread, which renders and fills native views based on th…

Has anyone asked if this can use other JS libs other than just React ones? Also, if it's just using say JavaScriptCore and rendering native, I assume this means speed limitations imposed by the lack of Nitro/etc on the UIWebView are moot?

JSC doesn't have JIT.

They claim perf is fine though (e.g. because render is always async, app code is always in background).

We shall see!

Re: Use ReactJS to Build Native Apps

#168

Post by danabramov »

candl wrote: post #30
amasad wrote: post #24

Earlier quoted context omitted.

Instead of having React render to the DOM it renders to Native views. Be it iOS, or Android.

I doubt it would happen at runtime in iOS/Android, though? They would need to ship a JS interpreter that gets run on application startup, parse the React files, instantiate the native controls and create a bridge between them back to the JS interpreter? Well on second thought I guess Appcelerator Titanium does something similar. So it's native UI only, but with the added overhead (JS interpreter + bridge, larger bina…

>They would need to ship a JS interpreter that gets run on application startup

Um, why? They already have JavaScriptCore (it's an iOS API).

Re: Use ReactJS to Build Native Apps

#169

Post by gshearer »

drcode wrote: post #64
peterhunt wrote: post #40

Earlier quoted context omitted.

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 fle…

Please, please have constraint-based layout support- I know you want to have it, given your work on react-gss :-)

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

#170

Post by aoakenfo »

So...a JS interface to a server that creates native views. I don't get it, what is all the hype about? You've got an extra layer and level of abstraction (read: complexity) in your pipeline. I don't see how you can abstract away the idioms of a platform - they're native. 'Write once, run everywhere' has failed time and time again. So marketing changed its tune to 'Learn once, run everywhere' and now people are gushing how HUGE this is?
Post reply on HN