2 Months of Flutter Development

I started writing some posts on Flutter development back in January, but quickly gave up because writing sucks up a lot of screen time and I like to use that time for other things. I spend enough time sitting on my ass programming already.

One article a month sounds much more achievable.

The Good

My experience with mobile development is limited to Android dev.

If you are going to start mobile dev, I would recommend just going straight to Flutter. It's faster to pick up than Android development (I've never picked done any iOS dev). And it't more stable than any other cross platform solution. And the dart package manager is has a lot of high quality packages ready to use.

I can safely say this is the future of mobile development. And since Google is backing it, it might actually be the primary form of Android development in the future.

The Bad

It's the worst of NPM. And you can't even upgrade a package if it has conflicting dependancies with another one of your packages. (This will be really fun once packages stop getting maintained).

It feels exactly like programming Javascript because Dart also runs on a single-threaded, asynchronous, event loop. But there's also a much heavier class system so it feels like coding Java as well. I got lucky and was able to pick up quickly because I've worked extensively with both those languages, but a green programmer might have some trouble with the learning curve. And since Dart is a newer language, finding solutions to problems requires a mastery of google-fu. (expect to learn a lot about darts the pub game as well)

It's the WORST of PHP. With Flutter you can put all your UI code and business code in the same file. Reading through someone else'e Flutter code feels like digging through PHP projects before frameworks got popular.

The Spaghetti

In Flutter, the entire UI is written in code. You make new UI elements by writing something like

Column(children:[
  Text('Your First Paragraph'),
  Row(children:[
     // You Get The Point
  ])
])

There's a lot to be said about the pros and cons of this. It is easy to work with, but feels less flexible when compared to CSS/HTML. And there are some rough edges dealing with images. But the biggest side effect of the 'your UI is code' design philosophy is the spaghetti it makes.

If you have ever worked on PHP, you probably know about how easy it is to make spaghetti by combining UI and code. If you have not worked on PHP, the idea is you can embed PHP directly into HTML files. If done correctly, this makes for a powerful templating language. When left to an amateur, this leads to 10,000 lined html files that are a bastardization of business logic and UI code.

My first Flutter app has already hit the point of hard to read. I need to spend some time to clean it up and break it into logical chunks. Right now most of the UI is broken into a handful of 100+ line classes. And those classes are embedded with event handling code that does a lot of business type logic. And to top it off I got a little too liberal with global variables.

Comments

[Richard Yhip]

Flutter sounds like GWT and Angular had a baby.

[Vince Ramces Oliveros]

It's too early for april fools.I'm ashamed by these kind of post being searched on, and eventually its just a fallacy to make JS devs look more superior just because they rely on dependencies.

Hopefully you prove it right and provide more comparison not by just ranting about your experience.

[Omar Elbaga]

My god why is this language so ugly. I wanna get into flutter but I don't think I can stand that syntax.

[Paul]

Dart's syntax (the language) very approachable. The Flutter Widget syntax (the framework for mobile development) that I posted above isn't the prettiest. To the credit of the Flutter team, it has been easy enough to pick up and work with.

[Asindu Drileba]

Dart is more beautiful just IMHO 😁

[Jermaine]

Hey Paul, thanks for sharing your experience developing your Flutter app. There were a couple of things I was hoping you could expand on:

It's the worst of JavaScript. Dart is literally a fork of javascript except they removed the first class JSON. But there is a type system now, so that's pretty cool.

Dart is not a literal fork of JavaScript. There may be similarities between both languages, but Dart carries its own language conventions, features and tooling surrounding that. Also, Dart always had a type system since day 1 (2011).

How do you mean when you say "they removed the first class JSON"? Please expand.

Lastly, the new keyword is optional when instantiating classes so your snippet could be simplified to this:

Column(children:[
  Text('Your First Paragraph'),
  Row(children:[
     // You Get The Point
  ])
])

Spaghetti code is a real problem in software generally, not just in the case of Flutter. Have you been to fluttersamples.com/? It's got architectural patterns for Flutter applications.

[Paul]

I updated the post with some of the info you gave me. Thanks for the JSON tip as well, will be really useful in the future!

[Paul]

Hmm looks like I got it wrong about Dart being a fork, finding info on dart history can be hard sometimes. It was designed to be a better Javascript, but the dart VM essentially became another v8 VM. An event driven, single process, garbage collected VM. The ability to compile Dart to Javascript makes sure the VMs stay very close functionality wise. And the type system wasn't fully tacked on until v2.0 of Dart if I got the history correct.

The first class JSON supports is probably my favorite feature of Javascript. At any point you can create a javascript object and then serialize it to JSON in two lines of code

const myObj =  {foo: 'bar'};
const myString = JSON.stringify(myObj);

This makes rapid prototyping in javascript really easy. You can just declare objects on the fly and not worry about their structure at all. And when you have a better idea of how your code flows, you can go back and write the objects the proper way.

In dart you have to build JSON serialization into each object you create. So if you're doing some rapid prototyping and you're not sure of your program structure yet, this becomes a pain. With javascript I can keep the entire program structure in my working memory and lazily declare and save/load objects without any thought. With Dart, I have to break away from the overall program structure every-time I need to declare a new type of object that might need JSON support. This kind of context switching really slows things down during the initial prototyping phase.

[Jermaine]

Thanks for getting back to me Paul.

It was designed to be a better Javascript, but the dart VM essentially became another v8 VM. An event driven, single process, garbage collected VM.

One of the reasons Dart went ahead was to address JavaScript's short-comings, effectively presenting another option for web development. It was also to help developers be productive by offering an SDK containing a language, set of libraries, tooling and a repository of packages. In other words, it was not just designed to be a better JS.

The ability to compile Dart to Javascript makes sure the VMs stay very close functionality wise. And the type system wasn't fully tacked on until v2.0 of Dart if I got the history correct.

The ability to compile Dart to JavaScript is provided by a separate executable named dart2js, and not the actual dart VM executable. So its pretty flexible what's possible with the dart VM. For example, Dart compiles ahead-of-time to machine code, a functionality JS hasn't got.

The type system was "fully tacked" since day 1. I remember there were initially 2 modes, the main difference being that types were optional in one while types were compulsory in the other. As of Dart 2, it's strong mode and therefore types are compulsory.

The first class JSON supports is probably my favorite feature of Javascript. At any point you can create a javascript object and then serialize it to JSON in two lines of code

It's pretty trivial creating an object(or Map) and serializing it in Dart:

import 'dart:convert';

void main() {
  var myObj = {'foo': 'bar'};
  print(json.encode(myObj));
}

Paste and run this on DartPad

In dart you have to build JSON serialization into each object you create. So if you're doing some rapid prototyping and you're not sure of your program structure yet, this becomes a pain.

You build JSON serialization if you wish to serialize that particular object. You do not have to though. It'll be easier to prototype in JavaScript since it is the nature of the language...its dynamic. However it can be a painful experience building enterprise-level applications with it.

Join the Dart Gitter group if you haven't already. We're a friendly bunch :)

[Asindu Drileba]

Dart compiles ahead-of-time to machine code, a functionality JS hasn't got.

I thought it was only the Flutter framework code that compiled AOT to machine code since it's underlying graphics library is SKIA(written in C++).

I gut (😁 I don't know what am taking about would be glad to hear some clarification) tells me "vanilla" Dart is interpreted as you need the dart VM hence it compiles Just in Time.

[Jermaine]

Flutter's framework code is written in Dart. It's Dart that contains the capability to compile to machine code, which Flutter uses. If running in the VM then sure it does JIT, in some scenarios with VM snapshots.

[Asindu Drileba]

I think it's important to point out that there is a difference between "Flutter"(DartVM + Skia) & "Dart"(just the DartVM)

While it's true that Flutter's high level API is in pure Dart, the underlying engine is not.

Flutter's engine is powered by Skia written in C++.

Skia does the heavy lifting when it comes to painting the UI to screen. C++ for the graphics is why I suspect Flutter can compile to AOT

Vanilla Dart cannot be compiled AOT i.e to machine code it needs a VM

EDIT: It seems AOT compilation has been available for vanilla Dart since version 1.24.

It's just that no one really knows how to use the feature besides the Flutter core devs😅

[Jermaine]

Cool, thanks for pointing out the difference. I am aware that Skia is what is being used to draw the graphics on the screen. Presently AOT is exposed for Flutter and hopefully in future will be available on other platforms.

[Jermaine]

Dart now has instructions for AOT dart.dev/platforms#optimized-produ... :)