FREE WORKSHOPS AT JSNATION LIVE

The workshops from the list below are the complimentary part of full tickets.

The recordings of most workshops will be shared with full ticket holders after the conference.

Workshops will be run remotely via Zoom.

We are working on more sessions and will announce more topics soon!

Manfred Steyer

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.

Table of contents
  • - Using Module Federation to load separately compiled micro frontends
  • - Using Module Federation with Angular and the Angular CLI
  • - Sharing dependencies
  • - Strategies for dealing with version mismatches
  • - Communication between Micro Frontends
  • - Mono repos vs multi repos
Prerequisites

You should have some experience with Angular.

Workshop schedule & location

Date & time – TBD. Remote.

Bonnie Schulkin

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.

Table of contents
  • - Regular Expression Literal vs. RegExp object
  • - RegExp methods
  • - a. test (yes, or no?)
  • - b. exec (probably not what you want, let's talk about why)
  • - c. match objects
  • - String methods
  • - a. match, matchAll (so much better than exec ;-) )
  • - b. search (take a number)
  • - c. split (make me an array)
  • - d. replace (with fixed string or function output)
  • - Summary cheat sheets
  • - a. What does each method do?
  • - b. When would I want to use one over another?
Prerequisites

  • Node 12+
  • Array methods: map and filter
  • Knowledge 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.

Workshop schedule & location

Date & time – TBD. Remote.

Raphael Sztwiorok, Paul Kapała

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.

Table of contents
  • - Introduction to CI/CD (essential info only, up to 10 minutes)
  • - Basic delivery pipeline: dependencies, builds, deployment, restarting app
  • - Managing different Git workflows: Gitflow, trunk-based development
  • - Securing code and Production with PR’s and GitHub Branch Protection Rules
  • - Improving JS code quality in 5 minutes with smart automation
  • - Testing: what to test, when, and what tests should I use
  • - Browser tests: Cypress, Puppeteer, Selenium
  • - Visual tests: comparing new website versions with Production before manually accepting deployment
  • - SEO in delivery pipeline: Google Ligthouse, link scanning, SSL checker, image compresion
  • - Tips and tricks to speed up your delivery pipelines (trigger conditions, cache, Docker, changeset deployments, parallelization)
  • - Troubleshooting and edge cases: how to debug and evolve pipelines to fix problems
Prerequisites

  • Code Editor, Git installed
  • GitHub account

Workshop level

All levels.

Workshop schedule & location

Date & time – TBD. Remote.

Ian Johnson

Painting with Data: Intro to d3.js

Table of contents
  • - Introductions: Who am I and who are you?
  • - A quick tour of d3.
  • - Setup.
  • - The Data: fetching & loading; CSV & JSON in the browser.
  • - Part I: The Visual. We build up a scatter plot using d3 and SVG. We focus on fundamentals so you can feel comfortable building with your own data later.
  • - Part II: The Magic. This is where we depart from pre-built capabilities of most charting libraries and explore the possibilities opened up by d3.js.
Workshop schedule & location

Date & time – TBD. Remote.

Anjana Vakil

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.

Table of contents
  • - Introduction: What is dataviz?
  • - Answering the right questions
  • - Project 1: What devices are users browsing with?
  • - Features & encoding channels
  • - Project 2: (How quickly & reliably) are integration tests passing?
  • - Interactivity & user inputs
  • - Project 3: How fast are (certain types of) API responses?
  • - Takeaways & next steps
Prerequisites

Familiarity with JavaScript will be assumed, but developers of all levels are welcome.

No development setup required! All you need is a browser, as we'll do all our work in Observable (signing up for a free observablehq.com account is optional, but not required).

Workshop schedule & location

Date & time – TBD. Remote.

Ed Ropple, Dylan Jhaveri

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.

Workshop schedule & location

Date & time – TBD. Remote.

Mikhail Kuznetcov

Vue3

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.

Table of contents
  • - Introduction to Vue3
  • - Composition API
  • - Core libraries
  • - Vue3 ecosystem
Prerequisites

  • IDE of choice (Inellij or VSC) installed
  • Nodejs + NPM

Workshop schedule & location

Date & time – TBD. Remote.

Alex Lobera

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.

Table of contents
  • - Micro frontends architectures
  • - How to share dependencies between apps
  • - How to break up a monolithic app into multiple sub-apps
  • - Implementing soft navigations between micro frontends
  • - Micro frontends with monorepos
  • - Tools, frameworks, and libraries: Module Federation, Lerna, Next.js and React
Prerequisites

You should have some experience with React.

Workshop schedule & location

Date & time – TBD. Remote.

Zachary Conger

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.

Table of contents
  • - Set up a GitHub Action basic JS build workflow
  • - Add Dependabot for SCA dependency checking
  • - Add StackHawk or ZAP for DAST
  • - Add CodeQL for SAST
Prerequisites

GitHub Account, Docker + Docker Compose knowledge.

Workshop level

Intermediate.

Workshop schedule & location

Date & time – TBD. Remote.

Miroslav Malecha

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.

Table of contents
  • - InfluxDB open source project - Introduction
  • - IoT Center Introduction
  • - Hands-on Workshop - Install IoT Center
  • - Hands-on Workshop - Data Explorer & Flux lang examples
  • - JS Client - Introduction (show code examples)
  • - Hands-on Workshop - Add geo widget for mobile devices
  • - InfluxDB as monitoring platform for node.js
  • - Q&A
Workshop schedule & location

Date & time – TBD. Remote.

Alyssa Nicoll

The Tour of Heroes: Unbridled Unicorn

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

Table of contents
  • - Dive into the Tour of Heroes demo application like never before!
  • - Learn about integrating SASS into your Angular Project.
  • - Learn how to include a Component Library into your Project. (We will be using Kendo UI but the principles are to implement a UI Library are pretty universal.)
  • - Play around with customizing styles and writing custom CSS from scratch.
  • - Go over UI/UX principles and implement them on the fly.
  • - Take part in UI challenges throughout the Workshop and win prizes!
Workshop schedule & location

Date & time – TBD. Remote.

Manfred Steyer
Austria

Trainer, consultant and programming architect with focus on Angular. Google Developer Expert (GDE) and Trusted Collaborator in the Angular team who writes for O'Reilly, the German Java Magazine, and windows.developer. Regularly speaks at conferences.

Bonnie Schulkin
Teacher, Coder & Testing Enthusiast, USA

In her 18 years in the software industry, Bonnie has discovered that she loves all things testing (how great is it when testing reveals exactly what you need to fix about your refactor or new feature?). She's particularly devoted to Test Driven Development for its emphasis on planning before coding. Bonnie is equally passionate about teaching, and she's pleased as punch to be producing online content full time. She feels weird writing about herself in the third person.

Raphael Sztwiorok
Buddy, Poland

CTO at Buddy with 10 years of experience in CI/CD and over 15 in software development. Began by programming GIS tools for satellite and aerial imagery analysis for government agencies. Co-creator of Springloops, the first SaaS tool with version control and deployment tools. Co-founder of Buddy and leader of the company's developer teams. Loves sharing insight on process automation, containerization, and the challenges of application scaling and security.

Paul Kapała
Buddy, Poland

Senior Full Stack Developer at Buddy with 9 years of experience in IT. Automation aficionado, lover of clean code and function programming, and a lifelong fan of soccer and Liverpool FC.

Ian Johnson
ObservableHQ, USA

Ian Johnson is a data visualization developer and software prototyper at ObservableHQ. Ian has been turning data into pixels for more than 15 years, cheering on the developments in web standards and open source technologies that enable ever richer forms of communicating data.

Ian helped found the Bay Area D3 User Group, a community of thousands of d3.js practitioners, to learn from other like-minded folks. He has prototyped software and visualizations for companies, researchers and causes. He enjoys sharing his understanding and is often tweeting about data visualization and the creative process.

Anjana Vakil
ObservableHQ, USA

Anjana suffers from a chronic case of curiosity, which led her from philosophy to English teaching to computational linguistics to software development. As a developer advocate at Observable, these days she codes & teaches from her home base in San Francisco; in the before-times, you could find her speaking at events around the world. She loves to share the joy of programming and advocate for a more diverse, equitable, and ethical tech industry. Ask her about the Recurse Center & Outreachy, she’s an alumna of both!

Ed Ropple
Mux, USA

Ed's a senior developer and video producer on the Community team at Mux; when he isn't churning out screencasts about how you can better use Mux Video and Mux Data and interviewing Mux success stories, he even sometimes gets to write a little code. Usually the one asking when we're rewriting it in TypeScript.

Dylan Jhaveri
Software Engineer @Mux, USA

Dylan is a Senior Software Engineer at Mux, a startup building online video infrastructure for developers. Dylan works on the DevEx team to help developers deliver smooth video to their users. Previously he co-founded Crowdcast, a live video streaming platform.

Mikhail Kuznetcov
ING, Netherlands

Mikhail is a passionate developer who loves to share his knowledge with the world. As a team leader, public speaker, workshop organizer, teacher of JavaScript and Vue.js, he has trained developers worldwide.

Alex Lobera
Hopin, UK

Principal engineer at Hopin. Coach of high-performing development teams. Alex is an experienced engineer and decision maker with over 17 years of experience in the software industry. He is passionate about scaling React apps and teams.

Zachary Conger
StackHawk, USA

Zachary is a Senior DevOps Engineer at StackHawk. As a startup junkie, he has played many roles including operations, engineering, product development, and leadership. In his current role, he is focused on the evolving CI/CD landscape and how this diverse set of technologies can be used to improve the productivity of software developers, and the quality of the code they produce. Outside of work he enjoys music, photography, cycling, and various pastimes.

Miroslav Malecha
Bonitoo, Czech Republic

Miroslav Malecha is Director of Product management at Bonitoo.io. He has a background in computer science and has been focused on defining software products in data science, enterprise architectures and cloud computing. Prior to joining Bonitoo, Miroslav held product management positions at Good Data and Hewlett-Packard Software. When Mirek is not working, you can find him speeding down hills on his ebike in the forests near Prague.

Alyssa Nicoll
Progress, USA

Alyssa is an Angular Developer Advocate for KUI and a Google Developer Expert for Angular. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences Internationally. She streams weekly on the Angular Air podcast and Twitch CodeItLive channel. She enjoys gaming, scuba diving, and has a little one that fondly goes by "Mr. Milks".