Workshop: Design flexible components with Vue by creating a PWA app
Level up your skills with Vue
##About the workshop:
This is a two-day workshop on 14 and 15 September, in Bangalore. The workshop will cover the following:
Day 1: Crash course on Vue.
Day 2: Build performant PWAs using Vue and GraphQL
##Workshop plan:
On day 1, you will learn core concepts about Vue by building a basic Vue app using tailwind and Vue CLI. Even if you choose not to use Vue, you will learn about the core ideas of front-end architecture.
You can use these ideas in any component-based frameworks.
On day 2, this workshop will show you how to design flexible components with Vue. It is aimed at experienced Vue developers.
You will delve deep into leveraging the Vue ecosystem (Vuex, Vue Router, Vue CLI). The workshop will also cover extending Vue via plugins. You will learn core ideas of front-end architecture, GraphQL, state management, PWA and offline first and more.
##Who should attend this workshop:
You can choose to attend one of the two days of the workshop, or both days together.
The first day is aimed at beginners with no knowledge of VueJS..
The second day is aimed at experienced Vue developers -- intermediate to advanced. Knowledge of VueJS is necessary to participate in the second day.
##Pre-requisites for attending the workshop:
- You must be familiar and comfortable with HTML, CSS and JavaScript to attend this workshop.
- Prior experience with Vue is NOT required.
- Basic familiarity with the command line and proficiency in your favourite IDE is essential.
##Software installation instructions:
Install the following utilities on your laptop before the workshop:
- Node JS (Version 8 or above)
- Yarn / NPM
- Your favourite IDE (the instructor will use VS Code)
- Vue CLI
Participants who don’t install the necessary software before attending the workshop will not be given extra time at the workshop to complete installation.
##About the instructor:
Chirag Jain works on JavaScipt, big data infrastructure, and Visualization @ [Uber] (https://eng.uber.com/locations/bangalore/).
He is passionate about Type Systems (Rust/ReasonML/Flow), front-end frameworks (React/Vue), State Managment, GraphQL, design systems, career development and more.
##Workshop details:
Date: 14-15 September
Time: 9:30 AM to 5:30 PM
Venue: HasGeek House, #2699, 19th Main, 5th cross, HAL 2nd stage, Indiranagar, Bangalore - 560008
For ticket bookings and other queries, call 7676332020 or email: info@hasgeek.com
Chirag Jain
@chiragj
Building highly flexible Domain components in Vue
Submitted Aug 4, 2019
Section:
Workshop
Technical level:
Intermediate
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.
{{ gettext('Login to leave a comment') }}
{{ gettext('Post a comment…') }}{{ errorMsg }}
{{ gettext('No comments posted yet') }}