Front End Component Architecture (React and Angular)
4.1 (8 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,234 students enrolled

Front End Component Architecture (React and Angular)

Understand how to build a large scale, enterprise grade front end application
4.1 (8 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,234 students enrolled
Created by Ebenezer Ogbu
Last updated 5/2019
English
English [Auto-generated]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • The student will learn how to take a complex ui-ux design and generate all the various component that could then be implemented in either react, angular, or vue.
Course content
Expand 6 lectures 04:06:31
+ Front End Component Architecture
6 lectures 04:06:31

Developing front end application using component architecture has several benefits, including:

- Reduction in cost of development and implementation
- Opportunity for reusing the components
- Increase in overall reliability and repeatability of the system
- Ease of maintenance and update

So, with these benefits in mind; and, given a complex UI/UX design, how do we go about identifying and generating all the various components that could then be implemented using either React, Angular, or Vue?

In this lecture, I demonstrate how to identify all the c=various components from a UI UX design..

Preview 38:09

In the first lecture, I showed how to identify the various front end components from a UI UX design.

In this second lecture, I continued from where I left off in the first lecture. Here I showed how to name and label all the identified components using MIND MAP.

The Mind Map could also form part of the front end documentation.

Naming and Numbering the Components using Mind Map
52:10

Finally, Time To Create The React App. In Lecture 1, I showed how to identify all the components from the given UI UX design.

In Lecture 2, I succeeded in creating the mind-map that shows all the components with their names, numbers, and composition structure.

In this Lecture, I demonstrate how to escalate things further, by creating a React App, and moving all the identified components from the mind map to our React App.

Building The Identified Components In React
01:22:50

In this lecture, I demonstrate how to create an Angular application and properly set up our project folders in Angular to enable us implement a robust component architecture.

Building The Identified Components In Angular
20:23

In this lecture, I demonstrate how to create the various  angular modules that will house all our identified components. I also showed how to create the components we have identified in Lecture 1 and Lecture 2.

Building The Identified Components In Angular Part 2
19:11

In this Lecture I completed all the remaining components that have to be created and showed how to properly compose the components.

Building The Identified Components In Angular Part 3
33:48
Requirements
  • Yes, the student will need to have access to concept-draw diagram, concept-draw mind-map, visual studio, and visual studio code.
Description

My name is Ebenezer Ogbu, and I am a full stack developer which means that I developer both front end application and back end application

When it comes to front end applications, I notice that much thought is not always given to developing the components that we implement in our applications. Which means that we do not fully utilise the full power of most of our front-end frameworks, including React, Angular, and Vue.

This gap has led me into developing this video, which takes you through the process of identifying components from the UI UX design and any requirements documents and then implementing those components in our applications.

In this training, I covered the principles of identifying, naming, and numbering the components using mind map.

After identifying, naming and transferring the detail to a mind map, I moved into implementing the components in our applications.

First, we started off implementing the components in a react application. I showed how to layout the folder to enable us to implement our component architecture and then showed how to create the individual components in our module.

Then I showed how to implement the same components in Angular.

Who this course is for:
  • Intermediate to senior level software developer who want to explore a method that will allow them generate the various front end component from a complex design in an easy and repeatable way.