Frontend Love - Eindhoven Edition
Tags: react, vue, webdev, javascript
Published: 2019-11-22 19:19:27

---
title: Frontend Love - Eindhoven Edition
published: true
description: An article about Eddy Vinck's experience of the first Frontend Love conference in Eindhoven
tags: React, Vue, webdev, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/f448o8z9poev8kcbig75.jpg
---

Today was the first edition of the Frontend Love conference in Eindhoven. This is a big deal, because the organizers (a company called [Passionate People](https://passionatepeople.io/) and [Frontend Love](https://frontenddeveloperlove.com/)) usually only hold conferences in Amsterdam and there are currently few to no other conferences in or near Eindhoven, even though the city has a large tech scene.

And the best part: **the conference was FREE**. What better way to test whether there is enough demand for conferences in Eindhoven? I really hope we'll be seeing more conferences from them in Eindhoven :)

The topics were:
1. Building Test Strategy for Vue.js Applications
2. WebGL Demo with THREE.js
3. Mistakes I made building React Async
4. The evolution of the modern web (and Nuxt.js) 
5. Advanced Vue.JS Features and Patterns in the Enterprise
6. Angular & ElasticSearch: Combined Forces
7. One component a day keeps the doctor away
8. native-like PWAs in Web Components

The conference was co-organized with [ISAAC](https://www.isaac.nl/en/), an agency from Eindhoven in the field of e-commerce, e-finance, integration, artificial intelligence, deep learning and virtual reality.

![The conference room](https://thepracticaldev.s3.amazonaws.com/i/h8t8jwrqv7xyi2lkj2e6.jpeg)

I'm personally not very interested in Vue since I primarily use React, but the talks were still interesting. I really liked the variety of topics covered in the talks. The amount of web component usage was also great to see!

The talks I enjoyed the most were "Mistakes I made building React Async", "One component a day keeps the doctor away", "Building Test Strategy for Vue.js Applications" and "Native like PWAs in web components". I'll write a little bit about them next.

![Mistakes I made building React Async](https://thepracticaldev.s3.amazonaws.com/i/3hkgaq1c8yn0xk6e42qk.jpg)

## Talk: Mistakes I made building React Async

This talk was given by [Gert Hengeveld](https://twitter.com/GHengeveld), a Senior Software Engineer at Chroma.

Gert talked about his library React-Async and what he learned while maintaining his project. 

He talked about technical details such as how to maintain a monorepo and how to do releases properly with tests that include older versions of React, for example. He called these "backwards tests" and I thought this was a good idea because  React Async users aren't all using the same version of React (obviously). 

Another thing he mentioned was that marketing (i.e. writing blog posts) is very important if you want people to actually know about your project. It's not all about the source code. 

If you're into open source I would highly recommend checking out his talk on the [Frontend Love YouTube channel](https://www.youtube.com/channel/UC1nBp6ouBB1o5P8YvPznPOw) when it is available.

![Lucien's talk about web components](https://thepracticaldev.s3.amazonaws.com/i/8d9vkree8f0bgfe8r63y.jpg)

## Talk: One component a day keeps the doctor away

This talk was given by [Lucien Immink](https://twitter.com/lucienimmink), a Software Architect at ISAAC. 

Lucien talked about web components and how they can be used to share logic between web applications. He also covered that can be combined with any front-end framework that supports them and provided some examples in Angular, Vue and React.

Lucien mentioned LitElement and Stencil.js as libraries you can use to help you make web components.

He also mentioned that he uses web components in his side projects, and he showed a really cool web component that will fetch a cover image of an artist when given the name of the artist.

![testing ice cream cone: automated tests are better than manual tests](https://thepracticaldev.s3.amazonaws.com/i/7f2tx1cfuuoeptul33wo.jpg)

## Talk: Building Test Strategy for Vue.js Applications

This talk was given by Anastasia Dragich from booking.com. 

She talked about how testing your front-end applications and the benefits of testing. Fortunately (for me) this talk didn't actually concern just VueJS and was very applicable to other frameworks at all. 

Anestashia provided some really good testing insights about how to focus your testing efforts in the front-end. The gist of it is that you should write testable code and primarily write tests that can be executed fast, like unit tests. End-to-end testing is also really important, but these test are slower and should only be done when absolutely necessary. 

She also covered testing 'negative paths', which means that you can try to intentionally test use-cases that should fail. This is to make sure that your 'happy path' tests are not going to be false positives.

She ended the talk with the motion that you should only do testing if you benefit from it. It sounds obvious, but sometimes developers tend to over-engineer or do other cool things that aren't really necessary or beneficial to them or their company.

![Live coding a PWA with an app shell](https://thepracticaldev.s3.amazonaws.com/i/gv86y8kyvziqgkzurxbf.jpg)

## Talk: Native like PWAs in web components 

The last talk was by Jad Joubran who is a Google Developer Expert, Microsoft MVP and a Web Consultant.

Jad had a different kind of talk. He started with a question for an improv live-coding talk. The oudience and Jad decided on a  unicycle repair application, so that is the theme of the PWA he was going to create.

Jad's talk had a lot of practical content. It was live coding, after all. I'll cover some of the things he talked about. 

Jad mentioned that an app shell makes a lot of difference if you want your PWA to feel like a native app. An app shell is basically the 'frame' of your application and is the first thing that is loaded when a user first visits your application. 

This app shell is then cached through the power of service workers using Workbox. Jad used `workbox-webpack-plugin` to automatically generate service worker files for production builds, which saves you a lot of time when you do caching with a service worker.

Another neat tip is using the "system-ui" font. It is supported by the majority of browsers, but you can always provide fallback fonts. The reason why "system-ui" is so awesome is because it utilizes the system font that is already available on your device like a lot of native apps do. This makes your application more performant since you will be saving the user one or more network requests if you were going to use custom fonts.

Something cool that Jad also showcased was using native scroll snapping in  CSS. You can read more about CSS scroll snapping [here](https://css-tricks.com/practical-css-scroll-snapping/).

Finally, Jad deployed the application with [Surge](https://surge.sh/) so everyone in the audience could check it out:

![The demo app for the last talk](https://thepracticaldev.s3.amazonaws.com/i/qvpbnq8mu4nfvo20dcue.jpg)

Unfortunately there was a typo in the app name in the webmanifest :'( You can take a look at the demo here: https://superficial-flock.surge.sh

## Final words

A big thanks to Frontend Love, Passionate People, ISAAC and all the speakers for making this conference awesome. I really hope we'll see more conferences being organized in Eindhoven in the future.

Also, if you're interested in any of these talks: they are going to be on YouTube at some point. You can keep an eye on the [Frontend Love YouTube channel](https://www.youtube.com/channel/UC1nBp6ouBB1o5P8YvPznPOw). 

*✍️ If you enjoyed this post you can follow me here on DEV or on [Twitter](https://twitter.com/Veinq_), as I am going to post more on DEV in 2020.*