You can attend the entire event or just the conference day.


October 12
Conference day

Registration & Breakfast
Opening & Agenda
The World’s Most Boring Build System Jezen Thomas

The front-end community has matured immensely in the past five years with automated build systems and package managers written in JavaScript becoming commonplace. But how did we get here? And what has this really cost us? We know every line of code is a liability, and the best line of code is the one that doesn’t exist. JavaScript build systems are complicated and verbose, and it doesn’t need to be this way.

If you’re using hip new tools like Grunt, Gulp, and Bower, you could make your life so much easier by embracing tools that were around 40 years ago. Even if you’ve never ventured outside the world of JavaScript, come and learn how these general problems are elegantly solved with the Unix philosophy. We’ll look at the simplest possible approach to automated front-end development, and you’ll be able to strip away literally thousands of lines of code while developing a deeper understanding of the tools you rely on.

3D on the web: WebGL and WebVR Martin Naumann

The modern web is tearing down the borders of the browser window and allows us to create so much more than just another website.

This talk is a whirlwind tour of how 3D and virtual reality can be woven into entirely new applications that the web hasn’t seen yet. On top of interactive 3D web applications with WebGL we’ll go through the history of 3D on the web.

In addition we’ll see how we can unlock the powers of the GPU thanks to GLSL.

We will then explore the amazing superpowers that Virtual Reality is currently bringing to the web and teleport us to places we can’t go.

This is going to be accompanied with live coding 3D demos and weave them together with other web technologies such as WebRTC and Web Audio and lots of show cases and demos to give you inspiration on what to build with your freshly-learned tricks and know-how.

Coffee break
And .then() what? Promise programming patterns Kornel Lesiński

Promises are now a part of the ECMAScript standard, and shipped in all major browsers.

At the first glance Promises may seem trivial: replacing a regular callback with a .then(callback). However, the ability to represent asynchronous execution as an object enables and simplifies many kinds of useful programming patterns.

With Promises you can easily control concurrency for parallel and serial execution, implement robust asynchronous caching, and have an alternative way of handling events.

At Financial Times’ we’ve upgraded our web app from a jungle of callbacks to Promises, and found that asynchronous code became simpler, more reliable and faster thanks to improved parallelization.

In this talk I’ll describe what we’ve learned: the common, most useful patterns—and gotchas!—that have emerged. You’ll learn not just the Promises API, but the bigger picture: how to use Promises to neatly solve problems like caches protected against the “thundering herd” problem, a ‘load’ event that cannot be missed, and how to integrate with Promise-based code to ensure all errors are handled properly.

Flexible boxes and Grids: the future of CSS Layout Rachel Andrew

Ever since we moved away from using tables for layout, we’ve been hacking around floats and positioning to achieve layout on the web. These methods are flawed and complex, making simple things hard to achieve. Flexbox and CSS Grid Layout give us layout mechanisms signed for the sort of things we build on the web. In this talk I’ll take a look at both, showing the problems they each solve and how they work together to create a new paradigm for layout on the web.

Lunch break
Lightning Talks

Salvaging contentEditable: Building a Robust Rich Text Editor Marijn Haverbeke

Web-based WYSIWYG editors are notorious for spitting out a distasteful HTML soup. In this talk I’ll show how I implemented an editor that, instead of trying to filter and clean this soup, takes control away from the browser’s contentEditable implementation, and reinterpret user actions as operations on its own semantic document model.

Coffee break
Rewriting Facebook comments plugin with React and Flux Stoyan Stefanov

Facebook’s comments plugin is a third-party commenting system with user front-end and a moderation tool. This session describes what we did to rewrite and relaunch the offering using modern tools – React, Flux, Flow, ES6 and beyond. Learn about the architecture decisions as well as day-to-day JavaScript coding that allows for less code (which almost certainly means fewer bugs) and happy developers

Recently Facebook launched a new iteration of the third-party commenting plugin and a moderation tool to go with it. Both were rebuilt from the ground up using Facebook’s latest open-source front-end technologies. This talk is about the details of building of the front-end of the new apps including the big-picture architecture as well as the nitty-gritty details of everyday coding in the world of typed JavaScript.

You’ll lean about:

  • Building an app out of reusable components
  • Fast and reactive UIs, optimistic updates
  • Using React and Flux
  • Compile time (Flow) and run-time type checks
  • What an example JavaScript module looks like at Facebook – annotations, modules, ES6 features

AngularJS: The Performance Parts Todd Motto

A talk about Angular of past and present—how to speed up your applications through key performance aspects, best practices, and why you should be doing it.

Coffee break
Your code will explode Julian Krispel-Samsel

It’s impossible to write software that doesn’t break. The more complex software gets, the bigger this problem.

Since JavaScript has become a ‘serious’ programming language, modern web applications have also become more complex and hence more likely to blow up. You want to avoid that and catch bugs before they go live.

This talk isn’t about what tools to use to test your code. Instead we’ll be focusing on the concepts of unit testing and how testing will make you a better developer in general.

Motion Design with CSS Val Head

Animation is a powerful way to convey meaning and guide tasks both for interfaces and presenting data. Conveniently, our old friend CSS has seriously stepped up its animation game! In this session, Val will cover key animation principles and how to pull them off with CSS. Val will show you the highlights of animating with CSS and combining CSS and SVGs. Plus, which web animation options work best for common interaction and tasks.

Closing word
End of day


October 13
Workshop day 1

Movin’ on to ES6 Marijn Haverbeke

I feel I’ve written `X.prototype.y = function…` about a thousand times more than I’d like. Now that ECMAScript 6 (or ECMAScript 2015) is fully specified, and mature compilers make it possible to run it in yesterday’s browsers, I’ve made the jump. This workshop will show you how to set up your build process to conveniently work with ES6 and modules, even for browser code, and will run through a long list of ways in which ES6 improves the ergonomics of the language.

What you’ll learn

  • Compiling ES6 to ES5 for use in current browsers and node
  • Using ES6 modules
  • Expressing classes without juggling prototypes
  • Using block scope and constant variables
  • Shortening and clarifying your functional code with arrow functions
  • Destructuring assignment for elegant value unpacking
  • Default and rest arguments to make your function signatures beautiful
  • What symbols do
  • Iterators and generators: say goodbye to `for var i`

What you should know

You should have written enough JavaScript to know its limitations and warts, in order to understand the context of the improvements made by ES6. Some experience with other module systems (AMD or CommonJS) will be useful when we discuss ES6 modules.

What to bring

No special requirements.

New CSS Layout Rachel Andrew

This workshop will cover the new CSS modules that have been developed for CSS Layout. This is a forward-thinking workshop, geared to ensuring that your CSS skills are right up to date with emerging technology. However there will be plenty of things you can use right now with a progressively enhanced approach. Using practical examples and code to demonstrate all of these modules, and you’ll be able to take away those examples to use as starting points and reminders after the workshop.

What you’ll learn

  • What these modules are and how to use them
  • When you should use one layout method over another
  • What the state of browser support is for each module
  • Advice on current polyfills and approaches for dealing with older browsers

What you should know

This is not an introduction to CSS so you should already understand HTML and CSS and existing layout methods (float, positioning).

What to bring

  • A laptop
  • A text editor of your choice
  • Google Chrome installed
  • If you have MS Edge installed either on a Windows machine or in a VM that will also be helpful but not essential

Interface Animation for the Web Val Head

Motion design is a necessary skill for anyone working on the web today. It’s time to embrace the power and benefits of web animation! Learn the motion design skills you need to design and build purposeful and sophisticated animation into your work. You’ll gain expert knowledge of the current web animation landscape and how animation fits into your design process.

In this workshop we’ll examine where animation can improve the user experience by way of providing feedback, causality, cueing, and orientation. CSS, SVG, and JavaScript-based animation techniques will be covered, along with the best cases for using each. Real-world examples will be broken down to demonstrate the qualities all well executed interface animations have in common. It’s an action-packed day of web animation knowledge!

What you’ll learn

  • Timing, offsets, secondary action, and other key motion design principles you can apply to interface animation
  • How animation can improve user experience and reduce cognitive load
  • Animating with JavaScript for more complex interactions
  • Animating SVGs with CSS and JavaScript
  • Where to use storyboards, motion mock-ups,and prototypes
  • Designing the most performant web animations
  • Animating with progressive enhancement and accessibility in mind
  • A look to the future of web animation including the Web Animation API and browser-based tools

What you should know

Experience with HTML and CSS is needed to take full advantage of the workshop’s content. Some familiarity with JavaScript or jQuery is helpful, but not required.

What to bring

A laptop with your favourite modern browser(s) and a free CodePen account is all you need.

AngularJS in one day: Building the modern web Todd Motto

Join Todd in this one day workshop, where he will teach you how to jump straight into building an application with Angular.js. Todd will run through core project setup and and demonstrate how to start integrating some of Angular’s most powerful features, from two-way data-binding and callback-less Model updates, through to dynamic routing. He will also look at the concept of the modern web, such as ShadowDOM/Web Components, single page applications and how these map to things such as Angular Directives and XHR/Ajax content. You’ll learn key skills and will explore new client-side capabilities (some inspired by the server) with features such as conditional DOM loading/unloading, expressions, templating and dynamic routes. Taking a holistic and high level view, this full day session will prime you on all the basics and how you can leverage the framework to rapidly develop new applications the modern way.

What you’ll learn

  • Set up a small Angular application to take away, a great kickstart in the learning curve
  • Many powerful methods and features of Angular and how we can create and abstract logic for maximum reuse
  • Utilise Angular’s declarative data-binding approach to DOM manipulation, and how these let you focus on the data rather than the dirty DOM manipulation
  • Break down front-end templates into reusable components (Directives)
  • How Angular’s dependency injection works and the $scope Object
  • Serve Ajax content alongside dynamic routing which talks to a server to read/update data

What you should know

  • Highly recommend using Angular somewhat before using, not in production but the ability to setup a simple application and knowledge on how to hook up Controllers to the DOM would be a great start
  • Decent JavaScript knowledge would be highly recommended
  • Basic knowledge of MVC/MVVM software design patterns would be beneficial
  • Concepts of componentizing HTML for ultimate reuse
  • Concepts of two way data binding
  • Programming in JavaScript
  • Writing JavaScript to manipulate the DOM

What to bring

  • Laptop
  • Google Chrome
  • Text Editor
  • You will be possibly sent a GitHub link prior to the workshop to download further prerequisites, alternatively workshop download package will be available during the start of the session to get setup with

Registration & breakfast
Workshops – part 1
Coffee break
Workshops – part 2
Lunch break
Workshops – part 3
Coffee break
Workshops – part 4
End of day