5 Great Talks From VueConf 2017, The First Vue.js Conference

VueConf 2017, the first official Vue.js conference, took place over the last two days, June 22nd and 23rd.

The event was held in Wrocław (pronouned "vratslaw", from what I can gather), which is a beautiful and historic city in the South-West of Poland. Around 300 people attended including many Polish locals, Europeans from surrounding countries like Germany and Hungary, and a number of adventerous developers from far away countries like the US, India and Australia (me).

Over 300 people are today at #vueconf2017! pic.twitter.com/aLTFTgDmWL

— VueConf (@VueConf) June 22, 2017

The conference featured a keynote from Vue.js founder Evan You, and variety of interesting talks from Vue.js contributors, experts and advocates.

I think all attendees would agree that each and every talk of the conference was informative and inspirational, but in this article I'll limit myself to just five talks to report on what you missed!

1. Evan You - The State of Vue 2017

VueConf 2017 kicked off at 9am with a keynote from Vue.js founder Evan You. His talk recapped the history of Vue, which began as a humble idea for a lightweight UI library way back in 2013. He told of how Vue gained unexpected attention on the front-page of Hacker News, and later a tweet from Laravel creator Taylor Otwell gave the project some serious traction.

Hello from #vueconf2017 ! pic.twitter.com/26hTHsMpWE

— Sebastian Ślęczka (@sevastijan_me) June 22, 2017

Evan then discussed the more recent achievements of Vue, including the success of ecosystem projects like Nuxt.js, and the dizzying heights that Vue itself has reached as the second most-starred JavaScript project on Github of all time, recently surpassing Angular 1.

Vue.js beat Angular 1.* #vueconf2017 pic.twitter.com/WTQD60dJjv

— Tomasz Pawlisiak (@pawlisiak) June 22, 2017

His talk then introduced some upcoming features for Vue in version 2.4, including more server-side rendering performance improvements, and support for server-side rendering async components which will allow for better use of Webpack's code splitting features.

Evan also discussed the state of projects from the Vue ecosystem including the upcoming vue-test-utils, an official Vue testing library, and vue-cli 3.0 which will introduce template configuration as a dependency, allowing templates be upgradeable.

FYI I've heard that the talks from VueConf were recorded and will be released on Youtube soon. I'll post about it on my Twitter.

2. Callum Macrae - Accessibility In Single Page Apps

Callum Macrae is a front end developer at UK company Samknows. His talk centered around an eye-opening demonstration of how screen readers interpret single page apps, highlighting how Vue components often fail to include necessary accessibility features.

Interesting takeaways on accessibility for SPAs @callumacrae @VueConf #vueconf2017 aria-live pic.twitter.com/afUQHEwSER

— Rachelle Ragasa (@rachellejragasa) June 22, 2017

As Callum pointed out, there are many disabled internet users who are blind or have dyslexia, and rely on screen readers to navigate the web. As developers, we can save them a great deal of time and frustration by paying heed to these matters.

He explained how UI components responsible for showing and hiding content on a page, like tabs or modals, are often sources of accessibility problems. If the text is not hidden in a compliant way, the screen reader may read out all the hidden text as well as the shown text, which can be very frustrating and confusing for a disabled user.

Callum also highlighted how essential it is to ensure keyboard inputs can be used to navigate the page including tabbing and arrows or users may simply be unable to use your page. He showed examples of where these improvements could be made in popular Vue.js projects.

Tip from Callum: the way to get inputs right is not to do it from scratch but to extend the native elements so you get the accessibility functionality.

3. Sean Larkin - Code Splitting Patterns In Vue.js

Sean Larkin is a Webpack core team member and contributor to angular-cli, but has recently become a passionate Vue.js advocate. His talk was about the code splitting features of Webpack and how they can easily be utilised in Vue.js apps to improve their loading time.

As he explained, code splitting allows your app's code to be built into separate files and Webpack will asynchronously load it after the inital page load and only then when it's needed. He explained three design patterns for doing this in Vue.js app: by route, by component and by lifecycle event.

"Vue is the first framework to craft a developer experience with Webpack in mind" - Sean Larkin

Webpack concepts are notoriously difficult to understand, but you wouldn't know it from Sean's talk. He was able to make the topic both highly informative and very entertaining.

Short sum up about how easy code splitting with #Webpack and #VueJS is. #vueconf2017 thx @TheLarkInn pic.twitter.com/Q0LO1UYjUs

— Aleksej 🇨🇭 in 🇵🇱 (@aleksejdix) June 22, 2017

I found Sean's talk particularly thought-provoking so I'm planning to do a more detailed article which will deep-dive into some of the code splitting concepts Sean discussed. Jump on the Vue.js Developers newsletter if you want to be notified about it.

4. Blake Newman - PRAs with Vue.js

Just before lunch on day two of the conference, Blake Newman gave a talk about PRAs: Progressive Realtime Apps. PRAs have all the features of PWAs, like push notifications and offline support, but also include a realtime aspect with technologies like web sockets.

Blake is a core contributor to the Vue.js project and did pioneering work on Vue.js progressive web apps with his former employer Sainsbury's in the UK.

Put your seatbealt on, I see some buzzwords 😅#vueconf2017 pic.twitter.com/TCMfDUxmyh

— Matej Nemček ☯ 巨头 (@yangWao) June 23, 2017

Blake explained how in a regular PWA, offline support is achieved by using a service worker to cache HTTP requests from the app, while the user is still connected to the internet. These cached requests can be restored when the user is offline again, allowing them to access resources and still see meaningful state in their app.

But realtime PWAs have an intrinsic problem: service workers can't intercept web socket messages, and thus cannot be directly cached. Blake demonstrated a clever solution where the web sockets would only be used to let the site know new data was available, and the site would use regular HTTP to request the data, making the realtime data cacheable by the service worker.

5. Sarah Drasner - Animating Vue

The last speaker on the VueConf 2017 schedule was Sarah Drasner. Sarah is an expert with SVG animation, a published author, and has consulted for companies like IBM and Microsoft.

Her talk began by making the case for animation on the web. She explained how animation can give a seamless flow to a user's experience that will increase engagement, and how animation can help reduce the anxieties experienced from latency.

Finally @sarah_edo on stage @VueConf telling about animations with @vuejs
Awesome stuff. #VueConf2017 pic.twitter.com/wpORPdSHHz

— codebryo (@Codebryo) June 23, 2017

Sarah believes Vue.js is an ideal framework for web animation. Firstly, there's the in-built transition component which gives developers hooks into UI element lifecycles that can provide detailed triggers for animation events.

There are also Vue's custom directives which can house complex style implementations for animation, thus keeping templates clean and organised.

Sarah's talk was highly visual and she showed many examples of animations that were both extremely creative and technically impressive. Her talk was a great finish to an awesome conference!

Other highlights of VueConf 2017

A special VueConf brew

The organisers of the event, Wrocław web development agency Monterail, did a great job of making the conference attendees feel welcome in their beautiful city. They even brewed beer for the occassion!

That's a nice surprise!! #vueconf2017 Thank you @monterail ! The pale ale is delicious! pic.twitter.com/vL6445Tbxb

— Valentin Vieriu (@valentinvieriu) June 22, 2017

Plenty of Vue puns

Puns aplenty @VueConf :) #vueconf2017 pic.twitter.com/hciCtntNMr

— Kamen Bundev (@bundyo) June 22, 2017

At @VueConf we hace vuehito instead of mohito 🍸 pic.twitter.com/bNuP3jGCnW

— Ed (@posva) June 22, 2017

This guy's Vue beard

Despite having I'm pretty sure the only Vue.js themed beard at @VueConf, I still didn't manage to walk away with a shirt :( #vueconf2017 pic.twitter.com/9e8Wma83hr

— Nathan Chere (@nathanchere) June 23, 2017