Download Full stack development notes and more Lecture notes Engineering in PDF only on Docsity!
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 1
UNIT I
Full Stack Development
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 2
Learning Resources
- Books
- A. Banks and E. Porcello, “Learning React: Functional Web
Development with React and Redux”, O’Reilly, 1 st Edition,
- Web Links (Strictly Referred):
- https://reactjs.org/
- https://nodejs.org/
- https://expressjs.com/
- https://developer.mozilla.org © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 3
Introduction
Wikipedia
- React is a free and open-source front-end JavaScript library for building
user interfaces based on UI components. It is maintained by Meta
(formerly Facebook) and a community of individual developers and
companies.
Microsoft
- React.js is the most popular front-end JavaScript framework. Developers
use JSX, a combination of HTML and JavaScript, to create views in a
natural way. Developers can also create components for blocks that can be
reused across their applications. This module introduces React and the core
skills developers need to use this powerful framework.
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 4
Learning Objectives
- The core concepts of both the frontend and backend programming.
- The latest web development technologies.
- Maintaining data using NoSQL data bases.
- Complete web application development process © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 5
Course Outcome
- CO1: Relate the basics of Javascript (JS) and ReactJS
- CO2: Apply the concepts of props and State Management in React JS
- CO3: Examine Redux and Router with React JS
- CO4: Appraise Node JS environment and modular development
- CO5: Develop full stack applications using MongoDB © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 6
Overview
UNIT- 1
- Introduction to React
- Obstacles and Roadblocks
- React Library, React Developer tools
- Introduction to ES
- Declaring variables in ES6, Arrow Functions, ES6 Objects and Arrays, ES modules
- Introduction to AJAX
- Pure React
- Page setup, virtual DOM
- React Element, React DOM, Constructing Elements with Data, React Components, DOM Rendering, First React Application using Create React App, React with JSX, React Element as JSX
- Props, State and Component Tree
- Property Validation, Validating Props with createClass, Default Props, ES6 Classes and stateless functional components, React state management, State within the component tree, state vs. props, Forms in React
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 10
Introduction
- React is a JavaScript library for building user interface
- Declarative
- Efficient
- Flexible
- Complex UIs Problem
- Components
- small and isolated pieces of code
- use to tell React what will beon the screen
- On every data change, update and re-render the component.
- React has a few different kinds of components
- Component
- Takes some parameters called Properties (props).
- Returns a hierarchy of views via render method
- Render()
- Returns a description to the client for presentation
- Returns a react element, a lightweight element
- Use a special syntax called “JSX” which makes these structures easier to write © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 11
Introduction
- Node.js is an open-source and cross-platform JavaScript runtime environment to create all kinds of server-side tools and applications
- Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser
- JavaScript is a programming language that was created at Netscape as a scripting tool to manipulate web pages inside their browser
- Netscape was to sell Web Servers, called Netscape LiveWire.
- create dynamic pages using server-side JavaScript (FAILURE)
- Web 2.0 applications (such as Flickr, Gmail, etc.) that showed the world what a modern experience on the web could be like
- 2009: Node.js is born
- 2010:
- Socket.io: Socket.IO is a library that enables low-latency, bidirectional and event- based communication between a client and a server.
- Express: Fast, unopinionated, minimalist web framework for Node.js
- 2011: Hapi: Build powerful, scalable applications, with minimal overhead © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 12
Introduction
- First big blogging platform using Node.js: Ghost
- Koa is born
- 2014:
- The Big Fork: io.js is a major fork of Node.js, with the goal of introducing ES support and moving faster
- 2015:
- The Node.js Foundation is born
- IO.js is merged back into Node.js
- npm introduces private modules
- Node.js 4 (versions 1, 2 and 3 never previously released)
- 2016:
- The leftpad incident
- Yarn is born
- Node.js 6
- 2017:
- npm focuses more on security, HTTP/
- V8 introduces Node.js in its testing suite, officially making Node.js a target for the JS engine, in addition to Chrome
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 13
- Express is the most popular Node web framework, and is the underlying library for a number of other popular Node web frameworks - Write handlers for requests with different HTTP verbs at different URL paths (routes). - Integrate with "view" rendering engines in order to generate responses by inserting data into templates. - Set common web application settings like the port to use for connecting, and the location of templates that are used for rendering the response. - Add additional request processing "middleware" at any point within the request handling pipeline.
- MongoDB
- Open source No-SQL Database
- Light weighted, useful for working with large sets of distributed data.
- Contains a structure of data, composed of field (key) and value pairs
- Similar to JSON, called Binary JSON.
- Sets of these documents are called collections, like table in relational DB
Introduction
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 14
- Software development has three main layers :
- Frontend or Presentation layer
- Backend or Business layer
- Database layer
- MERN (React)
- MEAN (Angular)
- LAMP (Apache)
- LEMP (nginX)
- Full-Stack Elixir
- Full-Stack Python
- Full-Stack Django
- Full-Stack Java
- Full-Stack Ruby on Rails
Full Stack Development
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 15
- Full-Stack Developers can do the following:
- Ability to code programs, web applications, or mobile applications.
- Coordinate the development process with other developers and team
members (including product managers, project managers, and C-level
executives).
- Troubleshoot technical issues at every layer.
- Outline testing techniques for various applications.
- Analyzing and debugging database queries.
- Testing codes for app validation and compatibility across required devices
for quality assurance.
- Keeping a tab on important KPIs and taking initiatives as needed.
- Laying blueprint for future requirements and communicating the same with
upper management.
Full Stack Development
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 19
React Library
- Routing and Navigation in Reactjs
- React Router : a group of navigational components synchronizes the components of the UI with browsers address
- React CLIs and Boilerplates
- Create-React-App: Create-React-App is a CLI tool that requires no building configuration
- React UI Component Libraries
- Ant-design: a consolidated development framework of NPM, Webpack, Babel, Dora, and DVA
- Tailwind UI: utility classes (in-built classes) instead of inbuilt components that relieves you from overriding styles
- Semantic UI React
- React Bootstrap
- Fabric React
- Styled components
- React DnD © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 20
React Library
- Notable UI libraries
- OnsenUI
- Rebass
- Material UI
- Animation Libraries
- React-motion
- Animated (React Native)
- React Spinner
- Form Libraries
- React Hook Form © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 21
React Library
- Code formatting
- ES-Lint
- React Intl
- Prettier
- Testing
- State Management
- Augment Reality/ Virtual Reality (AR/ VR)
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 22
React Developer Tools
- react-detector
- react-detector is a Chrome extension that lets you know which websites are
using React and which are not.
- show-me-the-react
- This is another tool, available for Firefox and Chrome, that detects React as
you browse the internet.
- React Developer Tools
- This is a plugin that can extend the functionality of the browser’s developer
tools. It creates a new tab in the developer tools where you can view React
elements. Source: https://youteam.io/blog/full-stack-software-developer-hiring/ © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 23
Introduction of ES
- ECMA Script 6 (ES6):
- ECMA Script 2015
- based on specification and standardization by ECMA International Company
- ES6 is the ECMA script programming language
- used to create the standards for JavaScript language such that it can bring multiple independent implementations.
- ES6 converted into the production server code, bundled, and minifies with webpack using Babel compiler. © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 24
Introduction of ES
- const: variable that cannot be changed.
- let: JavaScript now has lexical variable scoping.
- Template Strings: an alternative to string concatenation
- Traditional string concatenation uses plus signs:
- With a template, we can create one string and insert the variable values by surrounding them with ${ }:
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 28
Introduction of ES
- Transpiling ES
- all web browsers support ES
- Transpiling is a process to convert ES6 code to ES5 before running it in the browser.
- In past any update in JavaScript, force to wait till weeks or months until the browser update themselves to adapt the new version of JavaScript.
- Transpiling is not compiling: our code isn’t compiled to binary
- transpiled into syntax that can be interpreted by a wider range of browsers
- JavaScript now has source code, meaning that there will be some files that belong to your project that don’t run in the browser © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 29
Introduction of ES
- Transpiling Example
- transpiler added a “use strict” declaration to run in strict mode © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 30
ES6 Objects and Arrays
- JavaScript data types and data structures
- Dynamic typing
- JavaScript is a loosely typed and dynamic language
- Variables in JavaScript are not directly associated with any
particular value type, and any variable can be assigned (and re-
assigned) values of all types
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 31
ES6 Objects and Arrays
- JavaScript data types and data structures
- JavaScript types
- Primitive values (immutable datum represented directly at the
lowest level of the language)
- Boolean type
- Null type
- Undefined type
- Numeric type » Number type » BigInt type » NaN type
- String type
- Objects (collections of properties) © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 32
ES6 Objects and Arrays
- JavaScript data types and data structures
- Object Type
- is a value in memory which is possibly referenced by an identifier
- can be seen as a collection of properties
- a limited set of properties are initialized; then properties can be
added and removed
- Property values can be values of any type, including other objects,
which enables building complex data structures
- Properties are identified using key values
- A key value is either a String value or a Symbol value. © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 33
ES6 Objects and Arrays
- Object Type
- two types of object properties
- data property
- Associates a key with a value, and has the following attributes: Attribute Type Description Default value [[Value]] Any JavaScript type The value retrieved by a get access of the property. undefined [[Writable]] Boolean If be changed.^ false, the property's [[Value]] cannot false [[Enumerable]] Boolean^ If in^ true, the property will be enumerated for...in loops. false [[Configurable]] Boolean If cannot be changed to an false, the property cannot be deleted, accessor property, and attributes other than [[Value]] and [[Writable]] cannot be changed. false
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 37
ES6 Objects and Arrays
- Keyed collections: Maps, Sets, WeakMaps, WeakSetsArrays
- Set and WeakSet represent a set of objects, while Map and WeakMap associate a value to an object.
- Map
- A Map is a new collection object in JavaScript that functions like an object.
- Map is an iterable object
- remove properties from object © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 38
ES6 Objects and Arrays
- WeakMaps :WeakMap originated from Map, so they are very similar to each other - Differences - The key must be an object - Not all methods from Map are supportive (support only) - delete() - get() - has() - set() © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 39
ES6 Objects and Arrays
- Set is also quite similar to Map, but Set is more useful for a single value - Add Properties to Set - Set is an iterable object, you can use a for-of or forEach statement
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 40
ES6 Objects and Arrays
- Set is also quite similar to Map, but Set is more useful for a single value - Add Properties to Set - Set is an iterable object, you can use a for-of or forEach statement © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 41
ES6 Objects and Arrays
- Set is also quite similar to Map, but Set is more useful for a single value - remove Properties - Set to array conversion © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 42
ES6 Objects and Arrays
- WeakSet loses the access link to inner data if they’re garbage- collected
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 46
Some Important Topics
- Promises:
- Promises give us a way to make sense out of asynchronous behavior
- When making an asynchronous request, one of two things can happen:
everything goes as we hope or there’s an error
- Promises give us a way to simplify back to a simple pass or fail. © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 47
ES6 Modules
- A JavaScript module is a piece of reusable code that can easily be incorporated into other JavaScript files - There are two options when creating and exporting a module: you can export multiple JavaScript objects from a single module, or one JavaScript object per module © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 48
AJAX
- Asynchronous JavaScript And XML (AJAX)
- use of the XMLHttpRequest object to communicate with servers
- send and receive information in various formats, including JSON, XML, HTML, and text files
- Nature is asynchronous
- two major features of AJAX
- Make requests to the server without reloading the page
- Receive and work with data from the server
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 49
Step 1 – How to make an HTTP request
- To make an HTTP request to the server with JavaScript
- Create instance of XMLHttpRequest
- After making a request, you will receive a response back and tell the XMLHttp request object which JavaScript function will handle the response, by setting the onreadystatechange property of the object © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 50
Step 2 – Handling the server response
- When you sent the request, you provided the name of a JavaScript function to handle the response, the function needs to check the request's state
- readyState values
- 0 (uninitialized) or (request not initialized)
- 1 (loading) or (server connection established)
- 2 (loaded) or (request received)
- 3 (interactive) or (processing request)
- 4 (complete) or (request finished and response is ready) © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 51
Step 2 – Handling the server response
- When you sent the request, you provided the name of a JavaScript function to handle
the response, the function needs to check the request's state
- readyState values
- 0 (uninitialized) or (request not initialized)
- 1 (loading) or (server connection established)
- 2 (loaded) or (request received)
- 3 (interactive) or (processing request)
- 4 (complete) or (request finished and response is ready)
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 55
Virtual DOM
- DOM (Document Object Model)
- document structure, style, and content
- A web page is a document
- As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript
- The virtual DOM (VDOM) is a programming concept
- where an ideal, or “virtual”, representation of a UI is kept in memory
- synced with the “real” DOM by a library such as ReactDOM
- VDOM ensure the DOM matches the state, if developer change the state
- attribute manipulation
- event handling
- manual DOM updating
- VDOM is usually associated with React elements
- React internal objects “fiber” hold the additional information about the
component tree [React Fiber more details: https://github.com/acdlite/react-fiber-architecture]
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 56
Virtual DOM
- Shadow DOM
- The Shadow DOM is a browser technology
- primarily designed for scoping variables and CSS in web components
- More differences between Shadow DOM and Virtual DOM
[Source: https://www.geeksforgeeks.org/what-is-the-difference-between-shadowdom-and-virtualdom/]
Virtual DOM Shadow DOM
It revolves around solving performance issues. It revolves around the concept of encapsulation. It is a complete representation of an actual DOM. It is not a complete representation of the entire DOM. It groups together several changes and does a single re-render instead of many small ones. It adds a subtree of DOM elements into the rendering of a document, instead of adding it to the main document’s DOM tree. It creates a copy of the whole DOM object. It creates small pieces of the DOM object having their own, isolated scope. It does not isolate the DOM. It isolates the DOM. It does not help with CSS scoping. It helps with CSS scoping. © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 57
React Elements
- React DOM is made up of React
- React elements are the instructions for how the browser DOM should be created
- Create a React element
- first argument defines the type of element
- second argument represents the element’s properties
- third argument represents the element’s children
© Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 58
ReactDOM
- ReactDOM contains the tools necessary to render React elements in the
browser
- ReactDOM is where we will find the render method as well as the renderToString
and renderToStaticMarkup methods
- Children © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 59
ReactDOM
- Constructing Elements with Data © Bharati Vidyapeeth’s Institute of Computer Applications and Management, New Delhi-63, by Mr. Uttam Singh U1. 60
ReactDOM
- Constructing Elements with Data
