Fluttering Forward: Transitioning Tech Stacks

6 min readApr 4, 2024

Contributors: Divyasourabh, Utkarsh Dixit, Rachit Goyal, Sahil Tuli, umang kedia, Shubh Gupta, Jasshu Garg

Single codebase running on web browser, mobile and tablet [Android, iOS]

This is the first blog of this series of blog posts highlighting our experiences with flutter and what’s next for mobile apps.

In the dynamic realm of edtech, we continues to lead the charge in delivering unparalleled learning experiences to students globally. With a steadfast commitment to innovation. We have undertaken a strategic shift to refine development processes, amplify scalability, and ensure seamless user experiences across all client side platforms.

Our journey is marked by visionary decision-making, rigorous planning, and an unwavering pursuit of excellence. Through meticulous analysis and a dedication to staying ahead of the curve, we embraced the multi-platform framework to elevate our front-end applications to new heights.

This is a story of transformation, adaptation, and unwavering dedication to delivering exceptional learning experiences to the students.

Unveiling the Requirement of Multi-Platform Framework

Design/experience disparity across platforms: Varied user experiences and designs across different platforms leading to inconsistency and potentially confusing user interactions.
Feature disparity across platforms: Inconsistencies in features across platforms causing fragmentation and inconsistency in functionality.
Siloed teams (Android/iOS/Web/Desktop): Separate teams working on different platforms resulted in isolated development efforts and communication gaps.
Release velocity tightly coupled to individual teams’ bandwidth: Slowdowns in one team’s development process directly impacted the GTM timeline, causing delays across all platforms.
Client-specific backend services: Tailored backend services for each client increased complexity and hindered scalability.
QA bandwidth stretched (unable to make progress on automation): Limited QA bandwidth hindered progress in implementing automated testing procedures, prolonging manual testing efforts.
Lack of standardised code quality/hygiene metrics: Absence of uniform standards for code quality and hygiene led to inconsistencies and inefficiencies in the development process.
Module Reusability: The limitations encountered while sharing modules with other vertical business lines, such as User Onboarding and Learn Journey, underscored the necessity for a solution that could seamlessly integrate across various components while offering flexibility and scalability.

Selecting the Best Framework: A Guide through Proof of Concept

We explored cross-platform options including KMM, Flutter, and React Native, ultimately opting for React and Flutter for our POC, skip due to KMM’s newness.

Transitioning to a new framework demands careful planning. We began by choosing a feature that would act as a litmus test for our selected multi-platform framework. The ‘Short Content Video’ feature was our prime choice as it encompasses various crucial aspects of our mobile and web applications, including complex UI designs, seamless animations, video playback, data management, and integration of outside world SDKs. This feature serves as our trial run, allowing us to gauge the framework’s suitability for our needs.

Metrics: Tracking the Essentials

To make an informed decision regarding the framework, We meticulously tracked a plethora of metrics during the POC phase among Native, Flutter and React Native. Each metric was carefully selected to assess a crucial aspect of the application’s performance. Here’s a comprehensive list of the key metrics that were monitored and analyzed:

Upon thorough analysis, we identified several concerns associated with multi-platform frameworks in comparison to native development, particularly regarding app size, startup time, and initial memory footprint. Despite these challenges, we found that the benefits of adopting a multi-platform approach outweighed these drawbacks.

App Size: Utilizing Deferred Components and moved assets on s3 bucket, we managed to mitigate this concern and achieved ~30% reduction in app size compared to native counterparts. Here in this blog post we have described all strategies and step-by-step guide for app size reduction.
App Startup Time: While startup time for multi-platform frameworks may be slightly longer, we acknowledge that currently, there is no immediate solution to significantly improve this aspect. However, the advantages gained from multi-platform development outweigh this limitation.

In essence, despite encountering red flags, the advantages and efficiencies gained through multi-platform development far surpass these challenges, making it a favourable choice for our use case.

The Emergence of Flutter: A Data-Driven Decision

After deep analysis, meticulous metric tracking, and multiple rounds of demos and discussions with all the stakeholders, Flutter emerged as the clear choice. Its exceptional performance, rapid development pace, seamless integration capabilities, and robust support for our essential requirements set it apart from other alternatives.

“Choosing Flutter wasn’t a gamble; it was a strategic move grounded in data-backed insights and thorough examination.”

Shaping the Future: Preparing the Team for the Journey

With the decision to adopt Flutter as our front-end tech stack, the next pivotal step was to ensure our team was fully prepared for this transformative endeavour. To achieve this, we meticulously crafted a comprehensive training program covering all aspects of Flutter development.

Maintaining business continuity during such a significant migration posed a formidable challenge. In response, we implemented a rotational learning strategy:

Small groups of developers alternated between dedicated learning periods for Flutter and active engagement on ongoing projects.
This approach ensured that development and feature delivery continued uninterrupted.
It also maintained a steady momentum for the migration process, allowing the team to gradually integrate Flutter into their workflow seamlessly.

Additionally, to expedite the migration process and ensure a smooth transition, we began creating new features as Flutter modules. These modules were integrated as Flutterview within the native applications. However, as the migration progressed, we adopted the Flutter project structure. Despite this shift, certain features persisted in the native codebase. To overcome this, we leveraged deep linking and method channels, which enables seamless navigation between Flutter and native components. This innovative approach ensured cohesive functionality across the application while facilitating a smooth migration journey.

By strategically prioritising modules expected to undergo frequent changes, we ensured seamless integration of updates across all frontend platforms. This approach to module migration effectively managed project complexity and minimised the risk of disrupting the user experience.

Byju’s Frontend Apps: Embracing the Flutter Era

Byju’s client side apps powered by Flutter deliver a consistent experience across platforms, ensuring accessibility for all users. With interactive features and personalised learning paths, the app maximizes student engagement and comprehension.

By leveraging Flutter, we witnessed ~40% reductions in both development time and ~50% save in qa bandwidth. Now we are developing features only once and released on 3 platforms, which ultimately improve the GTM timeline.

In the app development lifecycle, Quality Assurance is pivotal. We conduct sanity testing to ensure stability of new functionality and regression testing to verify existing features remain unaffected. To enhance efficiency, we integrated an automation framework for basic sanity testing within CI/CD pipeline.

To Learn More about this checkout our blog on how automation helped us in this journey: Efficiency Unleashed: The Power of Automation in Our Flutter Adventure

We have released phase wise with A/B experiment, this allows us to analyse the impact and handle issues early without impacting a significant number of users’ experience. We utilised our in house Neon: our server driven UI (SDUI) for A/B experiments and phase wise and metrics analysis. To learn More about this checkout our Blog on how we overcame multiple challenges throughout our journey: Beyond the hurdles: Addressing challenges in Android, iOS, and Web development

This is part of a series of blog posts highlighting our experiences with Flutter and discussing what’s next for client apps.