Angular to Flutter

A developers journey transitioning from web to mobile using the Flutter framework. Come on in.

Hello world, my name’s Sam Griffen. I’ve been a self-taught web developer for about 4-5 years learning most of the do’s and don’ts of the web through trial and error. As most of us do from time to time, I recently experienced a good dosage of burn out after a couple of years working on the same web application at my previous company. I knew it was time for a change of pace so I was excited to transition to a new company and new project to continue on my web development journey. 

Most of my experience in my career so far has been using the Angular framework but I’m at least somewhat familiar with the other popular frameworks such as React and Vue and understand the general similarities and differences. I was confident in my skills and ready to put them to work at my newly landed front end web engineer position at treXis.

I wasn’t sure what project I was going to be working on at treXis, but I knew they used Angular for their web projects so I was feeling pretty confident. However, there was one question I was asked towards the end of my interviewing process that had me curious. I was asked if I was open to learning a mobile app development framework called Flutter. Look, I’ve learned new frameworks and even taught myself how to code so I eagerly responded, yes no problem. I didn’t put too much thought into the question after that day and was excited to learn a week or so later that I had got the position. I took care of some paperwork and then found out that the question about Flutter was what I was going to be spending the next 6-8 months working on so I should start going through some Flutter training material.

The whole process has reminded me what a joy it is to learn a new framework again and challenge yourself as a developer to step outside of your comfort zone and challenge your mind. Learning flutter coming from a web developer background is a challenge, but it is one you’ll enjoy and appreciate as soon as you start to get your hands dirty on a project. Most of the rest of this article talks about what I’ve learned about Flutter specifically but overall I’ve learned that as humans and especially developers, it’s important to always push yourself and take new challenges. Most often you walk away a more accomplished dev and can apply your new knowledge towards the greater good of the company or project you are working on. 

Now, let’s talk about Flutter a bit. Flutter is a framework for building native mobile/desktop applications as well as web applications using a single code base. The framework was created by Google and uses Dart as the language of choice. Flutter is competing against traditional mobile development frameworks and hybrid mobile development frameworks and has been getting some serious traction lately. Enough traction to hire me to help build a mobile banking application similar to Venmo or Zelle…

Given my web development background, I’ve had minimal mobile app development experience. Apart from a few stints using the Ionic ( Angular based hybrid app development framework) I was starting from scratch. I wasn’t sure if design patterns in web development were going to carry over to mobile development and I wasn’t sure if Typescript was going to carry over to Dart. 

Over the last few years in web development large javascript frameworks such as React, Vue and Angular have dominated the ecosystem. One common pattern amongst these frameworks is reusable components. Developers create components with specific UI tasks such as rendering a list or rendering a specific items’ UI. These components are typically “dumb” in nature and take in state information and output events for a “smarter” application layer to handle the state information and business logic. 

In Flutter, these reusable components are present in the form of Widgets. In fact the entire Flutter application is made up of a widget tree that is layered top down from smart to dumb widgets. These widgets even feature lifecycle hooks that a React or Angular developer would be used to seeing that allow the developer to tap into the widget creation and disposal hooks in case setup or teardown is necessary.  

Phew, one similarity already found.. I can do this. Another similar design pattern in web frameworks and Flutter is reactive programming. Reactive programming in Flutter is very similar to utilizing observables in RxJS on the web. Flutter introduces a state management system called the BLoC Pattern. The BLoC pattern is based around widgets emitting events ( such as a button tap ) and then the business logic layer of the application ( the BLoC ) handling the event and emitting a “state”. The UI layer is subscribed to these “states” and re-renders accordingly. An example is the following: 

  1. A user pressed “submit”
  2. the UI widget emits a “SubmitEvent”
  3. the BLoC emits a “LoadingSubmitState”
  4. the UI widget renders a loading icon
  5. the BLoC after completing an async operation emits a “SuccessSubmitState”
  6. the UI Widget then renders a fun success animation

These are just a couple examples of similarities I’ve noticed between my web dev career and Flutter. As I continue my Flutter experience I know I’ll find more. On a different note, It has been super refreshing taking a break from HTML/CSS and developing in Dart in which all widget structure and styling is controlled in an object oriented way. I’ve found this approach makes it more difficult to get off normal design patterns and from uglifying the UI too much. 

Lastly, shoutout to Flutter being an extremely complete framework. Developers get to enjoy hot reloading of a mobile app, out of the box widgets and access to native widgets on android and ios, and a great community of open source libraries to use in your project. Overall Flutter has been an enjoyable and a not-to-difficult transition from web development. I would recommend using Flutter for Android and IOS but I would still deploy a separate web application using React or Angular for your web presence. The responsibility of your mobile app and web app should be different and Flutter isn’t quite to par with a web framework for building a web experience.

%d bloggers like this: