Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A progressive JavaScript framework known for its approachability, versatility, and performance.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
We have vast experience crafting healthcare software development solutions, including UI/UX Design, Application Development, Legacy Healthcare Systems, and Team Augmentation. Our development services help the healthcare industry by enhancing accessibility, productivity, portability, and scalability.
We offer a range of custom software development solutions for education companies of all sizes. We're experts in Education Software Development and specialists in enhancing the learning experience across web, mobile, and conversational UI.
We're experts in developing Custom Software Solutions for the Logistics Industry. Our work offered a whole new and more efficient way for Logistics companies to manage their crucial operations.
We partner with various construction industry organizations to build custom software development solutions. Our Construction Software Development Services allow construction companies to manage projects, resources, and documentation.
Learn more about our current job openings and benefits of working at FSL.
Detailed reviews and feedback from past and current clients.
Get to know the Management Team behind FullStack Labs.
Our step-by-step process for designing and developing new applications.
Writings from our team on technology, design, and business.
Get answers to the questions most frequently asked by new clients.
Learn about our company culture and defining principles.
A high level overview of FullStack Labs, who we are, and what we do.
A JavaScript framework that allows rapid development of native Android and IOS apps.
A JavaScript framework maintained by Facebook that's ideal for building complex, modern user interfaces within single page web apps.
A server side programming language known for its ease of use and speed of development.
A lightweight and efficient backend javascript framework for web apps.
An interpreted high-level programming language great for general purpose programming.
A JavaScript framework maintained by Google that addresses many of the challenges encountered when building single-page apps.
A JavaScript framework that allows developers to build large, complex, scalable single-page web applications.
A progressive JavaScript framework known for its approachability, versatility, and performance.
A dynamic programming language used in all sorts of web and mobile applications.
A cross-platform programming language designed to run robust applications on any device.
A UI toolkit used to build natively compiled applications from a single codebase.
A functional programming language that’s ideal for scalability, maintainability, and reliability.
A Customer Relationship Management (CRM) platform that seamlessly integrates with your business operations.
A high-performance programming language that makes it easy to build simple, reliable, and efficient software.
View a sampling of our work implemented using a variety of our favorite technologies.
View examples of the process we use to build custom software solutions for our clients.
View projects implemented using this javascript framework ideal for building complex, modern user interfaces within single page web apps.
View projects implemented using this framework that allows rapid development of native Android and IOS apps.
View projects implemented using this backend javascript framework for web apps.
View projects implemented using this high-level programming language great for general purpose programming.
View projects implemented using this server side programming language known for its ease of use and speed of development.
“We can only see a short distance ahead, but we can see plenty there that needs to be done” – Alan Turing
Do not underestimate the importance of UX/UI when developing a mobile app. It’s a good idea to visualize different environments where it may be used (on a plane, in a subway, at a train station, at home, etc.) and their respective variables. One of the most important environments that developers and designers often overlook is whether the user is connected to the internet or not.
Twitter does a good job giving the user visual feedback that they’re not connected to the internet.
Facebook handles this in different ways depending on the situation. For the “Watch” tab, it shows us something is wrong and that we need to try again.
One method to ensure your app properly handles poor or no connection situations is to develop with an “offline first” approach. Below we will explore the “offline first” approach using various tools in React Native.
Years ago, a teacher once told me “everyone needs to know how to sell more.” In our case, we have a product and a consumer. To gain user trust (and sell more) we need to improve UX in the mobile app. Developing with an “offline first” approach measurably improves the UX of an application, which means we will gain more trust from our users.
In social networking apps, you can continue reading posts without an internet connection because the apps fetch more posts than you’re looking at and stores them in the app locally. When you replace it with new information it’s best to flush the old from storage.
It's good practice to use “skeletons” for the UI. A good example of this is the Marketplace tab on Facebook. Notice how the skeleton first appears before the content is loaded:
In the skeleton example, it’s also good practice to isolate the interface from its data. This way you can load the skeleton and make requests for media behind the scenes.
It’s bad practice, however, to bombard people with a lot of pop-up messages. Try to find another way whenever possible. Remember, it’s not what you are saying, but how you say it.
A regular network connection is something that should not be depended upon, so try to design your app with that in mind. Let the user interact as much as possible before you have to inform them they are offline.
Procure the critical data you need for customer engagement and use it for as long as possible. A good idea is to create a PIN generator for authentication flows, storing it in a secure place and using it in case something goes wrong.
You can store whatever you need but assume that someone else is going to try to read it. Therefore make sure this information is encrypted, readable only by you (or your company).
Redux persist allows you to persist data and configure blacklists and whitelists. This library uses AsyncStorage as a dependency. Check out the Redux Persist docs.
This library helps you handle network connections and integrates well with Redux. It is also a dependency of @react-native-community/netinfo. Check out their Github repo.
There are two main strategies to manage React Native offline apps: REST-based and GraphQL-based.
In this post, however, we’re only going to cover REST-based apps.
We’re going to fetch data from an API and render it on the screen. The data comes from https://www.football-data.org/
Let’s start creating a simple reducer:
And now combine the reducers and export:
export default rootReducer;
Ok, now it’s time for setting redux + thunk:
At this point, we have the basic redux and thunk configuration but we need to integrate two different libraries: “redux-persist” and “react-native-offline.”
We set the persistence to store both the reducers and the configuration object. We are not giving redux-persist whitelists or blacklists, so as default it will persist all reducers.
For setting react-native-offline we’re going to include the reducer that the API provides us.
Import PersistGate from “redux-persist” to bundle the app, store, and persistor:
-- CODE language-jsx keep-markup --
import { PersistGate } from "redux-persist/integration/react";
import configureStore from "./store";
const { store, persistor } = configureStore();export default function App() {
return (
<provider store="{store}"></provider>
<persistgate loading="{null}" persistor="{persistor}"></persistgate>
<breadprovider></breadprovider>
<teamsscreen></teamsscreen>
);
}
Now that we have access to react-offline-reducer, we just need to map it to the screen:
-- CODE language-jsx keep-markup --
function mapDispatchToProps(dispatch: any) {
return {
actions: bindActionCreators(actions, dispatch),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(TeamsScreen);
Once mapped we can use it and modify the screen according to the behavior we want, for example:
-- CODE language-jsx keep-markup --
{
props.network.isConnected ? (
<scrollview></scrollview>
{props.teams.items && (
<subtitle type="{1}" style="{styles.subtitle}"></subtitle>
Total football teams: {props.teams.items.length}
)}
{props.teams &&
props.teams.items &&
props.teams.items.map((team: ITeam) => (
<team key="{team.id}" item="{team}"></team>
))}
) : (
<text>Hmmm, something is wrong with your internet connection</text>
);
}
Offline design is a crucial component of improving both UX and customer satisfaction, ultimately leading to more sales.
Developer Adrien Thiery said you need to trust more in your UI and less in your request, and I agree. It’s a good idea to assume the network won't always be available. Check out this video on Offline First Applications on YouTube for more information.
A layout designed for offline handling keeps the user engaged while the app is working behind the scenes.
Store and Cache
Storing and caching data is a great technique for mobile apps. You can improve its performance, network usage, and the UX, all at the same time.
We’d love to learn more about your project.
Engagements start at $75,000.