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?

:-p

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)

there is nothing to test as of Jan 5, 2019

What do they actually do?

what do you do here?

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.

to 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

Dash is rocking it right now

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

* 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

* 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

* 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

the supreme verdict

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.