Seth Ladd's Blog

In which I try the new polymer.dart, a build.dart file is deleted, and a template springs to life. (This post heavily inspired by Nik Graf's great " Getting started with Polymer.dart " post.) The web is evolving Developers take notice! Coming soon: actual encapsulation, real live data binding, even re-usable components! The Web Components family of specifications is on their way to a browser near you, but the standardizations process is lengthy. Fear not, web engineers are working hard to bring these new capabilities to you today. The Polymer project , a new type of library for the web, is built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. Most importantly, the Polymer project has code that you can use  today  (to be fair, it's pre-alpha, but much of it works if you are brave). The Polymer project is more than just polyfills. Web UI is evolving The Dart project, to more closely align with emerging ...

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

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

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

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