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.
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.
- Private fields and private methods
- Optional chaining
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
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.
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.
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.
Building Fast Angular Applications from End-to-End
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.
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.