Wednesday, December 7, 2016

Enhancing the Flutter developer experience

At the Dart Developer Summit we introduced our fast and powerful Flutter developer experience. But our ambitions don’t stop here, so we have been hard at work developing several updates that further improve the experience.

Faster startup during development


Hot reload means you only have to launch your app once; after that changes are simply reloaded into the running app. But even that initial launch should be really fast. Previously we used a loader application to bootstrap the device with your application sources. Thanks to recent improvements made to the reload engine inside the VM this is no longer necessary and your application will be booted immediately, and you will see the real launch experience of your app.

IntelliJ improvements


We have published an update to our IntelliJ plugin, version 0.1.6 that has several exciting changes:
  • Launching the app with hot reload support (see details below)
  • A new flutter action pane has been added on flutter.yaml files (see details below)
  • Keyboard shortcuts were added for hot reload and restart:
    • Hot reload: ctrl \ or ctrl alt ;
    • Restart: ctrl shift \ or ctrl shift alt ;
  • Flutter doctor now prints out the IntelliJ plugin version numbers
  • Improved the robustness of starting and stopping program runs

Launching the app with hot reload support


We have updated the behaviour of the IntelliJ Run and Debug buttons to both launch the app with Hot Reload support. If you want to run without hitting breakpoints, click the ‘Run’ button. If you want to trigger breakpoints, click the ‘Debug button’. 


Flutter specific action bar on flutter.yaml files


A custom action bar has been added for flutter.yaml files. This allows you to upgrade your flutter installation, and to run the doctor command for troubleshooting. 


Updates to reload semantics


In Todd and John’s Dart Developer Summit talk they discussed the semantics of hot reload. Since giving the talk there have been some important updates that refine the semantics of reload to improve the developer experience.

Const fields are always reloaded


Changes to fields that are marked const can now be reloaded. For example:

   const animationDuration = const Duration(seconds: 1);

*reload*

   const animationDuration = const Duration(seconds: 2);

After the reload animationDuration will have the duration of two seconds. You can keep making changes and each time you reload, your program will use the updated value.

New instance fields have their initializing expressions run

When you add a new instance field with an initializing expression, the VM will run that expression and assign the result to the instance field for all instances of the class. For example:

   class Foo {
     ...
   }

*reload*

   class Foo {
     ...
     String myTitle = ‘My Title String’;
   }

After the reload all instances of Foo will have the new field myTitle and it will contain ‘My Title String’. This is different than John and Todd’s talk which said myTitle will contain null.

When are initializing expressions run?

Initializing expressions are run as the last stage of a hot reload. Note that the call stack may not be empty. After we have safely performed the reload we find all instances of the class and run the initializing expression and store the result in the field. The VM will do this for all classes that received new fields but in no particular order.

Initializing expressions with side effects

Your initializing expressions can have side effects but the VM does not run the initializing expression against instances in a particular order. In other words, you cannot guarantee that a certain instance will have the initializing expression run before any other instance.

Initializing expressions that throw

If an initializing expression throws we log that it threw and leave the field as null.

Updating and feedback


To try out these enhancements, please update your flutter IntelliJ plugin (you should be prompted in IntelliJ; if not, select the menu item IntelliJ > Check for updates... and upgrade from there.). Next update your flutter installation by running flutter upgrade in a terminal, or by using the flutter.yaml action bar discussed above. 

Should you see any issues, or have suggestions or enhancement, please let us know in the issue tracker!

Dart 1.21: Generic Method Syntax

Dart 1.21 is now available. It introduces support for generic method syntax along with a few popular convenience features. Get it now!

Generic method syntax




Until now, Dart's generic support was limited to classes, such as List<T>. Dart 1.21 introduces syntax allowing type arguments on methods and functions.

   T first<T>(List<T> ts) {
     return ts.length == 0 ? throw new ArgumentError('Empty list!') : ts[0];
   }

Note the return type, T. This enables call sites to preserve type information from arguments. Try to write the same function without a type argument, and you'll see that the return type must be Object – there is no other way we can make it work on all lists. For more examples, check out the Using Generic Methods article. For even more details, the informal specification is the place to go.

We've had generic methods and functions for a while in strong mode. 1.21 introduces support for generic method syntax even without strong mode. Libraries can use this feature and work in both contexts, providing a stepping stone to full generic methods in all Dart code.

However, this feature does not yet provide full runtime support for generic methods outside DDC. In particular, type arguments are not reified (i.e., they have no representation at runtime). Libraries must avoid constructs where the runtime value of type arguments matters, in order to work in both modes. For example, x is T will not work outside strong mode if T is a method type argument. The analyzer marks such cases as errors, so you'll have tool support to avoid them. (Note: If you are using IntelliJ, support is available in WebStorm 2016.3.2 RC / IntelliJ IDEA 2016.3.1 RC, and later.)

Convenience features


1.21 also introduces a couple of much requested convenience features. You can now use = to specify a default value for a named argument.

   enableFlags({bool hidden: false}) { … }

can now be replaced by

   enableFlags({bool hidden = false}) { … }

We’re also introducing access to initializing formals, e.g., x is now in scope in the initializer list such that we can use it to initialize y in this example:

   class C { 
     var x, y; 
     C(this.x): y = x; 
   } 

As with any new language feature, it is critical for package authors to update pubspec.yaml with a latest SDK version.

   name: my_cool_dart_package
   environment:
     sdk: '>=1.21.0 <2.0.0'

This ensures users on older SDKs aren't broken when they update their packages.

For more details on these and other changes in 1.21, see the full changelog. Otherwise, download the latest release, and let us know what you think!

Monday, December 5, 2016

StageXL 1.0: a chat with Bernhard Pichler

To contribute to the celebration of the recent 1.0 launch of StageXL, we had a chat with Bernhard Pichler to learn more. Here we go.
---



First and foremost huge congrats on the 1.0 launch! People are already raving over it on Hacker News and Reddit. This is really a great accomplishment. I was wondering if you could start by telling us a bit about who you are?

Thanks. Sure. My name is Bernhard Pichler, I'm 42 years old and I'm from Austria - you know Sound Of Music but no kangaroos. In my day job I work as a developer for a company in the gaming and betting industry. Nowadays I mostly do stuff on the backend but I used to work on the frontend in the past. That's why I still love to do computer graphics and why I work on StageXL in my spare time.


How would you explain in less than 54 words, what StageXL is? 

StageXL is a 2D rendering engine mainly built for casual games. Games like Farmville or Bejeweled are good examples. More people are playing this kind of games than those who play high budget AAA titles. StageXL basically provides an API to draw images to the screen in a very fast and flexible way.

What would you say is the main benefit of using StageXL for me as a developer?

As a game developer you always ask for more speed and more features. To do this you have to write code as close to the metal as possible. Since we are talking about the browser, your best option is to use WebGL. StageXL bridges the gap between WebGL and an easy to use API for the developer. You don't have to worry about the shader language, texture atlas management or draw call batching for example. StageXL uses best practices for game development and is highly optimized for this use case.

Cool. I'm kind of curious about the story behind StageXL. Could you say a bit about how it all started?

I have to start at the very beginning. More than 25 years ago I started to do so called demos. A demo is a small computer program that generates visually appealing computer graphics, mostly written in assembler language. After school I got a job to write games for gaming terminals, called Photo Play, which where placed in amusement arcades and bars all over Europe. I did this for many years and as a funny side note I worked there with a guy called Daniel Sperl, who later did the Starling rendering engine for Flash and Adobe AIR. When Dart was announced, I think it was 2011 or so, I thought it would be fun to write a similar rendering engine that is based on HTML5 and Dart. It started as an experiment but soon I got pretty obsessed to improve and push it as much as possible.

What use of StageXL are you most proud of or impressed by?

I was very proud when Adobe presented the Flash Pro exporter for Dart and StageXL at Google I/O 2013. One company migrated their educational games for kids from Flash to Dart and StageXL, another guy migrated an application that teaches how to read and play sheet music. Ever since StageXL grew a lot and is mostly used without Adobe Flash as a design tool. Tools like Spine for 2D animations are amazing and I'm proud that StageXL has full support for such tools. Other than that I get excited every time I see a project using StageXL. Recently someone used Apache Cordova to build a card game for the play store, which is pretty cool.

What new or coming StageXL feature are you most excited about?

Without a doubt this is support for Flutter. Today, developers are using frameworks like Adobe AIR and Unity to build mobile games, but wouldn't it be exciting to do this with Dart and StageXL? You can probably use the existing Flutter API to build simple games, but to be competitive with other frameworks you need access to OpenGL. Unfortunately, Flutter is still in an early stage and providing the OpenGL APIs is not on their immediate roadmap. All we can do is keep an eye on it and hoping for the best :)

Yeah, that sounds like a really exciting setup with great opportunities for developers. On that note, thanks very much for your time, Bernhard, and once again huge congrats on the StageXL 1.0 launch!