Tech Conferences, reinvented. We want to bring an unheard-of, TED-like level of quality to tech conferences. 

dotJS

Brendan give us insights into the process of standardisation of JavaScript at TC39, then covers some of the features of ES Next, and reminds us why we should always bet on JS.

For his 3rd dotJS appearance, Brendan give us insights into the process of standardisation of JavaScript at TC39, then covers some of the features of ES Next, and reminds us once again why we should always bet on JS.

A Brief History of JavaScript

Every day, we get 1 day closer to integrating WebAssembly into webpack as a first class citizen. But what does this mean and why should you care?

Every day, we get 1 day closer to integrating WebAssembly into webpack as a first class citizen. But what does this mean and why should you care? Sean reveals how webpack works under the hood.

Learn about its limitations and constraints, and how they are unlocking those constraints to make WebAssembly a pure and enjoyable experience.

Learn also how you can apply these concepts to your every day programming and walk away feeling excited about the future of webpack and WebAssembly.

Webpack+WebAssembly: Under the hood

What happens if we treat our templates as a specialized functional programming language that can be compiled into optimized bytecode and executed with a virtual machine? 

Most web applications today build their UIs by running JavaScript. 

But what happens if we instead treat our templates as a specialized functional programming language that can be compiled into optimized bytecode and executed with a virtual machine? 

Tom explores this novel architecture and some of the performance benefits it gives us.

Secrets of the DOM Virtual Machine

Isomorphic JavaScript, Universal JavaScript or Server Side Rendering have been a thing these past few years. 

Isomorphic JavaScript, Universal JavaScript or Server Side Rendering have been a thing these past few years. 

All the frameworks are now claiming that's an easy feature which only needs to be triggered. 

Matthieu explains why it's a bit more complicated but still an important benefit for JavaScript websites.

A few things to know about SSR

One of the primary goals for testing software is to have confidence that your software works as intended, but this doesn't give much insight into the quality of the software.

One of the primary goals for testing software is to have confidence that your software works as intended, but this doesn't give much insight into the quality of the software. Is it performant? How about accessible? Are we sending too much code? Answering these questions in an automated fashion today is hard, but that will be changing in the future.

In this talk, Trent explores how recent changes in technology give us a foundation to start answering the questions posed above and so much more. He looks at a near future where we have confidence that our software is functional and works well.

Working Well: The Future of Web Testing

Rafael shows how the Web Audio API filters are so versatile that they can handle arrays of any kind.

Rafael shows how the Web Audio API filters are so versatile that they can handle arrays of any kind. Since is possible to get information of the image's pixels as an array we could use it as an audio input and filter it as sound blurring it or highlighting the boundaries.

Processing Images using the Web Audio API

As JavaScript developers, we now have the power of our GPUs available to us, making great visual experiences more possible than ever.

As JavaScript developers, we now have the power of our GPUs available to us, making great visual experiences more possible than ever. 

Suby discusses the GPU programming mindset with shader programming- code that is executed on the GPU, via WebGL.

A Brief Intro to GPU Shader Programming in WebGL

Do you want to catch more bugs during development and keep your code maintainable?

Do you want to catch more bugs during development and keep your code maintainable? 

Stas shows you how to build your own linter using the TypeScript Language Service and integrate it with the editor.

Make your TypeScript compiler smarter!

A quick, fun look at how you might create a canvas-based video game using React and Redux.

A quick, fun look at how you might create a canvas-based video game using React and Redux. 

Mims talks about how the "game loop" works, how you can render to the canvas from within react, and how you might structure the state tree of a puzzle game.

Building a puzzle game in React/Redux

Filmed at https://2017.dotjs.io on December 1st in Paris.
More info & upcoming conferences: https://www.dotconferences.com

A day at dotJS 2017

Can GraphQL coexist with the other state management frameworks? What are the pros and cons of each combination?

External state management frameworks like Redux and MobX definitely helped with the problem of state-management, especially when the data is fetched from a REST endpoint.

But now that we're using GraphQL to take care of the data part, is an external state-management library even needed?

Can GraphQL coexist with the other state management frameworks? What are the pros and cons of each combination?

State management in a GraphQL era

It may come as a surprise to most people, but there are actually some tricky, nasty, counterintuitive parts in the JS language.

It may come as a surprise to most people, but there are actually some tricky, nasty, counterintuitive parts in the JS language. 

Elena gives a quick reminder about common mistakes when using some of the most subtle language features and how to avoid them (the mistakes... and also some of the features).

JavaScript: The Bad Parts

A technical and social commentary on how we often miss opportunities for new technology to improve others' lives, and how we can code ourselves out of a difficult box.

Accessibility can be a difficult and time consuming skillset to learn. User generated content is especially challenging to keep accessible for all.

By drawing inspiration from historic examples of 'guerilla accessibility', we can explore the use of technologies such as machine learning and script injection to improve the web for everyone.

Suz gives both a technical and social commentary on how we often miss opportunities for new technology to improve others' lives, and how we can code ourselves out of a difficult box.

New Tools for Old Problems

Adrian cowrote Django, yet he has come to believe that front-end frameworks are unnecessary for his own projects. 

Adrian cowrote Django, a prominent server-side framework, yet he has come to believe that front-end frameworks are unnecessary for his own projects. 

Here's his impassioned argument for avoiding JavaScript frameworks on the front end.

A framework author's case against frameworks

See how async + await works, best practices for flow control, and several solutions for handling errors.

Flow Control in JavaScript is hard! Native Promises in JavaScript have helped immensely, but the syntax is still a little callback-y. With Async + Await, we can write synchronous looking code without losing any of the benefits of JavaScript's asynchronous nature.

Wes explores how async + await works, best practices for flow control, and explores several solutions for handling errors.

Async + Await

The web platform in 2017 is powerful. What if we used that power for evil?

The web platform in 2017 is powerful. What if we used that power for evil? What kind of terrible UX could we create if our goal was to build *the worst web page in the world*?

Watch Feross livecode his way deep into the web platform, while demonstrating how new and old APIs can be used and abused for fun!

The Most Annoying Website (aka "The Power of the Web Platform")

See how a cheap $10 USB DVB-T/FM radio dongle can be hacked to receive commercial airplanes signals live and directly in JavaScript.

Commercial airplanes continuously transmit data packages via radio while flying. The protocol is unencrypted and is what allows public flight tracking websites to operate.

Thomas demonstrates how a cheap $10 USB DVB-T/FM radio dongle off Amazon can be hacked to receive these signals live and directly in JavaScript.

Getting Data From The Sky

See how to diagnose accessibility issues in your app and implement tooling to help you and your users succeed.

We build web applications and sites for the world, often without realizing how many users we're leaving behind. It's mission critical that we develop with accessibility in mind, to help users with permanent and temporary disabilities lead more independent, productive lives. 

The good news is that accessibility and JavaScript go hand-in-hand.

Marcy shows you how to diagnose accessibility issues in your app and implement tooling to help you and your users succeed.

Enabling Users in Client-Rendered Applications

2017

Learn how TypeScript came to be, how it differs from classic type systems, and how it can be beneficial even if you don't like types.

How do you define and implement a static type system for a dynamic language like JavaScript, and why would you even care to? 

Anders explores how TypeScript came to be, how it differs from classic type systems, and how it can be beneficial even if you don't like types.

TypeScript: Static types for JavaScript

Why does it seem like so many Electron apps consume more resources than their native counterparts?

We need to talk about JavaScript performance on the desktop. Why does it seem like so many Electron apps consume more resources than their native counterparts? 

Felix explores the architectural tricks separating slow and fast Electron apps.

JavaScript on the Desktop, Fast and Slow

Sometimes, undefined is not a function. Get a better understanding of why type systems help you write better programs.

Sometimes, undefined is not a function. As mortal programmers, we ship bugs to production everyday. Bugs slow us down, frustrate our users, and cause us to have crises of confidence. Don't go alone–type systems in technologies such as TypeScript, Flow, and GraphQL can improve your confidence and help you ship less bugs.

Lauren dives into the practical benefits you'll get from embracing types. You'll walk away with a better understanding of why type systems help you write better programs, and some functional programming tips you can use today.

Learning to Love Type Systems

A day at dotJS 2018

Learn about various sync and async concepts, through an animated cartoon environment.

While teaching, Joost finds that his beginning JS students have a hard time grasping the concept of asynchronous programming. So he tells a story about Étienne who orders a hamburger from Slow Burgers, where prep times may be as crazy as *500ms*.

Through an animated cartoon environment, Joost shows various sync and async concepts.

Asynchronous hamburgers

The world of web development is moving fast, and you have to make decisions today on which tools to use. 

Don't blink - a new JavaScript framework just came out.

The world of web development is moving fast, and you have to make decisions today on which tools to use. 

John examines the current state of JavaScript's most popular frameworks: React, Vue and Angular.

Choosing Your JavaScript Framework

USB gives us the power to use hardware regardless of the OS. The web browser gives us the power to use software regardless of the OS. 

USB gives us the power to use hardware regardless of the OS. The web browser gives us the power to use software regardless of the OS. 

And what happens if you combine both into one? Especially if you are interested in digital art? 

This is the answer!

WebUSB for Digital Artists

Tejas outlines the emerging technology that is WebAssembly: a compile target for the web and explores the question "will WebAssembly kill JavaScript?"

Tejas outlines the emerging technology that is WebAssembly: a compile target for the web and explores the question "will WebAssembly kill JavaScript?" featuring a demo of asm.js, a precursor to WebAssembly from the Microsoft Edge team.

A Quick Recap on WebAssembly

Boilerplates are often used to kickstart the development process of new apps. But, this leads to a lot of copied code that isn't needed for most projects.

Boilerplates are often used to kickstart the development process of a JavaScript application. However, this leads to a lot of copied code that isn't needed for most projects, while developers aren't exactly knowing what they are doing.

Boilerplates Are The New Copy-Paste

Promise composition can help achieve a lot of modularity in asynchronous code, which leads to better maintainability.

Promise composition can help achieve a lot of modularity in asynchronous code, which leads to better maintainability of it. 

Kashyap goes through a pattern explaining how programmers can build larger abstractions starting with very small ones.

Promises & Composition

Tara looks into how far we’ve come in the past three years with HTTP/2 and what is actually at our disposal as developers.

With many new technologies, although we’re excited about the new possibilities, we don’t get around to actually using them in real applications for many months or years. 

We’ve now seen this with HTTP/2 which was released in 2015 but is still working its way into our software today, over three years later.

Tara looks into how far we’ve come in the past three years with HTTP/2 and what is actually at our disposal as developers.

HTTP/2 For Me & You

Take a look back at the origins of the State of JavaScript survey, how it's changed over the years, and this year's results.

Sacha takes a look back at the origins of the State of JavaScript survey, how it's changed over the years, and this year's results.

The State of JavaScript 2018

See how you can entirely avoid the node_modules hell.

Yarn recently unveiled a new exciting work based on an alternative installation strategy: Plug'n'Play. By using it, one can avoid entirely the node_modules hell. Maël discusses why we should do that, and how.

Revisiting Node modules

Olivier gives us some insights about CQRS: what is it? How does it work? What are its pros & cons?

Command Query Responsibility Segregation

A small explanation and demo of the new OffscreenCanvas, including the stuff that doesn't work and some potential use-cases.

Sam gives us a small explanation and demo of the new OffscreenCanvas, including the stuff that doesn't work and some potential use-cases.

WOAH! Is that OffscreenCanvas?

Takes your debugging skills up a notch by understanding debuggers and stack traces.

As JavaScript developers, our first steps in understanding what is happening with our codebase rely on one command: "console.log". 

Adam takes your debugging skills up a notch by understanding debuggers and stack traces.

Debugging, a step away from the console

Jeremias tells us a short story about proper custom font delivery for the web.

Web fonts are great, they help us bring interesting designs and experiences to our web identities. However, your users want the content and that should be our priority. 

Jeremias tells us a short story about proper custom font delivery for the web.

Give me your content, punk!

Kurt explores how & why should you build a JavaScript runtime, and the interesting problems you can solve once you get the basics right. 

Kurt explores why a developer would want to build an open source JavaScript runtime, how to go about it, and the interesting problems you can solve once you get the basics right. 

Devs who are never going to build a runtime will learn a bit about how they work, which will hopefully help them build better JS apps!

Building a JavaScript runtime

Follow the adventure of implementing the await feature in the JavaScript language. 

It goes without saying that one of the largest challenges in JavaScipt is handling asynchronicity. Along come Async / Await, a language feature made popular by C#. Developers can now use the keyword await to write code in a synchronous fashion without blocking the main thread. The only catch is that the await keyword needs to be used in an async function.

What if that were not the case? What if await could be used anywhere inside a JavaScript module? Myles follows the adventure of implementing the Top-Level await feature in the JavaScript language. From deep dives into module loading to a high level overview of socializing standards changes, he covers the process of what it takes to change the JavaScript language.

Top-level Awaiting for Godot

Discover how Devon makes robots dance together to the beat of music, using only JavaScript!

Discover how Devon makes robots dance together to the beat of music using only JavaScript!

Robot Rock

Minecraft is getting a JavaScript runtime. See the technical details of this integration, why it happens, and what it means for players.

Minecraft is getting a JavaScript runtime. It means two things: 1) game logic will be exposed through a new API that you can use to create your own mods, and 2) the way Minecraft’s UI is built and shipped on everything from Android and iOS to Switch and Xbox will be completely overhauled. 

Tobias goes through the technical details of their integration, why they’re doing it, and what they think it means for Minecraft players.

Adding JavaScript to Minecraft

2018

A decade after Node was first announced, JavaScript and the web platform have evolved. Deno is a new JavaScript/TypeScript runtime—the evolution of Node.

A decade after Node.js was first announced, JavaScript and the web platform have evolved, and TypeScript has changed the way JS applications are developed. 

Deno is a new JavaScript/TypeScript runtime that was designed with all those new capabilities in mind.

Deno

Pros and cons of creating class and function components in React vs Vue vs Svelte.

For a period of time, most of the mainstream frontend frameworks have converged on a class-or-semi-class-based model for declaring components. However, in the past year, we are seeing some new ideas emerging regarding how stateful logic inside components are declared, managed and composed.

Evan examines three different approaches: React Hooks, Vue Composition API, and Svelte 3. They share a common departure from the class-based models, but also have fundamental differences due to the trade-offs in their respective designs, which he discusses in this talk.

State of Components

What do CRDTs and frontends have to do with each other?

What do CRDTs and frontends have to do with each other? 

James talks about how CRDTs finally deliver on the promise of local-first apps, which provide superior user experience, and explains how simple CRDTs can be and how to leverage them to create robust local-first apps.

CRDTs for Mortals

WebAssembly, the new low-level bytecode format for the Web, could seem like a complicated topic to some. Vlad provides you with required WebAssembly knowledge.

WebAssembly, the new low-level bytecode format for the Web, could seem like a complicated topic to some. 

Vlad provides you with required WebAssembly knowledge, so you can use the power of WebAssembly to optimize your own JavaScript web applications. 

He also takes a glance at the future of WASM and how it can improve the speed and security of the software we write on a daily basis.

Into WebAssembly

When building apps, we focus on minimizing costs, time to market, bugs, bundle size, application speed, SEO, but we spend almost no effort trying to minimize the damage our applications are making to the environment.

Data centers produce about 3% of the world's greenhouse gases and this is set to treble in the next 10 years. 

When building apps, we focus on minimizing costs, time to market, bugs, bundle size, application speed, SEO, but we spend almost no effort trying to minimize the damage our applications are making to the environment.

Asim discusses how to build a green sustainable web application with NestJS and Serverless.

JavaScript Saves the World

Svelte is a new generation of web framework, it compiles your code to vanilla JS and CSS instead of evaluating it at runtime.

Svelte is a new generation of web framework, it compiles your code to vanilla JS and CSS instead of evaluating it at runtime. 

This new approach opens new possibilities, especially for writing reactive web app. Bertrand explains how Svelte changed his mind on frameworks.

Svelte

Before being a web developer, we are all users of the internet which is a jungle of UX patterns, some bad, some good and some terrible.

Before being a web developer, we are all users of the internet which is a jungle of UX patterns, some bad, some good and some terrible. 

Sara explores the complex paths of this jungle to understand together how we can plan and develop ways to make our applications be a more enjoyable experience for both our users and us.

The complexity in simplicity

Learn regular expression features like non-capturing groups, named capture groups, the dotall flag, and Unicode property escapes.

Stefan covers regular expression features like non-capturing groups, named capture groups, the dotall flag, and Unicode property escapes.

Regular expressions my secret love

In the past few years, UI libraries have taken the web development world by storm, however, this shift in how web applications are built has also increased the complexity of tooling needed to be productive.

In the past few years, UI libraries have taken the web development world by storm, however, this shift in how web applications are built has also increased the complexity of tooling needed to be productive.

In reality, it has gotten easier as new a new segment of tooling was created to aid in creating scalable and performant web applications. These “Web Frameworks” focus on providing great end-user experience while also making developers more productive.

Tim explores what web frameworks are, why they exist, and how you can immediately improve your end-user experience and developer experience by applying low-level concepts from web frameworks in your application.

What to expect from a modern web framework?

With modern development tools, it’s easy to locate the exact code that’s slowing down your application, but what do you do next? Why exactly is it slow, and how do you make it fast?

We’ve learned to rely on sophisticated frameworks and fast engines so much that we’re slowly forgetting how computers work. With modern development tools, it’s easy to locate the exact code that’s slowing down your application, but what do you do next? Why exactly is it slow, and how do you make it fast? Time to regain the lost art of algorithmic performance optimization!

Software performance is all about recognizing and eliminating unnecessary work. You can learn to do this intuitively, and eventually you’ll be able to write code that’s fast from the start, by default. Vladimir shows you how — on practical, real-world cases of optimizing popular open-source libraries, PR by PR.

Fast by default: algorithmic performance optimization in practice

We are obsessed with coding and creating automated workflows and optimizations. And yet our final products aren't making it easy for people to use them.

We are obsessed with coding and creating automated workflows and optimizations. And yet our final products aren't making it easy for people to use them. Somewhere, we lost empathy for our end-users and other developers. Maybe it is time to change that. Here are some ideas.

Develop, Debug, Learn?

Testing the front end shouldn't be that hard! There are ways to achieve a healthy testing strategy for our front-end applications.

Testing the front end shouldn't be that hard! There are ways to achieve a healthy testing strategy for our front-end applications.

Adrià discusses, explores, and showcases some of the best practices around what to test, and also how to test it.

The pragmatic front-end tester

Sven talks about how WebAssembly looks like from a JavaScript developer perceptive.

The WebAssembly Community Group is actively working on improving the interoperability, allowing a seamless integration in our JavaScript projects!

Sven talks about how WebAssembly looks like from a JavaScript developer perceptive.

More WebAssembly in your JavaScript

See the design and architecture that went into creating a component compiler which generates framework agnostic components. 

Adam reviews the design and architecture that went into creating a component compiler which generates framework agnostic components. 

First, he goes over "why" a compiler, then dives into how we're able to take advantage of TypeScript and Rollup to generate web-standard components, while also focused on developer experience.

Architecting A Component Compiler

When we develop a Single Page Application, we have to use a Router. It's a common use case, yet every single framework has its own router, but they all share quite a few principles.

When we develop a Single Page Application, we have to use a Router. It's a common use case, yet every single framework has its own router, React even has multiple ones you can choose from. And even though each framework is different and every router takes a different approach, they all share quite a few principles. 

Understanding those helps us handle routing in our SPA because behind all those simple, different APIs provided by framework-specific routers, a more complex architecture is hidden from us.

Eduardo dives into the architecture of a Router and some of its implantation details.

Modern Routing

Aftermovie dotJS 2019

Ziad shares some guidelines for using TypeScript types as precisely as possible.

Typing correctly matters

Testing native JavaScript web components can be tricky. Andrew walks through the basics needed to test native JS web components without a browser.

Testing native js web components

Learn all about the TC39, the committee working on evolving the JavaScript language standard.

Daniel presents the TC39, the committee working on evolving the JavaScript language standard. Because JavaScript is both programmed by a diverse set of people and deployed in diverse settings, it is essential that its development be governed in a way that is inclusive to these various requirements. 

We are not there yet, but the TC39 is working on it, and this can be seen in the development of various new language features that are coming to JavaScript. The TC39 needs your help in bringing JavaScript to the next level, and Daniel explains how you can get involved.

TC39: How we work, what we are working on & how you can get involved

Acoustic activity recognition can create new interactions and better smart systems. See how you can experiment with JS, Machine Learning, and Tensorflow.js.

Even though we don’t really think about it, sound is a very rich source of information.

Leveraging the properties of sound with machine learning, we can gain insights about an environment or an activity performed.

Acoustic activity recognition has the potential to create new interactions and better smart systems, and in this talk, Charlie explores how to experiment with this technology in JavaScript, using the Web audio API and Tensorflow.js.

Exploring the hidden potential of sound data

A deep dive into the specific features of Web Workers that aid in making it possible to perform tasks typically reserved for cloud computing jobs, in the browser.

Jana covers how to bring multi-dimensional computing power to the browser using Web Workers. She focuses on one particular dimensionality reduction algorithm—UMAP—used more and more frequently these days to visualize high-dimensional datasets. She deep dives into the specific features of Web Workers that aid in making it possible to perform tasks typically reserved for cloud computing jobs in the browser, albeit on smaller samples from data sets.

These features include transferable objects, which allow for efficient, zero-copy passing of computed results back to the browser from the Worker and OffscreenCanvas, a bleeding edge browser feature that can let us even perform the visual rendering of the UMAP result in a non-blocking Worker.

Escaping flatland: a romance of data science in the browser

Kas discuss the MIDI communications protocol, how we can create and augment music with JavaScript, and will hopefully make you think about how your apps communicate with each other.

MIDI, communications, and music in JavaScript

When developing applications with states which require some effort to make them consistent, we can either accept that and write many unit tests to make sure things are consistent, or we can model domains in a better way.

When developing applications with states which require some effort to make them consistent, we can either accept that and write many unit tests to make sure things are consistent, or we can model domains in a better way, leveraging the type system to eliminate as many inconsistencies as possible.