Reward Cloud has now become Tillo - Find out more here

Development | | 05/11/2019

Vue.JS London 2019

We attended VueJs Conference this year and there were a few things that piqued our curiosity. Rather than one of us write at length about our day, we thought it might be nicer to share a post and cram it all into one!

Jasper's thoughts on Animations.

The day kicked off with a talk on ‘Animating Vue’ by Vue Mastery’s Adam Jah. The presentation demonstrated how animations and transitions can be used to direct focus, inspire action and prevent users becoming disoriented by creating a natural flow.

Adam explained how motion is very effective at drawing our attention. This is due to our primal human instinct:

“Whether for hunting down dinner, or avoiding becoming another animal’s dinner, visual sensitivity to motion is a core process of the human brain that has helped us survive and evolve throughout our time here on this planet.”

Luckily we don’t have to worry about becoming a sabre-tooth tigers dinner any more! However, we can use this inbuilt sensitivity to motion to our advantage when developing. For example, by simply animating a button on the home page you can instantly draw a users focus and start to guide them on your desired journey.

Vue’s built-in ‘transition’ component makes animating easy. The component serves as a wrapper, automatically applying ‘enter’ and ‘leave’ CSS classes to wrapped elements at the appropriate stages during Vue’s lifecycle. This component can be customised to utilise any CSS transition or animation and can be encapsulated within your own components to make them reusable across your application!

The talk ended with a caution however. Because Vue makes it so simple to create these reusable components it is easy to get carried away sometimes and go overboard with the animations! Remember animations should enhance the user experience and not be distracting. Small touches, such as a custom loading spinner or an icon which indicates an action was successful go a long way.

Simon's thoughts on the Composition API.

The standout talk(s) for me, were the ones focussed on the new Composition API, which has been released as a plugin/module for version 2 but is baked into the framework in version 3.

Greg Pollack demonstrated the API, by giving us a well rounded but simple example of the API. Thorsten Lunborg expanded on Greg's concepts to deliver a more detailed demonstration, explaining how you could build something more advanced. Greg's presentation was different in its tone to the others. It had a directness about it that seemed slightly forceful, almost ordering us to adopt this new approach, instead of inspiring us to. I think that's partly due to his teaching background - He runs a couple of online code schools.

The key takeaway from both of those talks being the VueJS team have given us a way to clean up our component code by giving us better options for extracting logic from a Single File Component in a maintainable manner. And so the point was made - the Composition API is the new black.

Jack and the Magical Keyboard.

In a hilarious live coding session by Jason Yu, we were shown in detail how useful the new Vue Composition/Functional API can be, particularly in regard to re-using code and type safety via Typescript.

Jason opened with a quick rundown of the project he would be working on with us. He was creating a musical keyboard you could play with your computer keyboard — a ‘Keyboard-Keyboard’! He quickly showed us how the project was supposed to work, and promised that if he managed to get it working in time, he’d sing us a song.

Jason created some clever encapsulated pieces of logic a state to handle keyboard events, and mapping them onto the right frequencies to play via the Browser’s Audio API. Before we knew it, Jason was done. The Keyboard-Keyboard was fully functional, including a second layer for a lower octave, and a smart looking effect to show which keys are currently pressed down.

As the task was completed with time to spare, Jason serenaded the conference’s solo organiser with a song of thanks. Needless to say, we were all very impressed both by Jason’s ability to put together excellent code, and by his confidence in front of a large crowd (even though he did say under his breath, ‘I can’t believe I just did that…’).

Conclusion.

The conference was well put together and we were all blown away by the venue, food and atmosphere. Blake Newman deserves a lot of credit for single handedly organising it. We're all in agreement that we'll attend next year if possible.