Hacker News Reader

Comment by peterhunt | Hacker News Reader

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

View on HN

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.

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.

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

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)

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.

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.

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.

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.

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?

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.

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.

QML has exactly this -- and you write the constraints (arbitrary complex, almost) in Javascript :)

You guys better be filming the talks! :)

You can see this particular keynote presentation here: https://www.youtube.com/watch?v=KVZ-P-ZI6W4

When would this be open to the world? :)

ha "NOT be the next Java Swing"

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

So it won't actually use web views? Interesting.

Cannot wait!

Bananas

Reply on news.ycombinator.com