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

JSNation Live 2021

The Third Age of JavaScript

Shawn Swyx Wang

Vite: Rethinking Frontend Tooling

Evan You

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

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

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

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

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

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

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

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

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

Yarn in Depth: Why & How

Maël Nison

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

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

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

Panel Discussion: Code Quality

John Papa

Angie Jones

Jason Palmer

Anna Backs

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

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

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

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

Panel Discussion: Next Gen Build Tools

Fred K. Schott

Sharone Zitzman

Panel Discussion: The Future of JavaScript

Jordan Harband

Maggie Johnson-Pint

Rick Button

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. <h3>Transcript</h3> <h4>Intro</h4> Hi, everyone. I am Matteo Collina. Today, I'm going to talk about one of my favorite topics, logging. Just a little bit of a little bit of intro of me before we start. I'm Matteo Collina, @matteocollina on Twitter. I work for a company called NearForm. We are a professional services company based in Ireland. I'm also a member of the technical steering committee and I'm the co-creator of Fastify. And this is what we're talking about today, Pino. I also do... I'm also software architect. So I typically help companies run JS in production. I also write every week on my newsletter @nodeland.dev. Please subscribe.Anyway as part of my...Oh, this is actually important, maybe? I have a lot of downloads on MPM. This is...I ended up maintaining a lot of things in the ecosystem because as my activity, as a consultant, I tend to balance between client work and the need of the client with the maintaining Node.js ecosystem, and that is a good synergy.So, I end up implementing new libraries and new modules to solve problems that my clients have. And I bring those new things to my clients. As part of this initiative, I built various things like Fastify and Pino. <h4>About Pino</h4> [01:50] What's Pino? Pino is one of the fastest logger for Node.js. It has a minimal feature set. Well, we'll talk a little bit about the minimal and it has a great community. Pino's now been downloaded 6 million times per month, and we have four collaborators, maybe three, but whatever...four collaborators and it's version six and we are working on version seven. This talk, it's about version seven. Hey, this is actually nice. So, new things coming through.How to use Pino? Using Pino's very simple. You can just create your logger. You adjust a factory function. So you just create your logger and then you start doing info, error, debug those things that you like. We also have this child logger functionality that enables you to create a new child, with a certain set of properties already prepopulated. It's a new line, the limited Jason logger. So it produces a new line limited, Jason. So I said Jason followed a new line and another Jason followed a new line, pretty interesting.[02:50] It's fast. And you can use Pino to drastically reduce the overhead of logging inside your application. You cannot really bring it to zero because it's still doing IO in the end, but it helps reducing it quite a lot. Know that logging should be fast. It should not have very expensive logging because if you have very expensive logging, then you will be inclined to log less and not more. And you need more observability most of the time.There is this nice talk of the cost of logging that my partner in crime, David Mark Clements, and myself have done at Node conf 2016. It's a long time ago, but Pino's been around for a bit. So hey, happy days. And you can check it out because it's a really good talk. And most of what we say is still modern. There was a bunch of things that are different, and we're going to change in v.7. that we're going to talk about soon. <h4>Why Pino is so fast?</h4> [03:53] So, well, the first bit that I want to cover about Pino and how come it is so fast. How can it be fast? Well, I just want to give you a little bit of overall and thank you, James. These lights are amazing. This diagram is probably one of the best one we have ever done. This diagram explains the event loop and explains when we are doing IO and how can we achieve very performant IO in Node.js out right performance, Node.JS applications.So first and foremost, you have data that is coming on the event loop. So you have data, you have events coming in. Some IO has finished or maybe an HTTP request has arrived. When that lands in JavaScript land, it means that, well, before doing that, the event loop called some C++. So inside the C++ code inside, Node.js, then we kick off the JavaScript function, which is a function that gets executed. Which in turn, might resolve a promise or schedule a next stick. And therefore we have to process also the micro tick cues.[05:14] After all of that is said and done, we go back into the event loop. From the moment we start calling inside C++ to the moment that we return, the event loop is blocked. So there's no more event, no nothing. There's nothing happening IO wise in the system. This is not great. Well, or it is great in the sense that if I want to make it fast, if you make my code fast, but the time is I spend executing JavaScript needs to be as more as possible.So what happens if you have a slow IO operation...So, let's imagine in the context of logging that you're writing to a destination and you need to do some mangling and processing of your logs before moving them out. Now, because of you're writing all those logs and then therefore you have a slow IO operation and the amount of task concurrent task increase, right? But if the concurrent task, a synchronous concurrent task increase, then it also increase the memory consumption of your application.[06:44] But if the memory consumption increase, you have more garbage collection to do, which runs on the CPU. And so when the CPU runs, the GC grows, the memory grows, the GC grows in use. And then the CPU gets filled in the garbage collection activity, too. Now, that's the problem, right? You see? Because latency and throughput are deeply connected. So, if I have a slow operation in my code, then it will increase concurrency, which will increase memory pressure, which will slow down the CPU. And it's possible that, because of that slowdown in CPU, the buildup of events to process would go up again and enter some sort of catastrophic cycle where until the pressure is relieved somewhere, everything would be blocked.So, the trick here is to make sure that most of the process is done as fast as it possibly can. That's it. That's the answer to this. And it does not schedule anymore work. Now, this means in the context of logging, for example, that if you are having, if you want to send the same log line to multiple destinations, it will be problematic because we have, or especially even over a network, because if we try to do that, that data will stay alive for longer. And we are creating actually more work for our event loop. In Pino, we do all the data processing synchronously. So, whenever you call that in for whatever, you can be certain that using the default that all the processing is as done within the macro tick. So there's nothing scheduled to be executed later. This is phenomenal and really important for getting good throughput because we make sure that there is no memory located left, and it gets essentially cycled very easily.[09:12] Now, you could turn on the async mode in Pino so that the logging is then flashed after a bit. Okay? When, and is not written immediately, but it's a little bit tougher on the debugging side of things. We'll talk about that in a second. <h4>Worker_threads</h4> [09:33] In the original presentation about Pino from 2016, we had this light about the fact that Pino is more than a module. It's a way of life. Well, Pino, it is more than a module. And at the beginning, we flagged this because it was clear that we are proposing something radically different. And what were we proposing in 2016? Well, we were telling people, well, look, you need to implement your transport separate processes, or rely on your infra. So you log on standard output and your infra peak standard output and send it somewhere else. Yes, we still recommend that. That has not changed. However, for several teams have reached out to us and asked us, "Well, but we really need to execute the distribution in our process." The typical target is sending your log to Datadog or Elasticsearch or something like that. Well, Pino allows you to do that. Well, Pino will soon allow you to do that from the same process without blocking the main thread. We'll see that in a moment.[10:49] What happened was that all people started asking us for the same features. They wanted to format their logs. They wanted to send it to remote destination. They wanted to implement log rotation. This was a big thing. And really, they wanted to send multiple logs to multiple places at the same time. By us saying, well, you should do all those things out of process. We were saying to all those teams, "Well, you need to have your operations people or your DevOps to take care of those things."It was harder for most teams, to be honest. So and users keep asking those questions every day, every day, every day. So, hey, what could we do? Well, there was something that we could have done. We could have used worker thread.[11:45] Worker threads are now stable in all long-term support release lines of Node.js 12 and 14, of course. And they offer some easy synchronization primitives, for example, Atomics, and it is great. And maybe we could use them to build transports, right? Wow. Well, how? First of all, this idea is not new. It was originally showed to me Mark Martin, at the conference a few years back, where he was actually using a native add-on to do most of this work. And it was shown immense, a really good potential in term of throughput and performance. So, it was pretty great.So, what I did was, I started writing this library called thread-stream. What does thread-stream do? Well, it essentially wraps a worker thread in a stream based API. So it's not purely have Writable stream because it does not innate from Writable, but it's fast and you can write streams to it. You can't write buffers. So basically you called streams, right? And you just serve writing to your thread. And on the other thread, you need to provide a writable stream in. That's it. That's the only interface that you need to provide. So once you have done this thing, that has provided you both of those, it's actually pretty great because then now I have a one way to send data to my worker thread as a stream. But a stream is the interface that Pino have.[13:24] So, let's see how to use that. Well, what we do is, we want to have our main thread send logs to our worker thread. That's what we do. So, we will have two trades, one for main and one for the logs processing.How do they communicate? They communicate using a ring buffer. Using a ring buffer allows them to write to this buffer, mostly without locking the buffer itself. So one can write and the other one can consume without blocking between them. So, and I can always determine the part to read from that work.[14:04] So, I'm going to introduce you to pino.transport now. I build up all this tension, and hopefully we release it right now. So pino.transport is a new function inside Pino that allow you to do log processing in a remote transport, sorry, in a worker thread, that is wrapped as a transport. You can use modules, you can specify either a top dependency or a single file, with an absolute path. Or you can use a destination file or you can use a console and prettyPrint. So, that's it. So you can actually do a lot of those things in different ways. <h4>Demo</h4> [14:54] So, it's time for a demo. So, what I'm going to do, I'm going to open up Kibana and we'll see our way. So this is Kibana. We have last five minutes. This is nothing. And I have my script. So, first of all, I'm going to show you the example and this is the basic example of Pino. This just log things out and to standard output. So, what we used to do is Node example, and you see it prints this, but then I could get prettyPrinting. Note that what I've done here is...That's it. Okay. So what I've done here is, I have called executed Node modules being Pino ... slash pino-pretty to prettify and pluralize my locks.Now, what I can do instead with the transports is these new... Yeah, open anyway. Yay. Is use this new technique where I am creating my transport. I am specifying a file for Warren destination. I'm going to use a Pino Elasticsearch to send the data to Elastic, specifying the Elasticsearch note and doing prettyPrint. So, let's see how, if that works. So, I've been doing...And oh, note that this, the rest does not change at all, is exact same thing. And it's pretty cool, right? Because I can write my transport, not keep my app, but doing multiple destinations in the same process.[17:03] Well, let's run this. So if I run example transports, I got the exact same output as before. I only got these log lines added because in fact, this shows only the warning logs. Okay? Here it is. It's pretty great. And then we can see if this was updated. And now you can see that they also have logs inside Elasticsearch. And it's really nice because you can see that we have all our data in a really easy to process function, which Kibana gives us. So it's pretty great.Cool. I just wanted to thank you for watching this talk. If you have any more questions about Pino and Fastify and Node.js, please reach out to me @matteocollina or ping me an email at matteocollina@nearform.com.  Oh, the way, we are hiring for all sorts of roles. So, if you're interested, hey, check us out. Bye. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

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!

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. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

Colby Fayock

TensorFlow.JS 101: ML in the Browser and Beyond

Jason Mayes

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