Full Stack Development Unit-1 PDF

Unit-1 Introduction to Full Stack Development Single Page vs. Multi Page Application 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 2 Single Page Application (SPA) A Single Page Application (SPA) is a type of web application that dynamically loads its content on a sing...

Unit-1 Introduction to Full Stack Development Single Page vs. Multi Page Application 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 2 Single Page Application (SPA) A Single Page Application (SPA) is a type of web application that dynamically loads its content on a single web page, instead of loading separate pages for each interaction with the server. This approach provides a smoother and more responsive user experience because the page doesn't need to reload entirely every time the user interacts with it. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 3 Single Page Application (SPA) In the context of routing, traditional multi-page web applications handle navigation by requesting different pages from the server when the user clicks on links or submits forms. However, in an SPA, the navigation is managed on the client side, meaning the application itself handles the changing of views without making additional server requests. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 4 Single Page Application (SPA) This is because a single-page application executes the logic in the browser instead of a server. It does so with JavaScript frameworks that can lift this heavy data on the client side. JavaScript also enables a SPA to reload only those parts of the app that a user requests, not the entire app. As a result, SPAs are known to deliver fast and efficient performance. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 5 Components of React.JS Essential building blocks of application. OR Code blocks which are reusable and independent, which divide the UI of the project into small pieces. 9/16/2024 Ms. Mubashshirahbanu Shekh – SRIMCA, UTU 6 Component-Based Programming In React, all you do is build components. Then, you put components together to make another component that depicts a complete view or page. This makes writing and reasoning about the entire application easier, by splitting it into components and focusing on one thing at a time. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 7 Benefits of Component-Based Architecture 1. Modularity: Components encapsulate specific functionality, promoting code modularity and separation of concerns. 2. Reusability: Components can be reused across different parts of an application or shared between multiple projects, reducing duplication of code and speeding up development cycles. 3. Scalability: component-based architectures scale effortlessly as applications grow in complexity and scope. By breaking down applications into smaller, manageable components, developers can easily extend, refactor, and maintain codebases without compromising performance or stability. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 8 Benefits of Component-Based Architecture 4. Testability: Components facilitate unit testing and integration testing by providing well-defined boundaries and interfaces for testing individual pieces of functionality. 5. Collaboration: Component-based architectures promote collaboration among developers by enabling teams to work on different components simultaneously without interfering with each other's code. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 9 What is DOM? DOM stands for ‘Document Object Model’. DOM is a structured representation of the HTML elements that are present in a webpage or web app. DOM represents the entire UI of your application. The DOM is represented as a tree data structure. It contains a node for each UI element present in the web document, including text. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 10 DOM Structure 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 11 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 12 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 13 Disadvantages of real DOM Every time the DOM gets updated, the updated element and its children have to be rendered again to update the UI of our page. For this, each time there is a component update, the DOM needs to be updated and the UI components have to be re-rendered. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 14 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 15 Disadvantages of DOM When updating an element in a document, the updated element and its children must be re- rendered to update the application's UI. This re-rendering affects the website's or web application's performance. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 16 Virtual DOM Some front-end frameworks like “vue” and “react” create their own representation of the DOM as a JavaScript object. Whenever the changes made to the DOM the framework instead makes a copy of JavaScript object, and makes the change to that copy and compares the two JavaScript objects to see what has changed, then inform the browser regarding changes and only those parts of the DOM are repainted (re-renderd). Making JavaScript objects and comparing them is far faster than doing with actual DOM. The copy of DOM is stored in memory as a JavaScript object is called a Virtual DOM. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 17 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 18 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 19 Server-Less Hello World! A piece of code in a single HTML file that uses React to display a simple page on the browser. No installations, downloads, or server! All you need is a modern browser that can run the code that we write. No surprise, the React library is available as a JavaScript file that we can include in the HTML file using the tag. It comes in two parts: The first is the React core module, the one that is responsible for dealing with React components, their state manipulation, etc. React: https://unpkg.com/[email protected]/umd/react.development.js The second is the ReactDOM module, which deals with converting React components to a DOM that a browser can understand. ReactDOM: https://unpkg.com/[email protected]/umd/react-dom.development.js 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 20 What is JSX? Why it is required? Imagine writing a deeply nested hierarchy of elements and components: it can get pretty complex. Also, the actual DOM can’t be easily visualized when using the function calls as it can be visualized if it were plain HTML. To address this issue, React has a markup language called JSX, which stands for JavaScript XML. So, instead of the React.createElement() calls , JSX can be used to construct an element or an element hierarchy and make it look very much like HTML. So, let’s just write it as HTML and assign it to the element, replacing the React.CreateElement() calls:... const element = ( Hello World! );... 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 21 What is Babel? Why it is needed? But browsers’ JavaScript engines don’t understand JSX. It has to be transformed into regular JavaScript based React.createElement() calls. To do this, a compiler is needed. The compiler that does this is Babel. We should ideally pre-compile the code and inject it into the browser, but for prototyping purposes, Babel provides a standalone compiler that can be used in the browser. Babel is available as a JavaScript file, as usual, at ‘unpkg’. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 22 How to use Babel? Let’s include this script within the section of HTML file like this:...... But the compiler also needs to be told which scripts have to be transformed. It looks for the attribute type="text/babel" in all scripts and transforms and runs any script with this attribute. So let’s add this attribute to the main script for Babel to do its job....... 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 23 Inefficient Transformation of JSX The transformation of JSX to JavaScript happens at runtime. This is inefficient and quite unnecessary. Instead move the transformation to the build stage in development, and deploy a ready-to-use distribution of the application. Separate out the JSX and JavaScript from the all in-one index.html and refer to it as an external script. Keep the HTML as pure HTML and all the script that needs compilation in a separate file. For that we need to set up a project and creation of react app. Steps for creating React App. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 24 Introduction to ES6/ES2015 ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015. ECMAScript (European Computer Manufacturers Association) Script is the standard specification of JavaScript to ensure compatibility in all browsers and environments. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 25 ES6 Syntax let – declare block-scoped variables using the let keyword. let vs. var – understand the differences between let and var. const – define constants using the const keyword. Default function parameters – learn how to set the default value for parameters of a function. Rest parameter – introduce you to the rest parameter and how to use them effectively. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 26 ES6 Syntax Spread operator – learn how to use the spread operator effectively. Object literal syntax extensions – provide a new way to define object literal. for…of – learn how to use the for...of loop to iterate over elements of an iterable object. Template literals – learn how to substitute variables in a string. ES6 Class, Promises and Modules 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 27 Declaration with ‘let’ Keyword In JavaScript, when you declare a variable using the var keyword, the scope of the variable is either global or local. If you declare a variable outside of a function, the scope of the variable is global. When you declare a variable inside a function, the scope of the variable is local. ES6 provides a new way of declaring a variable by using the let keyword. The let keyword is similar to the var keyword, except that these variables are blocked-scope. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 28 Declaration with ‘let’ Keyword Example: // Using 'let' keyword { // this is block of code such as function, if else, for, do while, while, try catch, and so on. // declare variable with let let institute = "SRIMCA"; // institute can be accessed inside of block console.log(institute); } // institute can't be accessed outside of block console.log(institute); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 29  Go through TDZ (Advanced Learner) Try This! //Try This! // JavaScript let variables and hoisting { var a = 10; console.log(counter); console.log(a); var counter = 10; var a = 15; } console.log(a); { let b = 10; console.log(counter); console.log(b); let counter = 10; let b = 10; } console.log(b); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 30 Declaration with ‘const’ keyword The const keyword declares blocked-scope constant. However, the block-scoped constant declared by the const keyword cannot be changed after declaration. Syntax: const CONSTANT_NAME = value; 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 31 Declaration with ‘const’ keyword Example: let a = 10; a = 20; a = a + 5; console.log(a); //using 'const' keyword const PRICE = 15.50; PRICE = 17.55; // TypeError: Assignment to constant variable. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 32 JavaScript ‘const’ and Objects The const keyword ensures that the variable it creates is read-only. However, it doesn’t mean that the actual value to which the const variable reference is immutable. Example: const student = { age: 20 }; student.age = 23; //Even though the person variable is a constant, you can change the value of its property. console.log(student.age); //However, you cannot reassign a different value to the person constant like this: student = { age: 22 }; // TypeError: Assignment to constant variable. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 33 JavaScript Default Parameters Example: function say(message='Welcome to the Class!') { console.log(message); } say(); say(undefined); say('We learn Default Parameters'); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 34 JavaScript … Rest Parameter ES6 provides a new kind of parameter called rest parameter that has a prefix of three dots (...). A rest parameter allows you to represent an indefinite number of arguments as an array. Syntax: function fn(a,b,...args) { //body of function } 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 35 JavaScript … Rest Parameter Example: function sum(...args) { let total = 0; for (const a of args) { total += a; } return total; } console.log("Sum of two numbers",sum(1, 2)) console.log("Sum of five numbers",sum(1, 2, 3, 4, 5)) 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 36 Try This! function sum(n1,...args, n2) function sum(n1, n2,...args) { console.log(`Value of n1 is ${n1}`); console.log(`Value of n2 is ${n2}`); // Sum of rest parameters let total = 0; for (const a of args) { total += a; } return total; } console.log("Sum of two numbers",sum(1, 2)) console.log("Sum of five numbers",sum(1, 2, 3, 4, 5)) 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 37 JavaScript spread operator (…) (...) The spread operator allows you to spread out elements of an iterable object such as an array, map, or set. Try This! Example: const odd = [1,3,5]; const odd = [1,3,5]; const combined=[2,...odd, 4,6]; const combined = [2,4,6,...odd]; console.log(combined); console.log(combined); The spread operator (...) unpacks the elements of an iterable object. The rest parameter (...) packs the elements into an array. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 38 For…of Loop ES6 introduced a new statement for...of that iterates over an iterable object such as: Built-in Array, String, Map, Set, etc. Array-like objects such as arguments or NodeList User-defined objects that implement the iterator protocol. Example: Syntax: let str = 'abc’; for (variable of iterable) { for (let c of str) { //... console.log(c); } } // each character printed on a new line 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 39 Arrow Function Arrow functions are introduced in ES6, which provides you a more accurate way to write the functions in JavaScript. Arrow functions make your code smaller, more readable and structured. Arrow functions are anonymous functions (the functions without a name and not bound with an identifier). They don't return any value and can declare without the function keyword. They are also called as Lambda Functions or Lambda Expression in different languages. Syntax: const functionName = (arg1, arg2, ?..) => { //body of the function } 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 40 Arrow Function Example: function say1(){ console.log("Normal function with keyword"); } //function calling say1(); const say2 = function(){ const say3 = () => “Arrow Function"; console.log("Anonymous function"); //function calling } console.log(say3()); //function calling say2(); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 41 Arrow Function Exercise: 1. Use the arrow function to square a number. 2. Use the arrow function to add two numbers. 3. Use the arrow function to display your friend name with greetings, with no argument. Sample Output: Hello ! 4. Use the arrow function to multiply three numbers, using single line. 5. Use the arrow function and ternary operator to process the number such as, is the number is multiple of 5 then add 1 in it, if the number is multiple of 7 then subtract 1 from it. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 42 Arrow Function Explore more from: https://www.javatpoint.com/es6-arrow-function Check : this Keyword With Arrow Function To return an object using an arrow function, you must either use the return keyword or wrap the curly brackets in round brackets. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 43 Higher-Order Function JavaScript Higher-Order Functions are functions that can accept other functions as arguments, return functions, or both. They enable abstraction and flexibility in code, allowing you to create reusable and modular functions for complex operations. Syntax: function higherOrderFunction(callback) { // Perform some operations // Call the callback function callback(); } function callbackFunction() { console.log("Callback function is executed."); } // Passing the callback function to the higher-order function higherOrderFunction(callbackFunction); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 44 Callback The callback function is passed as an argument to the higher order function. The caller (higher order function ) is responsible for passing the right parameters into the callback function (the function execute at some point inside the caller's body). The caller may also expect a particular return value from the callback function, which is used to instruct further behavior of the caller. There are two ways in which the callback may be called: Synchronous Asynchronous. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 45 Callback Synchronous callbacks are called immediately after the invocation of the outer function, with no intervening tasks. Examples of synchronous callbacks include the callbacks passed to Array.prototype.map(), Array.prototype.forEach(), etc. Asynchronous callbacks are called at some point later, after an asynchronous operation has completed. Examples of asynchronous callbacks include the callbacks passed to setTimeout() and Promise.prototype.then(). 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 46 Array’s Higher-Order Function / Built-in Higher-Order Function Following JavaScript’s functions are used to process and manipulate arrays of data. map() filter() and reduce() They are functional programming methods that can be used to transform, filter, and aggregate data in a declarative and concise manner. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 47 Transforming an array using map() map() is used to transform an array by applying a function to each element and returning a new array of the same length. Use map() when you need to apply the same operation to every element in an array and generate a new array with the transformed values. Syntax: const newArray = originalArray.map((currentValue, index, array) => { // return the new value of the current element }); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 48 Example: map() const numbers = [1, 2, 3, 4, 5]; const squares = numbers.map(n => n * n); console.log(squares); // [1, 4, 9, 16, 25] 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 49 Filtering an array using filter() filter() is used to create a new array containing only the elements that pass a given test. Use filter() when you need to select a subset of the elements in an array based on some condition and generate a new array with only the selected elements. Syntax: const newArray = originalArray.filter((currentValue, index, array) => { // return true if the current element should be included in the new array }); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 50 Example: filter() const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(n => n % 2 === 0); console.log(evenNumbers); // [2, 4] 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 51 Reducing an array using reduce() reduce() is used to aggregate the values of an array into a single value. Use reduce() when you need to perform some operation on every element in an array and combine the results into a single value. Syntax: const result = originalArray.reduce((accumulator, currentValue, index, array) => { // return the new value of the accumulator }, initialValue); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 52 Example: reduce() const numbers = [1, 2, 3, 4, 5]; const sum = numbers.reduce((a, b) => a + b); console.log(sum); // 15 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 53 ES6 Modules Modules are the piece or chunk of a JavaScript code written in a file. It modularize the code simply by partitioning the entire code into modules that can be imported from anywhere. Modules make it easy to maintain the code, debug the code, and reuse the piece of code. JavaScript allows us to export a function, objects, classes, and primitive values by using the export keyword. To import a module, we need to use the import keyword. The exported variables, functions, and classes can be imported by using the import keyword. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 54 ES6 Modules create a new project with the following directory and file structure: ├── index.html └── jsmodules ├── index.js ES6 Modules Summary: └── lib.js ES6 modules allow you to organize JavaScript files into modules. ES modules are JavaScript files that execute in strict mode. Use the export statement to export variables, functions, and classes. Use the import statement to import variables, functions, and classes from other modules. Use type="module" in the script tag to instruct the web browser to Practical Demonstration load a JavaScript file as a module. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 55 ES6 Class Before ES6, JavaScript had no concept of classes. To mimic a class, need to use the constructor/prototype pattern. ES6 introduced a new syntax for declaring a class. class Person { let p1 = new Person("M Shekh"); constructor(name) { this.name = name; let name = p1.getName(); } console.log(name); getName() { return this.name; } } 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 56 ES6 Promises A promise is an object that encapsulates the result of an asynchronous operation. A promise object has a state that can be one of the following: Pending: In the beginning, the state of a promise is pending, indicating that the asynchronous operation is in progress. Fulfilled with a value: The fulfilled state indicates that the asynchronous operation was completed successfully. Rejected for a reason: The rejected state indicates that the asynchronous operation failed. 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 57 Creating a Promise To create a promise object, use the Promise() constructor: const promise = new Promise((resolve, reject) => { // contain an operation //... // return the state if (success) { resolve(value); } else { reject(error); } }); 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 58 ES6 Promises The promise constructor accepts a callback function that typically performs an asynchronous operation. This function is often referred to as an executor/caller. In turn, the executor accepts two callback functions with the name resolve and reject. Practical Demonstration 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 59 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 60  React element and components: Mern quick start guide For Biginners: https://www.youtube.com/watch?v=9Ox1O-vsor8 -- ToDoList https://www.youtube.com/watch?v=nJ-gJ058jK8 – Before Starting React JS for Me https://reviewnprep.com/blog/quick-tutorial-map-filter-reduce-in- javascript/ - Me 16-09-2024 Ms. Mubashshirahbanu Shekh - SRIMCA, UTU 61