Posts

Showing posts from June, 2013

Create unified interfaces across dart:io and dart:html

Dart runs on the client, thanks to dart:html, and on the command line, thanks to dart:io. However, like oil and water, those two libraries just don't mix. Your web apps can't use dart:io, and your server apps can't use dart:html. Normally, this isn't a problem, because the two different targets are oh so very different. However, some concepts are common, such as Web sockets or HTTP requests. Wouldn't it be nice to have a unified interface to Web sockets that works with either dart:io or dart:html? I'll spare you the suspense: Yes!
This post shows you one strategy to design a high-level interface for functionality that exists in both dart:io and dart:html. While the Dart team has the concept of configurability on their radar, not much concrete action has happened. In the meantime, try this strategy and you too can experiment with unifying interfaces and APIs. Code reuse FTW!
(This post was inspired by Mark Bennett's original question who is trying to build a…

Call JavaScript from Dart - First Look

Image
UPDATE: This article is deprecated. Dart has an improved Dart-JavaScript interop library, now included in the Dart SDK. Please read about dart:js and how to use it.

If possible, do not use the js package that this blog post talks about. The js package will bloat your code.


---



You can use Dart to access existing JavaScript code, thanks to the Dart-JS Interop package. Call JavaScript functions from Dart, send Dart callbacks to JavaScript, and more!



The Dart core libraries have a lot of functionality provided out of the box (collections, querying the DOM, dates and times, math, and more), so you can get quite far with just the Dart SDK and the many pub packages. However, there are plenty of useful JavaScript libraries that can really help enhance Dart web apps. Luckily, Dart can synchronously talk to JavaScript!
Step 1: Install the js package
Add the following to your pubspec.yaml file:
dependencies:  js: any
Step 2: Get a JavaScript library
Hugs make you feel better, let's use the hug…

Forms, HTTP servers, and Web Components with Dart

Image
(UPDATED VERSION HERE. This post is out of date, you probably want the new version.)

Dart can be used on the client and the server. This post shows how to:
build a form as a custom elementbind input fields to a Dart objectbuild a Dart HTTP serverhandle and parse a form submit

For lots more examples, and more context and details, be sure to check out the Dart Tutorials. You can find the code for this post at my Github account.
Step 1: Install the Web UI package
Open up pubspec.yaml (used by the pub package manager) and add the dependencies for Web UI.
dependencies:  browser: any  web_ui: any
Step 2: Create the model class
This class is for our "business object". It is bound to the form, so we make it observable.
library person;
import'package:web_ui/web_ui.dart';
@observableclass Person {  String firstName;  String lastName;  double age = 0.0;  // not an int because web ui loves doubles}
Step 3: Create the custom element HTML
This custom element, polyfilled by Web UI, wraps t…