intro to mean & mern

1. INTRODUCTION TO MEAN AND MERN
MUHAMMAD ZAIN SHEIKH – DSC UNIDEB

2. A SHORT
INTRODUCTION
TO WEB
APPLICATION
DEVELOPMENT
A web application, often referred to as a web app, is an interactive
computer program built with web technologies (HTML, CSS, JS),
which stores (Database, Files) and manipulates data (CRUD), and
is used by a team or single user to perform tasks over the internet.
CRUD is a popular acronym and is at the heart of web app
development. It stands for Create, Read, Update, and Delete. Web
apps are accessed via a web browser such as Google Chrome, and
often involve a login/signup mechanism.

3. INTRODUCTION TO MONGO-DB
 MongoDB is a NoSQL database which stores the
data in form of key-value pairs. It is an Open
Source, Document Database which provides high
performance and scalability along with data
modelling and data management of huge sets of
data in an enterprise application.
 MongoDB also provides the feature of Auto-
Scaling. Since, MongoDB is a cross platform
database and can be installed across different
platforms like Windows, Linux et

4.  Why should use MongoDB
 Document Oriented Storage : Data is stored in the form of JSON style documents
 Index on any attribute
 Replication & High Availability
 Auto-Sharding
 Rich Queries
 Fast In-Place Updates
 Professional Support By MongoDB
 Where should use MongoDB?
 Big Data
 Content Management and Delivery
 Mobile and Social Infrastructure
 User Data Management
 Data Hub

5. WHAT IS DOCUMENT
BASED STORAGE?
 A Document is nothing but a data structure with name-value pairs like in JSON. It is very easy to map any custom Object of any
programming language with a MongoDB Document. For example : Student object has attributes name, rollno and subjects,
where subjects is a List.
 JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object
syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it
can be displayed on a web page, or vice versa)
 We can see, Documents are actually JSON representation of custom Objects. Also, excessive JOINS can be avoided by saving
data in form of Arrays and Documents(Embedded) inside a Document.

6. INTRODUCTION TO HTTP SERVER,MIDDLEWARE AND
ROUTING
 An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser
uses to view webpages). An HTTP server can be accessed through the domain names of the websites it
stores, and it delivers the content of these hosted websites to the end user's device.
 Middleware is software that bridges gaps between other applications, tools, and databases in order to provide
unified services to users. It is commonly characterized as the glue that connects different software platforms
and devices together.
 Routing is the process of selecting a path for traffic in a network or between or across multiple networks.
Broadly, routing is performed in many types of networks, including circuit-switched networks, such as the
public switched telephone network (PSTN), and computer networks, such as the Internet.

7. INTRODUCTION TO EXPRESS JS
 Express.js (Express) is a light web framework which sits on top of Node.js and it adds functionality like
(middleware, routing, etc.) and simplicity to Node.js. Express lets you take away a lot of the complexities of
Node.js while adding helpful functions to a Node.js HTTP server.
 Instead of a large request handler function, Express allows us to handle requests by writing many small
modular and maintainable functions.
 Express is not opinionated, meaning Express does not enforce any “right way” of doing things. You can use
any compatible middleware, and you can structure the app as you wish, making it flexible.
 We can integrate with a template rendering engine (also called a view rendering engine in some articles) of our
choice like Jade, Pug, EJS, etc. If you wrote any serious apps using only the core Node.js modules, you most
likely found yourself
 reinventing the wheel by constantly writing the same code for the similar tasks, such as:
 • Parsing of HTTP request bodies
 • Parsing of cookies
 • Managing sessions
 • Organizing routes with a chain of if conditions based on URL paths and HTTP methods of
 the requests
 • Determining proper response headers based on data types
 Express.js solves these and many other problems. It also provides an MVC-like structure for your web apps.
Those apps could vary from barebone back-end-only REST APIs to full-blown highly scalable full-stack (with
jade-browser² and Socket.IO³) real-time web apps.

8. INTRODUCTION TO JAVASCRIPT(JS) AND DOM(DOCUMENT OBJECT
MODEL)
 The Document Object Model is a cross-platform and language-independent interface that treats an XML or
HTML document as a tree structure wherein each node is an object representing a part of the document. The
DOM represents a document with a logical tree.
 JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript
specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket
syntax, dynamic typing, prototype-based object-orientation, and first-class functions

9. INTRODUCTION TO REACT JS
 React is a JavaScript library that forces you to think in terms of components.
This model of thinking fits user interfaces well. Depending on your background
it might feel alien at first. You will have to think very carefully about the concept
of state and where it belongs.
 Because state management is a difficult problem, a variety of solutions have
appeared. In this book, we'll start by managing state ourselves and then push it
to a Flux implementation known as Alt. There are also implementations
available for several other alternatives, such as Redux, MobX, and Cerebral.
 React is pragmatic in the sense that it contains a set of escape hatches. If the
React model doesn't work for you, it is still possible to revert back to something
lower level. For instance, there are hooks that can be used to wrap older logic
that relies on the DOM. This breaks the abstraction and ties your code to a
specific environment, but sometimes that's the pragmatic thing to do.

10. INTRODUCTION TO NODE JS
 Node.js is a platform built on Chrome's JavaScript runtime
for easily building fast and scalable network applications.
Node.js uses an event-driven, non-blocking I/O model that
makes it lightweight and efficient, perfect for data-intensive
real-time applications that run across distributed devices.
 Node.js is an open source, cross-platform runtime
environment for developing server-side and networking
applications. Node.js applications are written in JavaScript,
and can be run within the Node.js runtime on OS X,
Microsoft Windows, and Linux.
 Node.js also provides a rich library of various JavaScript
modules which simplifies the development of web
applications using Node.js to a great extent.

11. INTRODUCTION TO TYPESCRIPT
 TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by
adding static type definitions.
 TypeScript technically is JavaScript with static typing, whenever you want to have it.
 Types provide a way to describe the shape of an object, providing better documentation, and allowing
TypeScript to validate that your code is working correctly.
 Writing types can be optional in TypeScript, because type inference allows you to get a lot of power without
writing additional code.
 Now, what would be the reasons for adding static typing to JavaScript? I can list at least three:
 You can avoid masterfully-hidden-ninja errors like the classic 'undefined' is not a function. It is easier to
refactor code without breaking it significantly.Orienting oneself in complex, large-scale systems is not a
nightmare anymore.

12.  Cross-Platform: The TypeScript compiler can be installed on any Operating System such as Windows, MacOS, and
Linux.
 Object-Oriented Language: TypeScript provides features like Classes, Interfaces, and Modules. Thus, it can write
object-oriented code for client-side as well as server-side development.
 Static type-checking: TypeScript uses static typing and helps type checking at compile time. Thus, you can find errors
while writing the code without running the script.
 Optional Static Typing: TypeScript also allows optional static typing in case you are using the dynamic typing of
JavaScript.
 DOM Manipulation: You can use TypeScript to manipulate the DOM for adding or removing elements.
 ES 6 Features: TypeScript includes most features of planned ECMAScript 2015 (ES 6, 7) such as class, interface,
Arrow functions, etc.
 Now let’s see what are the different benefits of using TypeScript. Benefits of Using TypeScript
 TypeScript is fast, simple, easy to learn and runs on any browser or JavaScript engine.
 It is similar to JavaScript and uses the same syntax and semantics.
 This helps backend developers write front-end code faster.
 You can call the TypeScript code from an existing JavaScript code. Also, it works with existing JavaScript frameworks
and libraries without any issues.
 The Definition file, with .d.ts extension, provides support for existing JavaScript libraries like Jquery, D3.js, etc. So,
TypeScript code can add JavaScript libraries using type definitions to avail the benefits of type-checking, code
autocompletion, and documentation in existing dynamically-typed JavaScript libraries.

13. INTRODUCTION TO ANGULAR
 Angular is a platform and framework for building single-page client applications using
HTML and TypeScript. Angular is written in TypeScript. It implements core and
optional functionality as a set of TypeScript libraries that you import into your apps.
 The architecture of an Angular application relies on certain fundamental concepts.
The basic building blocks of the Angular framework are Angular components that are
organized into NgModules. NgModules collect related code into functional sets; an
Angular app is defined by a set of NgModules. An app always has at least a root
module that enables bootstrapping, and typically has many more feature modules.(An
NgModule is a class marked by the @NgModule decorator. @NgModule takes a
metadata object that describes how to compile a component's template and how to
create an injector at runtime.)
 Components define views, which are sets of screen elements that Angular can
choose among and modify according to your program logic and data.
 Components use services, which provide specific functionality not directly related to
views. Service providers can be injected into components as dependencies, making
your code modular, reusable, and efficient.

14.  Modules, components and services are classes that use decorators. These decorators mark their type and provide
metadata that tells Angular how to use them.
 The metadata for a component class associates it with a template that defines a view. A template combines ordinary
HTML with Angular directives and binding markup that allow Angular to modify the HTML before rendering it for
display.(Metadata is "data" that provides information about other data". In other words, it is "data about data". Many
distinct types of metadata exist, including descriptive metadata, structural metadata, administrative metadata,
reference metadata, statistical metadata. and legal metadata. )
 The metadata for a service class provides the information Angular needs to make it available to components through
dependency injection (DI).(In software engineering, dependency injection is a technique in which an object receives
other objects that it depends on. These other objects are called dependencies. In the typical "using" relationship the
receiving object is called a client and the passed object is called a service.)
 An app's components typically define many views, arranged hierarchically. Angular provides the Router service to
help you define navigation paths among views. The router provides sophisticated in-browser navigational capabilities.

21. PRODUCTIVITY
 Given MongoDB, Express.js, and Node.js are common to both MEAN and MERN, the productivity differences
between the two would flow from the differences between Angular and React. Being a complete framework,
Angular offers better productivity.
 You would typically use other 3rd party libraries in conjunction with React, which offers relatively lower
developer productivity. Note that Angular features a “Command Line Interface” (CLI), and this further
enhances developers’ productivity. When you upgrade your code, you will find that the Angular CLI makes it
easier. Upgrading your React code is a more involved effort due to the presence of 3rd party libraries.

22. DATA FLOW
 The data flow is bidirectional in the case of Angular, i.e., if you change the UI, then it automatically changes
the model state. You will find this quite different in the case of React, where the data flow is unidirectional. If
you use React, that you can change the UI only after changing the model state.
 The unidirectional data binding offered by React provides you with a better data overview, which helps you to
manage large projects. This makes the MERN stack more suitable for managing larger projects.
 On the other hand, if you are executing a small project, then the bi-directional data-binding offered by Angular
proves to be a more effective approach. You will gain by using the MEAN stack here.

30.  Modern technology stacks have made web and mobile application development far easier than earlier.
However, given the wide range of technology stacks in the market, you might sometimes find it hard to choose
one for your project.
 Both MEAN vs MERN stacks have many similarities, moreover, both offer several advantages. They differ vis-
a-vis certain decision-making criteria, e.g., the MERN stack is better for mobile development, the MEAN stack
offers better productivity, etc. In the ultimate analysis, your overall project requirements will drive your choice
of the technology stack.