Web Directions Code 2017 Australia's Professional JavaScript Development & Front End Engineering Conference

In an age when it seems everything is developed in JavaScript, using frameworks like Angular and React, what place is there for old fashioned HTML and CSS? Is it now little more than the legacy of a bygone age, like sailing ships, and horse drawn carriages? Lea Verou thinks not! She very recently released Mavo, which she had been working on at MIT for two years.

Mavo is a language that extends HTML to describe applications that manage, store, and transform data. With it, you can build complex applications declaratively, using just HTML and CSS. The spirit of the web, for the age of web apps.

At Code 17, we have the privilege of being among the first people anywhere to hear about Mavo - from Lea herself.

Read More

The landscape of JavaScript seems to be in constant flux. Not just the frameworks and build tools we use, but the very language itself now that new versions are being released annually. But where is it at right now, in 2017? And where is it headed in the near future? What changes will most impact the way you work in the coming years? How can you get involved in the process?

There's few - if any - better placed to let us know than Brian Terlson, the editor of the ECMAScript standard, and long time member of TC39 (the standards committee for ECMAScript) who also works on TypeScript and Chakra, the JavaScript engine in the Edge browser.

ECMA TC39 now releases new versions of ECMAScript every year. Brian will cover how the new process works and briefly touch on a few awesome new language features in the standards pipeline. New capabilities for async programming will drastically clean up your async code. New RegExp features will bring in much-missed RegExp features from other languages. JavaScript will get even better for functional programming. And most importantly - you can help make TC39 design these new features. So, come and find out how!

Read More

It seems like only yesterday we were having to use all manner of image replacement techniques just to use more than the most basic set of fonts on the web. But with CSS Level 3 OpenType font features, the widely adopted WOFF format, Chromatic Fonts, and more recently OpenType variable fonts - a single font file that behaves like multiple fonts - the capabilities opening up for typography on the web are extraordinary.

In this session, Chris Lilley shows us what's possible today, and in the near future.

Read More

Front end developers sit atop a massive amount of technology, often treating whole pieces of our application as opaque functionality. Grab a hard hat and follow me down into the internals of Preact, a tiny 3kb alternative to React. Along the way we’ll shed light on fundamentals like JSX & Virtual DOM, demystify DOM diffing, and see how keys work up close.

On our way back to the surface, we’ll stop at the Museum of Lost Hours to see some performance and size optimisations. Hope you’re not afraid of the dark!

Read More

Web developers are increasingly responsible for the performance of the sites they build, and there is now a plethora of advanced tools and services that allow developers to hone front end performance as never before. But the network can still be your biggest bottleneck.

This talk will discuss best practices and creative strategies for using caching, purging, preloading, server push, streaming, and other technologies to make sure your site hits your user's browser at top speed.

Read More

Animation has come a long way on the modern web and now we have a long list of choices for how to make something move on screen: CSS, JavaScript, SVG, the Web Animation API. With so many options, how can you be sure which is the best choice for your project? With an eye to both the strategy and tactics of animation needs, you’ll learn which web animation options are the best fit for common UI design tasks.

Val will survey the full spectrum of animation options from CSS to React Motion and show which are best suited for things like state transitions, showing data, animating illustrations, or making animations responsive. You’ll also see how your choice of animation tools can impact performance, so you’ll leave knowing exactly which tools to choose for your animation needs.

Read More

The most recent version of Twitter's web app, Twitter Lite, has just been released. It's a Progressive Web App, which is fast and responsive, uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers.

In this session, Zero Cho from the Twitter Lite team will give us a sense of the architecture of Twitter Lite, the technologies used, and lessons learned in building this most recent version of one of the world's most widely used web services.

Read More

Dealing with asynchronous functions has been a bit of a problem since the early days of JavaScript. Promises help a bit, but they're still limited in some ways. Async functions make writing async code simpler, and let you do some things that aren't so easy with promises.

We'll go through an example to see how async functions actually work under the covers, as well as look at some real code samples to see how much async functions can improve even straight-forward code.

Read More

Modularity in web application code has been a topic of much discussion for a long, long time. Additionally, implementing solutions that provide a useful approach have consumed many development hours that quite a few of us will never get back. Thankfully, we are mostly converging on a single solution now in the form of ES6 modules.

In this talk, we'll explore the practical aspects of both consuming and creating those ES6 modules. We will also take a look at other current widely used module patterns, and also those that are quietly fading away. Finally, we will investigate the composition of web application code in general and how that relates to the code we ship to production.

Read More

Static type checkers have been a part of the JavaScript ecosystem for many years now, and with Microsoft, Google and Facebook all having made major investments in tools like TypeScript and Flow, it’s probably fair to say that type checkers are here to stay. That said, to newcomers, it can be a little bewildering to try and navigate this new technology landscape.

In this presentation, we’re going to talk about type checkers in-the-large. We’ll start with a broad overview of their benefits, then examine some common misconceptions. Next, we’ll see some real-world examples that demonstrate specific scenarios when they can be useful - and not-so-useful. Then we’ll move on to important things to take into consideration when picking a type checker to use for your project (spoiler alert: it’s all about tooling and type definitions).

Finally, we’ll try to look forward into the future of static type checkers. This will include how types can fit into the official JavaScript specification, how type checkers will sit relative to more sophisticated compile-to-JavaScript languages, and how, one way or another, static types are going to influence the broader JavaScript ecosystem.

In short, attendees will leave this talk with a better understanding of the strengths and weaknesses of static type checkers, how to get the most bang for your buck when using them, and how they are going to influence the future of JavaScript.

Read More

Building user interfaces on the web is hard, because the web, and thus CSS, was inherently made for documents. Because UIs fundamentally are not documents, we've seen a mindset shift towards building component-based systems.

The rise of JavaScript frameworks like React, Ember and recently Angular 2, the efforts of the W3C to standardise a web-native component system, pattern libraries and style guides being considered 'the right way to build web applications' and many other things have illuminated this revolution – we are now in the "Component Age".

With that and a few more things in mind, Glen Maddern and Max Stoiber (co-creators of css-modules) sat down and started thinking about styling in this new era. They took the best of CSS and the web to build a new way to style component-based systems. In this talk, Glen will share what they thought about and why they arrived where they did: styled-components.

Read More

In the past few years, we’ve witnessed a massive increase in the amount of CSS experimentation, with ideas like CSS Modules and — most controversially — the rise of CSS-in-JS. But does mixing our styles and logic run counter to the original ideas of CSS? Does it break progressive enhancement?

In this talk, we’ll take an empathetic look at these new approaches, how they relate to the history of CSS, and why they might possibly hold the key to the future of CSS — all from the point of view of someone who has been writing CSS since 1999.

Read More

Mandy Michael loves CSS. She believes there’s power in its simplicity and flexibility. When the team at Seven West Media Perth redeveloped The West Australian’s digital platform in a tight 4-month deadline, they embraced the CSS they know and love with a component driven approach, utilising ITCSS, BEM and SCSS with strict linting and code review. But while she’s a long-time lover of traditional approaches to CSS, the lessons Mandy learned have led her to the ultimate question: is there a better way?

Join Mandy as she explores her team’s journey in developing their CSS architecture, and find out where Seven West Media’s front end team is heading now.

Read More

Every industry will be affected by AI, machine learning and voice interfaces in the coming years. Terms like "neural networks" and "deep learning" often sound complicated and sci-fi, but never fear! There are platforms and technologies out there today that can enable you to do a whole lot out of the box upon which you can build.

Patrick will give you a crash course in AI — covering common terms, how you can get started with existing services and APIs, and how you can take all of this and apply it to your own business or idea.

Read More

It seems like every other day a new JavaScript framework is announced. The requests for JavaScript framework skills are rising. The websites and apps being built on these frameworks are many. At the same time, due to the Australian Government's push for web accessibility, we have seen an increase in projects that require developers who understand accessibility.

This leads us to the inevitable question: how do JavaScript frameworks address accessibility and what changes when frameworks allow you to create your own custom HTML elements?

Let's investigate what a developer needs to consider when creating their own HTML elements in JavaScript frameworks. To do this, we will look into some of the top JS frameworks in use (Angular, Ember, React, Polymer) and provide an overview of how each project differs slightly yet the principles for making accessible elements remain the same.

Read More

Thanks to progressive enhancement, we can make use of many new CSS features, even though not everyone uses a browser that supports them. We'll take a look at examples of CSS that we can use now and what we can use with care. And it's not all about using new CSS; we can all play a part in its development, too.

Read More

In this session, Mozilla's Marcos Caceres will provide an overview of the emerging Payment Request and Payment Response browser APIs and how to integrate them into existing HTML forms.

He'll also provide a sneak peek at the Payment Handler API, which the W3C is currently working on. It enables the creation of new ways to pay for things using, for example, virtual currencies.

Read More

Having heard from three of our industry's leading front end developers, let's dive deeper into the current and future state of CSS architectures. This is a chance to ask probing questions, and to help get to the heart of one of the front end's most pressing challenges: how do we work with style in today's complex web creations?

Read More