Now that our web application is configured to use AWS, let’s implement the operations and real time data subscriptions that mirror the ones from Firestore.
When we cloned the Ionic Conference Demo application, we checked out the
main branch, which is fully implemented. For this section, we’ll be working off of the
stub branch. Go ahead and ensure you’ve checked out the
cd ionic-conference-app git checkout stub
Note that until we implement the following code, the app will be broken, which is expected at this point.
Now let’s briefly dive into the web application software architecture, as we’ll need to understand it in order to see how to integrate AWS alongside Firebase.
The web application uses a software design pattern called Repository, which defines all of the data access patterns the web application uses in an abstract way. These patterns are behaviors like listing all of the conference sessions, checking whether the user is signed in, or loading details on the conference session speaker.
The repository pattern only defines the shape of the input and output between the web application and the backend provider. The actual mechanisms for how the data flows resides in the implementation of a data access strategy. This design allows for a lot of desirable attributes, one of which we’ll direct our focus to is that our repository can make use of multiple data access strategies simultaneously.
You can see we have two strategies: one using Firebase and the other using Amplify.
Hopefully there are no surprises here. The Firebase strategy encapsulates the Firebase SDK calls to Firebase Authentication, Storage, and Cloud Firestore. The Amplify strategy encapsulates the Amplify SDK calls to Cognito, S3, and AppSync. The way our particular repository is designed is such that only one strategy can be used at a time, however, the design does allow us to switch between either environment during runtime.
As our app is already using Firebase, we won’t detail the implementation in this workshop, but it’s a good idea to inspect how it works. Let’s now turn our attention to implementing the Amplify strategy.