Cheat sheet

Creating apps with Dart and Stagehand

Alexei Eleusis Diaz Vera
Dart

© Shutterstock / Miova

Google’s Dart is taking off. In this article, Alexei Eleusis Diaz Vera, a Google software developer, explains how you can use Stagehand and greencat with Google Dart to create apps with optimized performance.

Interest in Google’s Dart programming language has increased considerably lately, and for a reason, its adoption is growing tremendously inside of Google with several millions of lines of code written in it, which is a testament to its robustness and support for the coming years. Additionally with the development of Flutter and the already existing AngularDart framework, is one of the few languages that promise that a single codebase can be used to build apps for the web, Android and iOS.

Taking ideas from modern programming languages and making its own interesting proposals, Dart makes developers productive from day one since it leverages on a C-like syntax that most developers are familiar with and provides a very robust SDK and tooling. So even if you don’t plan to use it in the near future, don’t miss this opportunity to see it in action, we are going to build the classic TODO app reviewing some tools in the way.

Scaffold app creation with Stagehand

Stagehand [1] is a tool that helps to create new apps with different goals and will create a default configuration so you can start working on your app immediately.

Stagehand

In this case, by running the command stagehand web-angular we started a web app using the Angular framework [2], after this, we run pub get and pub serve and we are ready to see the app in the browser.

IDE support for Dart is provided and there are several options with community support, the recommended setup though is use JetBrains’ IntelliJ IDEA (Community and Ultimate editions) with the Dart Plugin.

Static analysis

Dart added a new type system, called strong mode which is the default and recommended mode in the latest versions of the SDK, it also includes a linter to help developers avoid common mistakes during development; it contains rules in several categories ranging from style to error detection. Given that code is not only written for the machine, but rather other developers, some of these rules help you adhere to the Effective Dart Style Guide [3] which contains the set of conventions recommended by Google to have a homogeneous and maintainable codebase.

To configure analysis you need to specify which rules you want to enable in the analysis_options.yaml file, a list of all available rules is at GitHub [4] and the rules themselves are documented there as well [5].

Once configured, IntelliJ will highlight the linted code and provide quick actions for it ranging from ignoring particular instances to quick fixes:

IntelliJ in action

IntelliJ in action

Running the app

By running pub serve you will be able to see the web app after a couple of seconds, the app that stagehand created is a small todo app too that uses the angular_components library that provides a nice collections of widgets adhering to the Material Design specification, it is all contained in a single component that illustrated the service pattern common in the angular apps. It illustrates inputs and outputs in components.

We will change the app to use a state management library that is a port of Redux [6] to Dart, its name is greencat [7], we only need to add it (and its runtime dependencies) to the pubspec.yaml file.

We can use the already defined domain logic defined in the example app in greencat for which the source code is here [8], so let’s copy it to our project so the folder structure looks like this:

Fold Structure example

One advantage of managing state with this approach is that change detection can be optimized so it is performed only when a new reference is provided and we ignore mutations to it since the convention is that data is immutable or we manually will trigger change detection. To achieve that we need to add the corresponding argument to the @Component in the app_component.dart file which is: changeDetection: ChangeDetectionStratety.OnPush.

Another advantage is that since state is manipulated in the store, you can programmatically change it so you can bootstrap the state of the app during development and debugging.

Greencat also includes a couple of middleware implementations, ported also from Redux which are Thunk and Logger.

The following listings for app_component and todo_list show the final state of the code for our app:

app_component and todo_list example

@Component code example

todo_list_component() code example

@Component code example, ctd.

As you can see they are simple and they adhere to the conventions followed by apps that have immutable state and instead have a stream that emits event every time that it changes.

And our app looks like this:

Greencat is very convenient for people used to the conventions set by Redux, but using is completely optional since it is a very thin wrapper to classes and concepts already available to Dart, additionally there also exists an officially supported port of ReactiveX [9] which some other people prefer.

Conclusion

Dart is a modern programming language with very capable frameworks and a nice story around tooling. It promises to allow developing applications for Web, Android and iOS that can share the business logic codebase and probably some of the UI infrastructure bits. Libraries like greencat are a good choice for that end since the model and conventions they promote are very well supported by angular and a perfect fit for Flutter.

asap

To see more cheat sheets, download the latest issue of JAX Magazine:

Cheat sheets are a godsend when you don’t know something – and that will happen no matter how well-prepared you are. Programming is not a “who does better” contest and it’s just as hard as learning a new language: it takes time until you get the hang of it and master all its facets (syntax, semantics and pragmatics). It might get intimidating at times, which is why the following cheat sheets might come in handy: Java, JavaScript, Scala, Kotlin, and Dart.

And since we’re here to learn more about programming languages, why not dive deeper into the JVM universe? It will be fun, I promise.

Author

Alexei Eleusis Diaz Vera

Alexei Eleusis Diaz Vera is a software developer at Google with a focus on enterprise class software.


Comments
comments powered by Disqus