backflow v0.2.6

Theory

• To understand the basics of technology used to write the code NodeJs

• How we import files & modules are mentioned here Modules.

• When we clone project from Github repo. It may be of different version. To manage versions NVM

• Details of packages that used in current project are mentioned in Package.json

Setting up Environment

1.Start the project & do the necessary paperwork.

npm init

2. Install the package backflow. Which contains folder structure & necessary templates & functions.

npm i backflow

3. After downloading , use ES-6 syntax. So, set "type":"module" in package.json.

4. Cut the readME file from node_modules & make a .gitignore file.

Patterns in Web development

• 1. MVC architecture

It is a model view controller architecture. In which models handles data , views shows data , & controller handles requests.

• Initialize project & make a server

npm init
npm i express

• Set path of views , view engine , layout for views. Views files have extension .ejs.

npm i ejs
server.set('view engine', 'ejs') ;
server.set('views' ,path) ;
server.use(ejsLayouts) ;
server.use(express.static('public')) ;

• Now , you have to make models & controllers, inside features folder.

• To use the controller functions in GET, POST or other requests. We have to use the instance of the class ( if function is not static)

• Inside controller functions , we use model functions to do CRUD operations on data.

• One type of feature may have multiple functions inside controller . To avoid mess in single index.js file . We can use route.js file to place all requests there.

• If controller is using this keyword inside constructor , then we cannot call function of controller directly instead we have to use arrow function.

router.post('/signin',(req,res)=>
{
    userController.signIn(req,res) ;
}) ;

• Make validatation & uploading middlewares.

• Securing application using session & cookies as middlewares.

# How these work actually ?

- ### When user sent the another request to server. Server dont know that it is the same user. 
- #### So , what server does is they make a session-id & sent back to user in cookies.
- #### When user sent another request , this session-id is automatically fetched from cookies

package used = npm i express-session

• 2. RESTful API

  • Use try catch block to catch(err) errors

try{}
catch(err)
{
throw new ApplicationError('error-message' , code) ;
}

• 3. Micro-services architecture

# Understanding this package

• 1. Use of each & every folder is listed here.

  • a-databaseConfig This contains files that makes connection with database .

  • b-loggedData This contains files that are logged in server.

  • b-public This contains static & dynamic files that server will serve as per request from user.

  • c-uploads This contains all the files that are stored on server , that user uploads on network.

  • d-middlewares This folder contains middlewares that does the work of processinig requests before they came to server.

  • e-modules Most important folder which contains all modules used in the application.

  • f-useful-functions This folder contains functions that I made , which makes the task easy to do.

  • g-events Nothing just notes of events.

  • h-features This folder will be different for each application as per the task.

• 3. Each folder contains files that you can use as examples to know . How to write code ?

# Create Project

• 5. Go on index.js & read it.

  • First you have to make a server.

  • Then you have to make a folder for dynamic files(views) & static files and give them path like views & for static.

  • Now to embedd javascript variables in views & for common templating of views. Use view engine & ejsLayouts.layout.ejs.

• Views these are dynamic files like HTML , that serves dynamic content based on user request. Extension used is .ejs.

• Forms are also metioned in layout.ejs , Default enctype for form is urlencoded . But we can modify it to use multipart/form-data for files.

• Every data that is sent is recieved in req.body. But if data is multipart than it is recieved in req.file.

• Now you can make controllers , models & views and thats it.

• Last stepYou can delete the unnecessary folders & modules in the end.

Start Server

• 4. Server.js This is the file that ultimately runs.

  • It is possible that there are lots of server on single machine. To connect with particular one , we need port Number.

  • Starts the server.

node server.js

# alternate
nodemon server.js

API Notes

• We use swagger for this purpose.

Testing

• Run the PostMan.

• Fill the URL & choose the request.

• Data can be sent in various formats in req.body.

  • form-data

    server.use(multer.any()) ;

  • form-urlencoded

    server.use(bodyParser.urlencoded({extended: true})) ;

• Data could be sent to server in URL in form of params & query

<!-- Params -->
server.get('/dynamicRoute/:id',(req,res)=>
{
    const {id} = req.params ;
    res.send(id) ;
})

<!-- Query -->

React application

• React does not directly does changes in DOM . But it makes a virtual DOM first.

• Then it compares virtual DOM with real DOM and paints only that nodes which changes.

• Components in react are made using functional or class-based.

Component properties

• Regular javascript function returnin jsx. JSX always enclosed in () parenthesis.

• Name starts with Capital letter.

• Instead class className is used.

• variables are enclosed in { }.

• We cannot use if-else inside jsx. But we use ternary operator or || , &&. As condition is about uncertainity, it also consider as variable and enclose in parenthesis.

• In case of && , if there are multiple conditions. this returns first: falsy part.

• In case of || , if there are multiple conditions. This returns first: truthy part.

• Only 0 , null , "" , undefined, false consider as false . Everything is true other than these.