Module 1: Introduction to Modern JavaScript Frameworks

·       The evolution of JavaScript and the need for frameworks

·       Overview of React, Angular, and Vue.js: key features and philosophies

·       Setting up the development environment (Node.js, npm/yarn, CLI tools)

·       Component-based architecture: principles and benefits

·       Virtual DOM and its impact on performance

·       Practical session: Setting up a basic project with each of the three frameworks using their respective CLIs.

Module 2: React Fundamentals

·       JSX syntax and rendering elements

·       Components: functional and class components

·       Props for passing data down the component tree

·       State management using useState hook

·       Handling events in React components

·       Practical session: Building a simple counter application using React components and state.

Module 3: Angular Fundamentals

·       Angular architecture: Modules, Components, Templates, Services

·       TypeScript basics for Angular development

·       Data binding: interpolation, property binding, event binding, two-way binding

·       Directives: structural and attribute directives  

·       Pipes for transforming data in templates

·       Practical session: Building a basic to-do list application using Angular components and data binding.

Module 4: Vue.js Fundamentals

·       Vue.js instance and template syntax

·       Data binding: interpolation, directives (v-bind, v-on, v-model)

·       Components: creating and using components

·       Props for passing data to child components

·       Emitting and handling events between components

·       Practical session: Building a simple greeting application using Vue.js components and data binding.

Module 5: Component State Management

·       Local component state in React (useState, useReducer)

·       Component interaction and data sharing in Angular (@Input, @Output, Services)

·       Local component state and props in Vue.js (data, props, emit)

·       Understanding the need for global state management

·       Introduction to state management libraries (Redux, NgRx, Vuex - overview)

·       Practical session: Implementing component communication in one of the frameworks.

Module 6: Routing in Single-Page Applications (SPA)

·       Introduction to client-side routing

·       Setting up routing in React with React Router

·       Configuring routes and navigation in Angular

·       Implementing routing in Vue.js with Vue Router

·       Passing parameters and handling route changes

·       Practical session: Setting up basic navigation between different views in a single-page application.

Module 7: Form Handling

·       Handling form input and submission in React (controlled and uncontrolled components)

·       Working with forms in Angular (template-driven and reactive forms)

·       Form handling in Vue.js (v-model and event handling)

·       Form validation in each framework

·       Submitting form data to a backend API

·       Practical session: Building a simple form with validation in one of the frameworks.

Module 8: API Integration

·       Making HTTP requests using fetch or libraries like Axios

·       Handling asynchronous operations with Promises and async/await

·       Fetching data from a backend API

·       Displaying data in components

·       Handling loading states and error conditions

·       Practical session: Fetching and displaying data from a public API in one of the frameworks.

Module 9: Styling Components

·       Styling React components (inline styles, CSS modules, styled-components)

·       Styling Angular components (component-specific CSS, global styles)

·       Styling Vue.js components (scoped CSS, global styles)

·       Using CSS preprocessors (Sass, Less)

·       Introduction to UI component libraries (Material UI, Angular Material, Vuetify)

·       Practical session: Styling components using different approaches in one of the frameworks.

Module 10: Unit Testing

·       Introduction to unit testing principles

·       Writing unit tests for React components with Jest and React Testing Library

·       Writing unit tests for Angular components with Jasmine and Karma

·       Writing unit tests for Vue.js components with Jest and Vue Test Utils

·       Mocking dependencies and testing asynchronous code

·       Practical session: Writing unit tests for a simple component in one of the frameworks.

Module 11: Advanced React Concepts

·       Hooks: useEffect, useContext, useRef, and custom hooks

·       Context API for global state management (basic)

·       Higher-order components (HOCs) and render props

·       Performance optimization techniques in React

·       Introduction to Redux or Zustand for more complex state management

·       Practical session: Implementing a custom hook in a React application.

Module 12: Advanced Angular Concepts

·       Services and Dependency Injection

·       Observables and RxJS for asynchronous operations

·       Advanced routing techniques (guards, resolvers)

·       State management with NgRx (introduction)

Working with modules and lazy loading

·       Practical session: Creating and using a service in an Angular application.

Module 13: Advanced Vue.js Concepts

·       Computed properties and watchers

·       Mixins and custom directives

·       Advanced component communication (event bus, provide/inject)

·       State management with Vuex (introduction)

·       Composition API (Vue 3) - overview

·       Practical session: Implementing a computed property and a watcher in a Vue.js application.

Module 14: Component Communication and Data Sharing

·       Props drilling and its limitations

·       Using context/provide-inject for cross-component communication

·       Implementing event bus patterns

·       Introduction to state management libraries for global state

·       Choosing the right approach for different scenarios

·       Practical session: Implementing a cross-component communication mechanism.

Module 15: Build Tools and Module Bundlers

·       Introduction to Webpack and Parcel

·       Understanding module bundling and optimization

·       Configuring build processes

·       Working with assets and static files

·       Code splitting and lazy loading

·       Practical session: Examining the configuration files of a build tool for one of the frameworks.

Module 16: Performance Optimization

·       Identifying performance bottlenecks in front-end applications

·       Code splitting and lazy loading

·       Optimizing images and assets

·       Memoization and shouldComponentUpdate (React)

·       Change detection strategies (Angular)

·       Virtual DOM optimizations

·       Practical session: Identifying a potential performance issue in a sample application.

Module 17: Server-Side Rendering (SSR) - Overview

·      

Requirements:

·       Participants should be reasonably proficient in English.

·       Applicants must live up to Armstrong Global Institute admission criteria.

Terms and Conditions

1. Discounts: Organizations sponsoring Four Participants will have the 5th attend Free

2. What is catered for by the Course Fees: Fees cater for all requirements for the training – Learning materials, Lunches, Teas, Snacks and Certification. All participants will additionally cater for their travel and accommodation expenses, visa application, insurance, and other personal expenses.

3. Certificate Awarded: Participants are awarded Certificates of Participation at the end of the training.

4. The program content shown here is for guidance purposes only. Our continuous course improvement process may lead to changes in topics and course structure.

5. Approval of Course: Our Programs are NITA Approved. Participating organizations can therefore claim reimbursement on fees paid in accordance with NITA Rules.

Booking for Training

Simply send an email to the Training Officer on training@armstrongglobalinstitute.com and we will send you a registration form. We advise you to book early to avoid missing a seat to this training.

Or call us on +254720272325 / +254725012095 / +254724452588

Payment Options

We provide 3 payment options, choose one for your convenience, and kindly make payments at least 5 days before the Training start date to reserve your seat:

1. Groups of 5 People and Above – Cheque Payments to: Armstrong Global Training & Development Center Limited should be paid in advance, 5 days to the training.

2. Invoice: We can send a bill directly to you or your company.

3. Deposit directly into Bank Account (Account details provided upon request)

Cancellation Policy

1. Payment for all courses includes a registration fee, which is non-refundable, and equals 15% of the total sum of the course fee.

2. Participants may cancel attendance 14 days or more prior to the training commencement date.

3. No refunds will be made 14 days or less before the training commencement date. However, participants who are unable to attend may opt to attend a similar training course at a later date or send a substitute participant provided the participation criteria have been met.

Tailor Made Courses

This training course can also be customized for your institution upon request for a minimum of 5 participants. You can have it conducted at our Training Centre or at a convenient location. For further inquiries, please contact us on Tel: +254720272325 / +254725012095 / +254724452588 or Email training@armstrongglobalinstitute.com

Accommodation and Airport Transfer

Accommodation and Airport Transfer is arranged upon request and at extra cost. For reservations contact the Training Officer on Email: training@armstrongglobalinstitute.com or on Tel: +254720272325 / +254725012095 / +254724452588