3 ms·

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

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/animations.js 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/theme/theme.js 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.

rajington 12y ago
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" http://kitchen.reapp.io/assets/sunrise.jpg" in the drawers demo, which isn't there.
- nwienert 12y ago
  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.
peregrine 12y ago
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?
- nwienert 12y ago
  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 https://github.com/JedWatson/react-tappable
rheng 12y ago
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!
- insin 12y ago
  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-property-value-shorthand.html http://ariya.ofilabs.com/2013/02/es6-and-object-literal-prop...
  - rheng 12y ago
    That explains a lot. Thank you!

rajington 12y ago

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" http://kitchen.reapp.io/assets/sunrise.jpg" in the drawers demo, which isn't there.

nwienert 12y ago
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.

peregrine 12y ago

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?

nwienert 12y ago
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 https://github.com/JedWatson/react-tappable

rheng 12y ago

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!

insin 12y ago
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-property-value-shorthand.html http://ariya.ofilabs.com/2013/02/es6-and-object-literal-prop...
- rheng 12y ago
  That explains a lot. Thank you!