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.
Jump to the event's videos:
- VueNYC (New York, NY)
- RequireLX (Lisboa, Portugal)
- NewcastleJS (Newcastle, Australia)
- VueJS Berlin (Berlin, Germany)
- FreeCodeCamp Vienna (Vienna, Austria)
- Frontend Developer Meetup Amsterdam (Amsterdam, Netherlands)
- VueConf US 2018 (New Orleans, LA)
- Start Your Own Vue.js Meetup
- The Future of Vue.js in 5 Minutes
- State of Vue
- How We Do Vue At GitLab
- Vue in Motion
- Testing Vue Apps
- Serverless Functions and Vue.js
- Create an Engaging Native Mobile App with Vue and NativeScript
- 7 secret patterns Vue consultants don’t want you to know
- Agile Design Systems in Vue
- Vue & TypeScript Up and Running
- A React Point of Vue
- Vue & SSR: The best practices
- A Short Synopsis of Vue Storybook
- Prototyping with Vue Single File Component
- Build a MiniFlix Clone with Vue Contest
- Dynamic Store Modules with Vuex
- Code Splitting Patterns with Vue
- Beyond HTML with Vue
- 40 Hour Plan For UX Proficiency
- Vue with AWS Lambda
- Ionic and Vue
- OverVue of Vuetify.js
- VueJS Amsterdam 2018 (Amsterdam, Netherlands)
- Scaling Vue in an existing stack
- State of VueJS 2018
- Apollo, GraphQL and Vue the ultimate stack
- Speed up your Vue js development time with Nuxt.js
- Start using Vue.js like jQuery
- Automating boring Programming Tasks with the Angular CLI and Schematics
- MobX State Tree React pure reactivity served
- Unit testing Vue components Why test, what to test, and how to test Vue components
- State animations Getting them right
- Building reusable UI components in Vue
- Vue Development in CodeSandbox
- Create an Engaging Native Mobile App with Vue and NativeScript
- Moving from Angular v5+ to Vue
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”.
🆕 VueJS post on the blog:
— MeetupFeed (@meetupfeed) September 4, 2018
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.
Peter S Kang
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.
RequireLX (Lisboa, Portugal)
NewcastleJS (Newcastle, Australia)
How the NRL uses Vue.js to progressively enhance and hydrate server-side rendered HTML and their transition away from React. Matt is the Lead UX Engineer at nrl.com
Brad Ito (Retina.AI)
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.
Karel Mácha ((ex Clevershuttle) Westernacher Solutions AG)
– METEOR + VUeJS – introduction into meteor – why meteor ? – using meteor reactive data in Vue – using Single-file components in meteor project – routing for Vue and Meteor
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.
FreeCodeCamp Vienna (Vienna, Austria)
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/
On March 26-28 the first VueConf.us took place in New Orleans, LA. Gregg Pollack from Vue Mastery was there to ask each of the speakers (many of which who were Vue Core Team members) what they’re most excited about in the next year of Vue.js. More information and links can be found in my article here: https://medium.com/vue-mastery/the-future-of-vue-js-in-5-minutes-df9953142427
Evan You is the creator of the Vue project. In his VueConf talk he covers the growth of Vue, recent project releases, the maturing eco-system, the Vue-Loader rewrite, Vue CLI 3, upcoming releases of Vue.js, and initiatives to improve the stability and evolution of the library. More info: https://www.vuemastery.com/conferences/vueconf-2018/opening-keynote-evan-you/
We talk about what we’ve learned in 1 year of using Vue in production. How we mix in Vuex, webpack, and other tools. How we write tons of code and get from idea to production so quickly using VueJS as our workhorse. How we get crap done at GitLab. More info: https://www.vuemastery.com/conferences/vueconf-2018/how-we-do-vue-at-gitLab-jacob-schatz/
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.
We’ll cover key use cases for these functions within a Vue.js application: we’ll accept payments with stripe, we’ll gather geolocation data from Google Maps, and more! Making it work with Vue and Nuxt and simplifying how to leverage this paradigm to be a workhorse for your application. More info: https://www.vuemastery.com/conferences/vueconf-2018/serverless-functions-and-vue-sarah-drasner/
John Lindquist (egghead.io)
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.
Jen Looper (Progress)
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.
As a Vue consultant and member of the core team, Chris will share some of the lesser-known features and patterns you can use to improve your apps and amaze your colleagues.
In her talk, Miriam gives the why, what, and how of using design systems inside your applications. She also introduces Herman, an automated design system generator she helped build.
Daniel Rosenwasser (Microsoft)
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.
Peter Finn (SalesLoft)
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.
Sean Thomas Larkin (Microsoft)
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.
Eduardo San Martin Morote (Freelance)
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.
Matt Biilmann (Netlify)
In this lightning talk, Matt Biilmann, the CEO of Netlify, shows you how you can use Netlify to speed up and automate the deployment of your Vue apps in less than 8 minutes.
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.
VueJS Amsterdam 2018 (Amsterdam, Netherlands)
Greenfield Projects are a luxury we often don’t have. In this Talk Roman explains some patterns that allow to introduce Vue step by step to be able to scale that process eventually.
Learn more about how GraphQL, Apollo and Vue can evolve your workflow
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.
Edd Yerburgh (BBC)
Eduardo San Martin Morote (Freelance)
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.
This talk is about the story of CodeSandbox and how you can use CodeSandbox as your development tool for Vue.