5 Highlights from VueJS Amsterdam 2019

On February 14 and 15 this year, Amsterdam Theatre played host to ‘VueJS Amsterdam 2019’ — the largest Vue.js conference in the world.

Vue.js is the web’s most popular JavaScript framework at the moment, and it was especially exciting for us here at the Mobile Company as the event was on just downstairs in our very own building!

We recently moved into the second floor of the beautiful Amsterdam Theatre, and it was great to experience the theatre in all its glory doing what it was built to do: hosting a huge event on an international scale.

I was lucky enough to attend the conference for half a day on Thursday. That morning, I entered the main foyer and proceeded to go scout around and soak up the atmosphere and excitement of the event — and also to see what swag was on offer!

After a little mingling and some coffee, we all filed into the main auditorium and I got my first experience of the focal point of the building. Huge screens behind the stage projected the timetable as well as the list of speakers. A giant looming countdown timer counted down towards the official launch of the event. The excited buzz within the auditorium grew louder and louder.

Among the list of speakers were notable figures such as Evan You (creator of Vue.js), Alexandre Chopin (Nuxt.js co-author), Natalia Tepluhina (CTO of Vue Vixens) and many more.

Evan You (founder of Vue.js)
State of the Vuenion

Evan You kicked off the day with an interesting overview of where Vue.js currently stands in terms of numbers, popularity, architecture and roadmap, where they are headed and what’s planned for the future of the framework.

He mentioned the recently released version 2.6.0, and gave examples of scoped slots and how they’re an improvement on the existing basic component slots paradigm.

Looking forward to the future, Evan highlighted some of the key features planned for Vue 3.0, including:

• The adoption of TypeScript for the core library
• Modularisation of the Vue.js codebase
• The introduction of proxy-based observation with ES2015 to gain double the speed with half the memory consumption
• Pre-configured webpack features such as tree-shaking (to ensure the library that you package in your application is as small as possible), code-splitting, hot module replacement, error overlays etc.

Check out a detailed writeup of what was covered in this blog post.

Evan also discussed some of the more non-technical aspects of running a project as popular as Vue.js. One major challenge with maintaining the project as it continues to grow and gain contributors, is to effectively manage changes and communicate them to the community, as well as solicit feedback.

With that, Evan explained, the Vue.js project is adopting a system of using RFCs, or ‘Requests for Comments’. This will enable the project to grow according to the wishes and ideas of the community as a whole, and not just the Vue core team.

Guillaume Chau (Vue.js Core Team)
Server Side Rendering + Universal Apps

Next up was Guillaume Chau — one of the members of the VueJS core team —  with an interesting overview on SSR (Server Side Rendering) and the concept of a Universal App, meaning your application is rendered on the backend and fed to your browser to be displayed. Here, the code for the application is running ‘universally’ on the server and in your browser — hence the name.

Guillaume explained that better SEO is one of main advantages when setting up your application to use SSR, since search engine crawlers will directly use the fully rendered page — as opposed to maybe more traditional single page applications (SPAs), whereby elements/code are loaded asynchronously and may not be indexed by these web crawlers.

He then outlined another advantage of using SSR: a better user experience for slower internet connections, as the user will see a fully rendered page without having to wait for all the JavaScript to be downloaded before the application becomes ‘available’.

You can follow Guillaume on Github.

Tim Benniks (Valtech Paris)
Vue.js for L’Oréal: a Case Study

Tim Benniks is the director of Frontend Engineering at Valtech Paris, works on L’Oréal and manages their frontend engineering landscape — ensuring that L’Oréal’s online platforms are up to their high standards in terms of quality, product engineering as well as maintenance, as they manage all these individual applications in a cohesive manner under one larger organisation.

Tim talked about why Vue.js is the perfect solution for L’Oréal to manage this challenge and how the framework supports users worldwide, not limiting their user experience even if they have poor internet connectivity.

Tim also highlighted the low entry barrier for Vue.js development as a huge advantage to Valtech in adopting it as their web framework of choice, since they manage many teams with varying levels of experience within each of those teams. Vue.js was the perfect fit for their needs, also since they use Sitecore — a component-based CMS solution — which integrates nicely into the component-based architecture of Vue.

“Vue.js fits our technology stack, architecture, KPI’s, design approach, and the need for simplicity.”

Jen Looper (Developer Advocate at Progress)
NativeScript-Vue + ML = The Great MiniBar Challenge: MixoLogy

Jen Looper of Progress (the creators of NativeScript) gave a very interesting talk on how to create native mobile applications with NativeScript and Vue.js. As we were delving into the world of native apps, coming from The Mobile Company, naturally, my interest was piqued 🙂

The team at Progress have worked with the Vue.js core team to create NativeScript-Vue, a plugin which allows you to use Vue.js to develop native mobile applications. This is definitely an interesting area of modern mobile development: with other contenders such as React Native and Ionic becoming very popular in recent years, there is strong competition for the crown of ‘best native cross-platform development technology’ — catchy title!

With Vue.js gaining huge popularity (surpassing Angular and React on Github for the number of stars they received and overall NPM downloads in 2018), this could propel NativeScript into the top position — if the many loyal Vue.js fans start developing on mobile and want a technology they’re already familiar and comfortable with.

Jen demoed a native mobile application (running on her iPhone) using the NativeScript CLI with Vue and Firebase plugins to hook her Vue application into Firebase and leverage MLKit. She had developed a machine learning application, whereby she trained a TensorFlow model and compressed it into a TensorFlow Lite model (to run on mobile), in order to recognise bottles of various alcohols (whiskey, gin, vodka)…tchin-tchin!

The result was a very fun native iOS application allowing her to take a photo of a bottle (or bottles) and have the ML model running on her phone recognise the labels in the picture — a cool way to demonstrate the power of NativeScript with Vue, as well as TensorFlow and Firebase integration.

As a funny side note, Jen referenced aiwerdness.com, a site where ML algorithms and AI have been used to create all sorts of weird and wonderful (and sometimes haunting) things.

Filip Rakowski (Founder Vue Storefront)
Modern Web Apps Performance Tricks with PWA and Vue.js

It was straight onto the next speaker in this packed schedule, which was another interesting talk. Filip highlighted the importance of performance within any application and outlined a number of items you can focus on to help improve the performance of you web application.

“2.2 load time reduction resulted in 15.4% more downloads”. — Filip Rakowski on Firefox

Speed = money

The main point Filip stressed was to modularise your application and use the power of webpack to analyse and bundle separate modules according to the different app features — thereby leveraging webpack’s code splitting capability to allow you to only serve up modules when they’re required, as opposed to loading everything up front. Modules are then lazily loaded, which saves on loading time and increases the performance of your application.

To analyse this easily, Filip recommended the webpack-bundle-analyzer, which gives you a clear visual overview of the makeup of your bundles, and allows you to see exactly what’s included in each module.

As well as lazily loading bundles, Filip explained that we should scrutinise the size of our external dependencies and referenced bundlephobia, a handy tool to check the size of a particular library or package. Bundlephobia offers alternatives that are smaller and serve a similar purpose, and so are a better choice for your application performance-wise.

The use of dynamic imports is another option that’s easy to introduce into your application, whereby importing of dependencies is only done when it’s required — again stressing that we should only be loading as much code as we need to allow a particular feature to work, and nothing more.

All these points are geared towards only pulling in as little code as is required, leading to improved performance of your web application.

Last words

After a packed morning of interesting speakers it was time to bid adieu to the ground floor of Amsterdam Theatre. I left the conference inspired by the great strides they are making for the tooling for both the web and mobile, and eagerly look forward to coming back again next year to this great event. And if you’d like to have a chat to learn more, we’re just one click away.