30 March 2018
Vincent Smedinga & colleagues
Vincent Smedinga & colleagues
Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0

Frontend Developer Love & Vue.js Amsterdam

A trip report

Last month, three of our front-end developers (Robert Bossaert, Jeffrey de Jongh and Vincent Smedinga) attended a two-day JavaScript conference in Amsterdam. Friday’s conference on Vue was announced first, and since all three recently started using this popular JavaScript framework in their client projects, they were keen to go there and put a firm dent in their learning curves.

Later on, the organisers announced another set of talks on the preceding Thursday, at the same venue. These would focus on sharing hands-on experiences with creating products on the web, not just in Vue but also in comparable frameworks like React, Polymer and NativeScript.

Selected themes

Both conference days had schedules from nine to as late as seven, but let’s not cover all of them here. Instead, the authors extracted the themes that resonated with them most, and are closest to what Informaat is passionate about as a design agency.

Stage
The enormous screen in Theater Amsterdam was a great fit for the conference intros and visuals

Progressive Web Apps (PWA)

The question ‘Should we develop native apps or a responsive website?’ has been a theme for over a decade already. The web platform has been closing the gap with what used to be called ‘the app experience’, and the PWA approach promises to be the final step.

Simona Cotin (@simona_cotin), a software engineer and Microsoft developer advocate, spoke about ‘Building Progress Web Apps with Angular”. Progressive Web Apps are a web technique to bring (native) app-like experience to websites and web applications. The technique enables you to implement progressive enhancement features, such as push notifications, background synchronisation and offline support. They are ‘regular’ web applications but can appear to the user like traditional applications or native mobile applications.

Simona mentioned a couple of key characteristics of applications built this way:

  • Progressive: Will work for any browser because of progressive enhancement.
  • Responsive: Fits any device, screen or viewport.
  • Connectivity independent: They can also work offline and on low quality connections.
  • App-like: Feels like an app because they are executed in application context.
  • Fresh: Always up-to-date.
  • Safe: They have to be served via a https (secure) connection.
  • Discoverable: They can be found by search engines, like Google.
  • Re-engageable: You can re-engage with your visitors through functionality, such as push notifications
  • Installable: Add to your device without downloading from an app store
  • Linkable: They can easily be shared by URL.

From a user experience perspective, they will bring some exciting new challenges to think about. For example: Going offline for a few minutes, or even going completely off grid for a few days, can now be part of the enhanced mobile experience.

Developer tools in Chrome provide a nice tool (Lighthouse) which can be used to run tests against your PWA. It generates a report indicating how well the app is performing and indicates areas of improvement.

Simona concluded her presentation by showing some success stories from Pinterest and Flipkart.

“Time spent is up by 40% compared to the old mobile web experience, user-generated ad revenue is up 44% and core engagements are up 60%.” (Source)

“Flipkart, India’s largest e-commerce site, decided to combine their web presence and native app into a PWA that has resulted in a 70% increase in conversions.” (Source)

Animation

As we all know, motion is a prominent aspect of user interfaces. Transitions and animations that are well designed and implemented support the user to focus on important parts of the interface, to understand where changes come from, and also add some fun and personality. Adding animations to Vue applications has been made very easy, as various speakers demonstrated.

Sarah Drasner (@sarah_edo) gave a presentation about animations in Vue. Vue is quite capable and elegant in creating animations, providing many hooks and methods.

But first, why animate at all? Because as in real life, things and people don’t just appear. As Sarah explains, she didn’t appear like ‘Poof!’ on stage, like a Boolean variable. She transitioned onto the stage. Animations make things feel more natural. The cognitive load is lower when things appear with an animation. Animations should be smooth and fast and have a correct timing. For example, when you visit a site and a signup form animates in front of you almost instantly. You haven’t explored the site yet and it is already asking you for personal details, that’s bad animation timing and not a good user experience.

So how do we animate in Vue? Vue has a <transition /> component and when you wrap something in this component you can animate it. It provides several classes to which you can hooks CSS transitions. For example:

  • fade-enter-active, .fade-leave-active { transition: opacity 500ms ease-out; }
  • fade-enter, .fade-leave-to { opacity: 0; }

Vue can also deal with multiple transitions using the transition mode:

  • in-out: New element transitions in first, then, when complete, the current element transitions out.
  • out-in: Current element transitions out first, then, when complete, the new element transitions in.

Besides CSS transitions, Vue has hooks for JavaScript transitions, for example @enter=”…” and @leave, to animate when an element enters or leaves the DOM. When using JavaScript for animations, it is recommended to add the property :css=”false” to the element, so Vue can skip the CSS detection.

Using the key attribute on elements, it is also possible to animate between different stages of a component, the so-called ‘state animation technique’. This also can be very useful within large applications when component states are stored in Vuex, a central store like Redux.

For a collection of elements, like an image gallery, you can use the <transition-group /> component to animate all elements simultaneously. Let’s say that the images are categorised. When selecting a specific category the images outside that category disappear and the images in the category move into place. Another method is to use directives for animations. For example, a scroll directive that animates elements through waypoints when scrolling the page. And last but not least, Vue can also transition between pages with the Router and Nuxt. Class hooks like .page-enter and .page-leave enable you to smoothly animate between pages.

Eduardo San Martin Morote (@posva) spoke about Vue state animation. Animations can be hard. Either they will fascinate your users or they make them close your app. Having no animations at all can make the user feel lost. Animations should be fast and feel natural. You can animate when the user does something, and we need their attention, or just to make things more fun.

You can go from one state to another by using animations like ‘boolean toggling’, ‘easings’ or ‘physics’. The former is using basic class switching to go from one state to the other, which is great for simple linear transitions, like changes in opacity and colour. Easing can be done with either CSS transitions or JavaScript. The physics approach uses JavaScript mathematics to create smooth, natural animations.

Stage
The key differences between two animation techniques

With vue-tweezing, a small library for Vue created by Eduardo, you can easily use existing animation libraries like Tween.js. With vue-motion, also created by Eduardo, you can create nice spring animations that feel more natural and are smoother because of physics. Do note that both libraries are currently in an experimental state.

Eduardo ended his presentation showing a demo how to animate with sound! Tweening the speed and easing the sound made for a very funny effect of what sounded like drunken musicians.

All the presented animations can be found here.

Moving to Vue

Vue has rapidly taken the stage next to powerhouse frameworks React and Angular, which have long been seen as the two safest choices. Especially in 2017, Vue has become very popular and nothing indicates that 2018 would break this trend.

Stage
Eduardo San Martin Morote highlights how Vue is designed to be easier to learn by leveraging existing conventions

The presentation “Start using Vue.js like jQuery” by Alexandre Chopin (@_achopin) and Sébastien Chopin (@atinux) was really fun and inspiring. One quality of Vue mentioned often is its low barrier to entry. Its syntax and approach of common engineering concepts have been carefully designed and are relatively easy to learn. The Chopin brothers illustrated this by refactoring a jQuery application to Vue, coding live on stage, in less than half an hour. Of course, the example was well-prepared, but still a fine illustration of how developer-friendly Vue is.

While jQuery (one of the first JavaScript libraries and wonderful in its time, but surpassed by today’s competition) manipulates the existing DOM (event driven). Frameworks like Vue are reactive and respond on data changes (data driven). Because of this ‘new’ approach, people are often anxious to switch from jQuery to reactive frameworks. The Chopin brothers demonstrated how easy it can be to switch by live updating a jQuery app to Vue. It was amazing and fun to see how fast and easy this change is. Of course, it helps if you are already experienced in Vue, but they made their point: ‘Don’t be anxious and just do it.’

Gerard Sans (@gerardsans), who was the master of ceremony for both days but also presented twice, touched on the same theme. He spoke about moving from Angular to Vue. Pretty remarkable, as he is a Developer Expert for Google, the creators of Angular.

Stage
Evan You himself kicked off Vue.js Amsterdam, showing the current state of affairs for Vue and its ecosystem, and where they will go

In his keynote, creator of Vue Evan You (@youyuxi) introduced the upcoming third version of the Vue CLI – the command line tool that can be used to initialise a new Vue application – he had been working on for the last two months. This version makes it easy to choose which technical features the app should support and which of the various third-party libraries that provide these features should be installed. You’s work is another example of how approachable Vue is and something that will probably win more and more people over to try the framework.

Apollo, GraphQL and Vue

Continuous change is a fact in the landscape of front-end development. New frameworks, libraries, tools, and best practices appear on a regular basis. The field is still maturing. Even the venerable REST paradigm, that has been serving front-end applications with actual data from back-end systems for ages, suddenly faces fierce competition.

Guillaume Chau (@akryum) demonstrated how to use Apollo and GraphQL within the data layer of a Vue application, which he called ‘the ultimate stack’. Originated from Facebook, GraphQL is a query language like SQL and used to request data from an API. Advantages of GraphQL are that you only get the data that you ask for and that it uses strong typing and validation, so you know exactly what kind of data you get.

Apollo comes in as ‘the man in the middle’. Ask with a GraphQL query what you want and Apollo gets it for you, even from a variety of data sources. All this reminded us of SailsJS and Waterline: Ask a question (query) and the back-end gets it for you from any of the available data sources. The great thing is that solutions like these are database-agnostic, more flexible and predictable. These are technologies to watch and experiment with, fierce competition already for the reigning REST paradigm.

Stage
Guillaume Chau offered a clear explanation and demonstration of these promising new libraries

Serverless functions

The movement to build systems from small, composable components, rather than implementing applications page by page, has taken the stage in our interfaces. At Informaat, we specialise in building robust yet flexible pattern libraries. It was probably predictable that the quest for components has reached the server side of things as well.

The closing talk of the event was ‘Server-less functions and Vue.js’ by Sarah Drasner. We were intrigued by the term ‘serverless’, how could that ever be possible? Fortunately, the presentation started with ‘Despite its name, this does not mean you’re not using a server.’

The idea behind serverless is that you don’t need to worry about the infrastructure and servers yourself but use so-called ‘cloud functions’. Cloud providers like Google and Microsoft Azure provide the possibility to execute (small) programs in the cloud and you only pay for the time that they are executing. So, if you have a static site to which you want to add some dynamic functionality, like scaling a profile picture after upload. You can write a server-side JavaScript function for that and your site can access that function through an API call.

That same weekend Jeffrey signed up for a free Google Cloud account and wrote a little ‘Hello world’ function. He created a new project using the new CLI that Evan You had presented, added the Axios HTTP client to communicate with the API. Within a short time and some trial and error the webpage magically showed the result of the ‘Hello world!’ Not very useful yet, but he really likes the concept.

Personal experiences and reflections

Vincent Smedinga: “For me, this conference signalled my return to ‘proper programming’. I have been coding since the BASIC era and in the mid-nineties I single-handedly built a large website in PHP, MySQL, and this new fad called CSS. But for around the last decade, I’ve been happily focusing on mastering just mark-up and style, while leaving the scripting aspects of the products I worked on to teammates. Recently though, lacking proper experience in modern web programming started to feel like a problem. Although my love for CSS hasn’t diminished, I resented not being able to create fully working software. Over the last year, I’ve been getting my hands dirty with a couple of applications and a bespoke component library in Angular and later Vue.

So this conference came at the perfect time for me. A day of use cases spanning all of the current frameworks, and then one of delving deeper into Vue, which had just become a big part of my job. The talks I enjoyed most were by people who combined a clear explanation of a certain technology with a live demo in the editor and terminal – like Sébastien Chopin, Luca Mezzalira, and Guillaume Chau. There’s always a bit of a thrill with live coding on a conference: code rather than talking is what we as programmers are about, plus the tension whether something would go wrong – and almost nothing did. I’m happy that I could relate to the majority of the talks and accept that there were a couple that I found a bit harder to follow – but hey, never stop learning!”

Robert Bossaert: “Both conference days featured so many inspiring talks and speakers. I was especially looking forward to the presentations on progressive web apps, serverless functions, and Apollo with GraphQL, but it’s safe to say that all of the talks gave me a lot of new insights and knowledge that will strengthen me in projects now and in the future. The presence of so many friends, former colleagues and like-minded people was a nice confirmation that these technologies are here to stay and have a bright future ahead. I would encourage anyone to go there next year. I know I will.”

Jeffey de Jongh: “We had a great inspiring time at the conference. I guess there we about 1k of people and the organizers did quite well. The first day was mainly about the three current major frameworks: React, Angular en Vue and it is always good to know what is happening in JavaScript framework world. The second day was all about Vue, Evan You kicked off with a talk about the history and future of Vue and the new Vue CLI that really speeds up a new Vue project. Overall the speakers were inspiring, the screen ridiculously large and the audience pleasant. It reminded me that I have to go to more conferences, and I hope I can attend this one next year as well.”

Conclusion

All talks have been recorded and videos have been steadily pouring in on the YouTube channels of Frontend Developer Love and Vue.js Amsterdam.

The organizing team can be proud of themselves. Although they had some background experience in organizing meet-ups, this seemed to be their first full blown conference. And it surely was top quality they delivered. The brand-new venue was stylish, food and drinks very well catered for, and oh my, that screen! More importantly: the line-up of speakers was impressive, their subjects varied and one presentation even more inspirational than the other.

So we heard, they’ve announced to take their formula on the road to Barcelona, Paris, and Berlin, so we’ll have our travelling gear ready.

About the authors

Vincent Smedinga is a front-end engineer at Informaat. He thoroughly enjoys crafting robust yet flexible component libraries, so that the ideas and choices behind our designs can continually provide the user experience we intended. He also likes espresso and guitars, and referees a neat game of football every week.

Robert Bossaert is a front-end engineer with a passion for Javascript. He has experience in building high performance, scalable websites and applications.

Jeffrey de Jongh is a front-end veteran with a passion for UX and visual design. He worked for national and international companies in a variety of web related positions. He’s a proud husband and father, loves wine, whiskey and good food.

Engineering (2), Events (21)

Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0