HackCamp VueJS : Build Tesla and HackFlix applications

Training overview

This hands-on training will provide you with in-depth knowledge of VueJS framework (version 2.5.17), including features such as the vue-cli, vue-router and vuex.

During the three days, you will work in 2 real applications to fix bugs and add new features to make them run again to put intro practice all the theory that will be covered.

The challenges:

Tesla needs your HELP! Some of their competitors have been messing up with their code and the calculations for their cars are not correct. After several attempts to solve this, they are shouting out for help! They are looking for JS developers who want to help them fix their calculator and learn VueJS in the process. Not convinced yet? The mentors are also assembling a team of devs to fix the VueJS application of HackFlix. HackFlix is a video streaming website serving 148 million users, whose evil the evil competitor Hackazon Prime is trying to destroy.

Have a look at how the training looks like here.

For who is this challenge?

Software engineers, developers and designers who want to build robust web progressive applications with VueJS and Redux (Vuex).

What is the required knowledge to join this course?

You need to be comfortable writing JavaScript. You need to know what the spread/rest operator is, how to deal with async programming (typically fetching data from a server using Promises).

The concept of this in JavaScript should not scare you. No prior Vue.js experience is required. Git knowledge is not required.

Participants should be comfortable following the training in English.

Core concepts in Vue

• Vue Instance
• Template syntax
• Directives
• Event handling
• Form bindings and validation with vee-validate
• Components
• Lifecycle
• Communication Patterns
• Component Architecture (SMART/DUMB)
• Custom Events
• Slots
• Async Components

\===

Scaling Up

• Rapid Vue.js development with vue-cli
• Routing
• Simple Routing From Scratch
• Core concept of vue-router
• Dynamic Route Matching
• Nested Routes
• Programmatic Navigation
• Named Routes
• Named Views
• Redirect and Alias
• Passing Props to Route Components
• Advanced in vue-router
• Guard
• Data fetching patterns - fetching After/Before Navigation
• Lazy loading
• Data fetching using axios
• State Management using vuex
• state management patterns in a nutshell
• What is Vuex?
• Using Actions, Mutations and Getters
• Modules / plugins
• Composing actions (Promises and Async/Await)
• Testing
• Best practices and common pitfalls
• Testing
• Unit tests with Jest and vue-test-utils
• E2E tests with Nightwatch/ Cypress

\===

Reusability & Composition

• Mixing
• Custom Directives
• Render Functions & JSX
• Plugins
• Filters
• Typescript
• Advanced Component Patterns