International single-track and two-day conference covering all about JavaScript and modern web technologies. 

JSCamp is an International single-track, two-day, conference curated, deeply technical, covering all about modern web technologies. There is a lot to gain from sharing best practices, learnings, and insights from different tools, frameworks and techniques across the web stack. 

JSCamp

Conference Opening Video

Welcoming by Courtney Christia

You are an engineer with a perplexing mystery to solve. Something isn’t right… arrays are no longer zero-based. Indexes are being skipped. Odd messages are appearing in your codebase. Do you dare to git blame? Or do you descend into the deep, dark world of JavaScript internals? 

This talk is an interactive exploration of JavaScript’s iteration protocol – the driving force behind iterating through arrays, generators and so much more. It’s a feature you use every single day – but do you know how it works? Or how to customize it for your needs? You decide where this choose-your-own adventure goes but no matter the ending, you'll become a master of iterators.

What happens next: a choose-your-own-adventure with iterators

This talk explores the implementation and performance characteristics of weak collections (WeakMap, WeakSet, WeakRefs) in V8, the JavaScript engine that powers Chrome and Node.js. 

The entries of weak collections have ephemeron semantics: an entry is cleared automatically once the key of the entry is no longer referenced anywhere else. This feature makes weak collections one option for implementing private fields. 

This talk explains what JavaScript weak collections are, and when to use them. We will also explore private fields, how they behave, and how they can be polyfilled with weak collections. 

Finally, we'll discuss performance and memory challenges for weak collections in the V8 JavaScript engine. 

Inside V8: weak collections, ephemerons, and private fields

We obsess — rightly — over bundle size, performance, code coverage, and anything else we can quantify. But what if I told you that the number one predictor of a project's sustainability is the one thing we're *not* measuring? 

In this talk, we'll take a look at what the academic literature can tell us about writing maintainable, bug-free code, and see how a new generation of compiler-frameworks like Svelte can apply those lessons to help us build rich, reliable applications.

The Return of 'Write Less, Do More'

A lot has happened in the five years since Val Karpov coined the MEAN stack to describe 'Full Stack' Javascript stacks. React rose to dominance, AWS Lambda started the Serverless movement, and Static Site Generators came back in a big way. 

What is driving this new stack of Javascript, APIs, and Markup? This is the story of how a JAMstack cynic finally turned into a believer.

JAMStack - The Total Victory of JavaScript

The rise of modern JS frameworks brought in more efficient concept of Front End programming. These inspired new approaches, such as CSS Module and CSS-in-JS, more scoped in working with CSS. It’s always a debate which is the best practice among these approaches. 

Some claimed CSS-in-JS eliminates developer’s most fear when dealing with CSS (the CSS file) with more dynamic approach. Some disagreed. If you are keen to know about CSS-in-JS and what should be considered when it comes to work with CSS, this talk is for you.

"CSS in JS - The good, The bad and The ugly"

It is estimated that 20% of the population has a disability of some kind. That’s a lot of users to leave on the curb, if your web app is inaccessible! 

When talking about web accessibility, we often focus on using the right HTML for the right purpose, setting up the right colour palette. Did you know that the way you write JavaScript also makes or breaks the accessibility of a website ? 

This talk will show you how great JavaScript can improve the accessibility of your website. We’ll walk through common interaction patterns such as navigation menus, modals, or custom form elements. 

Accessible JavaScript patterns

Did you know that the average website takes over 16 seconds to load on a mobile device? Did you know that on average the amount JavaScript and CSS that goes wasted is over 60%! 

If JavaScript and CSS are our most expensive resources to load, _*why*_ are we hurting our load times by shipping stuff we don’t ever use? How do we get rid of this unused code? How can we profile our web applications load times? 

Join me as I teach you about the performance constrains of the modern web, and how to write rich applications within these boundaries using household tools like webpack. We'll learn how you can use techniques like code-splitting and how to adopt patterns that we use here at Microsoft so you can make your applications fast and at scale!! 

How we make Web Apps lightning fast at Microsoft

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. Let me show you how — on practical, real-world cases of optimizing popular open source libraries, PR by PR.

Fast by default: algorithmic performance optimization in practice

Using the debugger dev tools in your favourite browser is almost like second nature. But once a bug shows up in a browser you’re not used to, figuring out how to use their dev tools can be a big pain. 

In this talk, I want to help you out by showing the different dev tools, where you can find the basic tools, but also what unique features each tool has.

How to effectively use the dev tools in all the browsers

Somewhere on a university campus in the US midwest, a 20 some year old student was earning minimum-wage, writing code in the middle of the night that would forever change the world. Until 1992, the internet was largely textual, reserved almost exclusively to academia. 

The sea change was a browser called: Mosaic. A young engineer co-authored Mosaic and in 1993 it became the 1st consumer-friendly browser, described once as the “gateway to the riches of the internet”. 25 years later, these same internet riches have become richer content, browsing has become as quotidian as a cup of coffee though not without a touch of tumult. 

“The Shape Of The Web” is about both accomplishments and challenges that lay in past, present and future of the web, its technologies employed and its employed technologists.

Shape Of The Web

I’ve found an iteration centric workflow through prototyping with PWA enhancements that I’m dying to show you. Check out this demo, it’s a prototype you can add to your homescreen. Now, put your UX hat on, and launch that prototype. Click through a couple things. Now notice that you don’t notice anything. This illusion is brought to you by a static site! #JAMstack ftw. How could a static site feel like a native app though?

Turns out we can emulate, simulate and recreate high quality app flows with basic web technologies. I’ll share tips and tricks for helping y’all build these for yourselves and teams. They’re resilient prototypes, that many folks can hack on, which empower teams to vet things early and often. Dont’ guess it, test it; with a PWA.

Pwototyping

Web developers have long heralded Progressive Enhancement for delivering web experiences in 'layers' (HTML, images, CSS, and then JS). It sounds so obvious and elegant, right? But FOUC (Flash of Unstyled Content), exposes the lies we've been telling ourselves and users! It's time to peel back the layers and re-envision how the web is assembled.

FOUC and the Death of Progressive Enhancement

A journey into the asynchronous debugging horrors, how to avoid them and what patterns can be used to ease the life of each developer debugging applications. We all have run into issues debugging JavaScript. Knowing what went wrong due to missing stack traces in asynchronous contexts and finding the actual issue takes way too long. Especially code with promises can be tedious to debug. Following best practices in error handling reduces debugging time and improves the code base a lot!

Error handling: doing it right!

Our 2019 conference was a great success!🤩Huge thanks to all speakers, sponsors and participants for your love, support and making JSCAMP such a memorable and special one, we are beyond grateful — Hope to see you all in 2020! 

Highlights

For the first time, we did an official gathering with all our attendees with a live concert by @EmpathyTest at Sala Bikini  —  Ever since the 1950s, it's one of the most iconic clubs in #Barcelona. Lots of amazing feedback, We're already planning next year's conference! #jscamp

JSCamp 2019

Jul 18 - Jul 19 | Barcelona, Spain