Posts

Speed Up Your Dart App's Initial Load With This Transformer

Image
I just saved potentially hundreds of blocking milliseconds from my Dart app's initial loads. By moving script tags, and using my new pub transformer, you can help your users, too. Where does the time go? First, some background: Typical Dart applications are designed to work in Dart VM and modern JavaScript. A small file, named dart.js , is loaded by the HTML file and checks to see what runtime is available. If the Dart VM is available, the Dart code is run. Otherwise, the dart.js file swaps out the Dart script for its equivalent JavaScript file compiled from the original Dart code. Dart Editor can generate skeleton applications, complete with starter HTML, CSS, and Dart files. It's really handy for getting started quickly. As of today, the default starter HTML code looks something like this: <!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, i...
Read more

Angular and Polymer Data Binding, Together!

Image
Angular and Polymer, sitting in a DOM tree, B-i-n-d-i-n-g. First comes components, Then comes elements, Then comes the interop with the node dot bind. Angular , a super heroic MVC framework, and Polymer , polyfills and enhancements for custom elements built on top of Web Components, can live harmoniously in the same app. This post shows you how to connect Angular-controlled components to Polymer-controlled elements via data binding. And we do it all in Dart . Angular and Polymer I get asked "Should I use Angular or Polymer?" a lot. My answer is, "Yes". That is, both libraries have distinct strengths, and you can use both in the same app. Polymer excels at creating encapsulated custom elements. You can use those custom elements in any web app or web page, regardless if that app is built with Angular, Ember, etc. Angular excels at application engineering, with dependency injection, end-to-end testability, routing, and services. Here are som...
Read more

How to shrink the size of your Dart app when compiled to JavaScript

So you caught the Dart bug and you're enjoying using the structured language, comprehensive libraries, and productive tools. Great! Except, when you compiled your Dart app to JavaScript, the output was bigger than expected. Read this post to learn how to reduce the size of your JavaScript output. Small apps are fast apps! Make sure you are minifying The dart2js compiler can minify your JavaScript. However, minification is not the default. Make sure you opt-into minification before you deploy to production. How can you tell if you minified? Take a look at the generated JavaScript and you'll know. Minified JavaScript replaces variables names, function names, and more with shorter names. It also moves code around to use less lines. If you compile your app from the command line, use --minify: dart2js --minify -o=app.dart.js app.dart If you use pub build (a streamlined build process for pub package and apps), it defaults to minifying. Yay! If you use Dart Editor, it...
Read more

Compile-time dead code elimination with dart2js

Right before the release of Dart 1.0, the Dart team snuck in a cool new feature that helps you optimize the generated JavaScript from your Dart apps. Configuration values from the environment can be evaluated at compile time and potentially result in dead code elimination. Smaller code is faster code! As an example, let's consider the common case of logging. Debug logging is a useful tool during development and testing, but often there's no need to ship production code with debug log statements. Wouldn't it be cool if you could remove all the debug log statements before you ship to production, without having to manually delete any lines of code? Now with Dart and fromEnvironment , you can! Here is a small example of a log function that is useful during development, but unnecessary during production. If a DEBUG is set, the log message is printed. The code gets the compile-time constant value from the  String.fromEnvironment() constructor . Notice the const  qualifier, in...
Read more

Forms, HTTP servers, and Polymer with Dart

Image
(Update of this old Web UI post . Updated as of Jan 17, 2014 and Dart 1.1.) Dart can be used on the client and the server. This post shows how to: build a form as a custom element bind input fields to a Dart object build a Dart HTTP server handle and parse a form submit For lots more Polymer.dart examples, be sure to check out the Dart Polymer Samples . You can find the code for this post at my Github account. Step 1: Install the packages Open up pubspec.yaml (used by the pub package manager) and add the dependencies for Polymer.dart and http_server. name: parse_form_submit description: A sample Polymer application dependencies: polymer: any http_server: any Source for pubspec.yaml . Step 2: Create the model class This class is for the "business object". It is bound to the form, so we make its fields observable. library models; import 'package:polymer/polymer.dart'; class Person extends Object with Observable { @observable S...
Read more

JavaZone Report. Spoiler: Awesome.

Image
I had the pleasure of presenting Dart and Web Components at JavaZone 2013 in Oslo, Norway, and I'm so very happy I had the chance. The audience was clearly interested in Dart, the organizers are truly professional and welcoming, the crowd was friendly, the A/V setup was top-notch, and the logistics were easy. JavaZone is produced by JavaBin , a large network of Java user groups across Norway. I believe this was the 12th or 13th year for JavaZone. The conference has the feel of a big happy meetup. It's chill, mostly local attendees, mostly local vendors (though I did see JetBrains and Atlassian), and approximately 2000 attendees. Don't let "meetup" fool you, this is a full conference: two days, seven concurrent tracks, professional A/V, swag, food, etc. I liked how this was a conference built by the fans, for the fans. There is continuous food during the conference. You will never go hungry during JavaZone. There was also a coffee bar serving individual drop ...
Read more

You complete me, unless you already have a Dart future

Image
Dart Protip: if you already have an instance of Future, you probably don't need a Completer. Simply return the last Future. If you find yourself using Completers inside of Futures, like this: // NOT recommended. Future doStuff() { Future future = someAsyncProcess(); Completer completer = new Completer(); future.then((msg) { bool result = msg.result as bool; completer.complete(result); }); return completer.future; } then I'm happy to report there's a better way. Dart's Futures chain, so you can do this instead: // Recommend. Future doStuff() { return someAsyncProcess().then((msg) => msg.result); } The last Future in a chain can return another Future, or simply a value. It's always a good idea to return a Future from a function that uses a Future. This way, the caller knows when the method finished its async work, and can properly handle potential errors. Completers are great for bridging a ca...
Read more