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!


Wednesday, November 30, 2016

Dart Strong Mode and ahead-of-time compilation

Dart is increasingly being used as a cross platform language, and on most of these platforms ahead-of-time (AOT) compilation is a key part of the development and deployment story.

The dynamic nature of Dart limits the effectiveness of ahead-of-time compilation, particularly as applications scale up in size. We therefore designed Strong Mode Dart to allow ahead-of-time compilers to generate better code by taking full advantage of the type information that programmers write.


While the initial goal of Strong Mode was to enable better ahead-of-time compilation, we've also seen strong uptake of Strong Mode from users who just like the stronger static checking because of it’s ability to make writing, reading, and refactoring Dart code more reliable.



The recent talk from the Dart Developer Summit gives an overview of Strong Mode: what it is, why having a sound type system is useful, and how it benefits developers by making their IDE experience better, and their errors more reliable.

If you’re curious to try out Dart Strong Mode, DartPad makes it really easy: simply tick the Strong mode box in the lower right corner.

Posted by Leaf Petersen, Software Engineer and Dart Strong Mode Aficionado

Monday, November 28, 2016

AngularDart 2.1 and new Components

AngularDart got its own dedicated team 5 months ago. Last month, we launched 2.0 final on the Dart Developer Summit. Today, we’re releasing the first minor release after that: 2.1.

Since the focus of AngularDart is Productivity, Performance, Stability, there are no major breaking changes (see the changelog) — but a lot of behind-the-scenes improvements. Your apps will get slightly smaller and faster (even relative to 2.0 which already made huge strides in size and performance since the compiled-from-TypeScript days).

Many features that AngularJS had to implement for JavaScript and TypeScript are not needed in Dart (because Dart already has those features out-of-the-box). So we’re removing them from AngularDart. Renderer is deprecated in favor of plain-old dart:html. NgPlural is going away — Dart programs can use the package:intl library.

New components

On the Dart Developer Summit, we launched AngularDart Components — the material design widgets Google is using in customer-facing apps like AdWords and AdSense. Hundreds of Google engineers work with these components every day.

And today, we’re adding another component to the pack. Namely, <material-dialog>, a customizable modal window created with the material design principles.

Note: the open source AngularDart Components do not currently accept pull requests. They will in the future, and we do follow GitHub issues, of course.

We hope AngularDart 2.1 and AngularDart Components will serve you well. Let us know what you think!

Wednesday, November 23, 2016

Making app development easier: Interview with Jerry Bowerman of sonarDesign

sonarDesign is an Austin-based company that builds an exciting app platform, in Dart. Jerry Bowerman, the company’s CEO, previously worked at Sierra Online, EA Sports and LucasArts. I asked him some questions about the company’s vision… and tech stack. — Filip Hráček

Why did you start sonarDesign?

We believe the app store model is broken. It's a nice refinement of a 40 year old paradigm of installing and updating software. It introduces friction between the app creator and end user. The app store model served a purpose in the early days. I haven’t found anyone that actually enjoys the app-cycle (discovery, install, daily updates, deleting photos or apps to make space, etc.).

The Sonar platform is a contrarian bet on the app store model. We believe for the majority of use cases, delivering apps instantly via open standards is the right model. The challenge for most app creators, however, is learning open standards, like HTML5, at the specification layer so you can deliver the performance required by modern users. Most app authors prefer to drag and drop components and create interactivity with no-code or low-code solutions. The Sonar platform gives you the performance low-level HTML5 with the ease of use of drag and drop design and no-code interactivity.

Is the vision you had when you started still valid in 2016? Is Creation as a Service a thing now?

I believe it is a thing now, but goes by several different names. Gartner, Forrester and other research companies call it Rapid Application Development. Famous Industries calls it micro-experiences, Facebook calls it React, etc. The mission of each is very similar: abstract all the tedious “guts” of app development so people can focus on creation.

Setting up web servers, databases, communication servers, DNS, load balancers, is a time consuming pain. Even after completing all that, developers still end up supporting multiple code bases to produce multiple binaries for iOS, Android, Windows, etc. It’s horribly inefficient. The worst part, however, is after it is all said and done people are going to use your app a few times and after a month won’t be using it at all.

Building non-native apps powered by web technologies is a controversial approach. Why do you think it’s viable, technology-wise?

I think most people have long forgotten there was no app store when the iPhone launched.

In fact, the app store didn’t arrive until a year later. A couple of weeks before the launch of the original iPhone Steve Jobs hastily arranged a meeting where he passionately implored developers to use “AJAX” to make web apps. He said HTML5 is the future. To underscore his point, he said several times that mobile Safari was a full featured browser on mobile, not a gutted “mobile friendly” browser prevalent on feature phones at the time.

Of course we all know the truth: Safari on the original iPhone was slow, buggy and didn’t support much of the HTML5 specification. Fast-forward nine years, however, and mobile browsers do support most of the HTML5 specification, processor speeds are comparable with two year old laptops, and download speeds are way faster. Our 400KB client downloads in a couple seconds and delivers a native look and feel.

What’s your current tech stack? How has it evolved over the years?

Our platform is hosted on AWS and so we take advantage of quite a few of their services for email, messaging, storage, data storage, CDN, DNS, load balancing, etc. We have an assortment of managed Linux/Nginx instances running PHP and Dart services. We use DynamoDB for unstructured data storage and Postgres/RDS for structured data storage.

Our stack has been pretty consistent from the beginning. The only big change was moving from Mongo to DynamoDB a couple years ago. DynamoDB wasn’t available when we started the company back in 2012.

Does Dart give you any value that other technologies can’t?

Being able to work in a strong, typed, object oriented language is a huge value versus hand-writing JavaScript. Building features on top of existing Dart libraries is quicker than writing everything from scratch. Dart also does a good job of optimizing JavaScript and minifying it for final delivery.

Was it hard for you to find (or train) developers who know Dart?

I thought that was going to be a big issue but it really was not much of an issue. We only hired experienced developers with a solid understanding of object-oriented programming, code design, etc. New hires are usually over the syntax issues and productively writing code in a few days.

What’s the next big thing for your platform?

We have many important features we want to add over the next year such as alignment, 9-slice, exposing our Expression system visually, bitmap caching and so on, but the big thing for our platform is Components. Components are self-contained objects that you can share with other people, who can then extend the functionality, and share with more people. We introduced v1.0 of Components in our platform earlier this year but we plan to really blow it out over the next few months and into 2017. Imagine being able to share and extend art, code, audio and video without fear of theft? The Sonar platform tracks, authenticates, and delivers all the bits, which makes our Component system much different than asset stores using DRM.

Building web apps with Firebase and Dart

Jana Moudra is one of the many developers who joined us for the Dart Summit this year. Not only was she helping organize the new, shiny Code Lab showing off the brand new AngularDart Components, she was also giving a talk on “How to build a Dart and Firebase app in 30 mins”.


We thought it’d be great to hear more about this and we’re therefore happy to share this brief chat with Jana.

---

So, Jana, this was the second time you attended the Dart Summit. We were really pleased to have you join us again this year and very thankful for all your hard work, help, and support. In the interest of people who maybe weren’t able to be at the summit this year, I was wondering if you could talk a bit about your overall impression of the event?

The Dart Developer Summit was a really great event and I was really happy there. I met a lot of Dart developers, had fun and saw really nice talks on topics which interest me. I filled my personal todo list with a lots of "must try" or "must explore" things. I am really looking forward to the next year's summit, see ya on a boat! :-D [You’ll need to watch the first minute of the keynote to get the boat reference].

Sounds great. Really hope to see you for the summit again next year. Sounds like that’s not totally unlikely. Regarding your talk at the summit about building Firebase and Dart apps. What would you say is the number one reason why developers should watch it?



When you implement some project, you usually need a backend which takes some time to implement. But what if you don’t have the time or don’t want to invest in development?

This is exactly the reason why Firebase got my attention in the first place - I call it a “backend without implementing backend” but it’s even more.

Dart makes me a very productive developer. So let’s take these two technologies together and see how easy it is to build an application with Dart using a Firebase in a 30 mins!

So, you already talked a bit about new Dart-related “must try” and “must explore” things that you added to your list. Just being curious, I was wondering if you could reveal or talk a bit about what you are currently working on? That is, what is the next cool thing that we can look forward to?

Sure! We are working on our company’s product which uses Dart on the frontend and Firebase on the backend. These technologies are great together. And also, I am planning to update the Firebase3 package with support for Firebase Cloud Messaging and provide some more tutorials and examples on how to use it.

Awesome, can’t wait to learn more about that.

Thanks again for all your work on the Firebase3 package, an awesome talk at the summit, and for taking the time to have this chat.

Thank you for all the great stuff you do! :-)

Monday, November 21, 2016

Dart Developer Summit 2016 Videos: Soundness, AngularDart 2.0, and the Fastest Growing Language at Google

Videos from last month’s Dart Developer Summit are up on YouTube and we thought we’d cherry-pick the highlights for you.

The summit keynote is a summary of all the major news and of the direction the team is taking now. It’s where we announced that Dart is the fastest growing language at Google. Teams switching to Dart report up to twice the productivity and development speed of what they had previously.



Next, AngularDart 2.0 was launched in a presentation by Ferhat Buyukkokten and Matan Lurey. They showed how they made the framework’s output 40% smaller and 15% faster in the 4 months since AngularDart got its own dedicated team. They also showed our 60 fps table using setState(), and the new testing framework called NgTestBed.



Later in the day, Ted Sander launched AngularDart Components — the material design widgets Google is using in customer-facing apps like AdWords and AdSense. Hundreds of Google engineers work with these components every day. Watch the video to learn how they make our teams more productive, and our web apps more performant.



If you’re interested  in language design, watch Sound Dart, a talk by Leaf Petersen in which he explains Dart’s strong mode. With strong mode, Dart’s type system becomes sound, so that when you write types they are guaranteed to be correct (while still allowing you to write dynamically typed code where you want the flexibility). This differentiates strong-mode Dart from many popular compile-to-JavaScript languages, and improves both performance and developer productivity.



Another presentation that made waves was the Flutter keynote from Day 2 of the summit. Eric Seidel impressed the audience by showing just how fast mobile development can be with Flutter.



After Eric’s talk, John McCutchan and Todd Turnidge went into details about Flutter hot reloading. They also showed, for the first time, code rewind in Dart.



These are just 6 out of the 18 talks that are available on YouTube. For example, Will Ekiel’s talk titled Learnings from building a CRM app at Google gives a perspective on managing a product built with Dart and deploying it across both web and mobile. Another interesting practical presentation on using Dart in production is the one given by Faisal Abid and Kevin Birch about their large-scale JS-to-AngularDart rewrite. And the list goes on.

We’re very happy how the event went, and we’re already looking forward for next year’s summit. In the meantime, follow our blog, our Twitter account, our G+ page, or join the conversation in any other way. We want to hear from you.

Thanks for building in Dart.


Cross-posted from Google Developers Blog.

Friday, November 18, 2016

Flutter: The best mobile development experience?

Developing for mobile just got a lot more fun with Flutter’s live developer workflow. At the heart of this new workflow is the Dart VM’s latest feature ‘hot reload’. Hot reloading your program allows you to update the code without restarting your application. Make changes to your program and see them instantly on your Android or iOS device.

Many programming languages support updating the running program but these all suffer from limitations that make using the feature difficult and error prone. The Dart VM’s hot reload is safe and fast. First, we designed the system to be safe and be reversible. If we detect issues at reload time, the VM will restore the original source code as if nothing happened. It’s fast because you can import new libraries, create new classes, and even add fields to existing classes without restarting your application.

Flutter works naturally with hot reload and you can see your changes on your mobile device in less than a second. And because we reload the changes into the running app, you don’t need to waste time navigating back to where you were in the app. We measure our development cycle in milliseconds!


In our talk we share some technical information on the implementation and do a deep dive on the semantics of Dart during a reload.



Some of the questions covered in the talk are:
  • What happens to static data?
  • What if functions are already on the stack when a reload occurs?
  • How do you handle adding an instance field to classes that have instantiated objects?
There is even more exciting features coming to Flutter’s mobile developer experience. The developer experience team is hard at work adding support for fix-and-continue debugging. Be sure to watch Todd’s exciting demo of this feature.

Posted by John McCutchan & Todd Turnidge, Hot Reloaders

Wednesday, November 16, 2016

Aqueduct - a server-side web framework written in Dart

On the Dart summit last month, Joe Conway gave a great talk about Aqueduct, a server-side web framework written in Dart by stable|kernel. We asked Sarah from stable|kernel to write a blogpost as well. — Filip Hráček



After spending a year building Aqueduct in a relative vacuum, the stable|kernel team went into the Dart Summit with a lot excitement! Finally, we got to share our server-side web framework with the community it was built for: web and mobile developers who want to build an entire stack in Dart. If you missed stable|kernel CEO Joe Conway present Aqueduct at the Dart Summit, you can watch it here.

Our team began exploring Dart about 18 months ago and we quickly realized the potential for supercharging our team’s productivity due to Dart’s power and speed. In October 2015 Joe wrote: “It is important to us and our clients that we use platforms that allow for a high degree of productivity, testability and maintainability. In order to identify a platform that we could become experts in that also delivered on these three things, we set out to evaluate the web server platform landscape and find a platform that fit our needs.”

What appealed to us most about Dart:
  • Easily deployable, stand-alone virtual machine
  • An incredible set of libraries for building web servers
  • Asynchronous programming and reflection
  • A simple, elegant language that Swift, Objective-C and Java programmers would love

While Dart had all of the fundamentals and a great standard library to support building web server applications, no one had built a cohesive tool like Ruby on Rails, or .NET and the Entity framework. We were looking to combine the productivity of tools like those with the Dart platform together for a the ultimate programming experience. So that’s where Aqueduct comes in.

The purpose of Aqueduct is to provide a foundation to build full-stack solutions quickly, but without sacrificing long-term sustainability. All of the typical features necessary for a web server application are available out of the box.

Some of the highlights:
  • Easy integration with CI tools
  • OAuth 2.0 Implementation and Endpoints
  • Logging
  • An ORM that makes writing queries more productive, but doesn’t get in your way.
  • Automatic OpenAPI specification generation
  • High quality documentation to quickly get the most out of Aqueduct
  • Tooling for database migration

You can take a look at additional features here and check out the tutorials here.

— Sarah Woodward, stable|kernel

Tuesday, November 15, 2016

AngularDart: The best Angular for you?

Ferhat and Matan recently announced the release of AngularDart 2.0 with some pretty dramatic performance improvements at the Dart Developer Summit in Munich.


We figured we’d have a chat with them to better understand — straight from the horse’s mouth — what this means for developers looking to write a web app.


What is the single most important reason for people to try out the new AngularDart 2.0 release?

That would be better performance. And really — as we talked about at the Dart Summit recently — AngularDart is mainly about providing developers with three things: Productivity, Performance, and Stability.
  • AngularDart is an amazing framework for building web apps and we have internal teams reporting doubling their productivity.
  • With the new release just out, AngularDart output is 40% smaller and 10% faster.
  • Finally, with major teams depending on the framework for their products, we work hard to ensure stability throughout when implementing these improvements.

Indeed, you announced some pretty awesome performance improvements both in terms of output size and speed. What were the key insights that allowed you make so dramatic improvements in such a short time?

For size improvements, it was a combination of low hanging fruit like better whitespace compression, a focus on generating idiomatic Dart code, and refactoring to remove dynamic calls and abstraction layers where possible. For runtime performance, we have leveraged strong types and moved from “dirty checking” to a ComponentState model.

AngularDart 2.0 was just released. So I was wondering, is it stable enough that I can start using it today? I mean, you said that it has been used in production for several months. How does that work?

Yes. We have major Ads products relying on this already, and they have been for months. We have thousands of tests to make sure that as we make further performance improvements, nothing breaks along the way.

Awesome. So what is the best place to go if I want to try this out or learn more?

You can check out the video from our presentation at the 2016 Dart Summit. We also have codelabs that help you get started using AngularDart and even one with the new AngularDart components that Ted talked about at the Summit. Finally, angulardart.org is the place to go for the latest info on AngularDart.