Frontend Microsphere

hosted online
12.05.2020 / 5:30 pm - 9:00 pm (CEST)

Learn about innovative tools and hear about problem-solving methods that have revolutionized the approach to modern styling and data visualisation.

Agenda

5:30 pm - 6:00 pm
Networking
6:00 pm - 6:45 pm
Interactive maps in 30 lines of code

Interactive maps are a great way to represent your data, and today more than ever it’s important to properly and effectively visualize geographic information to your users. Although projects like Google maps or MapBox provide great out-of-the-box solutions, sometimes you might want to avoid the hassle that comes from using these tools, especially if you are concerned about pricing due to high volume of traffic on your websites.

In this talk, I will explain how you can create your own SVG maps that are lightweight, easy to use, and very customizable. Using live examples you will see step by step how to create a simple world map, and how you can style different parts of the map based on certain criteria using just CSS. All of that in just 30 lines of code!

Note: Basic knowledge of JS, HTML, and CSS is good to have for better understanding

6:45 pm - 7:30 pm
Sidewind - Tailwind but for state

Historically we’ve dealt with state in different manners in the frontend. We’ve gone from vanilla JavaScript to jQuery to Backbone to Redux and other modern solutions. The question is, are we there yet still after all this work?

In this talk, I’ll discuss the new wave of disappearing frameworks that attack the problem from a different angle. The goal is to give similar development ergonomics and power as earlier while minimizing bundle size.

In particular, I’ll focus on a light solution I’ve developed based on my recent experiences with Tailwind.css. Tailwind is a utility-first approach to styling but it doesn’t specify how to handle state. Usually, you combine it with a framework like React or Vue for this purpose. Due to the constraints set by my client, I wasn’t able to go through my regular route, however.

The tight constraints led to the birth of Sidewind. It’s a light, disappearing state management approach that fits perfectly with Tailwind while providing just enough API to at least add interactivity to websites. By design, it follows the pattern of progressive enhancement while leveraging recent improvements to browsers in order to take state directly to HTML.

7:30 pm - 8:15 pm
Webpack 5 Module Federation

An upcoming flagship feature in Webpack 5 that enables javascript applications to import code from separately deployed applications at runtime.

A game-changer to how we think about building applications in the javascript environment, Module Federation allows micro-services and micro-frontends to work as seamlessly as a monolithic application would.

As the creator of Module Federation – I’ll take you through what it is, why its useful, and how it can be used to solve various architectural challenges facing large engineering teams. Module Federation has been recognized as a true solution to challenges of micro-frontends, and solves it with no engineering overhead or need to alter codebases.

Module Federation work with a standard require() or import and takes a „just works” approach to solve complex infrastructure. I’ll detail and do some live coding where we take independent applications and federate them into one monolithic style SPA at runtime, demonstrate server-side federation, and streamed module federation over S3, as well as showcase more complex use cases.

8:15 pm - 9:00 pm
Discussion panel

Follow this event on