Vue conference and meetup videos from 2018 (Q1 digest)

This is the third post covering the latest events of the Vue community (Q3 2017, Q4 2017 and this is the Q1 2018 digest) but this is the first one featuring videos from Vue conferences: VueConf New Orleans and VueJS Amsterdam—and of course several super-exciting talks from Vue meetups across the world.

The Q2 edition is already on the way, stay tuned with the monthly newsletter and twitter.

VueNYC (New York, NY)

Last month we did a vue workshop. a vue beginner (vueginner? nah) talks about stuff she didn’t understand from it. maybe you got these questions too, idk. mad chill lowkey (like so lowkey it’s not even a key) “talk”.

Testing user interfaces has always been tricky. The details of UI are nuanced and subjective. “Does this look right?” Co-opting existing testing solutions like unit, E2E, and snapshot tests tends to be brittle and time-consuming. Visual testing takes a different approach. It focuses the human tester (you) on the exact components in the exact states that require attention. It turns out to be a pragmatic yet precise way to test UI component libraries. This presentation goes over why to consider visual testing in Vue, what tools are needed, and how it fits into your development process.

Are you new to Vue? Not sure what to expect? I’ll be sharing my experience with my first Vue project and some neat things it can do. A huge emerging trend that’ll likely stick around is creating seamless transitions between separate pages of apps and websites. VueJS does this really well without a lot of set up. I’ll walk you through how you can create beautiful routing animations to enhance user experience.

While all the cool kids are running node servers in production, some of us work in enterprise environments with big Java / C# backends. Vue.js works very well for these types of environments. We’ll go through why, some challenges you’ll run into, and some tips for solving them.

Props, events, and slots are the mechanisms that vue provides to allow components to interact with one another. This talk aims to introduce each concept, explore some of their deeper complexities, and hopefully provide greater insight into how to write reusable components.

JavascriptLA (Los Angeles, CA)

Vue.js is set to take over web front-end development. In Github stars it has more than double the stars as Angular 2/4, and nearly ties React. In Google trends it exceeds all other frontend frameworks. Come learn how a simple and powerful new framework has taken the best of existing frameworks and remixed it into something transformative and new. Brad Ito is CTO & Co-Founder of Retina.AI but among our comunity he’s better known as the head organizer of the LA Vue.js meetup. Graduate of the Massachusetts Institute of Technology, Brad is a Technology omnivore. Polyglot Software/Web Developer (Typescript, Javascript, Python, PHP, Java) Kanban ProjectManagement proponent Big Data / Data Science architect. His company Retina.AI is currently Hiring! They’re looking for the first hires, who will be instrumental in shaping the product and success of the company. The office is located near the beach and third street promenade in beautiful Santa Monica. They’ve led data science teams at Facebook and Paypal, built, and sold companies, and built the core tech behind several startups. Open Positions at http://retina.ai/careers/

VueJS Berlin (Berlin, Germany)

Loading data into a Single Page Application and keeping it fresh is fraught with errors. During the talk we’ll explore patterns for loading data (and refreshing them in the background or in the main thread) and how it affects route transitions. We’ll also take a good look at Vuex and the Vue Router and ways to make them work together for our users. Yaw is a member of the Ember Learning Team which is responsible for the documentation and official Ember Guides that can be found here: https://guides.emberjs.com. They are also responsible for other non-official learning material for the Ember framework. He recently moved to Berlin to work at hypcloud (https://hypcloud.de) where they use Vue on the frontend.

In this talk Tim discusses some of the patterns, gotchas and totally awesome things he discovered while building a Saas app. Topics are: – Authentication & Authorization: everyone hates it, how to make it nice? – Reuse by containers, views and components. – Deploying on Heroku and AWS. Tim is an engineer and solopreneur working on his first Saas product https://checklyhq.com. He also does code and evangelism work for https://vamp.io and like playing guitars and moogs.

Frontend Developer Meetup Amsterdam (Amsterdam, Netherlands)

VueConf US 2018 (New Orleans, LA)

Have you been thinking about starting your own Vue.js meetup? In this lightning talk, Ben Hong walks you through 5 easy steps you can follow if you want to start your own Vue meetup in your city. Download our free Vue.js syntax cheat sheet today by going to: https://www.vuemastery.com/vue-cheat-sheet/

Learning a JavaScript framework can look intimidating if you come from a traditional design background. But Vue has some of the best features for designing with motion. Come see how to translate your motion design into Vue-powered prototypes! More info: https://www.vuemastery.com/conferences/vueconf-2018/vue-in-motion-rachel-nabors/ Rachel Nabors is the cultivator of the Web Animation community, author of Animation at Work, a Google Developer Expert, invited expert at the W3C, and has helped clients build motion design into their user interfaces. She believes that animation is a necessary part of a complete and balanced user experience because it helps convey information visually that could otherwise bog down the human brain.

In this talk Ed explains how to structure a test suite, and how to write effective unit tests for Vue components. More info: https://www.vuemastery.com/conferences/vueconf-2018/testing-vue-apps-edd-yerburgh/ Edd Yerburgh is a Sofware Engineer at the BBC in London and is also the main author of Vue Test Utils library. As soon as your Vue application gets large you’re going to need to write automated tests to keep bugs away.

Vue.js ships with a built-in reactive system to help easily manage data and state throughout your app, but RxJS streams allow you to control complex async situations through streams. This lecture will cover how Vue.js integrates with RxJS and walks through the common problems taking this approach can solve. John is one of the founders of egghead.io, and in his talk from VueConf he walks through using vue-rx which combines Vue with the RxJS streaming library.

Need a mobile app to offer different, yet complimentary functionality, while retaining shared code between your website and mobile app? Welcome to the beautiful world of Vue and NativeScript, which, paired together make for a great user experience. Jen Looper is a senior developer advocate at Progress, the creators of NativeScript. She started her talk by speaking on Vue Vixens, a concept similar to ng-girls / django-girls / rails bridge. Vue Vixens aims to provide free day long conferences to teach web and mobile skills to new developers or devs switching technologies. They are looking for invitations to conferences to give these workshops as well as volunteers and mentors.

One of TypeScript’s goals is to make sure that JavaScript users of all communities can use the language. Over the last year, the TypeScript team has put effort in to making TypeScript & Vue work together much more seamlessly. Come find out a bit about that work, and how you can benefit from TypeScript today! Daniel is a Program Manager at Microsoft working on the TypeScript language and compiler. TypeScript is JavaScript plus types, specifically static types. In JavaScript all your values already have types, though you may not specify them. Specifying static types helps you recognize bugs and undesirable behavior in your code. Using TypeScript with a tool like VSCode also gets you a ton additional features to help you write less buggy code.

As a React developer learning Vue, adapting to the “Vue way of doing things” is a challenge that requires a sound understanding of the philosophy behind Vue. We will examine the nuances of the two frameworks and cover common mistakes that React developers make when switching to Vue. Divya Sasidharan is a professional Front End developer who transitioned from using React to using Vue. In her talk, React Point of Vue, she shares her experience of applying what she knew about React to Vue, and how she altered her ways of thinking and coding in order to use Vue more effectively.

Writing a Universal Application with Vue might be hard, this talk will show common problems with server-side rendering and how to deal with them. It will also show how Nuxt.js solves most of these problems for you. Sebastian Chopin is the co-author of Nuxt.js and has extensive experience using node.js, Backbone.js, and doing server-side rendering.

Building and documenting a component library at your company can be a huge hassle, but is a great way to keep your code consistent and clean among all of your projects. Storybook and Vue take most of the pain out of this, and allow you to develop a set of core components and document them in no time! Peter is a UI Engineer at SalesLoft in Atlanta where he started the Atlanta Vue.js meetup. In his talk he shows how using Storybook makes it easy to create a Design System for your application, and do visual unit testing.

Vue Single File Component is ideal for sketching out UI components, animation, interaction prototypes and data visualization. I present a mini Vue SFC based framework that prescribes setup, languages and coding styles in exchange for the best prototyping experience. Pine Wu works as an Information Architect at Visual Studio Code. He is also the author of the popular VS Code plugin Vetur: https://github.com/vuejs/vetur

Developers face the continuous challenge of building complex products in the face of tight schedules. In this talk, Dan Zeitman, developer advocate for Cloudinary, walks us through creating a Netflix-clone called Miniflex to demonstrate how you can use the Cloudinary video API’s to boost efficiency when you’re working with video applications.

Have you ever wanted more fine-grained control over your Vuex Store Objects? For example, importing data from an API, registering it inside of Vuex, then being able to share that data across multiple components? In this talk, Adam Bradford, goes over the benefits of Vuex’s dynamic module registration with a real-world example.

Did you know that it takes most websites 14 seconds to load? 50% of your visitors are gone by then. Code splitting can help you solve that problem. In this talk, Sean Larkin, program manager at Microsoft, runs through how Code Splitting is a first class citizen in the Vue ecosystem and the one-line change you can make to split your code and make your components asynchronous.

Did you know that Vue can render to other contexts besides just HTML? In this talk, core Vue.js team member Eduardo (@posva) goes through various examples using Vue.js render engine to create effects like Springs, Sounds, rendering WebGL, or even dealing with Promises!

Should front-end developers learn to UX? Jacob Covey says yes and your value as a front-end developer can only grow if you know the principles of UX. In this talk, he teaches how you can learn and become proficient in UX as an already-competent front-end developer in only 40 hours.

If you’ve heard of Ionic before you might know that it has been historically associated with Angular. Now you can use Ionic with Vue. In this lightning talk, Mike Hartington, a developer advocate for Ionic, shows off an in-depth demo for an alpha version of Ionic for Vue you can start using.

When there are so many options for UI component frameworks how do you know which one to choose? In this talk, CJ gives an overview of the Vuetify.js component UI library based on Google’s Material Design and why it might be the best choice for your application.

Reactive Programming is definitely the paradigm for the future, MobX is a state management system very easy to pick up and in combination with MobX state tree we can create reactive applications in no time. In this talk I’d like to highlight the key concepts of Reactive Programming inside MobX like observables and observers, computed values and actions. Also I’m going to share a real example that will cover the key parts of a frontend application like:
– consuming a remote endpoint
– managing the data flow .
– structuring the relation between views and store
– reacting to changes.

Aah, animations. Moving things on the screen will either fascinate your users or make them close your app right away. Add no animations and your users will feel sometimes lost. Add too much and they will be disgusted. But, to make it harder, animations by themselves have to be configured just right to have a meaning. Speed, duration and the object being animated have to be set just right. Now, Vue already provides us with two nice components: transition and transition-group that are based on CSS animations. But what about the state? Numerical values that change and you want to animate. During my talk, I will explain what state transitions are, how they differ from CSS transitions, what are they used for and show some practical implementations. We will cover good and bad practices while we delight ourselves with some demos.