More Related Content
What's hot (19)
Similar to Introduction to mean and mern || Event by DSC UNIDEB (20)
More from Muhammad Raza (11)
Recently uploaded (20)
Introduction to mean and mern || Event by DSC UNIDEB
- 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.