Registration & Breakfast (only for workshop attendees)
In this workshop we are going to do a deep dive into the two fundamental concepts in Vue: reactivity and rendering. We will explore how Vue detects and reacts to changes, and how Vue compiles your templates into virtual DOM render functions. Based on this knowledge, we will then discuss how to unlock the full potential of Vue with advanced component patterns.
In this workshop, we'll cover everything you need to know to get started building world-class Vue applications. Topics will include configuring Webpack for single-file components, setting up the most advanced workflows currently possible, how to organize (and reorganize) increasingly complex applications, and more.
Vue CLI 3 offers a turbo charged command line based workflow that far surpasses that of prior versions. With as few as one command, you can be up and running with a Vue project without having to touch a single config file. For added customization, Vue CLI can be extended via plugins. The process of creating a plugin is deceptively easy once you understand the base architecture of a plugin. In this workshop, we will demystify the internals of Vue CLI and cover best practices for building Vue CLI plugins so you can rely more on Vue CLI and spend more time being creative in Vue.
In Vue.js is quite simple to work with components, and share data among them using events and props - especially in small to medium projects. When an application starts growing, managing components state might become tedious and overwhelming. This is where Vuex comes to our rescue. Vuex is a state management pattern and official library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
By the end of the workshop, attendees will be able to develop elegant, debuggable, maintainable, and organized applications using a centralized store. No prior experience with Vuex is needed.
We will answer the common question “When should I use Vuex?” and work on real-world features.
Outline
Understanding State Management Patterns
What is Vuex and what problems solves
Core concepts including Mutations, Actions, and Getters
Modularising the store
Composing Vuex assets using Higher-Order Functions
Implementing Vuex pseudo-cache
Best practices, common gotchas, and application architecture
Components are the bread and butter of most modern front-end frameworks, such as Vue.js. They help you structure and manage your application by glueing together your application logic and the interface. However, as an application grows, its components tend to get bigger and harder to reason about.
This workshop will demonstrate how to efficiently design your components by focusing on maximum flexibility while avoiding premature optimisation. Throughout the workshop, we’ll build a set of components for a preexisting application. Following the evolving requirements, we will then perform a series of refactoring cycles to explore different possible solutions and patterns/anti-patterns.
We’ll also talk about good practices for managing responsibilities of our components. By the end of the workshop, you should be able to write future-proof components that are easy to work with and resilient to changes.
This workshop will teach you the fundamentals of Vue.js so you can start being productive and building apps immediately. With visual animations and analogies that make abstract concepts concrete, along with coding challenges that help you learn by doing, you'll have a solid foundation of Vue skills by the end of the day. Brought to you by the teachers at VueMastery.com.
VueVixens workshop on web/mobile development with VueJS
Join us before the conference to kickoff Vueconf.US 20191!
Welcome to VueConf.US 2019!
Creator of Vue, Evan You, will open the conference with an update on all thing Vue.js
So you know the Vue basics but keep on hearing about this Nuxt.js framework. Perhaps you’re wondering if you should use it on your next project? In this talk Gregg Pollack will visually explain why you should care about Nuxt and cover all the basics of using the framework to create scalable Vue applications. By the end you’ll see why Gregg describes Nuxt.js as: production ready Vue which helps you employ best practices as you build.
We've learned a lot since deploying our first Vue.js app in production over one year ago. I'd love to share our experience shipping Vue.js to desktop and mobile devices and leveling up our engineering team in the process. I'll discuss lessons learned from deprecating AngularJS and Bower to adopting Vue.js and deploying an internal NPM repo. I'll talk about the benefits we've seen with Vue.js by providing real stories from the volunteers that upgraded our tooling and the engineers that build the apps today. This is how Optoro upgraded its enterprise front-ends with Vue.js.
Understand Vue's state management pattern through a visual walkthrough.
Let's see how a rich artistic tradition can inspire and inform our craft as Vue.js developers.
Vue single file components empowers developers with ability to write declarative render functions using plain HTML-like syntax. The so called SFCs also provide features like collocation and scoped styles. We tend to use these SFCs effortlessly as any other JavaScript file but to reach that level of ease, Vue does the heavy lifting of transpilation. This talk takes a deep dive in the compilation process of Vue components and explains how to write a custom block processor. It also discovers some less known facts about SFCs.
In this talk, I’ll walk you through the coolest features of Vue.js and explore how to combine them with advanced CSS animations and transitions in order to create fancy interactive animations. We'll dive into a game built with Vue.js and how to apply similar techniques to spice up real-world applications.
With Vue framework your experience is not limited to web or mobile applications - you can create a desktop app as well! Let's check what options do we have to create one...
CSS has come a long way since the browser wars of the late 90s. What used to be a struggle, is now often a breeze (see box-shadow or border-radius). But the last 2 years have pushed CSS into entirely new territory: with DOM-aware variables and calculations that can drive your design.
We can inject data directly into our themes and layouts, but where does that data come from, and how do we safely wire it up? Vue provides all the tools we need, but first we have to understand the possibilities and constraints. We'll cover…
The basics for understanding CSS custom properties, grid, and calc().
Practical examples and use-cases for data-infused design.
How dynamic CSS & JS work together in this new paradigm.
Robust patterns for managing themes, layouts, and more from Vue.
We talk a lot about how to animate on the web, and what's possible in browsers today, but where is animation heading? In this talk, we'll start with some bleeding edge techniques such as native-like page transitions with nuxt, but then we'll push it further. The intersection of health and animation with biofeedback sensors and Vue, the future of 3d in the browser complete with interviews with people who are writing these specs... this talk will show that in terms of animation on the web, we're just getting started.
Join other Vueconf speakers and attendees for our first conf day reception!
Let's discuss the interesting features in the upcoming Vue 3 release!
With these 9 secrets revealed to you, take the performance of your app to the next level and make your users happy!
Input masking is a common pattern in form design that guide users to enter information in the correct format in a consistent manner. Typically this involves formatting user input according to the type of data they represent like dates, phone numbers, addresses and credit card numbers. You can achieve an input mask in Vue by leaning heavily Vue’s reactivity system chiefly methods, computed, and watchers. In this talk, we will cover the distinction between the various components that make up Vue’s reactivity system and how to leverage it in order to create semantic and robust input elements that respond seamlessly to user feedback.
Do you feel like you're stuck in the event loop of hell, forced to fumble through setTimeout after setTimeout day after day when all you want to do is leap out of bed singing "I got Vue babe" and wielding nextTick in style? Join us as we dive into the source code of nextTick and microtasks and make nextTick work for you today!
Want to learn about Web Accessibility with Vue.js?
A Board Certified Assistant Behavior Analyst turned Web Developer gives you a different take on accessibility and why it is important. Web Accessibility is a way to make everyone - regardless of hardware, software, language, location, or ability - have access to the web and internet in whole. Let's use Vue.js to create accessible web apps!
You built your Vue app but does it run everywhere? We'll explore how a Vue frontend with a Node.js backend can be structured, how to build them, debug them, and how to set up the app with Docker. We'll debug the app running in Docker, stream the logs, and deploy it to the cloud - ultimately showing how you can run your Vue app anywhere!
Vue as a framework prides itself for providing an excellent developer experience out of the box so devs can build awesome apps with it. Ionic as a component library shares these same values while providing a great UI for any kind of app. In this talk, we'll look at how we can use Ionic and Vue together to quickly create a compelling mobile application that can be deployed to the iOS, Android, and the Web.
Jacob provides a high level overview of common features that can be solved with time tested design patterns from the Gang of Four and mixed with Vue with Vuex to solve common problems like:
The Memento for undo and redo
The Bridge for an awesome drawing API
The Decorator for making games with
The Builder for your fast food ordering system
And many more.
The best part is you'll still use Vuex to manage your global state and Vue to manage your reactivity, but also add in some sweet design patterns to quickly solve tougher common programming problems.
It's not always easy to figure out where these classic design patterns fit in a modern framework like Vue which has solved many specific problems already, but Jacob will show you how they fit in perfectly
As we did at the first Vueconf.US, we'll be raffling off the artwork that's was created during the conference by our special guest artist!
Join us at Double Decker for karaoke! Grab dinner beforehand if you're hungry.
* Schedule subject to change, but we will try to keep this updated with the latest!
VueConf US
