Building an app in Views and React
A case study and a demo of the Views design process, React implementation, external API fetching, and other JS logic.
Get all the source code from GitHub, and iOS or Android builds from the respective stores, or open the Web version in the browser.
Joyride is a demo app made as an example of a “no-hand-off” workflow. We use Views Tools, Create React App, and Expo through Create React Native App. Joyride was done from scratch by one designer (me) and one developer (Darío Javier Cravero) in a total of 15 hours across 5 working days.
Problem
- We don’t enjoy the experience of any other city biking app out there.
- We want a Views demo app to show a broader spectrum of components and implementation techniques that you would typically see in a showcase todo app.
Available alternatives and basic UX research
- Google Maps
- AllBikesNow
- City Bikes (Android)
- Just Eat dublinbikes
- NearBikes for Dublin
- Cycle Planner
- Simple Dublinbikes
- BikeMe
User Persona — meet Aoife 🤩, she works in town and rents a room with friends in the suburbs. 10km distance to the office is too much to walk everyday and waiting for a bus does not feel productive. Aoife likes to cycle and uses city bikes because she doesn’t have space to keep her own bike in the apartment. She also likes simplicity in her busy life. None of the other biking apps feel simple, and she just wants to know where there are free bikes or available parking spots, and navigate between the easily.
UX Design Thinking
Our brief is simple: simple interactions and a clear interface!
We start by empathizing with the user. The most common use case is to check the availability of bikes and free racks nearby. That’s what we decide to embrace and focus on, a list of stations ordered by the closest to user’s current location, and then a link from each list item to a marker on the map.
The rest of the happy bunch are the splash screen with an app icon, a modal explaining why would you want to let us use your location, and another one letting you know when your location services are disabled (with a deep link to Settings to flip the switch).
UI Design and implementation in Views
I use Views Tools to design and implement all required layouts. Views Morpher -which is the open-source library that powers Views Tools- auto-compiles my compositions into React Native components.
By now, the process takes us around two days of work including initial iterations on layouts, colors, icons, and branding. Block after block, I make the interface happen, in the meantime, Dario focuses on the logic.
For example, changing the top bar layout takes a minute and is as easy as dropping a “Refresh” button before the logo and fixing alignments.
All progress is auto-saved and auto-committed. When I press the “Stop Session” button, my changes get pushed for me to the git repo. More improvements will come to git automation in the future for non-technical folks. 🤩
Map integration
Views lets us integrate any React component as if it were a view itself. In both apps, our Map.view file uses a MapView view which is a wrapper around the React components for both, web and native. It’s amazing to have all of NPM and your own custom components available to integrate at any time.
Oh, and don’t forget to add your Google Maps key to your app.json or your standalone Android app will show a blank map and you’ll be like 😕.
State Management
Since our app is pretty simple, there’s not a lot going on in our state management. We’re using React’s setState to handle a user’s choice of which screen they’re looking at any given time. All of that is on App.view.logic.js.
Logic
Our list of cities is static, so we put it directly into the view.
Getting live information on stations is when things get a bit more interesting though! The Stations component deals with getting updated data about stations in a city. Separating how you get your data from how you display it is a very resilient way of building your apps and shields it from changing APIs and data sources. See that in action in Stations.view.
Another example of such separation of concerns is the Location component. Dealing with location in web and native is very different but our abstraction on top of that allows us to forget about those differences when implementing the app. Here are the web and native App logic using their own Location components in the same way despite their internal differences.
The design of the API of those components took some time but thanks to Tom being able to deal with the UI through Views, I was able to focus on it and get a nice abstraction going on!
Animations
These are fresh out of Amy McCarthy’s latest brilliant work on Views Morpher! Amy is a core contributor to Views and her input is invaluable to us. A write-up on how to use them and on our vision for animations will be coming up soon. For now, you can see how we’ve staggered the list of stations and cities for some smooth entering animation when they load.
Expo
Setting up your development environment isn’t a simple task, I’m very excited about initiatives like Guppy that are looking at removing the dev setup wall altogether!
Projects like Create React App and Create React Native App (which uses Expo underneath) remove a lot of the overhead of focusing on your app.
Expo deserves a special mention here because without it, building, testing and updating the React Native app would have been way harder. Once we integrate Fastlane making store updates should be pretty straight forward.
Continuous Design
Continuous deployment was a key game changer in product development. Developers can make their changes, test them against the real environment, and tweak the code until it works.
Continuous design is set to enable designers to do the same with design problems and improvements. Fast iterations, full control, rapid testing; all without creating more work for the dev team or waiting for the ambiguous results of the usual hand-off miscommunication.
Here’s Continuous Design in action! 👇 The gif below shows the results of the first iteration cycle, but as always there are some issues. Let’s check things out and make a list!
- Top menu is off centered in the cities list
- Stats on the station cards are misaligned
- Shadows overlap between cards
- Selected station outline could be more obvious
- The city name repeater is missing from the list of stations
- A small popup could be useful as a shortcut to enable location services
- The Refresh and Cities buttons are not consistent with the big blue button
- Buttons need tap feedback
If you think I missed something, let me know in the comments 👀
After using Joyride a bit (let’s call it production testing)
We found out that it would be beneficial to see the map and the list of stations side by side. It so happens there is an app like that already. Sooo typical! Inspired by the NearBikes app we are going to improve the UX in version 2 of Joyride. Why? Because we can do that easily thanks to Views an React. 🤩
Join our Views Slack Team or reach out in the comments if you want to try the Views Tools beta! You can also subscribe here to notified about the exact launch date.
