JS Nation

I’m attending JSNation – the main JavaScript conference of the year. You may join me there for free with 10k other JS engineers and 40+ great speakers. Just follow this badge. 

#javascript

Discover the future of the JavaScript development ecosystem and get connected to its stellar crowd! 

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

JSNation 2023

CKSource

Descope

Chromatic

Infobip

CrabNebula

OfferZen

Storyblok

Sentry

Handsontable

Sonar

Weaviate

JetBrains

The Graph

Twilio

Bloomberg

Storyblok is a CMS that works with all modern frameworks and platforms so you are completely free to choose the best option for your project. Kickstart a new CMS project with your favorite technology in a matter of minutes, and for free.

<span style="font-size:10pt;font-family:Arial;font-style:normal;" data-sheets-root="1" data-sheets-value='{"1":2,"2":"Chromatic is a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs."}' data-sheets-userformat='{"2":1049345,"3":{"1":0},"11":3,"12":0,"23":1}' id="isPasted">Chromatic is a visual testing &amp; review tool that scans every possible UI state across browsers to catch visual and functional bugs.

AI and Web Development: Hype or Reality

Wes Bos

Angular Momentum

Minko Gechev

Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?

Miško Hevery

How I Like to Write JavaScript

Caleb Porzio

APIs are Evolving. Again.

I Would Never Use an ORM

Matteo Collina

SolidJS: Why All the Suspense?

Ryan Carniato

Building a Voice-Enabled AI Assistant With Javascript

Tejas Kumar

Bun, Deno, Node.js? Recreating a JavaScript Runtime From Scratch

Erick Wendel

The Core of Turbopack Explained (Live Coding)

Tobias Koppers

Package-based Monorepos - Speed Up in Under 7 Minutes

Juri Strumpflohner

Maximum Efficiency: A Primer on Capacitor

Mike Hartington

JavaScript Iteration Protocols

Luciano Mammino

DEADScript: The Role Of JavaScript In Web Sustainability

Henri Helvetica

Modern Web Debugging

Jecelyn Yeen

Web Push Notifications Done Right

Maxim Salnikov

Comparing JavaScript Frameworks Performance Using Real-World Data

Dan Shappir

The State of Passwordless Auth on the Web

Phil Nash

When Optimizations Backfire

Ivan Akulov

Accessible Component System Through Customization

Maya Shavin

Building Text Containers in Canvas

Aakansha Doshi

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

Top Core Web Vitals Recommendations for 2023

Barry Pollard

Mobile Deployments for Web Developers

Cecelia Martinez

React + WebGPU + AI – What Could Go Wrong? 😳

Aria Minaei

ESM Loaders: Enhancing Module Loading in Node.js

Gil Tayar

What’s New in Node?

Hemanth HM

5 Ways You Could Have Hacked Node.js

Rafael Gonzaga

What We Owe to Each Other

Bryan Hughes

18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps

i18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps 

Arisa Fukuzaki

The Future Stack of Code Review

Gabriel L. Manor

Start Building Your Own JavaScript Tools

Will Klein

Pushing the Limits of Video Encoding in Browsers With WebCodecs

Akash Hamirwasia

Anyone Can Be an Open Source Maintainer

Brittany Joiner

Rome, a Modern Toolchain!

Emanuele Stoppa

Luca Maraschi

Three Ways to Automate Your Browser, and Why We Are Adding a Fourth: WebDriver BiDi

Michael Hablich

Apache Kafka Simply Explained With TypeScript Examples

Olena Kutsenko

JavaScript Source Maps, Can We Do Better?

Kamil Ogórek

Woah! Can TypeScript Do That?

Nikhil Kumaran S

Maintaining a Component Library at Scale

Joran Quinten

Static Analysis in JavaScript: What’s Easy and What’s Hard

Elena Vilchik

Responsive Images for Your Website

Sergey Bocharov

Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte

Elliott Johnson

Building an IoT App With InfluxDB, JavaScript, and Plotly.js

Zoe Steinkamp

Scaling Distributed Machine Learning, to the Edge & Back

Jaxon Repp

Bring AI-Based Search to Your Web App

Sebastian Witalec

The Good, The Bad, and The Web Components

Zach Leatherman

Robin Marx

Create AR Face Filters With the Chrome Face Detection API

Jorrik Klijnsma

As developers we stand on the shoulders of giants, and it can be helpful to take a look at the past to gain a better perspective. In this talk we’ll briefly explore the past decade of backend development and architectural patterns. We’ve often ditched technologies in an attempt to make the developer experience frictionless. However we sometimes forget what we can learn from “the good old days”. What are you building: a monolith, a microservices system or something in between? A shift in how we see things can help us keep moving forwards.

Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface. But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.

Bun, Deno, and many other JavaScript runtimes have been hype, but do you know why? Is it that easy to make a runtime from scratch? I've been researching the secret behind Node.js' power and why there are so many new JavaScript runtimes coming up. Breaking down each key component used on Node.js I've come to interesting conclusions that many people used to say whereas in practice it works a bit differently. In this talk, attendees will learn the concepts used to create a new JavaScript runtime. They're going to go through an example of how to make a JavaScript runtime by following what's behind the scenes on the Node.js project using C++. They'll learn the relationship between Chrome's V8 and Libuv and what makes one JavaScript runtime better than others.

The Google Core Web Vitals team understand the amount of web performance recommendations is overwhelming and many don't know where to start. We've been working on identifying the 9 key recommendations (3 per Core Web Vital), which we think will have the most impact and which we recommend sites look at first. This talk will explain what they are, and why they are our top 2023 recommendations.

Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.

There has been no shortage of both fair and unfair criticism toward Web Components from a wide range of folks that build for the web, including but not limited to JavaScript Framework authors in supposed competition with the platform. In this talk I'll show you how to navigate and simplify the multifaceted landscape of web components, satisfying common criticisms and showing how you can Use the Platform most effectively today.

You’re curious about what Apache Kafka does and how it works, but between the terminology and explanations that seem to start at a complex level, it's been difficult to embark. This session is different. We'll talk about what Kafka is, what it does and how it works in simple terms with easy to understand and funny examples that you can share later at a dinner table with your family. This session is for curious minds, who might have never worked with distributed streaming systems before, or are beginners to event streaming applications. But let simplicity not deceive you - by the end of the session you’ll be equipped to create your own Apache Kafka event stream!

Ever loaded a font from the Google Fonts CDN? Or added the loading=lazy attribute onto an image? These optimizations are recommended all over the web – but, sometimes, they make your app not faster but slower. In this talk, Ivan will show when some common performance optimizations backfire – and what we need to do to avoid that.

In this talk you'll learn all about the <a href="https://twitter.com/sarah_edo/status/1628065696247857152" target="_blank">renaissance</a> Angular has been going through! First, we'll look into how the framework embraced fine-grained reactivity with signals to boost its runtime performance by orders of magnitude. After that we'll dive into applying a similar fine-grained approach to code loading to make everything load faster. At the end, you'll learn about the tooling you can leverage to land all this in your apps!

We use frameworks to make building our applications easier. Yet as the application scales, its performance suffers. There is no one thing, but rather a death by thousand cuts. Developers are under pressure, and they often choose the easy and quick path to deliver a feature rather than the performant path. The performant path is usually more work. So let's look at these two paths and imagine a world where the performant path is the quick and easy path.

What's an ORM? An Object-Relational Mapping tool (ORM) is a library to map a SQL table to a Class. In most cases, ORMs force the users to structure their code to have Model objects that include both data access and business logic. Once upon a time, I did several projects using ORMs as I followed the common belief that they would simplify the development and maintenance of projects. I was wrong. ORMs are often a hurdle to overcome for the most complex part of a project. As the next stop of my journey, I recommended people use the native languages of their databases, e.g., SQL. This works great for the most part, but it creates quite a struggle: there is a lot of boilerplate code to write that can be pretty tedious. I was wrong, again. Today I'm presenting you Platformatic DB.

Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!

How many ways do you know to do iteration with JavaScript and Node.js? While, for loop, for...in, for..of, .map(), .forEach(), streams, iterators, etc! Yes, there are a lot of ways! But did you know that JavaScript has iteration protocols to standardise synchronous and even asynchronous iteration? In this workshop we will learn about these protocols and discover how to build iterators and iterable objects, both synchronous and asynchronous. We will learn about some common use cases for these protocols, explore generators and async generators (great tools for iteration) and finally discuss some hot tips, common pitfalls, and some (more or less successful) wild ideas!

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

ChatGPT took the tech world by storm. Everyone talks about it, from your CTO to your hairdresser (at least my barber does). And there are many reasons why we should all be excited about it and many other AI/ML innovations. But how do you bring them into your tech stack, your website/backend, to work with your data and provide AI-driven search and data augmentation? There is a new generation of AI Native databases, which use deep learning models to find answers to natural language queries. We are talking about the ability to search through text, images, videos, DNA, or any unstructured data, all with a single query. The rule of thumb: if there is an ML model, we can search through it. Join me to learn about the foundation blocks (LLMs and vector embeddings, Vector Databases), how they all play together and most importantly - how you can build something yourself with open-source tech. And, of course!!! There will be a live-coding demo, where I will take you through the experience of building an AI-based search – with Weaviate, an open-source Vector Database – and adding it to an app. Now the question... should this be done in Angular, React, Vue or just pure JS ;) #MayTheDemoGodsBeWithUs

This talk is about an example approach on how to organise maintenance across multiple teams, where we talk about how we came to this plan at Jumbo and what benefits it brings to the Developer Experience while being able to continuously deliver features to our customers. We're dealing with maintenance, ownership, adding small features, upgrading from Vue2 to Vue3 and the culture that supports this way of working.

They gave me just 7 minutes! So this is a no-slides, just code talk! I'm gonna show you a Yarn/NPM/PNPM workspaces-based monorepo implementation and how we can speed it up. In particular, I'm using Nx on top to get better parallelization, the ability to define task pipelines, caching, and more. Curious? Join me!

Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance. How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough? That's what my talk's about.

In the fast pacing space of social media apps, some functionality could also be used for web applications. I am going to show you how you could use the feature flagged Face Detection API in Chrome. With a demo, we will explore the possibilities to implement face filters in your future projects. With the webcam access of a device, we add glasses by processing a video feed and using it for fun, finding that sweet spot where fun and learning come together.

In this talk, we'll take a look at the growing intersection of AI and web development. There's a lot of buzz around the potential uses of AI in writing, understanding, and debugging code, and integrating it into our applications is becoming easier and more affordable. But there are also questions about the future of AI in app development, and whether it will make us more productive or take our jobs. There's a lot of excitement, skepticism, and concern about the rise of AI in web development. We'll explore the real potential for AI in creating new web development frameworks, and separate fact from fiction. So if you're interested in the future of web development and the role of AI in it, this talk is for you. Oh, and this talk abstract was written by AI after I gave it several of my unstructured thoughts.

I love writing JavaScript. It feels lightweight, free-form, and flexible--all qualities that boost creativity and invite me to practice new and interesting techniques. Over time, I've developed lots of patterns and principles that help me day to day. In this talk, I'll show you a handful of them and then we'll look at how I apply them inside the AlpineJS codebase itself. It's gonna be a good time!

Google collects performance information from all sessions on opted-in Chrome browsers into its Chrome User Experience Report (CrUX) database. It then uses this information as a ranking factor for its search engine, but it also makes this information publicly available for everyone to view. I used this data to analyze and compare the performance of the leading JavaScript frameworks. In particular, I looked at the likelihood that websites built using each framework will have good Core Web Vitals (CWV) scores. Along the way I encountered several surprising results, and solved at least one mystery. See how your favorite framework ranks vs all the rest!

A journey through overwhelming ways to automate browsers. Join Michael on a journey to see what happens behind the scenes of "await page.goto('https://example.com');" et. al. See what pros and cons each of the three ways of browser automation have. Understand why we are adding a fourth - WebDriver BiDi.

Progressive Enhancement is the philosophy of providing a basic, functional experience to everyone, regardless of device, and adding additional layers of interactivity and delight as they are supported. The last decade of web development, focusing on SPAs, where JavaScript is a hard requirement, have made this philosophy very difficult – how do we make websites that are fundamentally built with JavaScript accessible to users without it? This talk examines the philosophy behind Progressive Enhancement, then focuses on some concrete examples (including a dive into Svelte compiler output!) of how we can build functional, reliable, and usable experiences for all, adding delightful interactivity for those who can support it.

HTTP/3 is the hot new networking protocol, available today! While you get most of its benefits out-of-the-box, there are also quite some things you can and should do to get maximise performance. In this talk, we look at optimizing JS payloads for the first network round trips, how browsers prioritize JS against other resource types, SPA vs MPA nuances, and how to optimally use the 0-RTT and 103 Early Hints features. We also look at the protocol's integration with fetch() and talk about the upcoming WebTransport!

HTTP/3 Performance for JS Developers

Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand? In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfill for them to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision for how authentication could look in the future and a blueprint for how to build the best auth experience today.

It's easier than ever to use JavaScript to build native mobile applications. But for web developers building in the mobile ecosystem for the first time, deploying cross-platform apps built with tools like Capacitor or React Native can be complex. Learn about the mobile-specific deployment considerations through the lens of a web developer, including the key differences between mobile and web, how to develop a deployment strategy, and how to evaluate tooling options.

This talk will walk you through some of the cool features in node that you might have missed.

These days, TypeScript is an industry default as it provides amazing DX with autocomplete, confident code refactoring and much more. But most developers only scratch the surface and doesn't use Typescript to its fullest potential. This talk would dive into the powerful and advance concepts of TypeScript like generics, conditional types, type guard, utility types for type transformations and much more using real world examples to better understand these concepts.

All languages are or were vulnerable to some kind of threat. I’m part of the Node.js Security team and during the year 2022, we've performed many Security Releases and some of them were really hard to think about. Did you know you can make money by finding critical vulnerabilities in Node.js? In this talk, I’ll show you 5 ways you can have hacked Node.js and how the Node.js team deals with vulnerabilities.

Quick, what is the quickest way to bring your product to the app stores? In today's landscape, trying to get into the app store can mean spending weeks deciding what tool to use and then rewriting your entire app. But the web, and mainly Capacitor, can simplify that. Take your existing web app, add Capacitor to the mix, and you have a native app that's ready for the stores! Let's see what's possible Capacitor and why it can help you ship faster.

Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring. While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.

Maintaining open source repos isn't just for "experts". Even junior developers can make great maintainers. Here's how I started maintaining a project and you can do it too.

Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!

Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts.

Why bother to optimize images? Images often account for most of the downloaded bytes on a web page. As a result, optimizing images can frequently yield of the performance improvements for your website.

We are all using static analysis tools like ESLint every day to ensure the better quality of our code. How does it work, and what is tricky about JavaScript, making writing a proper rule often not trivial?

The Internet of Things (IoT) is increasingly driven by sensor data, with devices taking measured actions based on everything from wind speed and direction, vital body functions, illumination intensity, and temperature. In this session we will showcase how to build a fully functional sample IoT monitoring application built with javascript and utilizing InfluxDB as its backend. With integrations to visualization libraries such as Plotly, creating automated alerts with InfluxDB as well as data downsampling.

Your first JavaScript tool might not be the next Babel or ESLint, but it can be built on them! Let's demystify the secret art of JavaScript tools, how they work, and how to build our own. We'll discover the opportunities in our everyday work to apply these techniques, writing our own ESLint rules to prevent mistakes and code transforms to make breaking changes easy to apply. We’ll walk through the fundamentals of working with an abstract syntax tree, and develop our understanding through a live-code. You will be amazed at what you can build, and together we’ll explore how to get started.

Somehow, the code review had the same jokes and process while the software development world changed daily. Join us to learn how to adapt this process to the modern stacks and make the CR process an efficiency party.

This talk will cover why and how organizations are distributing data storage and machine learning to the edge. By pushing machine learning to the edge, we can geographically distribute learning so that the models will actually learn different things relevant to specific locations. By delivering both edge database and compute in a single platform, more people can transition to a distributed architecture. The performance gains from this new architecture cements the value that mobile edge computing brings.

Open source has won, and it's the center of gravity for our community. Whether we're contributors to open source projects, commercial product engineers, companies, developer advocates, or something else, we're all a part of this community. And we owe it to each other, and to ourselves, to leave the community better than we found it. But how do we do that? What responsibilities do companies have to the community? Or developer advocates? Or OSS contributors? How are we failing those responsibilities, and how can we do better? In short, what do we owe to each other? Let's find out.

In the web performance circles, we tend to closely watch paint times, blocking times, and so many more metric times, which all contribute to analyzing the user experience. In 2023, we have begun to pay more attention to metric tonnes. DEADScript is a presentation highlighting the resources we’re loading in modern development, and JavaScript’s unique role in this disquieting environmental dilemma.

The current revision of the JavaScript Source Maps specification is over 12 years old. Throughout this time, the entire ecosystem has evolved immensely, but for some reason, we have done nothing to improve the debugging experience and are still stuck at version 3 of the specification. Can we do better?

In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.

Building apps using web technology is great; however, at times you may encounter limitations regardless of what framework you choose. During this workshop, we will talk about choosing a framework, common problems and how to overcome them. Table of contents- Introduction: The intertwined history of the Web and Apps- So many desktop app technologies! How do I choose one?- Common issues and how to think about apps- Conclusion

Beyond the Framework: Distributing Your Desktop App Like a Pro

Jonas Kruckenberg

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including: - User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.

0 To Auth In An Hour For Your JavaScript App

Asaf Shen

So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store! Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more

Bringing Your Web App to Native With Capacitor

You have been tasked with creating a collaborative text editing feature within your company’s product. Something along the lines of Notion or Google Docs. CK 5 is a feature-rich framework and ecosystem of ready-to-use features targeting a wide range of use cases. It offers a cloud infrastructure to support the real-time collaboration system needs. During this workshop, you will learn how to set up and integrate CK 5. We will go over the very basics of embedding the editor on a page, through configuration, to enabling real-time collaboration features. Key learnings: How to embed, set up, and configure CK 5 to best fit a document editing system supporting real-time collaboration. Table of contents:- Introduction to the CK 5 ecosystem.- Introduction to a “Notion-like” project template.- Embedding CK 5 on a page.- Basic CK 5 configuration.- Tuning up CK 5 for a specific use case.- Enabling real-time editing features.

Build a Collaborative Notion-Like Product in 2H

Witek Socha

Curious about how data works in the world of blockchain? Join Simon in an engaging session about The Graph, the decentralized indexing protocol that makes it easy for blockchain developers to search and query blockchain data.  Table of the contents:- Understanding blockchain data- Anatomy of a smart contract- Indexing blockchain data with The Graph- Accessing data on The Graph- Recommended subgraphs- Writing subgraphs overview

Querying Blockchain Data with GraphQL

Simon Emanuel Schmid

You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real. Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).

Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay

Ryan Albrecht

Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/).  In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.

Build and Deploy a Backend With Fastify & Platformatic

In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more. Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.

Make a Game With PlayCanvas in 2 Hours

Steven Yau

Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site. QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications. Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.

Building WebApps That Light Up the Internet with QwikCity

This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it. Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships

Build a Universal Reactive Data Library with Starbeam

Yehuda Katz

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Alba Silvente Fuentes

Roberto Butti

The workshop overviews key architecture principles, design patterns, and technologies used to build microservices in the Node.js stack. It covers the theory of the GRPC framework and protocol buffers mechanism, as well as techniques and specifics of building isolated services using the monorepo approach with lerna and yarn workspaces, TypeScript. The workshop includes a live practical assignment to create a currency converter application that follows microservices paradigms. It fits the best developers who want to learn and practice GRPC microservices pattern with the Node.js platform. Prerequistes:- Good understanding of JavaScript or TypeScript- Experience with Node.js and writing Backend applications- <a href="https://nodejs.org/en/download/" target="_blank">Preinstall Node.js, npm</a>- <a href="https://grpc.io/docs/protoc-installation/" target="_blank">Preinstall Protocol Buffer Compiler</a>- We prefer to use VSCode for a better experience with JavaScript and TypeScript (other IDEs are also ok)

JSNation 2023

The main JavaScript conference of the year