Anand Sharma (twitter) (github), also known as aprilzero, is a designer, developer, traveler, runner and founder of Gyroscope. His post "I've been tracking everything about myself" exploded on HackerNews just over a year ago, followed by a pair of blog posts where he detailed the design process. He went on to generalize his personal dashboard into a platform that anyone can use and called it Gyroscope. He's now using React Native to bring his unique design aesthetic to mobile, so of course I had to catch up with him on this new thing called "the internet" (sp?) to share his story and experiences.
Could you briefly describe your background in software development?
Sure! So I started doing web stuff about 10 years ago, ran a small design agency in LA and most of our projects were fun CSS/Javascript projects.
if i’m not mistaken, this is your first foray into mobile development - what was it that attracted you to the web instead of mobile?
Well when I was starting out, it just didn’t exist. But once people started making apps, I kept trying to start and get into it but the structure and process just felt so strange to me coming from the structure of web technologies.
So most mobile stuff I did was in collaboration with other developers, designing mockups of screens and stuff and then waiting for them to build it & iterating.
Built some pretty good iphone apps that way, like one of the first ones was the Quizlet iphone app which was me and this great 14 year old developer named Jake.
After a while I was just really used to all my tools — like Sublime, and live reloading CSS, and the chrome inspector, and my favorite tools like SASS/jquery/etc. — so leaving those all behind and starting from scratch was a bit intimidating.
that seems like a common path. were you using react much before you dove into react native?
I actually hadn’t used react before, but our previous CTO Eric had used it a lot and was really excited for us to start trying it out.
He wrote a big post at https://blog.gyrosco.pe/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2 which was pretty popular
So at that point we were pretty sold and just needed to figure out the right project to use it on.
Nice! If you were to go back and rebuild gyroscope, after your experience using react native, do you think you would use react for it?
Maybe. We’ve thought about doing that switch some point, but really most of our web stuff is pretty simple right now that we might not need it yet. I’m a fan of using really simple tools as long as possible. There are some new features we’ve been thinking of adding — like similar sharing tools to what we have in our app, with lots of state and changing data, which would probably be good for that.
Alright let’s dig into react native then and get serious: if you were a product team at facebook, what would you be asking the react native team to build for you?
I think most of our issues right now are with performance and how things feel. Like we can get a screen to look good, but then clicking around or dragging stuff can sometimes get laggy. Especially on not the latest iPhones. It’s mostly because we’re just doing so much stuff, but I’d be happy if there were no new features but everything just ran 2x as fast.
And that’s been happening so far, like a month ago we had a bunch of bug reports on iPhone 5 and stuff of it being really laggy, and then we upgraded to the latest react version and that got fixed, so that was really cool.
Otherwise I would’ve had to spend a bunch of time figuring that out. There have been a bunch of things that are just getting fixed right as we need them. Like we did some map-webview stuff and needed transparent backgrounds, and upgrading to the new version that was released that same day added that feature.
Our first app was a pretty simple app, but for the latest one we’re trying to push the envelope a bit more and do things in 3D, with perspective and stuff.
And so the animation performance of that is a big concern, having tools and optimizations to help us get 60fps for every interaction would be really cool. I’m not sure how to do that, whether it is GPU optimizations or rasterizing layers to speed things up, but that’s what we’re focused on right now.
Also stuff with vectors and shapes. I haven’t really looked into ART yet but that seems promising. We’re coming from using D3 with SVG to graph a lot of stuff, and going to need to build a lot of that natively soon.
I think having more docs and examples of how to use features that are already there would be helpful for us.
I think lots of things I want maybe have already been implemented because they’re not crazy new ideas, but they’re just not documented or listed somewhere. Like looking at some of the code examples you posted made it a lot clearer of how these things are intended to be used together and what things have been well optimized and tested already.
ART is great - you can actually use d3 with it if you use the path data generators to generate paths that you can just pass into the d prop on Shape. The biggest problem there is just hit detection, which hasn't been built into ART yet.
Also, it sounds like even if an optimization wasn’t done for you directly, you’d really just like to know more what steps you can take to take care of that yourself, and any tooling that you’d need to do that
Yeah, more sample code that has been optimized to see what is the best recommended way of doing things that will probably work well.
Those are some great points!
can you talk a bit about your apps for those of us that have yet to see them? and if any are available, for testing or otherwise, where can people find them?
So we’re working on two iOS apps right now. One is a run sharing app that has been in beta for about a month & we’re getting ready to release soon.
The idea for that app is you go on a run and you track it with a logging app like Strava or Runkeeper, but usually it just sits there, so we take that data and show you cool stats about your run and generate a nice card that you can post on Instagram or send to a friend. (Some examples)
Things like combining the map with your photo or fun things like calculating how many donuts of calories you burned. You can see some that people have shared at https://instagram.com/gyroscope_app/
Disclaimer: I am a runner and I think this app is awesome
So for each run there are a bunch of options to choose from, and you’re just changing the state & it moves stuff around in the design until you get something you like. We sent it out to all our Pro users last month to do a bunch of testing, and some other users on Gyroscope who have a lot of runs — including you. The feedback has been really great
The other app we’re working on right now is a dashboard for everything in your life. It integrates with healthkit on your phone and processes all that data. So things like your heart rate from your apple watch, or daily steps, etc.
And combining that with all the other data we track, like your weight, or places you went to, or how much time you spent working today.
Our hope is by seeing all of that info in the same place & with the right presentation, it will have a big impact on people’s health & overall lives.
How can people follow along with the progress and get notified when the apps are released?
So we’ll post updates & previews on our Instagram & Twitter: http://instagram.com/gyroscope_app and http://twitter.com/gyroscope_app
We send new features and beta apps to pro users first to test for a month or so and then usually release it to everyone else.
But hopefully that will be soon! Really excited to get these in the hands of everyone, as soon as we can fix some of these performance issues & have it feeling awesome. But we’re getting really close, and I’m so so excited at how fast we’ve been going.
Knowing what you know now about mobile development with react native, how confident would you be that you could re-create a similar or better version of that quizlet mobile app that you mentioned earlier?
I think that would be pretty straightforward. I know their web team has already switched to react for a bunch of stuff
Are there any apps on your phone, other than games, that you feel would be really tough to recreate with react native in its current state?
At this point I’m pretty confident in being able to build stuff really quickly with react. At least having a good prototype working really quickly, I think the final 20% of polish and smoothness is still a little tricky to pull off especially when all the data and feature start to add up
I think 3d stuff is tough. Like flexbox is great for laying out grids and stuff but, for example, the page switcher in Safari - I have no idea how we would build something like that in react, it’d get tricky.
I think interacting with media is hard too, like even just our photo uploader was tricky to build well. but if it was some sort of photo or video tool, like snapchat, I’m not sure how I’d build that.
If there’s someone out there with a lot of experience with the kind of optimization problems that you’ve mentioned and want to lend a hand, how should they get in touch with you?
I can always be reached on Twitter @aprilzero, or emailed directly at anand@gyrosco.pe
Awesome! any other comments, announcements, shoutouts, shoutins, or birthday wishes you want to send out?
Couple things, 1 just want to say how excited we are about react native. At the beginning of this year we were totally in a panic of how we were going to get our iOS apps to be really good and recruit the best iOS developers, it was really keeping me up at night for weeks.
And the new features & improvements that are constantly being made have been a huge huge huge part of what we’re doing.
So, just really appreciate all the hard work everyone has been doing to make react native so good!
Shoutouts to whoever made the webview improvements, and the recent animated API is a huge improvement, and also the new perspective transform stuff is killer. Without all 3 of those we wouldn’t have been able to make our app
and 2. if anyone is a runner and wants to test our the app, let me know!
Awesome, thanks Anand, keep up the inspiring work
Thanks! You too :)
If you want more Anand, check out his recent interview on the Design Details podcast!