Course outline on Vue JS for frontend web application development

Course outline on Vue JS for frontend web application development

So why Vue JS? Well, because this course is designed for those who have very limited programming experience. Although Angular is Google’s advanced and mature JavaScript framework, it takes time to build applications as well as a lot of programming experience. Vue, on the other side, is more suited to less demanding applications and is often used for swift prototyping.

Despite the massive popularity of Angular, Google chose to use Vue when developing a reactive wrapper for the Google Charts library. A growing number of other large companies use Vue, helping it become one of the top front end tools available today.

This course assumes that the learner has absolutely no prior experience in programming and therefore starts from the absolute basics of programming, then moves on to the domain of web development and finally to the target: Vue JS.

We shall be using Firebase for all backend and database integration.

By the end of this 5 day course, the learner shall be able to:

• Install the necessary software
• Learn JavaScripting for Vue
• Develop ​​web app using the latest features with Vue 3 including
  • Composition API,
  • Vuex,
  • Vue Router
• Build enterprise level Vue applications and deploy to production
• Use additional animation and graphics tools for visual enhancements
• Use Design patterns in Vue for best practices of software development
• Develop apps that can have File management
• Develop apps that can have Authentication and Access Control
• Integrate with firebase
• Enable app with routing features

Prerequisites

• Server with linux system
• PC with fast internet connection
• Basic computer skills
• Understanding of computer file system
• EIther Windows PowerShell or MacOS Terminal

Course Outline

Day One

• Basics of Programming Introduction
• Installation of prerequisites
• Algorithms
• Data types
• Pseudo coding
• Architecture and design of systems
• Resource allocation and planning
• Hello World
• Operators
• Variables
• Arrays
• Loops
• Conditions
• Functions
• HTML
• Static and Dynamic Web Pages
• Client Server Architecture
• Installing and running Vue
• Hello World - Again
• Methods and Bindings
• Event Driven Programming
• Generating and listening for events
• Passing events
• Modifiers and classifiers
• Instances in Vue
• Project App Development

Day Two

• Components
• Hooks
• Sass
• CSS
• Babel
• CLI
• Child Components
• Validating Props
• Callback Functions
• Inserting content with slots
• Named Slots
• Dynamic Components
• Basic web component animation with CSS Transitions
• Basic web component animation with CSS Animations
• Basic web component animation with JavaScript

Day Three

• Using Vue UI
• Tailwind
• Hands-on with Tailwind
• State
• Vuex Configuration
• Splitting the Template into Components
• Mutations
• Getters
• Mapping Getters and State Properties
• Aliases
• Forms
• Forms with tabs
• Form Rules
• Validations
• Dropdown and Checkbox Fields
• Sidebar: Slot Properties
• Rendering Multiple Error Messages
• Default Values
• Errors and Error Handling
• Validation Triggers
• Showing Alerts
• Finalizing the Login Form

Day Four

• Beginning with Routing
• Router Configuration
• Creating Routes
• Modes
• Navigating with Links
• Custom Links
• Naming Routes
• Guarding Authentication Only Routes
• Redirecting after Logging Out
• Avoiding Dependency Cycle
• Preparing the Upload Component
• Handling Drag and Drop Events
• Handling Files
• Uploading Files with Firebase
• Firebase Rules and Validation
• Progress Bar
• Improving the Progress Bar
• Storing the File Data in the Database
• Firebase References and Snapshots
• Database Operations
• Router Leave Guards

Day Five

• Additional Multimedia operations for compliance with HTML5 standard
• Optimizations
• Full Deployment to a real server
• Assessment