Backends for Frontends with Ionic
When you're developing an app on the Ionic Platform, it's important to take into account how much data you're sending to the device and when. Often times mobile or multi-experience apps are on the edge of internet connectivity and a backend that supports sending only the required data to the device when necessary and supports offline mode is critical.
What are Backends for Frontends?#
Historically we had one giant API that returned a large amount of data to frontend desktop applications. Thousands of rows and hundreds of columns that were then processed client side and displayed in Excel like interfaces.
The world of mobile and multi-experience is much different. You must take into account the internet connection of the device and what data the page you're displaying actually needs. If you have a list of items in a shopping catalog, you most likely only need: an image, the name of the item, the price, and a short description for the first 20 items available, and then dynamically load more as required.
This could result in completely custom backend APIs that are tailored to your frontend experience ("Backends for Frontends"), however, you'll quickly wind up with dozens if not hundreds of custom backend APIs that will be difficult to manage.
Modern API technology such as GraphQL enables your frontend to explicitly request exactly the data it needs and paginate it as well. This technology allows "Backends for Frontends" to be much more easily managed. If your frontend changes and needs another column, there's no need to change the backend API at all, instead, your frontend just requests the additional column.
It's also important that data that is shared between your applications pages is only requested once. We do this through application "services", single JS files that are imported into each page that needs them. This allows the single service to return data it already has to a new page.
Another piece of the puzzle is Offline capability. Storing data and data modifications locally until a network connection is available is critical, especially for apps that are living at the edge of connectivity such as field service applications. Storing and encrypting data locally, therefore, is another frontend piece of the puzzle that's a requirement for your backend.
To summarize, a performant frontend and backend strategy for your mobile and multi-experience applications must contain the following three elements:
- Modern APIs in a "Backends for Frontends" style utilizing a technology such as GraphQL
- Shared data services that can be reused across pages (or applications) and only request data once
- Storing and encrypting local data for offline capabilities
How does Ionic help?#
Ionic has official integrations with AWS Amplify, a secure encrypted local storage solution, and utilizes industry standard JS frameworks for data services. Since Ionic is also an open platform, you can bring your own backend services to the table as well and craft an amazing experience using the techniques mentioned above.
If you're utilizing your own APIs and need to communicate with them directly, you'll need to fetch that data in a method that corresponds to your JS Framework of choice. Tutorials for data management and fetching data for Angular, React, and Vue are linked below.
AWS Amplify provides a data studio that is integrated with Ionic and makes it easy for frontend developers to set up backend services quickly and easily that adhere to the Backends for Frontends standards.
Ionic's official solution for locally storing and encrypting data for offline support in your multi-experience applications.
A tutorial for best practices sharing data across your UI pages by utilizing Angular Services.
Angular communicates with backend APIs through the Angular HTTP Library.
React JS manages data through a State based system. It's recommended that you follow along with this tutorial to learn more about how React manages state, and then adopt a state library such as Redux.
React JS developers tend to either utilize the built in window.fetch capability or other popular libraries to manage API requests.
Vue manages data through a state based system like React, and can be achieved through this tutorial which explains the Reactivity API.
Like React, Vue developers utilize a few different tools to communicate with APIs. This tutorial goes over the 3 most popular options.