Posts

Showing posts from July, 2013

Polymer and Dart: A First Look

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


Web UI is evolving
The Dart project, to more closely align with emerging web specifications, is building polymer.dart, the next evolution of Web …

Two-way data binding with Web UI custom elements and models

Image
Preface

This could very well be my last Web UI post! The Dart team announced they started on polymer.dart, a port of the Polymer project to Dart. Polymer.dart is the next evolution of Web UI. Luckily, the concepts are mostly the same and the syntax is mostly the same, because Web UI is also an implementation of the Web Components.

So why am I still writing about Web UI? Lots of people have asked about two-way data binding between a component and a model, so I wanted to have a record of this functionality. Also, what's described below isn't too different than how polymer.dart works (and we'll cover it in a future post).

I look forward to the glorious new world of coordinated polyfills and new custom elements. Go go polymer.dart and the Polymer project!

Intro

The Dart class that backs a custom element can itself also take part in two-way data binding. This post explores how to bind a model object to a web component property. If a model's field changes, the custom element&…

Dart and Sencha Touch for Mobile Web Apps

Image
You can use Dart's JS-Interop to integrate Dart code into your existing Sencha Touch application. This allows you to take advantage of Sencha Touch's mobile-first framework and Dart's productivity, language, and libraries.
Preface
Sencha Touch is a full-featured JavaScript framework for mobile web apps. It supports layouts for multiple devices, touch, lots of widgets, models, a resource framework, and more. I've used Ext JS (a cousin of Sencha Touch) in a previous job, and was quite happy.

I'm also quite happy with Dart, the new scalable web programming platform from Google. Dart compiles to JavaScript, and even interoperates with JavaScript. It's a new language, libraries, package manager, VM (for client AND server apps), and rich tools. I feel really productive in Dart.
I've never used Sencha Touch, so my first question was: how do I insert Dart into an existing Sencha Touch application?


Getting Sencha Touch
Sencha already has great docs, so I won't rep…