Full Stack Web Development : MERN

 

MERN: A Full Stack

 

What is Full Stack Development?

Full stack is where, the implementation of both client and server side is done.

Eg: MERN, MEAN, LAMP, Django, etc. 

(These are well-known Web-Dev Stacks now-days.)

What is MERN Stack?

MERN is a technology stack. To build web application with smooth development process.
It consists of MongoDB, ExpressJS, ReactJS, and NodeJS as its working components.

Biggest Advantage:-Every line of code is written in JavaScript.

Everyone in Web-Dev area know about MERN, but is it correct 'working' abbreviation, well no...
the proper basic working sequence is N-R-E-M.


Now, We will explore it in correct basic working sequence:

NodeJS

NodeJS is JavaScript runtime environment. It gives you a feature to run javascript code on your system
server rather than on browser.
It contain a package manager known as NPM, which will help you to install free packages and plugins to your work-station.

=> You can create a simple Node Application as:
-- npm init (in a work folder on your system)

(Create file containg JS code, let named as 'index.js' ) (in same work folder)
now all you have to do is ...

-- npm start   (To run your node application)

Further inside story, which you can explore:

*Create your own node modules
*Use Callbacks in node application
*Use error handling in node application
*Create a simple HTTP server using the Node HTTP core module
*Create a web server to serve static HTML files from a folder
*Use promise support to update the Node application to avoid callback hell

Biggest Advantage: easy to learn, easy to use.

ReactJS

A library created by Facebook. It is used to build UI components that create the
user interface of the single page web application under client side development.

You can start your react application by first installing “create-react-app” using npm or yarn.
-- yarn global add create-react-app
or
-- npm install create-react-app --global

Further inside story, which you can explore:

 
*Scaffold out a basic React application
*Configure your React project to use reactstrap. Now start using it.
*Create a React component
*Construct the view for your component using JSX and JavaScript
*Identify the salient features and uses for the various types of components
*Create presentational, container and functional components in your React application
*Install and configure your application to use React Router
*Make use of Font Awesome icons and Bootstrap-social within your React application
*Use the React router to construct Single Page Application
*Design a controlled form in your React application.
*Create uncontrolled forms through uncontrolled components in React
*Handle the form submission in the React application
*Install and Configure Redux in your application and enable your React app to make use of Redux
*Configure and use react-redux-form to create Controlled forms
*Store the form state in the Redux store
*Define Redux actions
*Use Redux Thunk middleware to return a function instead of an action
*Use a logger middleware to print a log of actions initiated on the Redux store.
*Use Fetch to communicate from your React application with a REST API server
*Add subtle animations using the react-transition-group
*Add additional component animations using react-animation-components
*Build your React application using the react-scripts to create a distribution folder and Deploy your application to a server by copying the built files to your server
(In beginning you can Use the json-server as a simple static web server.)

Biggest Advantage: ReactJS allows a developer to break down the complex UI into simpler components and gives best possible rendering performance.

ExpressJS

ExpressJS is a NodeJS based framework, used to create server-side web applications and API's in a faster and smarter way.

Simply install using npm as:
-- npm install express --save

Further inside story, which you can explore:

 
*Implement a web server using the Express framework
*Implement a web server that serves static content
*Use Express router to implement support for the REST API
*Quickly scaffold out a typical Express application using express-generator
*Build an Express server to support REST API
*Set up your Express application to use cookies.
*Set up the Express server to use express-session to track authenticated users.
*Set up your Express application to use Passport to perform local authentication
*Set up token-based authentication with Passport, jsonwebtoken, and Express.
*Set up your Express server to use Multer to upload files to a designated folder
*Enable your Express application to support CORS requests by configuring the CORS module
*Set up your server using Passport OAuth modules to enable user authentication using OAuth providers.
*Integrate your client side application written in React with a REST API server

Biggest Advantage: A quick and efficient way to write back-end story.

MongoDB

MongoDB is a No-SQL database used to store the application data.
Its installation gives a Mongo REPL shell which provides a JavaScript interface through which the users can interact and carry out operations.

Simply install as:
Go to http://www.mongodb.org , then download and install MongoDB as per the instructions given there.

Further use command 'mongod' and 'mongo' to start working on your application data.

Further inside story, which you can explore:

 
*Start the server and interact with it using the Mongo REPL shell
*Configure your Node application to communicate with a MongoDB server
*Perform various database operations on the MongoDB server from your Node application using the Node MongoDB driver.
*Define and construct Mongoose schemas and models
*Interact with MongoDB server using Mongoose from your Node application.
*Develop a full-fledged REST API server with Express, MongoDB and Mongoose
*Implement the end-to-end solution integrating Express, Node and Mongo.
*Reference a MongoDB document from another document
*Use Mongoose population to populate information into a document from a referenced document

Biggest Advantage: easy to scale, no complexity.


Why Web Development is so special ?
Well every field has its own cool ways and it varies from person to person why they are part of it.

For me,
Web development is the only place after Web/Graphics Design, which can create a feeling for users, and everybody knows feeling is important.