Workshop: Design flexible components with Vue by creating a PWA app

Want to level up your Vue skill?
Are you a Tech lead trying looking to get a quick feel of Vue to (maybe) choose it for your next project?
Are you a Frontend Developer looking to explore the Vue ecosystem?

This workshop will show you how to design flexible components with Vue.
You will learn to build a Progressive Web App (PWA) which will allow the users to place orders at a restaurant and a counterpart desktop app for book keeping.
Even if you choose not to use Vue, you’ll learn about core ideas of fontend architecture.
You can use this ideas in any component based frameworks.

Outline

We would be building from scratch apart from the backend. This will help you build re-usable components.
You’ll learn to leverage Vue to rapidly build user interfaces by writing minimal code.
You’ll learn advance web development best practices for building PWAs and Desktop Apps which are framework agnostic skills.
You’ll learn about the technical trade-offs between a PWA and a Desktop app.
We will touch a bit on the product side talking about design and UX.

The workshop will go as follows:

• Project setup with an overview of Vue CLI (scaffolding, managing dependencies and plugins)
• Integrate tailwind for rapid prototyping
• We’ll build flexible Vue components using slots and discuss how to compose components
• We’ll leverage custom events to communicate b/w components
• Use Vue Router for routing
• Integrate a GraphQL API using Apollo GraphQL
• Add Vuex for State management
• Introduction to building custom Plugins, Directives and Filters to extend Vue to fit your needs.

What we won’t cover:

• GraphQL won’t be covered in-depth
• Backend
• Server Side Rendering (SSR)
• Type Systems (TypeScript / Flow with Vue)
• Testing

Requirements

A lot of enthusiasm to learn.

An intermediate understanding of web technologies (HTML, CSS & JavaScript) is required for this workshop.
Vue is really easy to pick up even if you haven’t worked with it before, so no prior Vue experience is required.
Basic familiarity with the command line and proficiency in your favourite IDE will help a lot.

Please ensure the following utilities pre-installed on your laptop:
Required

• Node JS (Version 8 or above)
• Yarn / NPM
• Your favourite IDE (I’ll be using VS Code)
  Good to have
• Vue CLI

Speaker bio

Hi there, I’m Chirag Jain.
I work on JavaScipt, Big Data Infra and Visualization @ Uber.
Talk to me about Type Systems (Rust / ReasonML / Flow), Frontend frameworks (React / Vue), State Managment, GraphQL, Design Systems, Career development and more.