Publishing, Automating and Monitoring your JS App on Azure

In this workshop you're going to deploy a JS app to our Azure Services. Obviously, we don't want to do this manually, so you're going to use GitHub actions to streamline this experience. Now that our App is on Azure, we want to make sure that we're aware of crashes and performance issues, so we'll add some App Insights in the mix. During the workshop, we'll show some cool features you could leverage!

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

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.

Build an IoT App With InfluxDB

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 by 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.

JS Security Testing in GitHub Actions

Leading teams are realizing that periodical penetration testing and security audits is not enough when code is being shipped daily. Instead, these teams are using developer-centric tools to run automated security testing in a CI/CD pipeline. Join Zachary Conger as he walks through how to automate application JS security testing using GitHub actions.

The Crash Course for Continuous Code Improvement

Every business today is a software business. Software is made of code. And code is meant to be improved. Yet developers get stuck reactively monitoring, investigating, and debugging code to fix issues. They lose too much time manually searching through logs, APM, and observability tools. Instead, they could be using that time to innovate. In this workshop, the participants will be introduced to the continuous code improvement platform that can help them see errors in real-time and gives them the tools needed to automate how they respond. Participants will learn how to instrument Rollbar's lightweight SDKs into their applications to capture uncaught exception errors as they happen along with the surrounding context and details. Participants will walk away with complete visibility on every error in their application, coupled with all the important data needed to make resolution painless.

Getting Comfortable with Angular and UI

A workshop for UI and Angular beginners alike. Let's pull down the Tour of Heroes app (written by 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.)

Jamstack eCommerce 101

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 by 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.

Build your own live streaming platform

In this workshop we will go over the basics of streaming video over the internet including technologies like HLS and WebRTC. We will then build our own React app to play live streams and recordings of live streams.

Full Stack Cloud Development with Next.js, AWS, and Tailwind

In this workshop you'll learn how to build highly scalable cloud APIs with AWS and integrate them with Next.js and style them using Tailwind CSS.

We'll build out a multi-user blogging platform, implementing a database with DynamoDB, authentication with Amazon Cognito, and a GraphQL API with AWS AppSync and connect to the app from the Next.js client using AWS Amplify. Users will be able to edit and delete their own posts as well as add rich media like cover images using Amazon S3.

By the end of the workshop, you should have a good understanding of how to build full stack apps on AWS with Next.js and AWS Amplify.

Building a Hyper Fast Web Server with Deno

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 by utilizing Hyper under the hood and boost the performance for your web apps.

Shipping High Performance React Apps with Datadog and Real User Monitoring

The way you observe your Web App’s performance over time can make or break the experience of your users. Fortunately, you can continually stay informed about the health of every delta in your UX using Real User Monitoring, and immediately identify any issues that are holding your current users back. With it, you can manage optimizing how long it takes for users to load your App on mobile, round trip times for asset fetching, the average latency between user actions and component updates, and more (by adding a small block of code in the right place). In this workshop you’ll learn how to leverage Real User Monitoring in order to track and resolve the issues that prevent your App’s greater adoption, and retention. We’ll discuss how to think about performance from the user perspective, gauge what metrics are important to monitor continuously, and define a good strategy for alleviating the latencies and issues that affect your users most.

Regular Expressions in JavaScript

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 by multiple spaces with the same punctuation followed by 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.

Data Visualization for Web Developers

Data Visualization, aka "dataviz", is much more than drawing some pretty charts; it's a process of discovering & communicating insights derived from data. As web developers, we are luckily swimming in data about the apps we build, the users who interact with them, and the development workflows we use to build them. We may be used to looking at certain visualizations of that data - e.g. a simple line graph or bar chart presented by our analytics platform - but many developers don't realize that with very little time & effort, we can build our own visualizations to dig deeper and answer the specific questions that really matter to us and our work.

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 & techniques you need to start using dataviz to better understand your code, your projects & your users, and make better data-driven decisions as a developer.

DevOps 2.0: The ultimate JS delivery pipeline

Buddy is a CI/CD tool that lowers the entry threshold to DevOps by 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.

Micro-Frontends with Module Federation and Angular

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.

Painting with Data: Intro to d3.js

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.

Micro Frontends with Module Federation and React

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.

Web Components in Action

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.

Intro to AI for JavaScript Developers with Tensorflow.js

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.

Vue3: Modern Frontend App Development

The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.