What we learned at VueConf
vueconf2017
The first official Vue.js conference is over and it has left us only good memories. Great talks, heartwarming community & a beautiful city. By looking back at the event, we decided to write down a few words for the most memorable things, the ones that made us think of new ideas and got us saying "I want to go home and code".
Community
The Vue community is just awesome and everyone at the conference was so excited to meet other Vue people. It looked like everyone admires the work the rest of the community does. We had the opportunity to hang out with lots of you guys and it was so much fun. Looking forward to meeting you at the next Vue event.
Workshops
Advanced Features from the Ground Up
Evan You
I, Alex, attended Evan's workshop and I can say it was really great. We started by learning how to build Vue's features, like the reactive state. Later, we dove into High Order Components, render functions, and other interesting stuff. My favorite part was the plugin development. It was crazy developing plugins like Vuex, Vue-router, and form validation by ourselves (and Evan's help) - it really gave me a new perspective on why these tools work the way they do. I loved it!
Application state with Vuex
Blake Newman
I had the pleasure of participating in Blake's workshop, Application state with Vuex. It gave me some insight. We got to know each person attending the workshop, talked about how we have used Vue and/or Vuex and what we hoped to get out of this workshop. From my point of view, I would say that the workshop covered everything I wanted to know. We were given a fully functional app and we tried to replace events & local storage with Vuex utilities, using getters, actions, mutations and other techniques. Also, we learned about namespacing, vuex helpers and best practices. I will certainly need more time to process what we learned but it was definitely worth it! - Kostas
Animated Interfaces with Vue.js
Sarah Drasner
Unfortunately, we couldn't attend Sarah's workshop (we are only 2 guys xD). We heard though some really nice feedback from the attendees. Most of them got surprised by the content of the workshop. They weren't designers and they couldn't even imagine that they were able to create cool animations by themseves - with the power of Vue and SVGs. As Sarah states, The web is more than a document reader, and Vue has unique offerings that make animations not only possible, but possible to do in an organized and state-managed manner.
Talks - Day 1
Keynote
Evan You
Evan welcomed us at the conference by talking about Vue's history. It all started at 27th of July 2013. 4 years later, a lot of things have changed and Vue now is one of the top 10 GitHub repositories and the 2nd most-starred JavaScript framework (higher than Angular)! Talking numbers, it has more than 58.000 stars and ~558k/month NPM downloads. It's good to see the community and the ecosystem growing drastically day by day.
To get a better image of Vue's state check Evan's slides.
Avoiding an awkward fit: How to best introduce Vue into your app and team
Crhis Fritz
Chris talked about how to introduce Vue to your teammates, colleagues, or even your friends. A lot of people and applications are bound to JavaScript frameworks like React or Angular and usually is hard to rewrite. What is easier though, is to see if Vue could be handy as a library or give it a shot in the next project. Emphasizing on Vue's performance, simplicity and fun to use, would be convincing. Take a moment to think how you'd react if you've never built an SSR app and someone showed you how to get started with Nuxt, or even a PWA.
Check out the presentation:
Server side rendering in Vue.js
Alex & Sebastien Chopin
The Chopin brothers gave a great presentation on Nuxt.js - The Framework for server-rendered Vue.js applications.
The Nuxt team has even made things easier to get started by providing a starter project template without the distraction of a complicated development environment. (This is a project template for vue-cli)
In a glance, to start developing your Vue SSR application the only thing you have to do is to run:
$ vue init nuxt-community/starter-template my-project
$ cd my-project
# install dependencies
$ npm install # Or yarn installBy running npm run dev you get a server running at localhost:3000 with hot reloading and other goodies.
Nuxt also provides a HackerNews clone example.
Accessibility In Single Page Apps
Callum Macrae
Callum Macrae, brought to everyone's attention the problems some people with disabilities may face, when navigating poorly designed websites. Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
Here is an interesting topic on accessibility, coming from React.
Check out an accessibility audit tooling for the web - a11y and an article from Callum on how you can use a screen reader to test your websites.
Vetur
Pine Wu
Vetur is a Vue.js plugin for Microsoft's Visual Studio Code. Pine's talk regarding this tool may have convinced a lot of people to switch to VS just because of the great features it offers for Vue.js. Take a look how vetur can help you improve your workflow.
The v0.8.2 was released on the day of the presentation, with prettier integration coming soon.
You can find the presentation slides from VueConf regarding Vetur here.
Code Splitting Patterns In Vue.js
Sean Larkin
Alright, Sean Larkin made many jaws drop at VueConf by demonstrating Code Splitting Patterns in Vue.js. A lot of people were amazed by how easy it is to split an application's code.
See for yourself how you can use code splitting. Awesome Code Splitting Example
Christiaan split his code during the coffee break and managed to reduce the initial bundle size by more than 60%.
For big web apps, it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”. - Webpack docs
I know, I got you excited, so here are Sean's slides - Happy code splitting code splitting slides
No Time to Refactor, How we made the Frontend Awesome At GitLab With Vue.
Filipa Lacerda
Philipa talked about how GitLab switched from CoffeeScript to ES6 and how they managed to include Vue.js in their stack. GitLab now combines Vue.js with jQuery and despite a few issues they might be facing, it's a smart approach instead of refactoring everything. Their basic architecture is to create small Vue applications, like small SPAs. Philipa shared her experience on the conference, so if you are interested, read her article.
Here is Philipa's presentation.
Talks - Day 2
Make your Apps Realtime with Firebase and Vue
Eduardo San Martin Morote
Eduardo gave a great talk on integrating Vue with Firebase. For you, who haven't heard of Firebase before, it provides features like a live database, authentication, and pretty much everything you need to publish a serverless application. What I liked in his talk was that he didn't only focus on the good parts but instead he mentioned the drawbacks, when not to use it, and alternative solutions.
You can find the slides of his presentation here.
Best Practices for Hybrid Mobile Apps with Vue.js and Onsen UI
Masahiro Tanaka
Masahiro talked about Onsen UI, a library of UI components and utilities to help you create beautiful hybrid apps very quickly. Implemented on top of Web Components, Onsen UI is an agnostic framework and can be easily combined with Vue.js to bootstrap your apps. It provides a Vue-like API to make its usage very simple and straightforward.
温泉 (ONSEN) = SPA!
I can't wait to find some time to build a mobile app, in order to give it a shot. Oh, I didn't mention that it is open-source!
The Evolution of API Design: From RPC to GraphQL
Eric Baer
Both Eric and Guillaume have made a great impression, after building a GraphQL server and consuming it with Vue & Apollo. The biggest part of the presentation performed with live coding which was pretty impressive!
Here you can find the GraphQL Demo Code and the GraphQL Demo in Launchpad.
GraphQL made easy with Apollo and Vue
Chau Guillaume
Guillaume picked up where Eric left it. He showed how to consume the API with live coding, using vue-apollo and vue -supply.
During a conversation we had later, he explained a lot of aspects of GrapfQL and how convinient is to work with GraphQL, on the backend but even to consume in the front-end. What drew my attention was graphiql, a graphical interactive in-browser GraphQL IDE, that lets you browse your API and even use it as a documentation. I am considering giving it a shot, in my next Laravel/Vue project.
Slides from his talk are online and can be found below: Guillaume's presentation
Using Serverless Technology to Ship Vue Apps That Scale
Jacob Lee
Jacob's talk covered the basics of serverless technology. He explained the benefits of using Function as a Service (FaaS) and how StdLib can help us ship Vue applications in record time. StdLib lets us turn functions into infinitely scalable, self-healing web services. It is open-source and it offers a hosted collection of tools.
You can view the presentation here.
PRAs with Vue.js
Blake Newman
Blake showed us how to make real-time PWA apps with Vue.js and Websockets. He also showed a very clever way to make apps work offline.
To start working on Vue PWA you can run:
$ npm install -g vue-cli
$ vue init pwa my-project
$ cd my-project
$ npm install
$ npm run devCheck out the presentation: Blake's presentation
Testing Vue
Roman Kuba
Codebryo, performed testing including snapshot testing in his presentation, using Jest - The Delightful JavaScript Testing
You can find the slides and the code examples of this presentation on GitHub.
If you are interested in going further with testing, check Testing Vue.js components from Ava, theJavaScript test runner & revue-testing.
Animating Vue
Sarah Drasner
Last but not least, was the presentation of Sarah Dranser, and it goes without saying that she did an amazing job, dazzling us with animations created with Vue.js and SVG. The information on how people feel while waiting and how delays may affect your sales, were pretty scary.
Take a look at this impressive animation in the following codepen:
Sarah has already made her presentation available online: Sarah's presentation
Bonus: a small demo showing custom page animations with a fake typography site using Nuxt page transitions with SSR.
Post-VueConf Survey
I know you already know but if you attended VueConf you can take the Post-VueConf Survey and give 2 minutes of your time to help the organizers by giving your feedback. You may had an awesome time but Karolina doesn't know about it if you don't mention it. :)
Closing
We could elaborate more on each talk but this article turned up unexpectedly huge, we hope it's worth it.
We thank a lot the organisers: Monterail, Evan You and Damian, and the sponsors: Codeship, Monaca, and Native Script for making VueConf a reality.
Przemek Peron has uploaded some photos from the conference, you may find yourself in there. The guys from Monterail are going to publish soon more photos and the recordings of the talks.
Can't wait to visit Wroclaw again next year and meet even more amazing people - See you all there!
Published by Alex Kyriakidis & Kostas Maniatis
