Thursday, October 27, 2016

Sub-second reloads for mobile developers with Flutter and Dart

Developers inside and outside of Google have told us they are looking for a better way to build apps that delight all their users, without having to build the app twice. To help, we've been working closely with the Flutter team to build an open-source SDK that helps developers write beautiful UIs for all of mobile from a single codebase. Currently in technology preview, Flutter is being used by teams inside of Google.

At the previous Dart Developer Summit, the Flutter team showed how they used Dart to render mobile graphics and spinning square. Fast-forward to today: the Flutter team demoed their near-complete implementation of material design and showed real apps built with Flutter running on iOS and Android.



Flutter is different than other mobile SDKs. It's built with a best-in-class text rendering engine and the same 2D-to-GL library that Chrome (and others) use, which means its lowest layers are battle-hardened and proven. Flutter does not use the OEM widgets, instead it paints every pixel using its framework and graphics engine. This gives developers tremendous control and expressiveness across all of mobile. However, apps built with Flutter try to feel natural on iOS and Android; Flutter's framework embraces platform differences like scroll physics, iconography, fonts, and gestures.

A key benefit of using Flutter is its extremely fast development cycle, thanks to the Dart VM and Flutter's functional-reactive framework. For both iOS and Android, hardware and emulators, developers using Flutter can experience sub-second dev cycles as they add and debug app UIs. The app's state is maintained during the reloads, which means developers can iterate very quickly without restarting their app for every change. "We measure our dev cycles in milliseconds", said Eric Seidel, engineer on Flutter.

The new Flutter plugin for IntelliJ was also announced. Building on the existing strong support for Dart on the JetBrains platform, the Flutter plugin helps you run, debug, and hot reload on mobile devices and emulators from within a full IDE.



Though much progress has been made, Flutter is still in technology preview. The Flutter and Dart teams are working to build out further features such as accessibility and a plugin architecture.

To learn more about Flutter's tech preview, please visit flutter.io and github.com/flutter.

Wednesday, October 26, 2016

Dart in 2017 and beyond

We’re here at the Dart Developer Summit in Munich, Germany. Over 250 developers from more than 50 companies from all over the world just finished watching the keynote.

This is a summary of the topics we covered:

Dart is the fastest growing programming language at Google, with a 3.5x increase in lines of code since last year. We like to think that this is because of our focus on developer productivity: teams report 25% to 100% increase in speed of development. Google has bet its biggest business on Dart — the web apps built on Dart bring over $70B per year.

Google AdSense recently launched a ground-up redesign of their web app, built with Dart. Earlier this year, we announced that the next generation of AdWords is built with Dart. There are more exciting Dart products at Google that we’re looking forward to reveal. Outside Google, companies such as Wrike, Workiva, Soundtrap, Blossom, DG Logic, Sonar Design have all been using and enjoying Dart for years.

Our five year investment in this language is reaping fruit. But we’re not finished.

We learned that people who use Dart love its terse and readable syntax. So we’re keeping that.

We have also learned that Dart developers really enjoy the language’s powerful static analysis. So we’re making it better. With strong mode, Dart’s type system becomes sound (meaning that it rejects all incorrect programs). We’re also introducing support for generic methods.

We have validated that the programming language itself is just a part of the puzzle. Dart comes with ‘batteries included.’ Developers really like Dart’s core libraries — we will keep them tight, efficient and comprehensive. We will also continue to invest in tooling such as pub (our integrated packaging system), dartfmt (our automatic formatter) and, of course, the analyzer.

On the web, we have arrived at a framework that is an excellent fit for Dart: AngularDart. All the Google web apps mentioned above use it. It has been in production at Google since February. AngularDart is designed for Dart, and it’s getting better every week. In the past 4 months, AngularDart’s output has gotten 40% smaller, and our AngularDart web apps got 15% faster.

Today, we’re launching AngularDart 2.0 final. Tune in to the next session.

With that, we’re also releasing — as a developer preview — the AngularDart components that Google uses for its major web apps. These Material Design widgets are being developed by hundreds of Google engineers and are thoroughly tested. They are written purely in Dart. (Gallery.)

We’re also making Dart easier to use with existing JavaScript libraries. For example, you will be able to use our tool to convert TypeScript .d.ts declarations into Dart libraries.

We’re making the development cycle much faster. Thanks to Dart Dev Compiler, compilation to JavaScript will take less than a second across all modern browsers.

We believe all this makes Dart an even better choice for web development than before. Dart has been here for a long time and it’s not going anywhere. It’s cohesive and dependable, which is what a lot of web developers want.

We’re also very excited about Flutter — a project to help developers build high-performance, high-fidelity, mobile apps for iOS and Android from a single codebase in Dart. More on that tomorrow.

We hope you’ll enjoy these coming two days. Tune in on the live stream or follow #dartsummit on Twitter.

Monday, October 17, 2016

Good-bye symlinks

Dart 1.20 is now available. Get it now!

Back in the Dart 1.19 release we introduced support for the .package file; our replacement for the /packages/ directory often filled with hundreds of symlinks. In 1.19 this support was opt-in via passing an option to pub get. Now that it has had time to mature, and based on favorable feedback, we have gone ahead and made it the default. If for some reason this causes issues, you can still get symlinks by using the pub get --packages-dir command; in such cases make sure to file an issue.

One common question we have received is how to handle resource loading in a world without packages symlinks. The symlinks blog post covers this in detail. In summary you can either resolve a Uri to a resource using the new resolvePackageUri API (e.g., Uri actualURI = 
    await Isolate.resolvePackageUri(Uri.parse("package:foo/bar.txt")) ), or you can use the new package:resource that provides a more abstract API.

Finally, the VM has been updated to throw catchable Error objects when method compilation fails. This allows package:test, for instance, to provide useful stack traces when running code with syntax errors.

See the full changelog here.

Download the latest release, and let us know what you think!

Thursday, October 13, 2016

The new Google AdSense user interface: built with AngularDart

AdSense is a free, simple way to earn money by placing ads on your website. The team just launched a completely new version of their app for publishers. Read all about it here. We asked Daniel White, the tech lead for the project, some questions because the new UI happens to be built with Dart and Angular2.


AdSense launched way back in 2003. How long is it since the last big redesign?
Last big redesign was called ‘AdSense 3’ and launched about 6 years ago. It was written in Google Web Toolkit (GWT) and the UI has evolved through several iterations - but this is the first ground-up redesign in 6 years. There are a number of long-standing UX issues that we’ve taken the opportunity to solve. A big shout-out to our UX team who’ve been 100% behind this project. We couldn’t have done it without them!

How many software engineers worked on the project?
Purely on the AdSense applications, we have a team of close to 100. Around 25% of them write Dart.

How many lines of code?
We have around 160K LOC of Dart.

How long does it take to do a complete redesign like this?
We’ve been following Dart for a long time and started to pilot it about 2.5 years ago. In the last 18 months we’ve shipped most major new features in Dart. For AdSense Material Design, we started UX work in December 2015 - coding started in February. So, 8 months.


What’s the stack?
Strong mode Dart, Angular 2 — we just migrated all our codebase away from AngularDart1. Java servers. We use protocol buffers to communicate between the browser and our UI servers.

We also have an older GWT app running on the same page and we use protocol buffers to communicate between the Dart and GWT codebases.

Have you seen any productivity improvements?
Compared to our old GWT workflows, we see much faster iteration. Compiling and starting the server is about 8X quicker than it used to be. Refreshing a page is about 6-7X quicker in dev mode. Tech leads that have shipped products have estimated a 2X improvement in overall project speed - from beginning implementation until launch.

How about performance improvements?
Loading the page requires about 50% less data (it’s around 900K-1000K smaller - this is mostly due to a new architecture, but moving to Dart let us redesign all that stuff). Using a cold cache, the time from initial request to working UI is about 45% less.

Were the developers happy?
Yes. The combination of Dart and Angular is working really well for us - we anticipate this to improve even more now that Angular’s Dart codebase can be tailored to the language (better error messages, optimizing code size).

When we decided to push ahead with Dart, the response from tech leads within AdSense was very enthusiastic - to the point where the small pilot team was overwhelmed with new requirements to support!


What are the advantages and disadvantages of the new stack?
The main advantage for us is having a top quality tech stack that we can share with other Google products - shared code and components can be developed for reuse by other teams. This gives us consistent UIs and massively reduces the amount of custom code we need to write. The benefits of that can now be shared with the outside world too — the Material Design UI components that have been worked on by hundreds of engineers will be gradually released to open source.

The disadvantages have largely been around being on the cutting edge, particularly with Angular2. We need to keep up with breaking changes in Angular. Thankfully, Angular has mostly stabilized now and we’re looking forward to 2.0 final (to be launched on the Dart Developer Summit).

Any surprises?
What’s been very gratifying is that investing in improved developer productivity/workflows has had visible impact on the quality of the Material Design AdSense applications. Developers feel ‘in tune’ with the page because they can see the effects of code changes very quickly, but they also get the benefit of types/refactoring/tool support that come with a statically typed language.

Alright, so now that you launched, what’s coming next?
Our new tech stack is going to allow us to ship higher quality changes more quickly, which is what we plan to do as we launch more Material Design changes over the coming months and years.

Thank you, Daniel!
Thanks!

Tuesday, October 11, 2016

What’s your favorite Dart feature?

Earlier this year we had an ongoing thread where Googlers shared their favorite Dart feature—perhaps a less known one. We wanted to share these insights from some of our most engaged internal users more broadly. Hence this post.

The names have been changed to protect the innocent, but the contents should constitute some fine reading.

Here we go:



What's your favorite "less known" (or undocumented) feature of Dart?
Any particular syntax trick or library function?

Java has loads of these, tricks ranging from the double-paren. init (Map<String,String> {{ put("a", "1"); }};) to "sneaky throwing" ANY exception.
Anything similar in Dart?

Cheers,
Agile Analyzer



As a Java developer, my opinion of both of those is: this is clever, but don't do it in real code under any circumstances.

-Bug Basher



I'm not a fan of tricks, and from what I've seen so far Dart needs very few. There are some features of the language that I feel are underutilized or are very new. Here are a few:

- Null is a type, so if you have a Future and you want to document that it doesn't return anything useful, make it a Future<Null>
- You can throw arbitrary objects in Dart without losing stack traces: throw "This is an error"
- const can be a local variable and it will still be allocated only once (no need to hoist it into a static field or top-level constant)
- You can create custom matchers and use them in your tests (example)
- There exists package:meta that the analyzer understands, and which has @protected, @required (for required named parameters), and others
- You can implement classes as every class also exports its interface.

-Clever Compiler



My favorite lesser-known feature is pretty simple: you can define stuff outside of classes.

I see a lot of users coming to Dart from Java or C# and they are in the habit of stuffing every variable or function inside a class either because they think you have to—which you do in those languages—or out of a belief that it makes their code better in some vague "OOP paradigm is best paradigm" sort of way.

Object-orientation is a fantastic paradigm for expressing some kinds of code. It works really well when you have interesting state and interesting operations that are deeply tied to that state. It's also great when you want polymorphism based on kinds of objects.

But a lot of times, you're just trying to express some vanilla data or some imperative behavior. For those, classes don't provide any value. If you just want to define the value of π somewhere, you don't need a class named, like, I dunno "MathematicalConstants" to put it in. You can just do:

const pi = 3.1; // Eh, close enough.

Likewise, sometimes all you need is a procedure, not a method. Say you create and file and write some string to it. You could make a "FileWriter" class or something, but why bother? You can just do:

void writeFile(String path, String contents) { ... }

You might be thinking that you need to put definitions inside classes to avoid name collisions and to "namespace" things, but you don't need to do that in Dart. Libraries in Dart are the unit of namespacing and modularity. With show, hide, and import prefixes, libraries are much better at expressing namespaces and dealing with name collisions.

If you made it this far, I will note one feature that really is rarely used. Did you know that you can define getters and setters at the top level too? You can define something that looks like a top-level variable but is actually doing computation.

Cheers!
--Dart Dogfood



+1 for simple short-hands.  When a language is young, there's a tendency to use it like that-other-thing-you-know.  These conversations are a really good thing.

Instead of writing:

if (foo == null) {
  foo = 'bar';
}

Just do:  foo ??= 'bar';

The "cognitive load" (ahem!) is much lower.  It's similar to Ruby's foo ||= 'bar' but better, because it strictly applies to nulls (vs. nil & false).

-Eager Execution



I like ??= for lazy-initialized fields

   T _foo;
   T get foo => _foo ??= _computeValue();

--Failed Function



I wouldn't describe these as "favorite" features, but they do seem to be lesser known:


+1 to avoiding things that are "clever" but hard to read.

--Great Googler



I don't see generators used all that much and there are some places where they really help.
https://www.dartlang.org/articles/language/beyond-async#generators

For some use cases a generator is going to be more readable than the alternatives, in others it's very tempting to write a 'clever' generator.

--Heated Hotspot



One of my favourite features is that the analyzer will tell you if you use a switch statement with an enum and don't list all the enum values.

This means that if you've been careful always to use switches when using enums (rather than if/else chains), you can just add the new value to the switch, run the analyzer, and it'll tell you all the places you need to update.

--Injected Iterator



Thanks everybody!!!

Lots of stuff to try out and/or read about! I've been actually thinking that something like the meta library would be nice (and hey, it's already live!)

Awesome thread :)

--Agile Analyzer



My favourite Dart things are foremost the ones I created ;) ... immutable collections, immutable value types, proper enums, and object oriented serialization:

- https://github.com/google/built_value.dart/blob/master/libraries_for_object_oriented_dart.md

And a few I didn't:

 - The ".." operator is a gift for anyone who likes fluent APIs.
 - source_gen (and now the "build" package) really hits the sweet spot for code generation.

Cheers
--JIT Juggler



Someone I was talking to mentioned another of my favourites - using interpolation instead of toString.

    x.toString()

can usually be replaced by

    '$x'  or  '${x}'

It is shorter, looks like it should be a string, and guarantees the result is a String (toString() may perversely return null, even in checked or strong mode).

--Failed Function



Kinda late for the party ;)

I just started to use Dart for two months, still so much to learn. Other than null-aware operators that is already mentioned, I also find double-dot operator very handy for method cascade.

Instead of doing:
o = new MyObject();
o.set(x);
o.set(y);

Now we can:

o = new MyObject()
   ..set(x)
   ..set(y);

--Klever Kompiler



Here's some I like:

You can use 'expand' to concat lists:
[[1,2,3], [4,5,6], [], [7,8,9]].expand((x) => x) // returns [1,2,3,4,5,6,7,8,9]

I don't think this pattern is used often enough, abstract classes which have a forwarding factory constructor to the real implementation:

abstract class Foo {
  factory Foo() = _Foo;
  // ... Foo methods ...
}

class _Foo implements Foo {
  // ... implementation  ...
}

This lets you put all your documentation on 'Foo' and let people call 'new Foo()' while the private class '_Foo' actually has all the implementation details that nobody cares about.

--Linked List



This may not come up that often, but I love the * operator on Strings (thanks Failed Function!):

_padRight(String message, int columns) {
   var padding  = " " * (columns - message.length);
   return '$padding$message';
}

--Main Method



I wouldn't call it a feature, but lot of people don't seem to realize (is it something originating from Java?) you can pass any function/method tearoff as an argument, not necessarily an anonymous literal, ie:

Instead of xs.map((x) => foo(x)) do xs.map(foo).

--Non Nullable



I really like functional methods in combination with tear-offs:

int bestScore = [1, 2, 5, 1].reduce(max);

And generators.

/// Merge [a] and [b] until [a] is fully consumed. Then add 42.
Iterable<int> combine(Iterable<int> a, Iterable<int> b) sync* {
  var aIterator = a.iterator;
  var bIterator = b.iterator;
  while (aIterator.moveNext()) {
    yield aIterator.current;
    if (bIterator.moveNext()) {
      yield bIterator.current;
    }
  }
  yield 42;
}


Seriously, though, this whole thread should be a blogpost on news.dartlang.org.

--Optimized Object



The only question remaining now is:

What is your favorite Dart feature?