Hummingbird vs Angular Dart

Hummingbird was announced at the Dec 4 flutter launch event. A project that will allow us to compile our flutter applications into full fledged Progressive Web Apps. So… is Angular Dart still worth it?

I will try to share how much I’ve gathered so far, hoping that my findings help others as well.

How ready are they?

The first question is whether or not we can actually use the two.

Angular Dart
Current version of AngularDart is 5.2.0. It is stable(has been for a few years now), used in Google’s high impact projects, and in projects around the world.

Hummingbird
Some would claim that hummingbird is currently in its alpha. However, all we have is a technical overview. More of a proposition than anything else where the team thoroughly discussed the technical directions that they are contemplating. (HERE: https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8)

What do they actually do?

Glad you asked! We will try to understand what Single Page Applications are, what Progressive Web Applications are, and look at the expected outputs of Angular and Hummingbird. This will help us understand the problems they intend to solve.

SPAs vs PWAs

Single Page Applications

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. — Wikipedia

The character # when included in URLs, instead of causing the page to reload, will cause some interaction within the page. SPAs make use of this browser feature.

For example, in Wikipedia, if we click on a heading in the index, instead of the page reloading, browser takes us to that section of the page.

• Go to https://www.wikiwand.com/en/Single-page_application#/Ajax
• Change Ajax to Websockets and press enter.
• Will the page reload? No. It will simple change configuration

SPAs are taking this to the next level. The entire application and all its screens work from a single page using the #based URLs for all their functionalities.

PWAs

Progressive Web Apps are user experiences that have the reach of the web, and are reliable, fast and engaging

— developers.google.com

PWAs are websites (can be regular websites, or single page apps) that are optimised in a certain way that they

• Work reliably both offline and with unreliable internet (Lie-Fi)
• Are fast, optimised for high perceived performance
• Engaging — Feel like a native application and no less.

What does AngularDart do?
AngularDart or Angular in general is a framework for writing SPAs. It provides developers with a way to write the SPAs with features like:

• Bidirectional Data Binding
• Routing
• Templating
• Directives

And much more. The actual UI is still written with HTML + CSS. Angular merely provides everything else that enables web developers to develop their SPAs. Main point is:

• Angular Dart is not a UI Framework
• Angular Dart apps can or can not be PWAs

What are Angular Web Components then?
They are a bunch of material design components provided by the angular_components package that act as templates to build applications with.

• They are not supported in Internet Explorer
• They are still written in HTML + CSS + Dart

What will Hummingbird do?
So far it’s just speculations. It will aim to convert any flutter application into a PWA. It could or could not be a SPA(it most probably will). Yet it will try to do everything that flutter does.

With it we could use the Flutter UI Framework, use all the flutter SDK features like state management widgets and all… and with one click, produce a PWA alongside the Android and iOS apps that we already have!

There are many challenges along the way but if Google realises this, it will be the be all of SDKs.

The state of All-Dart Apps

Lets try to understand the difference between Flutter + AngularDart and Flutter + Hummingbird combinations if we were to write an all-dart set of applications for web and native.

THE PRESENT: Flutter + Angular Dart
For writing such an application we will need to:

• Write a core package containing all the business logic, ensuring it does not have angular or flutter dependencies, and all such dependencies are injected to it from the outside
• Write the Angular PWA subscribing to the core for all functionalities
  * UI with HTML + CSS or composing angular components
  * Routing, state management with the Angular way of doing things
• Write a Flutter Application subscribing to the same core for all functionalities
  * UI with the flutter UI framework
  * Routing, State Management etc with the flutter way of doing things
• Compile to iOS and Android from the flutter project
• Compile to Web from the Angular Project

Does code sharing reduce the amount of work?
While code sharing definitely reduces the “amount of code”, in my experience it hasn’t really reduced the amount of work that needs to be done. It requires me to be much more thoughtful through the process.

What are the benefits then?

• Code is cleaner and the architecture is better
• I am forced to, and it is easier for me to maintain feature parity across platforms now.

THE FUTURE: Flutter + Hummingbird
For writing such an application we will need to:

• Write a flutter application
  * UI with the flutter framework
  * Routing, State Management etc the flutte way
• Compile on three different platforms
• Done.

Is it less work?
Hell yeah!

Conclusion

There it is. A breakdown of what we know about flutter, angular dart, hummingbird and sharing code with each other.

If you are developing something right now…
Go for flutter + angular dart. It is not as easy as the hummingbird dream, but still is the best way to go.

Hummingbird as of now is a distant dream. A project that we should definitely hope on coming to fruition some day and support with all our efforts, but Dilli abhi door hai (that future is distant).