Course : Vue.js - Web application development
Practical course - 3d
- 21h00 - Ref. AJC
|
Download in PDF format
Share this course by email
 | Mastering the JavaScript developer environment |
| Understanding the key principles and best practices of Vue.js |
| Learn about the essential tools for developing dynamic web applications with Vue.js |
| Developing a single-page application with Vue.js |
| Performing tests |
Intended audience
For OPCO Atlas members: web developers, integrators, software architects, project managers...
Prerequisites
A good working knowledge of HTML and JavaScript.
Practical details
Teaching methods
To optimize the learning experience, e-learning modules can be provided before and after the classroom session or virtual class, at the participant's request.
Course schedule
1 JavaScript, learning the basics - Pre-training digital learning content
- Introduction.
- Basic language.
- Script execution.
- JavaScript objects and callbacks.
- DOM manipulation.
Digital activities
This online course teaches the essential basics of JavaScript, such as functions, conditions and loops, so you can develop your first applications independently. Participants will put their knowledge into practice by creating a task management application (ToDoList), and will be ready to tackle frameworks such as AngularJS or Node.js.
2 The modern JS developer ecosystem
- Modern ECMAScript features.
- TypeScript integration.
- Modern JavaScript tooling.
- DevTools specific to Vue.js.
Hands-on work
Modern JavaScript, practicing TypeScript, DevTools and debugging.
3 Using Vue.js with Vite
- Vite fundamentals and benefits.
- Architecture of a modern Vue.js project.
- Dependency and script management.
- Good structuring practices.
Hands-on work
Installation and project architecture. Scripts and optimization.
4 The components
- Syntax and templating Vue.js.
- Component architecture.
- Style management and scoping.
- Communication between components.
- Advanced composition patterns.
- Lifecycle hooks.
Hands-on work
Component creation, advanced composition, lifecycle and optimization.
5 Divide your code into components
- Component architecture.
- Advanced composition patterns.
- Reusing logic.
- Testing and validation.
- Good structuring practices.
Hands-on work
Break down into components and component patterns. Validate and optimize.
6 Status management with Composition API
- Reactive and deep-reflecting.
- Complex reference management.
- Advanced computed properties.
- Watchers and their options.
- Pattern Provide/Inject.
- State management patterns.
Hands-on work
Local status and responsiveness, communication patterns, debugging and optimization.
7 Router view and navigation
- Advanced router configuration.
- Programmatic navigation.
- Guards and middleware.
- Route meta fields.
- Lazy road loading.
- Nested routes and views.
- Parameter management.
Hands-on work
Configuring routing. Advanced routes. Test and validate.
8 Status management with Pinia
- Pinia architecture.
- Set up and configuration.
- Blinds and state.
- Getters and actions.
- Mutations and state changes.
- Modules and composition.
- Plug-ins and extensions.
- DevTools integration.
Hands-on work
Install and configure Pinia. Advanced actions. Test and optimize.
9 Testing and code quality
- Testing framework Vitest.
- Utils test view.
- Component testing.
- E2E testing with Cypress.
- Code coverage.
- CI/CD for Vue.js.
- Code quality tools.
Hands-on work
Unit testing, E2E, CI/CD and quality testing.
10 Advanced components
- Advanced pattern slots.
- Dynamic components.
- Transitions and animations.
- Optimized conditional rendering.
- Portals and teleportation.
- Performance patterns.
Hands-on work
Dynamic components, transitions and animations, portals and optimization.
11 API integration and data management
- HTTP clients (Axios/Fetch).
- Query management.
- Error handling.
- Caching and optimization.
- Interceptors.
- Data validation.
- State synchronization.
Hands-on work
Install the API layer, manage data, validate and test.
12 Performance and optimization
- Advanced splitting code.
- Lazy loading intelligent.
- Bundle optimization.
- Runtime performance.
- Caching strategies.
- Server-side rendering.
- Build optimization.
Hands-on work
Bundle optimization, performance runtime, deployment optimization.
13 Production and deployment
- Production configuration.
- Application security.
- Monitoring and logging.
- SEO and metadata.
- Ongoing maintenance.
- Update strategies.
- Documentation.
Hands-on work
Configuring production. Monitoring and SEO. Document the project.
14 Vue.js, the JavaScript framework for front-end web development - Post-training digital learning content
- Introduction.
- Use Vue.js to interact with the DOM.
- Implement Vue.js responsiveness.
- Structuring a page into components.
Digital activities
Cette formation en ligne d'2h33 apprend à créer des interfaces utilisateur riches et dynamiques avec le framework JavaScript progressif Vue.js. Afin d'illustrer et de mettre en pratique les différentes fonctionnalités, la vidéo présente en fil rouge la conception et la réalisation d'un jeu de rapidité et d'adresse.
Pour commencer, les participants découvriront Vue.js et les cas dans lesquels il est à privilégier par rapport à d'autres frameworks tels que Angular ou React. Puis, ils étudieront la création d'une première instance de type Vue et son cycle de vie.
Les participants verront ensuite comment utiliser Vue.js pour interagir avec le DOM. Ils manipuleront ainsi différentes propriétés, méthodes, attributs ou directives pour initialiser la grille du jeu, modifier l'affichage des cases, compter le nombre d'essais restants ou encore afficher un message de félicitations.
PARTICIPANTS
For OPCO Atlas members: web developers, integrators, software architects, project managers...
PREREQUISITES
A good working knowledge of HTML and JavaScript.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
For OPCO Atlas members: web developers, integrators, software architects, project managers...
PREREQUISITES
A good working knowledge of HTML and JavaScript.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Dates and locations
Select your location or opt for the remote class then choose your date.
Remote class
Dernières places
Date garantie en présentiel ou à distance
Session garantie