Posts

Showing posts from November, 2012

Your First Loop with Dart Web Components

Image
In which the trusty and powerful loop is given its time to shine in Dart Web UI. Thus far, we've looked at data binding, conditionals, and even custom components with Dart Web UI. But you can't get very far without needing to iterate through a collection and render a template for each element. Not to worry! In this post, I'll show you how to bind a collection to a template in Dart Web UI.

Prerequisites

You may want to read Your First Model Driven View with Dart, which contains more information on getting started and configure the necessary tools. This post assumes you've read my previous posts on Web Components and Dart.

Overview

You can render a <template> tag for each item in a collection. Whenever the collection is modified, the <template> tag is reapplied for every item in the collection (note: we think this will be optimized in future versions of Dart Web UI).

Keeping with the style of Web Components, this iteration is declarative. To bind a collection t…

Your First Conditional Template with Dart Web Components

Image
As if data binding and custom elements with Dart Web UI isn't enough, you can also conditionally render blocks of elements via simple declarative attributes! The conditionals are "live" and are re-evaluated when data changes, keeping your page dynamic and up-to-date.



(You may want to read Your First Model Driven View with Dart, which contains more information on getting started and configure the necessary tools. This post assumes you've read my previous posts on Web Components and Dart.)

Conditionals templates

With Dart Web UI, you can conditionally display elements. For example, you can declaratively say "If the checkbox is checked, then display the thank you notice." Here's an example:

<template if="acceptLicense"> <h2>Thanks!</h2> <p>We'll send you an activation key to your email.</p> </template>
In the above example, the <h2> and <p> will only be added to the DOM if the acceptLic…

Your First Input Field Binding with Web Components and Dart

Image
Updating a web page when the data changes is cool. Updating the data when the web page changes is even cooler. Read on to learn how to create a live data binding between form fields, data, and your web page with Web Components, Model Driven Views, and Dart.

(You may want to read Your First Model Driven View with Dart, which contains more information on getting started. This post assumes you've read my previous posts on Web Components and Dart.)

What do I mean, binding?

In the context of user interfaces, data binding is the technique of keeping both data and the view in sync. If the data changes, update the view. If the view changes, update the data. It's the later scenario (view changing the data) that I discuss in this post.

The HTML

HTML views can update data via input fields. Input fields can be bound to data, both displaying the data and updating the data. Use the data-bind attribute on input fields such as text, textarea, and select.

<p>MDV is {{ superlative }}</p&…

Dart Up & Running book now available

Image
Achievement unlocked: Published an O'Reilly book!

Dart Up & Running, a quick and easy guide for learning Dart, is now ready for shipping. A huge thanks to my co-author Kathy Walrath and our many reviewers. We hope you enjoy reading this book and using Dart to build modern web apps!

Buy Dart Up & Running printed and e-books at O'Reilly or Amazon.


In the book, you'll learn about the Dart language, libraries, and tools such as Dart Editor and our pub package manager. There's even an application walk-through, looking at a client-side and server-side Dart app.
As you learn Dart, be sure to join our mailing list and ask questions on Stack Overflow.

Your First Model Driven View with Dart

Image
Packed inside the Dart Web UI project is inspired by Model Driven Views (also known as MDV). While Web Components provides encapsulation and reusability, it doesn't say much about linking your data and models with your views. MDV is a set of techniques to help you bind your data to your views, and just like Web Components, you can use Dart with MDV-esque behavior today.

Everything you are about to read works across modern browsers, because Dart compiles to JavaScript.


Intro
The MDV behavior of Dart Web UI (hereafter referred to as Web UI) helps you bind your data and models to the view in a declarative manner. Binding usually means "when the data changes in one location, change it in another." Typically, web frameworks can wire together the necessary callbacks to keep the view (any text or input fields) in sync with the models (the Dart objects that contain the state of the application).

Setup

Remember, you'll need a pubspec.yaml that included the web_components packag…

Dart Up and Running Webcast from O'Reilly

Image
O'Reilly, our publisher for the new Dart Up & Running book by Kathy Walrath and yours truly, ran a webcast to help promote Dart and the book.


(If you can't see the embed, you can watch the video directly on YouTube)

This is the first time I used a Hangout for an entire webcast, and I admit the fonts are hard to read in this recording. Good lesson learned for next time!

Thanks to everyone who watched, and thanks to Kathy for monitoring the back channel and funneling questions from our viewers.

Dart is Breaking Open, Interview with Marakana

I had a fun time at Marakana as a guest on their new show "Breaking Open". We talked about Dart and scaling web development.


"We're building Dart to help web developers start small, and grow over time to classes, and then libraries, and then tens of developers, and then hundreds of developers."

Thanks for watching!

Your First Web Component with Dart

Image
With all the power we have from HTML5 and the modern web platform, you can't easily do simple things like extend <button>. Luckily, this is changing and the web platform is undergoing a declarative renaissance.  Thanks to the hard work of many groups and individuals across different browser vendors and spec committees, Web Components are emerging as the way to bring structure and encapsulation to modern web developers. The best news yet: you don't need to wait years for these new standards to be implemented, you can use Dart to build Web Components today.



Web Component basics

The component model for the web, aka Web Components, is a collection of specifications that allow developers to build reusable, encapsulated, and declarative widgets.

When people say "Web Components" they generally mean these four ideas:
templates, which define chunks of markup that are inert but can be activated for use laterdecorators, which apply templates to let CSS affect rich visual an…

Semantics Matter, 4 Examples in Dart

Image
We recently re-launched the Dart Synonym app, which provides mappings between common Dart/JavaScript/C# patterns, idioms, and snippets. If you know how to build a loop or create a function in JavaScript, this is a great way to learn how to do the same thing in Dart.

A great comment on G+, in response to the re-launch, was "I think Microsoft may have a better idea with TypeScript, which adds a syntax for declaring variable types that should make JavasScript more robust, but it still runs on top of JavaScript, cross browser."

While the Dart team welcomes TypeScript to the neighborhood, in the end TypeScript is "just JavaScript". It's great that TypeScript fosters better tooling and bigger web apps, but the same warts of JavaScript are still there with TypeScript. One of the main distinctions between Dart and TypeScript is that Dart cleans up the semantics and not just the syntax.

Don't get me wrong, syntax is important, and Dart offers familiar and easy to us…