Comment by nwienert | Hacker News Reader

Comment by nwienert | Hacker News Reader

Hey hackers, Nate with Reapp here. I'll add some technical background. This has been a solo project of mine for the last five months. I actually was relatively green to npm and React in general at the beginning, but I've been working on this full-time since. I think it's a great testament to React's power and ease of understanding.

I spent a large part of the development on the animations. Reapp has a custom animation mixin designed for React that works through props. It's really cool and I'll be writing a blog post on it this week. It's what drives all the animations you see including the fully interactive "swipe view from edge to go back", as well as modals and popovers. You can see the animations here:

https://github.com/reapp/reapp-ui/blob/master/themes/ios/ani...

Another thing I've spent a lot of time on was getting the view animations to match iOS. Notice how the TitleBar text animates, while the icons remain in the same position. This took quite a bit of effort and resulted in several refactors of the animation library.

Finally, theming. The theme system is quite robust, though the iOS theme itself needs work. It's fully JS-powered CSS, and we use Flexbox for the default theme. It uses two teirs: Constants and Styles. You can override any of our constants or styles to make your own theme, or load an entire new one. I'll also be writing about this more because it's really a big feature. Here's an example of loading a custom theme:

https://github.com/reapp/hacker-news-app/blob/master/app/the...

That folder also contains more interesting usage.

Feel free to ask me any questions you all have, I'm happy to answer.

Although everyone is going to jump on the React Native bandwagon, there's good reasons not to. It's not like every write-once framework is going to go away. How far do you think you are from a components library that can compete in breadth and maturity with Ionic and do you think you'll go down the path of what Supersonic is doing with Ionic, but with React (the semi-native components/transitions/views aspect)? The answer probably lies in whether you're starting with an incubator like Drifty did or going to rely on community support. I think there's enough people out there that don't like Angular, but aren't ready for the commitment of a React Native project.

Also, it seems to be looking for a "http://kitchen.reapp.io/assets/sunrise.jpg" in the drawers demo, which isn't there.

Thanks. As per ionic: give it a few months, but I think it's already gotten pretty far. I tried to throw as much in as I could while still launching within a reasonable time. I've had a ton on my plate between the launch site, docs, apps, platform, cli, etc.

For now I'm going to start doing consulting using Reapp, starting today. So as I go I'll be pushing stuff back to it.

I'm considering funding, I think it would help to really build it out right. Would open it to cool native features, easier build/deploy tools, and focusing on the tech and featureset.

Fantastic work! It is exciting to see a project like this take off. I'm trying to dive in right now, and I noticed something interesting. Pardon my ignorance, but can you explain what this is?

module.exports = { route, routes };

I got an error when I tried to do this:

var a = {1, 2};

What is it setting in that case, since there is no concept of tuples in javascript? It doesn't seem to be an array, dictionary, or function. Appreciate any advice!

It's ES6 shorthand literal syntax [1], equivalent to:

    module.exports = { route: route, routes: routes };

[1] http://ariya.ofilabs.com/2013/02/es6-and-object-literal-prop...

That explains a lot. Thank you!

It feels like you are using click for touch events. Which causes a ~300ms delay only on mobile phones.

Makes me a little concerned about what other "common" hybrid bugs you've missed. Is this your first rodeo with Hybrid apps or have you pushed them to production?

There's a bug on the hamburger menu that's actually not the 300ms delay but seems like it.

Everything else avoid the 300ms delay. We are using react-tappable[0] as a mixin into many of our components that allows a nice onTap={this.handleTap} usage.

It is alpha. For example, I need to fix behavior that allows you to overflow scroll the entire body, which will require some thought and care in it's implementation, but I've already gotten it most the way there. More optimizations will come.

As far as rodeo's it's not my first with hybrid though, I made a large mobile hybrid site in 2u.fm (now deceased, it avoided the 300ms delay though :)), and with my previous employer's site in production quite a bit.

[0] https://github.com/JedWatson/react-tappable

Reply on news.ycombinator.com