Peter Cooper

An introduction to TypeScript

At Fluent 2013, O’Reilly’s conference dedicated to the Web Platform, JavaScript and HTML5, Microsoft’s Luke Hoban spoke about TypeScript, a strict superset of JavaScript that adds optional static typing, modules, and classes.

In Introduction to TypeScript, Luke presented a 40 minute introduction to the language, how it relates to JavaScript and ECMAScript 6, and how TypeScript looks and behaves in IDE environments and within the context of complete applications.

TypeScript is an open source project from Microsoft that aims to help developers work on larger applications that could benefit from features like static typing but without eschewing JavaScript and its wealth of libraries and tools. As TypeScript is a strict superset of JavaScript, all JavaScript code is legitimate TypeScript code and TypeScript compiles down to idiomatic JavaScript so it runs on any runtime that JavaScript does too.

Some key parts of Todd’s talk include:

  • What is TypeScript? [at 01:48]
  • A demo of TypeScript [at 05:14]
  • A look at how typing helps [at 06:40]
  • How classes in TypeScript work [at 16:20]
  • The TypeScript ecosystem / community [at 21:53]
  • TypeScript 0.9 [at 25:48]
  • A look at generics support [at 29:18]
  • TypeScript in the context of a full app [at 34:40]

If you want to learn more about TypeScript, check out the official TypeScript homepage which includes a simple tutorial and an interactive playground that lets you type TypeScript code on the left hand side of the screen and see the JavaScript translation on the right.

Building rich web UIs with knockout.js

Live coding a shopping cart and other rich web UI goodness

At Fluent 2013, O’Reilly’s Web Platform, JavaScript and HTML5 conference, Microsoft’s Steve Sanderson gave a tight 20 minute introductory tour of Knockout.js, a popular JavaScript UI library built around declarative bindings and the Model-View ViewModel (MVVM) pattern.

In his talk, Rich Web UIs with Knockout.js, Steve quickly summarized the problems Knockout solves and why Knockout is a particularly strong candidate to solve those problems, before working on a shopping cart example to show off how bindings, including custom bindings, work within Knockout.

Some key parts of Todd’s talk include:

  • A description of the problem Knockout solves [at 00:41]
  • What is Knockout and MVVM? [at 01:38]
  • 4 unique things about Knockout [at 03:12]
  • Live coding a shopping cart [at 06:02]
  • Summary [at 20:15]

Anyone with a further interest in Knockout should check out the project’s homepage and particularly the live Hello World example and interactive online tutorial which guides you through building a Web UI using the MVVM pattern with Knockout.js in an interactive sandbox-style environment.

If the Web Platform, JavaScript, and HTML5 interest you, consider checking out our growing collection of top-rated talks from Fluent 2013.

pushState to the future: progressive enhancement using HTML5 pushState at Twitter

Fluent is O’Reilly’s conference dedicated to the Web Platform and all that entails, with a focus on JavaScript and HTML5. In 2013, over 1000 attendees and speakers like Brendan Eich, the creator of JavaScript and CTO of Mozilla, Paul Irish of Google, and CSS guru Lea Verou came together to learn, share, and network.

One speaker at Fluent 2013 whose talk was particularly well received was Todd Kloots of Twitter who spoke about HTML5’s pushState API and demonstrated how it was used in Twitter’s Web-based interface.

Some key parts of Todd’s talk include:

  • The opportunity Twitter saw in pushState [at 01:45]
  • What you had to do with dynamic URLs before pushState [at 02:46]
  • A summary of the pushState API [at 06:10]
  • Gotchas and browser support [at 07:58]
  • How pushState sped up navigation on Twitter.com without re-architecting [at 12:15]
  • What Twitter had to do server-side to make progressive enhancement work [at 19:11]
  • Final thoughts [at 31:37]
  • Q&A [at 32:15]

Read more…