Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! Attend JSNation Live, a 3-day conference on all things JS, gathering international software engineers in the cloud.

JSNation Live

Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! Attend JSNation Live, a 3-day conference on all things JS, gathering international software engineers in the cloud. To help you stay up-to-date on the latest JavaScript technologies, we're coming back with our new remote gig on June 9-11, 2021.

JSNation Live is the best place to learn about JavaScript online – beside the main JS conf talks and panel discussion with high-profile specialists, be prepared for awesome MCs, in-depth workshops, a number of virtual networking rooms, interactive entertainment, and engaging challenges for all participants.

JSNation Live 2021

The way we write JavaScript in 2030 will be completely different than in 2020. Here's why: the slow death of IE11 and rollout of ES Modules will converge toward a new generation of JavaScript tooling. These tools are faster, typesafer, and polyglot, leading to both a better developer and user experience. Change is afoot!

The Third Age of JavaScript

Shawn Swyx Wang

Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.

Vite: Rethinking Frontend Tooling

Evan You

Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.

Building Brain-controlled Interfaces in JavaScript

Charlie Gerard

A look into Pixi.js coolest and lesser known features.Including treats such as:- Meshes- Spine Animation- Custom filters- Render Textures and Image exporting Showing example how it can make working with WebGL super easy and give your content that edge it needs to stand out! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Pixi Powerups!

Mat Groves

If your company is anything like the ones I’ve worked for, you have apps with seven different button designs, three different datepickers, and a bizarre collection of dropdowns that may or may not be accessible. A growing trend to deal with this inconsistency is to build a custom design system or component library. Essentially, you build The One Way™ to create a datepicker for your organization, and ask that the rest of your company to conform to your new system. But building a component library comes with a lot of challenges, like, which frameworks or libraries should you use (if any)? How do you make sure your components are accessible? And how to you distribute your components so your whole company can use them? In this lightning talk you’ll learn how to build a component library fast building on top of a library like Kendo UI. You’ll learn tips &amp; tricks on how to get up and running, how to customize components, and how to distribute components throughout your organization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Custom Component Library – Fast

TJ VanToll

Developers want to ship and create value for our users. Why, then, do so many teams struggle with getting things to production quickly? In this talk, Jason Lengstorf will look at the impact our frontend architecture and infrastructure has on our teams’ ability to build, iterate, and deploy software — and how it affects the quality and risks of deployment. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Your Architecture and Infrastructure Can Make (or Break) Your Team’s Productivity

Jason Lengstorf

Learn how NodeSource strengthens their competitive advantage building their product on InfluxDB to increased visibility into production applications and presents better security monitoring and alerts into their solution. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Simplifying the Complexity of Node.js with InfluxDB

Marian Villa

What are the benefits of becoming an Elite Performer? The answer can be complicated. Join me today for a short journey to accelerate code quality with Google's DORA metrics &amp; continuous code improvement to drive higher software delivery and team performance. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accelerating Code Quality with DORA Metrics

Nico Krüger

Retool is a front-end as a service tool that is similar to React and can be 10x faster than coding a web app from scratch. We’ll focus on how and why it is used for internal tools at some of the fastest growing companies and take a minute to walk through how it works, where it’s a good fit and where it’s not. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Code Boring Internal Apps 10x Faster

Chris Smith

With so many libraries to choose from for state management, why not add one more? The ECMAScript Proxy API enables you to intercept and redefine how an object operates. Let's explore how you might use the Proxy API for state management! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using the Proxy API for State Management

Will Johnston

Learn about state modeling with state machines and statecharts can improve the way you develop application logic, and get a sneak peek of never-before-seen upcoming visual tools that will take state management to the next level. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Visual Future of State Management

David Khourshid

Service workers bring amazing new capabilities to the web. They make fully offline web apps possible, improve performance, and bring more resilience and stability to any site. In this talk, you'll learn how these man-in-the-middle attacks on your own site work, different approaches you can use, and how they might replace many of our current best practices. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Service Workers: How to Run a Man-in-the-middle Attack on Your Own Site for Fun and Profit

Chris Ferdinandi

Since 2017 Yarn proved itself a pillar of JavaScript development incubating numerous features our ecosystem now heavily relies on. As years passed, as competitors improved, so did Yarn, and it's now time today to dive into the features and tradeoffs that make Yarn a truly unique gem of the JavaScript ecosystem.

Yarn in Depth: Why & How

Maël Nison

JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.

Making JavaScript on WebAssembly Fast

Lin Clark

Wait! Not so fast - Stop scrolling and hang out with me for a while! When done right, scroll based animations can add polish to a site, and make online storytelling feel more immersive. GreenSock's ScrollTrigger enables you to achieve buttery smooth scroll based animations with minimal code. Let's dig in to some of it's features together. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Keep Scrolling

Cassie Evans

In this lighting talk Fabrizio will go through the main highlights of CommerceLayer, comparing the headless approach to the traditional "monolithic" ecommerce platforms. We will speak about security, performances and scalability. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Headless vs Traditional eCommerce Platforms: Introducing Commerce Layer

Fabrizio Picca

Blitz.js is the Fullstack React Framework. It's heavily inspired Ru on Rails and is focused on making you as productive as possible. It's built on Next.js and adds all the missing pieces you need for building a fullstack app with a database. By far the biggest innovation of Blitz is the new "Zero-API" data layer that abstracts away the API so you don't have to mess with REST or GraphQL APIs! Brandon will cover all the important parts, so you'll know if you might want to use Blitz or not. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Fullstack Apps in Record Time with Blitz.js

Brandon Bayer

Does hearing about potential new features of Javascript makes you excited? Then this talk is for you! We will walk through a few interesting proposals from TC39 from stage-0 to stage-3. Let us see how beneficial these proposals are with code samples and some live coding. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ES?.next()

Hemanth HM

With StackHawk, engineering teams can run security tests against JS applications and the backing APIs to find and fix vulnerabilities fasters. With automated testing on every PR, you can be confident that your app is secure. Join StackHawk co-founder Scott Gerlach for a quick overview of JS application security testing with StackHawk. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automated Security Testing for JS Apps & Underlying APIs

Scott Gerlach

There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more. The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of fullstack development for frontend and mobile developers. We'll build a fullstack application backed multiple AWS services including Cognito, Appsync, and S3 in minutes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create an Application Backend in Clicks with the Amplify Admin UI

Ali Spittel

In this talk, you can learn the journey of the creation of those communities, the challenges, lessons, and insights on how to transform a community in a developing nation around technology and how it can set the stage for other communities to build upon. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Transforming a Country Through Code!

Lizz Parody

Landing a top spot on Google can have a multi-million dollar impact on your business. Starting in May 2021, the performance of your site (determined Core Web Vitals) will be critical to your search ranking. Learn how Next.js can help you optimize your site’s performance, user experience, and SEO. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How Core Web Vitals Will Affect Google Rankings in 2021

Lee Robinson

My favorite things in life are cats, computers and crappy ideas, so I decided to combine all three and make an IoT (Internet of Things) litter box using a Raspberry Pi and JavaScript! If you have ever wanted to get build your own IoT project, but didn’t know how to start, then this is the talk for you.Together, we will go through how I setup my IoT Litter Box from start to finish. Including how to setup Node.js on a Raspberry Pi and how to connect sensors to a Raspberry Pi and how to read the sensor inputs with Node.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

An Introduction To IoT; Or How I Built an IoT Kitty Litter Box Using JavaScript

Joe Karlsson

Synchronizing multiple streams, particularly multiple live streams, and especially when the audio is critical too, can be incredibly difficult. How, then, could you build an experience where you have a few camera angles and you want a viewer to be able to seamlessly pick one? We'll walk through a hack technique that allows you to do just that without ever having to worry about synchronization. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Remember CSS Sprites? Let's do that with video!

Matt McClure

Almost every developer thinks that adding one more log line would not decrease the performance of their server... until logging becomes the biggest bottleneck for their systems! We created one of the fastest JSON loggers for Node.js: pino. One of our key decisions was to remove all "transport" to another process (or infrastructure): it reduced both CPU and memory consumption, removing any bottleneck from logging. However, this created friction and lowered the developer experience of using Pino and in-process transports is the most asked feature our user.In the upcoming version 7, we will solve this problem and increase throughput at the same time: we are introducing pino.transport() to start a worker thread that you can use to transfer your logs safely to other destinations, without sacrificing neither performance nor the developer experience.

Multithreaded Logging with Pino

Matteo Collina

Jecelyn will share some tips and tricks to help you debug your web app effectively with Chrome DevTools. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Debugging with Chrome DevTools

Jecelyn Yeen

Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!

TensorFlow.JS 101: ML in the Browser and Beyond

Jason Mayes

Get started with Web Components – enabling you to define new HTML elements that work everywhere regular HTML does. This talk will focus on Lit, a suite from Google that helps you create WCs with features you'd expect like data-binding and declarative definitions. It'll also cover how we've used them to build one of the web's jolliest sites, Google's Santa Tracker 🎅 <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web Components, Lit and Santa 🎅

Sam Thorogood

Authentication and Authorization are serious problems. We often dedicate a lot of time to craft powerful APIs but overlook proper security measures. Let's solve it with Magic using a key-based identity solution built on top of DID standard, where users’ identities are self-sovereign leveraging blockchain public-private key pairs. In this talk, we’ll look at proper ways to secure our Node.js APIs with Decentralised Identity Tokens. We’ll go from learning what Decentralised Identity standards are, how the users’ identities are self-sovereign leveraging blockchain public-private key pairs, why they’re the future of API security, and to put theory into practice we will build a real-world implementation using Node.js where I’ll show common best practices. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Securing Node.js APIs with Decentralised Identity Tokens

Mohammad Shahbaz Alam

For close to 25 years now, JavaScript developers have suffered at the hands of time: the Date object. We have tried all sorts of solutions from using popular libraries like Moment.js all the way to handling dates and times on the backend.Now it's time to show "time" who is boss. With the Temporal API stable at Stage 3 and the polyfill ready for production use, let me show you how to harness the power of this delightful API in order to build powerful JavaScript applications that handle dates and times like we always wished we could. We shall also discuss the orthogonal features being worked on in the JavaScript Intl API and find out how these play along with each other and come together to form a comprehensive set of APIs that allow us to build state of the art date and time components in our applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How to Outsmart Time: Building Futuristic JavaScript Apps Using Temporal

Ujjwal Sharma

How do you debug so easily in VS Code? How do codespaces work? What are those key combinations to edit code so quickly? What extensions are the ones I shouldn't code without? Get ready to hit the ground running in this fast-paced, demo-heavy talk that takes you through some of the best and most effective tips and tricks in VS Code. Learn how to setup your environment and customize it the way you like it. You'll walk out with several tips on how to be more efficient with one of the hottest tools on the Web today! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

VS Code Can Do That!

John Papa

CSS has evolved and grown immensely since it was first introduced back in 1996. There was a time back then when CSS was not even meant for doing layouts, but that time has long past. Today, web layouts are practically synonymous with CSS. In addition to that, CSS can now be used to build things that used to only be feasible with Javascript. This talk will showcase a few of such features and explain how to build them yourself. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

CSS Can Do That Too

Chen Hui Jing

In this talk we will explore the great benefits of breaking a big modern app to meaningful, independent pieces – each can be built, deployed and loaded separately. We will discuss best practices and gotchas when trying to apply this microservice-like pattern to the chaotic world of the browser, and we'll see how building the right pieces guarantees a brighter future for your apps. Let's dive into Neverendering story of modern front-end architecture. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-scopes – How to Build a Modular Modern App in a Bundled World

Liad Yosef

How long have we been watching movies about reality and how exciting it looks! You may not have noticed, but virtual reality is already in our lives, even in our browsers. There are more and more ways to apply these technologies. Let's take a look at VR and AR and see how they look in real life. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let's Expand the Reality!

Vasilika Klimova

Seasoned and beginner alike, developers have a habit of jumping right into a framework or new technology that makes a lot of promises while also glazing over important fundamentals that without, tend to hold back a website or application’s potential. Without some basic knowledge of HTML, you might inadvertently exclude people from learning about your company through your website due to poor accessibility. Lacking an understanding or simply being afraid of CSS, you might be more prone to add unnecessary libraries on top of libraries that just add to the weight of the page, impacting how quickly your app can load. In this talk, we’ll go over some basic HTML and CSS strategies that can immediately be used right alongside of JavaScript including frameworks like React and Vue that will provide another range of benefits like better accessibility, simpler code, and ways you can improve SEO letting search engines like Google more easily figure out what your page is about.

Put Down the Javascript – Level Up with the Fundamentals of Web Development

Colby Fayock

In this workshop, through hands-on projects we'll learn how to use Observable, a browser-based reactive coding platform, to rapidly build insightful, interactive visualizations in JavaScript. After completing this workshop, you'll have the basic tools &amp; techniques you need to start using dataviz to better understand your code, your projects &amp; your users, and make better data-driven decisions as a developer. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Data Visualization for Web Developers

Anjana Vakil

Most businesses have to build custom software and bespoke interfaces to their data in order to power internal processes like user trial extensions, refunds, inventory management, user administration, etc. These applications have unique requirements and often, solving the problem quickly is more important than appearance. Retool makes it easy for js developers to rapidly build React-like apps for internal tools using prebuilt API and database interfaces as well as reusable UI components. In this workshop, we’ll walk through how some of the fastest growing businesses are doing internal tooling and build out some simple apps to explain how Retool works off of your existing JavaScript and ReactJS knowledge to enable rapid tool building. Prerequisites:A free Retool.com trial accountSome minimal JavaScript and SQL/NoSQL database experience Retool useful link: https://docs.retool.com/docs <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build React-like apps for internal tooling 10x faster with Retool

Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building a Hyper Fast Web Server with Deno

Matt Landers

Buddy is a CI/CD tool that lowers the entry threshold to DevOps simplifying pipeline configuration to bare minimum, enabling teams to embrace CI/CD with no dedicated engineers. During the presentation, we will show you how to create a fully functional JavaScript pipeline and adapt it to the workflow in your company in a couple of minutes. We are going to put special emphasis on features that help secure code quality, share some tricks that speed up the deployment (trigger conditions, cache, Docker, changeset deployments, parallelization), and show you how to preview deployed websites with no server infrastructure using Sandboxes – a unique feature of Buddy. Prerequisites:Code , Git installedGitHub account <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

DevOps 2.0: The ultimate JS delivery pipeline

Tom Papiernik

Even if you're a regular expression pro, it's not always easy to know how to apply them in JavaScript. What's the difference between RegExp.prototype.exec and String.prototype.match ? What if I want to replace all punctuation followed multiple spaces with the same punctuation followed a single space? This workshop will explore the various methods and leave you with sample code, a cheat sheet, and the confidence to choose the right method for the job. Prerequisites:Node 12+Array methods: map and filterKnowledge of regular expression syntax helpful but not required Workshop level:JS devs who avoid regular expressions because who has time to figure out which method to use? Level: beginner / intermediate. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Regular Expressions in JavaScript

Bonnie Schulkin

Digital commerce has changed, and there is an increasing demand for faster and kite efficient solutions. In this workshop, you'll learn about the evolution of ecommerce and how Jamstack and headless commerce evolves shopping experiences on the web. We will explore the basics of headless commerce building a minimal Jamstack ecommerce product page with static content, HTML5, CSS, and Javascript. Finally, we will integrate Commerce Layer for headless commerce capabilities and deploy our application to Netlify. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Jamstack eCommerce 101

Bolaji Ayodeji

D3.js is a powerful JavaScript library for building data visualizations, but anyone who has tried to use it quickly finds out that it goes deeper picking your favorite chart type. This workshop is designed to give you a hands-on introduction to the essential concepts and techniques for creating custom data visualizations with d3.js. By the end of this workshop you will have made an interactive and animated visualization on a realistic dataset that you can easily swap out with your own. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Painting with Data: Intro to d3.js

Ian Johnson

Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction. In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos. After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects. Prerequisites:You should have some experience with Angular. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-Frontends with Module Federation and Angular

Manfred Steyer

InfluxDB is an open source time series database that empowers developers to build IoT, analytics and monitoring software. It is purpose-built to handle the massive volumes and countless sources of time-stamped data produced sensors, applications and infrastructure. This workshop showcases a fully functional sample application called IoT Center that is built on InfluxDB. This application demonstrates the capabilities of the InfluxDB platform to develop a JavaScript-enabled time-series-based application. It collects, stores and displays a set of values that include temperature, humidity, pressure, CO2 concentration, air quality, as well as provide GPS coordinates from a set of IoT devices. With this data stored in InfluxDB, the application can query this data for display as well as write data back into the database. This hands-on workshop will show students how to install this open source code to learn how to query and write to InfluxDB using the InfluxDB JavaScript client, and gain familiarity with the Flux lang query language which is designed for querying, analyzing, and acting on time series data. And finally, collect and visualize performance data of the Node JS application. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build an IoT App With InfluxDB

Miroslav Malecha

Did you ever work in a monolithic Next.js app? I did and scaling a large React app so that many teams can work simultaneously is not easy. With micro frontends you can break up a frontend monolith into smaller pieces so that each team can build and deploy independently. In this workshop you'll learn how to build large React apps that scale using micro frontends. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro Frontends with Module Federation and React

Alex Lobera

The workshop extends JavaScript programming language knowledge, overviews general software design patterns. It is focused on Web Components standards and technologies built on top of them, like Lit-HTML and Lit-Element. We also practice writing Web Components both with native JavaScript and using Lit-Element. In the end we overview key tooling to develop an application - open-wc. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web Components in Action

Joren Broekema

Alex Korzhikov

A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written John Papa and found throughout the Angular docs) and give it a UI upgrade! All you will need is a laptop and your favorite data set (mine, of course, will be ponies.) <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Comfortable with Angular and UI

Alyssa Nicoll

Have you wanted to explore AI, but didn't want to learn Python to do it? Tensorflow.js lets you use AI and deep learning in javascript – no python required! We'll take a look at the different tasks AI can help solve, and how to use Tensorflow.js to solve them. You don't need to know any AI to get started - we'll start with the basics, but we'll still be able to see some neat demos, because Tensorflow.js has a bunch of functionality and pre-built models that you can use on the server or in the browser. After this workshop, you should be able to set up and run pre-built Tensorflow.js models, or begin to write and train your own models on your own data. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The biggest JS conference in the cloud