Posts

Exploring Dart's Async Library

Image
(Warning: work in progress...) Use Dart's async library to keep work off the main UI thread and help your users have a smooth and performant experience. The dart:async library contains classes for timers, futures, streams, and more. Effective use of dart:async keeps your apps easier to understand and your UI snappy. Telling the future is easier when you have all the data. The event loop Or, why this all matters. Dart programs, just like JavaScript, have no shared-state threads. The UI and the program use the same thread of execution, so when the UI is updating the program isn't running. Conversely, when the programming is running, the UI isn't updating. Keeping work off of the main thread means more time for the UI to respond to user input, which means the UI feels snappy and responsive. The runtime maintains an event loop and a queue of work to perform. The event loops pops work items off of the queue, one after another. While one work item is handled, the...

Lawndart helps you write offline web apps

Image
I'm happy to announce my new Lawndart library for Dart, which helps you build offline-enabled modern web apps. Using Lawndart, you can use a consistent and easy interface no matter what underlying storage mechanism is supported. These things are seriously dangerous. The toy, not the source code. Lawndart was initially inspired by lawnchair , a JavaScript library that helps to provide a consistent interface across client-side storage. However, Lawndart evolved and adopted a Future based API for more composable methods. Available in version 0.2.0: Unified API for in-memory, local storage, indexed db, and websql Future-based APIs Tests Example Web UI app with IndexedDB Here is an example of using Lawndart to open, clear, save, and retrieve data: var store = new IndexedDbAdapter('teststore', 'testdb'); store.open() .then((_) => store.nuke()) .then((_) => store.save(id, "hello")) .then((_) => store.save("i...

Slides from JFokus talk on Dart and Web Components

Image
I had the pleasure of presenting "Web Components Now: Dart and Web UI" at JFokus 2013. In this presentation, I covered the new hotness coming to the web platform and how Dart helps to bring much of to modern browsers today. Encapsulation, templates, custom elements, and dynamic data-driven views are made available thanks to Dart's Web UI library (heavily inspired by Web Components and Model-Driven Views). The slides are now available. WARNING : You might need Chrome Canary to see all the demos in action. In the presentation, I covered topics such as: Web Components Shadow DOM Custom elements Dart language and libraries Dart's toolchain Dart's Web UI library (a polyfill for Web Components and MDV-esque behavior) If you're interested in these topics, you can learn more about Dart and Web UI . JFokus was a blast. Great conference, friendly crowd, excellent A/V setup! As an old Java developer, it felt good showing off the hotness of mo...

Bite-sized Dart videos

Image
For the past month I've been working with Marakana to film and produce short, bite-sized introduction videos for the Dart language and libraries. After filming lots of various videos and formats, I've noticed that viewer retention is difficult. It's so easy to simply click away at any time. Our long-form videos are difficult to watch all the way through. So, we're swinging over to the other end of the spectrum with super-short, targeted videos. The result: Dart Tips , for when you have only 5 minutes to learn something new about Dart . From " Functions are Fun, pt 1 " Six videos have been released so far. Topics include: Reading a Dart script Dart runtime modes Built-in types Variables Collections Functions You can see the entire playlist for Dart Tips  for all the episodes. For a taste, here's "Functions are fun, pt 1": Marakana has been great to work with. They are professional, fun, and like to experiment with new tec...

Minification is not enough, you need tree shaking

Image
In which the virtues of automated mechanical arboreal pruning are extolled over quaint manual labor, as applied to web development build processes. The setup Ever notice how the primary bit of marketing for many traditional web programming libraries is their download size? Why is that? Check this out: Why does size matter so much for these libraries? Your first instinct is probably, "because the more bytes you shuttle across the wire, the slower the app starts up." Yes, this is true. I'd also say you're wrong. The primary reason that size matters for these libraries is because traditional web development has no intelligent or automated way to prune unused code  so you can ship only the code that is used over the wire. The web is full of links, yet web dev has no linker The web development workflow is missing a linking step. A linker's job is to combine distinct project files into a single executable. A ...

Holy Cow, Dart Unit Tests are Easy

Image
Dart provides a rich unit test library out of the box. Inspired by testing libraries like Hamcrest and dartmatch , the dart:unittest library provides test groups, numerous matchers, and more. Read on to learn how easy it is to write your first Dart unit tests! You, too, can create tests this pretty. Test subject To illustrate, I've just created the soon-to-be massively critical embiggen library. This library will bigify your text. It's very advanced. Of course, I made a pub package for this library: The contents of embiggen.dart are: library embiggen; String embiggen(String msg) { if (msg == null) { throw new ArgumentError("must not be null"); } return msg.toUpperCase(); } I'll let that sink in for a while, it's pretty intense. Add the unit test package You can use pub to get the unit test package and link it into your project. Simply declare the unittest dependency in your pubspec.yaml: nam...

Do This One Thing Or Your Dart Web App Will Break

This is not link bait, this is a serious call to action for our Dartisans. If you do nothing, your Dart web app will stop working in a few weeks. Luckily, the fix is easy. To learn how to keep your Dart web app working, read on! Background Almost all Dart web apps use a small, but crucial, JavaScript file to bootstrap. While strictly not required, this dart.js file contains the necessary logic to turn on the Dart VM, swap out Dart code for JavaScript code if the VM isn't available, enable Dart-JavaScript interop, and more. Most Dart web apps have this line at the bottom of their HTML file: <!-- Don't do this anymore, for illustrative purposes only --> <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script> The Problem There are a few problems with the current arrangement. The Google Code SVN server is not a CDN, and is not optimized for acting as a CDN. Relying on a public HTTP ...