Posts

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...

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...

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 ...

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...

Polymer and Dart: A First Look

Image
In which I try the new polymer.dart, a build.dart file is deleted, and a template springs to life. (This post heavily inspired by Nik Graf's great " Getting started with Polymer.dart " post.) The web is evolving Developers take notice! Coming soon: actual encapsulation, real live data binding, even re-usable components! The Web Components family of specifications is on their way to a browser near you, but the standardizations process is lengthy. Fear not, web engineers are working hard to bring these new capabilities to you today. The Polymer project , a new type of library for the web, is built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. Most importantly, the Polymer project has code that you can use  today  (to be fair, it's pre-alpha, but much of it works if you are brave). The Polymer project is more than just polyfills. Web UI is evolving The Dart project, to more closely align with emerging ...

Two-way data binding with Web UI custom elements and models

Image
Preface This could very well be my last Web UI post! The Dart team announced they started on polymer.dart , a port of the Polymer project to Dart. Polymer.dart is the next evolution of Web UI. Luckily, the concepts are mostly the same and the syntax is mostly the same, because Web UI is also an implementation of the Web Components. So why am I still writing about Web UI? Lots of people have asked about two-way data binding between a component and a model, so I wanted to have a record of this functionality. Also, what's described below isn't too different than how polymer.dart works (and we'll cover it in a future post). I look forward to the glorious new world of coordinated polyfills and new custom elements. Go go polymer.dart and the Polymer project! Intro The Dart class that backs a custom element can itself also take part in two-way data binding. This post explores how to bind a model object to a web component property. If a model's field changes, the cus...

Dart and Sencha Touch for Mobile Web Apps

Image
You can use Dart's JS-Interop to integrate Dart code into your existing Sencha Touch application. This allows you to take advantage of Sencha Touch's mobile-first framework and Dart's productivity, language, and libraries. Preface Sencha Touch is a full-featured JavaScript framework for mobile web apps . It supports layouts for multiple devices, touch, lots of widgets, models, a resource framework, and more. I've used Ext JS (a cousin of Sencha Touch) in a previous job, and was quite happy. I'm also quite happy with Dart, the new scalable web programming platform from Google. Dart compiles to JavaScript, and even interoperates with JavaScript. It's a new language, libraries, package manager, VM (for client AND server apps), and rich tools. I feel really productive in Dart. I've never used Sencha Touch, so my first question was: how do I insert Dart into an existing Sencha Touch application? Getting Sencha Touch Sencha already...