AmsterdamJS Nation conference

On Friday the 7th of June I visited the AmsterdamJS Nation conference for the first time. The main event was held in a Church in Amsterdam, the Zuiderkerk next to the metro station Nieuwmarkt. In another venue, a synagogue called Uilenburgersjoel, the NodeJS talks were given. In this article, you can find my summary and takeaways from the talks I listened to at the conference in the main hall. It was a beautiful sunny day (they even handed out ice cream!) and the first keynote talk was given by Kyle Simpson.

That talk gave an inspirational start of the day. Kyle talked about the importance of the open web and how he started out as a little boy deconstructing a website by using the ‘view page source’ button. He made the comparison of the journey of creating the web with launching rockets into space. We still have a long way to go and it is our responsibility to make sure the web stays open in the future. We need to have a vision, even though we have to make the journey in small incremental steps. JavaScript should also be for the people, not created by machines. Code should be readable and understandable for people, that makes the web open. He states that the open, incremental, collaborative technologies such as JavaScript, HTML, and CSS will always win from closed-off technologies like apps and Flash.

Kyle stated that we should always bet on JavaScript, it has continuously been performing above expectations, even old code from 25 years back can still be used which makes it very robust for developers.

In ES4 they tried to implement a lot of changes to the language, which failed. With ES6/ES2015 a lot of changes have been made to the language, which made it hard for a lot of developers to keep up. Incremental changes to the language have been landed better for the public.

Kyle Simpson

Finally, he showed us some new JavaScript features which will land soon:

• Private fields and private methods
• Optional chaining
• BigInt

Securing the DOM from the Bottom Up

The next talk was about the vulnerability of the DOM by a web security engineer at Google. A lot of websites are vulnerable to XSS (cross-site scripting) attacks. This can be prevented by using trusted types in the DOM. This is an API which you can define in the HTML header:

Content-Security-Policy: trusted-types template

You can define your policy with JavaScript. The main idea behind it is that you should use objects instead of strings.

More information about this project you can find here

Testing Tools and Their Friends

Another talk was about testing tools by the head engineer of Cypress. He states that from the user’s perspective, E2E tests are the most important ones to run. We can use Cypress for this, which provides methods for clear and understandable code. With Cypress, you can test the user flows. If you use the Istanbul code coverage tool combined with Cypress, you will know how much of the code you covered in the tests. And when you use Cypress combined with Percy, styling changes will also be covered during tests. It would be preferred to use Cypress in your CI/CD pipeline, when you do a branch merge for example.

Webpack 5 — Why Breaking Changes? What is next?

Webpack creator Tobias Koppers’s talk was about breaking changes for Webpack 5. The most important change is that Webpack won’t provide automatic polyfills for Node.js core modules anymore. This way, Webpack decreases the bundle size. As a developer, you should choose for yourself which polyfills are needed. Webpack 5 will include improved persistent and long term caching. There is a new algorithm for useful filenames. For example, instead of 1.bundle.js the name src_bundle_lazy_load.js will be used. Also important, the minimum node version will be 8. For more information on the changes in Webpack 5, you can find the slides here

Functional lenses for contemporary frameworks

The next talk was by Andre Staltz about functional lenses for contemporary frameworks. He is a guru on functional programming and stated that lenses can be useful for state management. He compared lenses to getters and setters but composable and they won’t mutate the original variable. First, he explained what functors and profunctors are. A functor is a conversion from A to B, a mapper. A profunctor is a conversion of A to B and back. A lens is a conversion from one data structure (or state object) to another and back. We can make use of lenses for state management because for components it will seem like they work on local state, but they work with a global state in reality. This state is serializable, immutable and hierarchical. There are fewer concepts to learn: the reducers, actions, store, and dispatch are not needed anymore.

André Staltz

Open Source: Another problem of complexity

Full-time contributor/maintainer Henry Zhu at Babel explained the hardships of being an open source developer. It is hard to get by with open source, even with projects such as Patreon. When you are living on donations, people are harsh when a bug is not yet fixed and they paid money for it. He finds his relationships with his sponsors a bit awkward because he feels like he always has to earn his work, because other people pay him. You feel like other people are watching you or micromanaging you so you have to keep on working. You also feel weird about spending money. There is always too much work to do, so it would be great if sponsor companies can also work on user stories for open source projects.

Henry Zhu

Lightning talks

From the lightning talks, the one about the search for app-iness in progressive web apps was very inspiring. Jamie Maria Schouren from DEITY showed us websites are still too slow nowadays but native apps have disadvantages. The AMP project (Accelerated Mobile Pages) was launched which provided fast landing pages but the PWA (Progressive Web Apps) made the difference. They are fast and reliable and can also make use of native features. By 2020, 50% of online purchasing would be considered using web apps as predicted by Gartner.

Another important talk was about accessibility by Elsevier. The most important takeaway was to avoid using the DIV tag when there are appropriate semantic HTML tags to use.

The speaker advised the listener to use the keyboard to navigate through a website and a screen reader. Using accessibility tools such as WAVE and Tota11y can help making a website more accessible. Removing or disabling the CSS can tell you a lot about the structure of a website which is seen by the screen readers.

Nicholas Pringle

Building Fast Angular Applications from End-to-End

Minko Gechev from the Core Angular team showed us the performance improvements of Angular 8. The network performance has improved by using differential loading which is very interesting. Older browsers need polyfills for newer JavaScript features but newer browsers don’t so depending on the user agent certain packages will or won’t be downloaded. He also explained lazy loading with code splitting on component level with ngx-loadable and hero-loader. On route level, you can use module loading for when routing a page. Problems arise when there is a slow internet connection. Then, prefetching can be used. Minko explained a prefetching strategy with the use of Google analytics, using a model to predict which page will be loaded, mapping the page to a router and loading the JavaScript routes into chunks. When a user is browsing, the chunks which are likely needed for the user will be prefetched. He mentioned the library Guess js which helps with the prediction of the user behavior.

When it comes to performance budget, you can specify ‘budgets’ in the Angular json now to set warnings and errors when the app becomes too big.

Immer, Immutability and the Wonderful World of Proxies

Michel Weststrate showed his open source library Immer. This library provides a function to use as reducer for creating immutable new state. Earlier that day he won the open source award with the Immer library. He explained that we should not use proxies for daily work, only when you want to create a framework. Proxies can be powerful but undetectable (there is no proxy type) and dangerous, they are a low-level framework tool and can be very confusing to understand.

NodeJS hall

Turbo charging 2D on the web

Mat Groves from Goodboy Digital showed us a comparison of 2D rendering techniques. We can use plain HTML/CSS, canvas, or WebGL. WebGL has the best performance from this list, it is super fast. However, the usage of WebGL is complicated, it has a steep learning curve. Moreover, it can drain a device’s battery and unfortunately there is a maximum usage of 4 WebGL elements per page. For usage of 2D WebGL rendering engines we can use the PixiJS and CreateJS libraries. Mat also mentioned the future for 2D rendering, WebGL2 was the next step in performance improvement but did not bring anything new. WebGPU will be next gen, will be a new API faster than WebGL where we will have more power. WebGPU has more control over the GPU. Finally, Mat mentioned that Webassembly will soon be the place to make rendering engines. It performs very fast and opens the door for other tools like unity.

Automated Performance Testing With WebDriver

Christian Bromann talked about automating performance testing with WebDriver. Christian discusses three metric types, milestone based, score based and resource based metrics.

He shows a few metrics to measure the performance (milestone based). One way is to calculate the time to first byte. Another rendering metric is the loading of a webpage in time: the first render to the screen, the first contentful paint, the first meaningful paint and the time to interactive. Speedindex is another metric to calculate how quickly the content of the page is rendered.

Christian shows that there is also a way to perform user-centric performance metrics, as used by Google. The steps they check are the following:

• Is it happening?
• Is it useful?
• Is it usable?
• Is it delightful?

At Christian’s company, they use Webdriver combined with Speedo, that executes regression performance tests.

His takeaways were that functional testing and performance testing should be done separately. Keep the performance tests simple and give them a separate job name.

There are generic performance testing tools such as Lighthouse, but you have to keep in mind what you want to test, maybe you need more specific metrics for your app. But when you want to use generalized metrics, score based metrics work best.

Using WebGL and PWA to build an adaptive game for touch, mouse and VR devices

David Rousset from Microsoft gave the last talk of the day about building 3D games for VR devices. Mostly David showed demos of his games. He used the Babylon js library for the creation of his games in WebGL (1 and 2). It is an open source 3D engine. After that, he used WebVR in Babylon JS. Then he concluded the talk by adding PWA to the game for offline experience with the help of the PWAbuilder.

If this article made you curious, you can view the talks on Youtube, the whole day at the venues has been recorded:

• Talks given in the main hall
• Talks given in the Node JS hall

I haven’t written about the talks at the Node.JS hall but I’ve heard they had some awesome talks with flying drones…