My final quarter of the OSU post-baccalaureate computer science program is now well underway. I’ve met with my project group several times, and we’ve begun to make some decisions about our project’s design and the technologies we’ll be using to build it.
The Front End
Since our project is a cross-platform app, we had to find a framework that would allow us to easily build our app for both web and mobile, preferably from a single code base. There were three frontend frameworks that we looked at while making this decision.
Flutter
Flutter was one of the first choices we considered. Coincidentally, all of our group members took Mobile Development last quarter, so we all have some familiarity with the Flutter framework. Another advantage to Flutter is that it is conducive to creating adaptive layouts so the application can have an appropriate look and feel for the different devices it will be running on. However, after looking more closely at the design of our app’s backend, we realized that our data would fit better into a relational database than Firebase. Although Flutter can be used with any database, some of its features work best out of the box with Firebase, and we weren’t sure how well we could make them work if we ended up using a different database like MySQL.
React Native
We also briefly considered React Native. However, none of our group members had a very strong inclination toward this framework, so we ended up going with our third option.
Ionic / Angular
The frontend framework we ended up deciding to use Ionic. Ionic can be used with React or with Angular, and we decided to use Angular. One or our group members uses Angular at work, and was interested in learning more about Ionic. Although I haven’t used Angular in the past, I was interested in learning, so I voted for this option as well. Another contributing factor to our decision to use Angular was that we all wanted to use TypeScript if we went with a javascript based framework. Angular uses TypeScript by default, so it seemed like the clear choice.
Front End Design
The design of our front end UI is divided up into pages (screens on mobile). Within each page, there are detail views, editing views, and UI elements that allow users to create and delete resources.
The Back End
Our app’s backend will be provided by a node.js api that sits between our front end and a MySQL database. As I mentioned previously, a relational database was the best fit for our application’s data, however, we didn’t want our UI to have to access the database directly. One of the things I like about the design of our application’s back end is that we will implement and API that accesses our database and returns the data needed by our front end. By having an API to call for the specific needs of our UI, we’ve simplified the process of data storage and retrieval.
The Importance of a modular design
My group has designed our project so that the responsibilities of the back end and the different pages of the front end UI are cleanly separated. This allows us to easily divide the workload between our group members without creating merge conflicts. The other advantage to this approach is that if we reach all of our main project goals and we’re able to start working on some of our stretch goals, we’ll be able to extend the functionality of our app without breaking the existing functionality.
I’m looking forward to learning more about Angular and Ionic and we continue to implement more of the features of our app and reach our weekly milestones!
Leave a Reply