Storyboarding - The right way to build apps

React Native is a platform for developing apps that can be deployed to multiple platforms, including Android and iOS, providing a native experience. In other words, 

. This tenet holds true across most aspects of app development. Take, for example, usability testing. In native development, teams would need to test business logic separately on each platform. With React Native, it only needs to be tested once. The code we write using React Native is good to go on both platforms and, in most cases, covers more than 90% of the entire code base.

The React Native platform offers a plethora of options. However, knowing which to use and when comes from understanding how those pieces fit together. For example, do you even need a database, or is AsyncStorage sufficient for your use case?

Once you get the hang of the ecosystem around React Native, building apps will become the easy part. The tricky parts are knowing how to set up a strong foundation that helps you build a 

 and using React Native the right way. If we look at the app as a product that our end users will use, we will be able to build a great 

, not just an app. Should that not be the principal aim of using a cross-platform tool?

Let's try and break it down. Using React Native we are:

Looking at the points above, it's clear that focusing on building our app as a product makes the most sense. Having a clear view of 

 we are looking to build will help us get there. It will also keep us in check that we are building the right thing, focusing on the end product  and not getting lost in the technicalities or challenges of a platform.

I recommend a Storyboarding approach to build any front-end application, not just apps. This is not the typical storyboard that is created by the design teams, though the idea is similar. These storyboards can be a great way of looking at our app from a technical implementation point of view, too. This step will help us:

To start, we will need to go through the wireframe design of the app. The wireframe is sufficient as we will not be focusing on colors and themes here. Next, we will go through every screen and break it down into reusable 

For example, let's look at a general user onboarding flow:

A simple and standard flow, right. Storyboarding can achieve quite a lot from the perspective of the app's development and structure. Let us see how.

Visualize your app from a technical, design, and product standpoint

As you will see, we have already defined eight or nine different elements and widgets here. Also, if  elements like the search box, company logo, and the cart icon, need to appear on all screens, they can be put inside a 

The process also helps us build consistency across the app. I would recommend building custom elements for even basic native elements like the 

 element. What this does is make the app very maintainable. Say, for some reason, the designer decides to change the app's font tomorrow. If we have a custom element, changing that is practically a one-line change in the application's design system. That might sound like an edge case, but I am sure we have all experienced it. What about changing the default font size of the app or using a different font for bold texts or supporting dark mode?

The Atomic Design pattern talks about breaking any view into templates, organisms, molecules, and atoms. If you have not heard about it, Atomic Design comes highly recommended, and you can read about it 

. Taking a cue from the methodology, we will break down the entire development process into 

 and list out all those that we will require to build the views.

How do you do this? The steps are as follows:

This process will help streamline the entire development process. You'll  end up with a list of widgets and elements that you need to build. This list will work like a set of Lego blocks that will build the app for you.

You may end up with a list like this for the e-commerce app:

Looking at this list, we might decide to build a 

 by passing banners as children, and as a 

 by passing an array of category icons. If we do this exercise of defining every component for the entire app before we start building, it will improve our technical design and allow us to plan better.

The process can also help iron out design inconsistencies as we will be defining all the elements, down to the most basic ones. If, for example, we were to end up with more than four of five primary buttons to define, that could indicate that we need to review the design from a user experience perspective.

Following this model will make the development approach very modular and set us up for the development phase.

By now, we should also have a thorough understanding of: 

We also have an idea of how the layout of views will look from a technical standpoint: do we need a common header, how will transitions happen if there is animation, and so on.

To summarize, we now have a wireframed plan in place that will give us a lot of confidence as we proceed with development. 

To learn  more about building apps with React Native, check out our new course 

The newline Guide to React Native for JavaScript Developer

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Cross Platform Apps

Storyboarding - The right way to build apps

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript