October 12
Conference day
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.
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.
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.
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.
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.
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.
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.
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.
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.
October 13
Workshop day 1
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.
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.
No special requirements.
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.
This is not an introduction to CSS so you should already understand HTML and CSS and existing layout methods (float, positioning).
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!
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.
A laptop with your favourite modern browser(s) and a free CodePen account is all you need.
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.
Become a sponsor to to support the event and reach the international front-end developer community. We work with each partner to build a custom sponsor relation that fits your needs. Contact us about sponsorship opportunities at [email protected].
Become a sponsor