VueJs Amsterdam is one of the biggest Vue conferences. It comprises one day of FrontEndDeveloperLove and two days of Vue talks. In the second part of this series, get to know more about the event and what great speakers presented.
This is the second part of a series recapping the conference - see the first part of the recap here.
Personally, I don’t use Angular, as Vue and React do the job well enough for me. However, I still found this talk quite interesting, as nice and useful animations can be great to improve user experience no matter the framework.
Nevertheless, it is important not to overdo it and put too many animations that could distract and frustrate. Animations can enrich user experience when used for decoration, during micro interactions, showing loading progress, or clarifying steps or state in an application, but they should feel natural.
Elena showed a few examples of animations with use of Angular Material, SVG, RxJS and Angular Animations.
The first animation is a decorative animation which reacts to micro interaction. We have a pair of eyes which with use of animation imitate looking around when moving a cursor. Animation as such shows immediate effect to an action performed by a user
The next example is a progression animation. It turns a button into a line, which shows progression state. It can be used to make user aware that something is happening in the background and how long it still might take for an action to complete.
This example shows how easy it is to control animation state as well as how it can be reused for multiple elements.
Elena ended her talk with underlining that animations and interactions should feel natural.
Webpack is one of the most popular tools in the modern front-end development workflow. It is a module bundler which has much more to offer than just that, thanks to hundreds of plugins available. The current version of webpack is 4, and Sean Larkin’s talk was not only about new features of the next version – webpack 5 – but also explained how webpack works under the hood.
Webpack is using a plugin system for extending functionality. As Sean explained, the next version will be a boring version update, as it will not involve any major breaking changes for users. Most of the changes are internal, but what is intriguing is the fact that build times will be up to 98% faster. This is an extreme improvement over webpack 4, especially for large projects. It is possible thanks to a new caching algorithm that will be introduced in the next version.
Other changes to webpack include removal of deprecated features in webpack 5. This change can affect plugin writers, and when upgrading to a newer version it is important to ensure deprecated features are not used.
As a developer who is using webpack in almost every project, I am looking forward to the next release as I can tell from experience that production builds can take quite some time.
Microfrontends are an interesting idea derived from the microservices architectural pattern. Architectural decisions have an impact on the future, as they affect developers, users and business. Bad decisions can result in loss of time and money. Therefore, it is important to take into consideration a lot of aspects when building software.
To be honest, before this conference I only heard about microfrontends once, a few months earlier when going through my usual list of newsletters. It seems like an interesting idea, but I think that it needs a bit more time. Microfrontends is a new thing in the front-end development world and has not gotten high traction yet.
Ana’s and Sherry’s talk involved explanation of Web Components and how they can be used in an Angular application. Web Components are very interesting features, as they allow creation of reusable and framework-agnostic custom elements that can be imported and used directly in HTML files.
If you are interested in how compatible various frameworks are with Web Components, you can check out this link – https://custom-elements-everywhere.com/.
Web Components comprise three main features – HTML template, Custom Elements, and Shadow DOM. These unfortunately are not supported in all browsers. Polyfills are available, but some features might not work exactly in the same way. More about Web Components support across browsers over here – https://caniuse.com/#search=web components.
After an introduction to Web Components, Ann and Sherry continued to showcase how Web Components can be created and implemented while using an example app called Sherry’s Berries.
That's all for now on VueJS Amsterdam. If you were there too, feel free to add your thoughts about the conference in the comments below.
Want to learn about creating great user interfaces with Vue? Check out Kendo UI for Vue, our complete UI component library that allows you to quickly build high-quality, responsive apps. It includes all the components you’ll need, from grids and charts to schedulers and dials.
Thomas Findlay is a web and mobile developer, mentor, technical writer and consultant with almost six years of experience. He specializes in frontend web technologies including Vue.js, React.js, React Native for mobile applications, along with backend: PHP, Laravel, Python, Flask, Node.js and Express.js. Thomas has designed and developed websites and mobile applications for individuals and small and large businesses. Learn more about Thomas at https://www.codementor.io/thomas478
Subscribe to be the first to get our expert-written articles and tutorials for developers!