Seth Ladd's Blog

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. Many loops. 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 dec...

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

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 . Artful binding. (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. ...

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 .

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

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.

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!

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 later decorators , which apply templates to le...

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