The Power of Framework Fusion: FrogID Project Case Study

Introduction

In this blog post, we will explore the benefits and drawbacks of using multiple frameworks and services in a single project to enhance user experience and functionality. Our discussion will focus on the FrogID project, a citizen science initiative in Australia that monitors and conserves the country's frog population. By examining the FrogID project, we'll highlight the advantages of combining frameworks and how they contribute to the project's success.

While the decision to integrate one or more of the utilised frameworks may seem unconventional at first glance, it is important to consider the unique circumstances and constraints that influence such choices. In the case of the FrogID project, the decision to combine frameworks was driven by existing project setup, expertise of the development team and existing knowledge taken from other projects within the company.

The FrogID project, a cooperative effort between the FrogID team, the Australian Museum and the Interaction Consortium encourages the public to record frog calls using a mobile app and submit them to a national database. This data is then utilised to identify and map frog species, track population changes, and raise awareness about the threats frogs face from habitat loss, disease, and climate change. To meet the diverse user requirements of the FrogID project, several frameworks are employed, including a mobile app (iOS and Android), a Ruby on Rails backend for data management, dynamic pages built with React, and static pages constructed with Gatsby and Contentful.

Strategy

The Interaction Consortium was asked to take over development and maintenance of the project around two years ago. At that time the key architectural components listed above were already in place.

When a new team takes over a project such as this one, the temptation is to be quite critical in reviewing the existing system as it stands, and it can be hard to appreciate the rich history of decisions and knowledge that have made the system what it currently is. There’s often a temptation to wipe the slate clean and make a fresh start with the new team’s preferred choice of technologies.

We’ve found that the clean-slate approach, while it can seem appealing, is often harder than you’d think; there are nearly always hidden complexities within the existing system which it can be hard to spot until you’re committed to the rebuild.

In this case, while we have combined components to simplify the architecture in a number of ways, we did not take the wholesale replacement approach. Instead, given the budget and time available, we opted to make best use of the past investment, and going forward to take opportunities to use our existing knowledge and other past work where it is sensible to do so.

Using Gatsby and Contentful for Static Pages

Contentful and Gatsby play a crucial role in the FrogID project, streamlining the creation and management of static pages that provide valuable information about Australian frogs. Contentful, a flexible and customizable headless CMS, allows for easy content creation, editing, and publishing across multiple platforms. Its content modelling system, web-based interface, and developer-friendly API facilitate effective collaboration. On the other hand, Gatsby, a static site generator, leverages modern web technologies to build fast, scalable, and high-performance websites.

By integrating Contentful and Gatsby, the FrogID team achieves significant cost and time savings by utilising a ready-made CMS solution. This eliminates the need to develop a custom CMS from scratch, which would consume valuable resources and introduce potential future issues. Contentful's flexibility and customization options empower the team to create and publish content efficiently across various platforms and devices. Additionally, Gatsby's static site generation capabilities ensure the project's websites are fast, scalable, and optimised for performance. The availability of a wide range of plugins and templates further enhances flexibility and customization possibilities.

Choosing Contentful and Gatsby for the FrogID project was a strategic decision that prioritised efficiency and stability. By leveraging existing solutions rather than reinventing the wheel with frameworks like Rails and plain React, used elsewhere in the project, the team can focus on the project's core functionalities and objectives. This approach saves costs, accelerates development progress, and ensures a robust and engaging user experience. Overall, the integration of Contentful and Gatsby empowers the FrogID project with a streamlined content management process and the ability to deliver valuable information about Australia's frog population effectively.

Using React for Dynamic Frontend Pages

React plays a pivotal role in the FrogID project as the framework for constructing dynamic frontend pages. The web application allows users to manage profiles, listen to frog calls, earn badges, participate in groups, and interact with other frog enthusiasts. React's core functionality and extensive ecosystem make it an ideal choice for fulfilling the dynamic requirements of the FrogID web application.

Integrating React into the project brings several benefits. Firstly, React's component-based architecture allows for reusable and modular UI development. This promotes efficient development and maintenance of the web application, saving time and effort. Secondly, React's popularity and strong community support ensure access to a wealth of resources, libraries, and ready-made components that can enhance the user experience.

The strategic decision to use React in the FrogID project was driven by the need for a robust, interactive frontend framework. By leveraging React's features, the team can develop dynamic pages that enhance user engagement and interactivity, while seamlessly integrating with the Ruby on Rails backend through API calls for efficient communication and data retrieval. React serves as the framework for constructing dynamic frontend pages in the FrogID project, providing benefits such as its component-based architecture, extensive ecosystem, and the ability to create fast and responsive single-page applications. This strategic decision empowers the project to deliver an immersive and user-centric experience, fostering active participation and collaboration within the frog enthusiasts community.

Using Ruby on Rails

Ruby on Rails, a robust Model-View-Controller (MVC) web framework, serves as the foundation for the FrogID project. With its convention over configuration approach, Rails provides a streamlined development experience, reducing setup time and minimising the need for explicit configurations.

In Rails, database querying is facilitated through Object-Relational Mapping (ORM). The ORM, powered by ActiveRecord, enables developers to interact with the underlying database, in this case Postgresql, using intuitive Ruby methods and conventions. This abstraction layer simplifies database operations by abstracting away the need to write raw SQL queries. By leveraging ORM, developers can focus on application logic rather than dealing with low-level database management tasks. Although Rails' popularity has waned somewhat in recent years, it still delivers resilient functionality and reliability for contemporary applications.

The use of Rails in the FrogID project provides several benefits. Firstly, it offers a seamless and efficient approach to managing data. Developers can define database models using Ruby classes and utilise Controller methods for querying, creating, updating, and deleting records. These API endpoints are consumed in various areas of the project, including the mobile apps, Gatsby static pages, the Admin frontend, and React frontend. Rails' clear separation of concerns and modular development principles enable the definition of these endpoints in a concise manner while still allowing for a DRY (Don't Repeat Yourself) approach for similar APIs that are utilised by different components. This simplicity and consistency streamline the development process, enhance productivity, and promote code reuse.

Rails seamlessly integrates with Sidekiq, a popular Ruby library for handling background jobs and task queueing, similar to Celery in Python. In the FrogID project, Sidekiq plays a crucial role in handling tasks such as emailing, data exports, data migrations, and more. By enabling asynchronous processing and efficient resource utilisation, Sidekiq significantly enhances the project's performance and responsiveness.

At the Interaction Consortium, Django is our preferred choice for backend application management. However, despite this preference, we have found that Ruby on Rails, with its MVC architecture, is a sound choice for managing the application's APIs and maintaining a single source of truth. The MVC architecture of Rails provides a clear separation of responsibilities, making it easier to manage and maintain the APIs while ensuring consistency and scalability.

Integrating Django

Django, a versatile and robust web framework has proven to be a valuable tool for the FrogID project, offering a "batteries included" approach similar to Ruby on Rails, it also features an object-relational mapping (ORM) system, simplifying database operations. The primary role of Django in this project is to handle API calls with the Tessitura service, responsible for emailing newsletters, a feature included in collaboration with the Australian Museum.

While one might question the necessity of integrating Django when Rails can also make these Tessitura API calls, the decision was driven by practical considerations. The Interaction Consortium already oversees multiple Django-based projects that interact with Tessitura. By incorporating Django into the FrogID project, consistency is maintained across the board. Furthermore, this integration streamlines API maintenance and ensures efficient management of Tessitura interactions. Although it may introduce complexity at the project level, it significantly reduces complexity at the company level.

Moreover, Django's automatic admin interface serves as a noteworthy advantage, simplifying application administration by providing a customizable and efficient tool for managing data models, performing CRUD operations, and implementing access control. This enhancement greatly contributes to the project's development process.

Summary

In this blog post, the benefits and drawbacks of using multiple frameworks and services in a web development project are explored. The FrogID project successfully combines multiple frameworks and services like Contentful, Gatsby, React, Ruby on Rails, Django, ios and android apps to enhance user experience and functionality.

By integrating Contentful and Gatsby, the FrogID project achieves cost and time savings by utilising a ready-made CMS solution, while also building fast and scalable static pages. React is employed for dynamic frontend pages, offering a component-based architecture and extensive ecosystem to enhance user engagement. Ruby on Rails serves as the foundation, simplifying database operations and providing a streamlined development experience. Django is integrated to simplify interactions with the Tessitura service.

Overall, the FrogID project showcases the successful integration of multiple frameworks, demonstrating the versatility and benefits of such an approach. While initially challenging, integrating multiple frameworks can create a highly adaptable project that is easier to develop and maintain in the long run. The FrogID project serves as an excellent example of how different frameworks can seamlessly work together to address various user and project requirements, resulting in a robust and engaging web development project. When you inherit an existing project, for reasons of budget or time it’s not always wise to dive right in and rebuild everything.