Seth Ladd's Blog

I had the pleasure of presenting Dart to Devoxx 2012 in Antwerp, Belgium. This conference had perhaps the best A/V setup of any conference that I have been to. Bonus points: the questions at the end were excellent, the audience was clearly engaged and interested. Thanks to the organizers and all the attendees! Now, you can  watch the video and slides . It's free!

The Dart Web Components package has been renamed to Dart Web UI to better reflect the wide range of functionality found in the library. Also, syntax has been simplified based on feedback from users. This post covers some of the new features and gives tips on how you can migrate your code. A frost covered spider's web. Dart Web UI provides polyfills and compilers for Web Components (making them available to today's browsers), dynamic templates, and live data binding inspired by Model Driven Views. You can use Dart Web UI to build modern client-side web apps. For more information, read my blog posts about Dart Web UI or study the detailed article on the subject. Shorter package names Old: package:web_components/web_components.dart New: package:web_ui/web_ui.dart Your pubspec.yaml now looks like this: dependencies: web_ui: any Simpler two-way data binding for input fields Old:  data-bind="attribute:dartAssignableValue" New: ...

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