What is Dart?

“Dart is a client-optimized programming language for apps on multiple platforms. It is developed by google and is used to build mobile, desktop, server, and web applications”

That is the definition of Dart available on Wikipedia. But what does that mean. It means that finally we have a language for the backend developers to learn for them to become full-stack developers. Dart is a Strongly typed, Object Oriented language (and not in object oriented like JavaScript, it is object oriented more like Java).

 

Why Dart?

The one major thing that all backend developers are always complaining about, when they move towards front end development is the language “JavaScript” to be honest I have heard even the frontend developers complain about the haphazardness of the language they are stuck with for what it seems an eternity.

With the introduction of Node, it made frontend developers to move to the domain of full-stack development straight forward, there was nothing fancy that they needed to learn, just some backend taxonomy. Although the same was not true for the Backend developers they had no way to jump into the scene of building frontend applications, TypeScript tried a bit to bridge that gap, but it still was not comfortable enough for backend developers to accept it.

What dart now does is, It takes all the structures and concepts all the backend developers are familiar with and puts them into a language which can do all – You can design apps android or iOS with flutter, you can design Web UIs with flutter web or AngularDart(Which is used by google for their AdWords platform) , and you can write backend microservices with Aqueduct and Angel frameworks.

Although this is a language which is most associated with Apps development but google has designed it to be much more than that. Most of the microservices systems are baked into the Dart’s core and frameworks only helps you use them a lot better than you normally could.

 

Why not Dart?

Now that we have heard a lot about how Dart is the best language out there let’s discuss some reasons how it might not be fit for all conditions.

One reason that I can see is the community, although the community for the development of the Apps in Dart is large and well curated, same cannot be said for the Microservice and Web Ui counterpart, I am not saying that it is dying but rather it is in it’s infancy and can yet not compete with Spring in the Microservice and React or Vue in the Web Ui side.

Second reason is sort of an extension of the first, as the community is not very large the learning opportunities are also scarce. You will need a bit of running around the internet to be able to find the right kind of tutorial for anything that you want to learn.

Third reason is a bit of a mistake on Google’s part, all hail the Big brother google, but I would say may be while developing the language they did not consider that they will be making it a do everything kind of language and it was more of an afterthought. As you will find while setting up different things to develop in Dart.

You will find that Dart documentation says not to install the Dart SDK if you already have Flutter SDK installed, but the Flutter SDK does not provide one of the most important tools “pub” out of the box (pub is like npm, yarn, gradle. For those who have no idea, we will discuss about pub later in the article). Also, as much as I have seen versioning is also a bit of a hassle with Dart (Don’t quote me on that I am stilling going through it).

Another issue that one might find themselves run into is cloud support, although complete GCloud SDK is available, but there are no official versions of AWS or Azure SDKs of right now.

 

Let’s do some implementations, shall we?

Now that we have discussed what is Dart and its qualities, let’s get our hands dirty and put a little something-something together on all 3 of these platforms.

Let’s start with the most obvious Flutter

I order for us to start doing anything in terms of development of flutter we first need to setup the environment

 

Flutter -

So the first thing we will do is go to - https://flutter.dev/docs/get-started/install and install the flutter environment into our system based on our system i.e. Windows, linux or MacOS, you can even get away with ChromeOS because apparently they had time to make platform available for ChromeOS but weren’t interested in developing more SDKs.

fluter

Ranting aside, click on your platform

fluter

And download the flutter SDK

Update your path to include the unzipped Flutter SDK bin directory, once done with that, run command – flutter doctor

This will give you a detailed description of what are the things that are left for setup for you to start developing apps.

Majorly there are only two or one step left depending on whether you want to develop for iOS or not. So, you need to setup Android Studio and iOS simulator for development.

I might be better if you go to - https://flutter.dev/docs/get-started/install/macos#install-xcode for setting up iOS and https://flutter.dev/docs/get-started/install/windows#android-setup for setting up Android Studio.

Now once you are done with the emulator and studio setup you can open up your terminal and simply write - flutter create first_app

And flutter will create the application for you, and your directory structure will look something like this –

fluter

Keep an eye on that pubspec.yaml file because that is the center piece for the development of Dart applications, this file can be compared to package.json in node and pom.xml in maven.

Now open up, the project in the IDE of your choice preferably one that contains the support for Dart and flutter both such as IntelliJ and Visual Studio code, I am going to use the latter.

Before trying to run the code, open your emulator Android or iOS. And once that the emulator is running, in the terminal go to the first_app directory and run – flutter run

And voila, you have a running android application

fluter

Now that we have setup and run the flutter android app, lets try and make a simple microservice in Dart. We are going to use the Aqueduct framework in order for us to make a microservice fast and quick.

 

Aqueduct

The first thing that we have to do is obviously go to the documentation page of Aqueduct - http://aqueduct.io/docs/tut/getting-started/

Here you can find in detailed description how to setup environment for Aqueduct.

But for completion sake we are going to do it anyway don’t worry. As I mentioned before the issue with flutter is that it does not set up the Dart environment in it’s entirety, so we don’t get the pub tool which works as our package manager - https://pub.dev/

Pub works like any package manager and provides with an easy mechanism to add and remove dependencies from our projects. Like npm it also helps us setup other tools for the development as well. So please visit the pub.dev website and have a look at what different kind of packages and tools are available for the Dart development.

So first we are going to setup the Dart SDK separately and we are not going to setup thee latest version we are going to setup the 2.7.x version for compatibility with Aqueduct tool (as mentioned before teething issues with the frameworks). To do that we will go to - https://dart.dev/get-dart or rather https://dart.dev/tools/sdk/archive to get the archive of the exact version and download it. Once that is done, we are going to unzip it and export the path of the bin directory in our system path.

Now that we have setup the Dart SDK, we have gained access to the pub tool that we require to install the Aqueduct tool, which will help us create the microservices fast and easy.

The steps for installing Aqueduct tool are available on the given link - http://aqueduct.io/docs/tut/getting-started/ , although if you have the pub tool available all you have to do is run - pub global activate aqueduct, in the terminal and you are good to go.

Now to create the microservice in the terminal type – aqueduct create first_microservice

fluter

As we saw earlier here, we have the pubspec.yaml file as well doing the divine work of managing the dependencies for us, otherwise we would be f’ed in the b.

Now to run the microservice that we have just created all we have to do is - aqueduct serve in the application directory.

fluter

And you have the service running on the port 8888,

fluter

And we have a running microservice in matter of minutes.

fluter

If we look at the directory structure here, the files we have to notice are –

·       bin/main.dart - this file can be closely corelated to the Application.java file in the Spring environment.

·       lib/channel.dart - channel file does not have parallel in Spring as routing is done with annotations now, but here routing is maintained here in the channel file.

·       lib/ first_microservice.dart -  this is our main file for the application, we are going to write our controllers and stuff in similar files like these. (These are hard java like classes yay!! structuring).

·       config.yaml – This is the properties file that is going to hold all our configuration.

·       pubspec.yaml – This file is our dependency management file, here we list down all the packages that we might need for the development.

 

 There are a lot of upsides of using Aqueduct on developing a service directly from core web package of Dart

·       Fluid, chainable routing – Aqueduct provides a functional style to create routes and its handler methods.

·       CLI tool – as we saw it makes setting up the service one command job.

·       It provides multi-threading out of the box – To read more about the multi-threading in Aqueduct you should read - Multi-threading and Application State on  - http://aqueduct.io/docs/tut/getting-started/

·       Aqueduct provides built in support for ORMs – gives a huge breather for fast development.

·       And finally testing – It has its own internal testing library with mocking features available.

Phew finally we are done with developing a microservice, how about we develop a web UI?

 

AngularDart

We are going to use the AngularDart for this demo, and as always here is the link to the documentation - https://angulardart.dev/guide/setup

Before anything we are going to setup the webdev tool for development as it will serve as our main build tool. To do so type in your terminal - pub global activate webdev

Now we have to clone the quickstart project of AnuglarDev from github 

So run – git clone https://github.com/angular-examples/quickstart

fluter

Directory structure looks as shown above and there is our pubspec.yaml containing all our dependencies and project definitions. So now we are going to edit it and make it our own.

fluter

Now our pubspec.yaml file looks something like this.

As we are changing the name of the application in the pubspec it has to reflect in the import of the dart files as well, so we will have to update the reference for the name in any available dart file as well.

After the modification we will need to run -  pub get, it is similar to running npm install in node it resolves all the required dependencies and adds them to the .dart_tool directory, you can compare this directory to the node_modules in the node system.

Once that is done in order for us to launch the web app all we have to do is run - webdev serve

This will launch our application and we can see it in our local browser. It works similar to the launching system of React or vue, with hot reloading and file watching and the whole shebang.

fluter

And as expected we have a running Web interface as well, all coded in Dart.

To conclude, for anyone who is interested in working a strongly typed object-oriented language, with good structuring Dart is a very good option. One should really have a good look at it. Also, for people who are familiar with Java and want to do UI or App development this is a very good tool to learn as market of creating Android and iOS Apps with flutter is on the rise and with good speed no less.

 We are going to compare the performance of Dart application with their counter parts in coming posts. So stay tuned for that.

 

Leave a Reply