In this tutorial, we will discuss about microservices but before we go to microservices, first let’s understand why we are here? Why there is so much of hype about microservices?
Before we get into microservices, it is very important to understand:
What is Monolithic application?
A monolithic application is an application where every part of a product is a part of single application or web application and usually the data of entire application is in a single data store.
Issues with Monolithic application?
Source code management in source control. It means each and every project’s module exists in single solution explorer of the project. So that we face lots of difficulties to maintain the project.
Code and Database Deployments and rollbacks are a nightmare.
Extremely big team, hence management nightmare. The side effect of this horizontal teams, which makes an organization move like a sloth due to interdendence.
Any changes or updates to the application require modifying and redeployment of entire code.
What is Microservices?
Microservices are smaller single responsibility services. It is an approach to dividing the application into smaller, independent services. Each services have an individual specific function that communicate with other services through Apis.
Design pattern are evolved as reusable solution to the problems that we encounter every day of programming. They are generally targeted at solving of object generation and integration. In other words, Design Pattern act as a templates that can be applied to the real-world problem.
The book is divided into two parts in which first part explaining about the Pros and Cons of Object Oriented Programming and the second part explaining the evolution of 23 classic software design patterns.
From then, Gang of Four design patterns has made a significant role in the software development life cycle.
Types of Design Patterns
There are 3 types of Design Patterns
Creational
This type deals with the object creation and initialization. This program makes the program more flexible and decide which objects need to be created for a given case.
Example: Singleton, Factory, Abstract Factory.. etc.
Structural
This type deals with class and object composition. This pattern focuses on decoupling interface and implementation of class and its objects.
Example: Adapter, Bridge.. etc
Behavioral
This type deals with communication between Classes and objects.
Example: Chain of Responsibility, Command, Interpreter… etc
Angular is a client-side(Browser) Framework which allows us to build Single-Page-Applications(SPA).
Angular job is to not only render static data like html and cs.s but also render dynamic data to the browser.
Angular is responsible for validating user input and sending it to the server.
Angular communicate with our backend with Node, Express, Mongo combination.
Angular provides a “Mobile-App” like user interface that means it never need to reload the page just change the parts of the page with JavaScript to Angular and therefore everything happens instantly in very reactive way.
What is NodeJS?
NodeJS is a open-source and cross-platform JavaScript runtime environment. It takes the request from the front-end application like angular. Angular could send a request to fetch the list of all the post and node reach out to the database then send back the response with all these post.
NodeJS is primarily used for server side scripting to build scalable network connections.
NodeJS often used to create RESTful API’s and microservices.
NodeJS executes Server-Side logic in general
What is Express?
Express is a Node Framework which simplifies writing Server-Side code and logic.
Express framework creates fast, secure and scalable NodeJS application.
It provide some extra feature to node to create our application faster. We can use middleware to handle request.
Express connect to the database like MySQL, MongoDB and other quickly.
What is MongoDB?
MongoDB is a NoSQL Database which stores “Documents” in “Collection” instead of “Records” in “Tables” as in SQL.
It enforce no data schema or relations. All data store in the form of documents or collection.
It easily connected to node/express(not to angular).
It’s a powerful database which can easily be integrated into a Node/Express environment.
Q1 : What is React? What is the Role of React in Software Development ?
Answer: 3 points need to remember about React :
React is open source Javascript Libraby.
React is used for user interfaces.
React simplifies the creation of SPA (Single Page Application) by using Reusable Component.
Q2 : What are the Key Features of React ?
Answer: There are 7 Key Features of React.
Virtual DOM
Component based architecture
Reusability & Composition
JSX(Java Script & XML)
Declarative Syntax
Community & Ecosystem
React Hook
Q3 : What is Virtual DOM? Difference between DOM and Virtual DOM?
Answer : First we discuss about real DOM. whenever the user will do any changes in application basically we are updating the real DOM right, now what is Virtual DOM and why do we need it?
First of all DOM is a general and real concept in all the browsers. Without DOM our application can’t interact or handle JavaScript but Virtual DOM is specific for react only and it is not mandatory. It is developed by Facebook for improve the speed of the application.
Basically there is a performance problem in Real DOM. The problem is even if a user makes very small change in web application in the browser even then the whole layout will render in the DOM. For example, If a user change only one element in title of html even then browser will re-render or refresh whole layout of the entire page. It will very time consuming, that time consumption will increase the loaded time of the page and that will increase the speed and performance problem. To solve the problem we use Virtual DOM.
In React application, React user open react based website in there browser then in the background React library will make and exact copy of the DOM and show that copy to the front of user. So this exact copy of DOM is Virtual DOM. When the user make some changes to the elements in html it looks like user is interacting with real DOM but actually the user make changes in Virtual DOM.
The specialty of Virtual DOM is if the user makes some changes any element in HTML now Virtual DOM not render whole virtual DOM for small changes. Only the small specific part of the virtual DOM will be updated and In background React algorithm of React Library will keep comparing the changes between Virtual DOM and Real DOM and whatever change has made by user in Virtual DOM only those changes will be updated in Real DOM.
Q4 : What are React Components? What are main elements of it?
Answer : In React, a component is a reusable building block for creating user interfaces. It can be either functional or class-based.
Main element of React :
Import
Export
Q5 : What are the 5 advantage of React?
Answer: Advantage of React :
Simple to build Single Page Application by using Component.
React is cross platform and open source (Free to Use).
React is lightweight and very fast(Virtual DOM).
Large community and ecosystem.
Testing is easy.
Q6. What is the role of JSX in React?
Answer : JSX stands for JavaScript XML. The key point of JSX are :
JSX is used by React to write HTML-like code within JavaScript.
JSX makes easier to write and add HTML in React.
JSX uses camelcase notification for naming HTML attribute. For example, username in HTML is used as userName in JSX.
To insert a large number of HTML we have to write it in parenthesis i.e, ().
Q7. What is SPA(Single Page Application)?
Answer : A single Page Application(SPA) is a web application that is designed to be displayed as a single, static page. As the user clicks link and interact with the page of the website, subsequent content is loaded dynamically. The result is more fluid and faster without any page refresh.
Q8. What difference between Declarative and Imperative Syntax?
Answer :
Imperative
Procedural Programming Paradigm
Object Oriented Programming
Parallel Processing Approach
The User is allowed to make decisions and commands to the compiler.
Variable can be mutable
It provides step-by-step DOM mutations until we reach desired UI.
Imperative syntax(non-React) using JavaScript
function App(){ const element = document.createElement(“h1”); element.textContent = “Hello World”; document.body.appendChild(element); }
Declarative
Login Programming Paradigm
Functional Programming
Database Processing Approach
A compiler is allowed to make decisions.
Variable are typically immutable.
We doesn’t provide step-by-step instructions to reach the desired UI. Just tell React what to render in component’s logic, and React will figure out how best to display it to the user.
Declarative syntax using JSX
function App(){ return <h1> Hello World </h1>; }
Q9. How to pass data from Parent Component to Child Component in React?
Answer : In React, “props” are a mechanism for passing data from parent component to child component. Props are immutable means if the data are set by the parent component, they can not be changed by child component. The child component can only use it but should not modify.
// Parent component
function ParentComponent() {
const message = "Welcome from parent!";
return <ChildComponent greeting={message} />;
}
// Child component
function ChildComponent(props) {
return <p>{props.greeting}</p>;
}
Q10. What are React Hooks? Why Hooks are introduced in React?
Answer : Before React version 16.8, functional component can’t handle state, logic and lots of other React features and we only used them for rendering very simple components to the UI. To resolve this problem React Hooks are introduced.
Each React Hooks name is prefixed with the word “use”. For example useState and useEffect.