ETT_Unit 1.pdf

EMERGING TRENDS AND TECHNOLOGIES UNIT-1 INTRODUCTION TO FULL STACK WEB DEVELOPMENT 1.1 INTRODUCTION TO FULL STACK DEVELOPMENT Full stack development: It refers to the development...

EMERGING TRENDS AND TECHNOLOGIES UNIT-1 INTRODUCTION TO FULL STACK WEB DEVELOPMENT 1.1 INTRODUCTION TO FULL STACK DEVELOPMENT Full stack development: It refers to the development of both front-end (client side) and back-end (server side) portions of web applications. Full stack web Developers: Full stack web developers can design complete web applications and websites. They work on the frontend, backend, database, and debugging of web applications or websites. 1.2 OVERVIEW OF FULL STACK AND PRE-REQUISITES Full stack development: It refers to the development of both front-end(client side) and back-end (server side) portions of web application. Full stack web Developers: Full stack web developers can design complete web applications and websites. They work on the frontend, backend, database, and debugging of web applications or websites. 1.2.1 What is Frontend Web Development? Front-end web development is the process of developing the client side of the web application wherein the focus is on the users. The full-stack developer with users in mind undertakes this process to develop a website that is easy to use and interact with. The developer in this process focuses on the visual elements of the application. It is also the responsibility of the developer in front-end development to ensure that the website or application runs smoothly. Front-end development focuses on elements like: 1. Images 2. Graphics 3. Animations 4. Layouts 5. Content organization 6. Navigation 1.2.2 What is Backend Web Development? Back-end web development refers to the process of developing the server side of the website, i.e., the side that users cannot see or interact with. The main aim of back-end development is to make the website interactive and easy to use. During the back-end development process, developers emphasized on: 1. Building the code  EMERGING TRENDS AND TECHNOLOGIES 2. Database management 3. Debugging or troubleshooting the website or application 4. Application programming interfaces 5. Architecture Therefore, front-end and back-end development are distinct from each other in terms of the sides of the website application they focus on. However, the two work together to create a dynamic and attractive website that provides users with an immersive experience when browsing. 1.2.3 Front-end Languages and Frameworks HTML and CSS HTML short for Hypertext markup language governs the appearance of text/images on the screen. It formats the text as headings, paragraphs, pop-ups, and so on. It typically consists of tags that give a different meaning to the text in a document structure. CSS (Cascading Style Sheets) is a style sheet that allows you to alter and style different web components for font, size, spacing, etc. It makes the content on the webpage more decorative.  EMERGING TRENDS AND TECHNOLOGIES JavaScript It is a powerful client-side programming language mainly used for enhancing user interaction with the application. It offers several libraries and frameworks like React, Angular, Vue, and JQuery. A full-stack developer needs to be proficient in one or more of these tools. 1.2.4 Backend Technologies and Frameworks JavaScript and its environments like Node JS and Express JS are an open-source, cross-platform runtime environment that allows developers to create server-side tools and JavaScript applications. Knowledge of the basic command line like npm (Node Package Manager) is essential. Java, in particular, was built from the ground up to be run on the server side. Popular Java frameworks include Spring and Java Server faces. Python is the most popularly used language. It is flexible and easy to use. We use Python frameworks like Django and Flask for backend development. Django is a high-level Python web framework that enables the rapid development of websites. It is free and open-source and has a huge and active community of users. C# language is for many the most preferred architecture when it comes to backend programming in Windows environments. Other languages include PHP, Perl, and Ruby. Database Management Systems A full-stack developer writes code to perform Relational mapping to fetch data from the database. MySQL, SQL SERVER, Oracle Database, PostgreSQL, and MongoDB are popularly used DBMS.  EMERGING TRENDS AND TECHNOLOGIES Version Control Version control systems help to manage the project files and keep track of the entire history of the user's things. Popular ones are Git, GitHub, and Subversion. Git helps to manage the project files. It keeps track of the entire history of things that the user is working on. GitHub is a web-based service for version control using Git. The user can look at other people’s code, identify issues or errors, and even propose changes. Web Hosting Platforms Web hosting platforms allow you to deploy your product on a cloud service provider so we can access it from the WWW. Popular ones are Amazon web services, Google Cloud Platform, Heroku, and Microsoft Azure. Soft Skills A full-stack developer needs to possess some basic soft skills as well. Creativity: The developer must understand the project's objectives and create a product that engages the target audience. Strategic planning: Planning is a critical phase in any development life-cycle. The developer should possess the aptitude to plan the design, development, and implementation phases strategically. This helps streamline the process. Analytical skills: As the name suggests, these skill helps to analyze information accurately and make logical, data-driven decisions that help in maximizing efficiency. Now, these are skills that one develops when they're exposed to them. But a good sense of understanding is required. Problem-solving skills are again crucial to predicting any errors and developing a bug-free application. From a business perspective, problem-solving skills play a significant role in ensuring the smooth conduction of tasks. Time management skills: The developer must meet the deadlines while ensuring the proper execution of his tasks. 1.3 Arrow Function Arrow functions were introduced in ES6. Arrow functions allow us to write a shorter function syntax: let myFunction = (a, b) => a * b;  EMERGING TRENDS AND TECHNOLOGIES Arrow Function with no parameter Example let hello = ""; hello = () => { return "Hello World!"; } document.getElementById("demo").innerHTML = hello(); Output Hello World! Arrow Function with one parameter let hello = ""; hello = (val) => "Hello " + val; document.getElementById("demo").innerHTML = hello("Universe!"); OUTPUT: Hello Universe!  EMERGING TRENDS AND TECHNOLOGIES Arrow Function with Two parameter let hello = ""; hello = (a,b) => a + b; document.getElementById("demo").innerHTML = hello(4,3); OUTPUT: 7 JavaScript Map map() creates a new array from calling a function for every array element. It does not execute the function for empty elements or change the original array. JavaScript Map is a collection of key-value pairs, enabling efficient data retrieval and manipulation. On iterating a map object returns the key, and value pair in the same order as inserted. Map() constructor is used to create Map in JavaScript. JavaScript Map has a property that represents the size of the map. Example: // Input array let arr = [2, 5, 6, 3, 8, 9]; // Using map to transform elements let newArr = arr.map(function (val, index) { return { key: index, value: val * val }; }) // Display output console.log(newArr)  EMERGING TRENDS AND TECHNOLOGIES Output: [ { key: 0, value: 4 }, { key: 1, value: 25 }, { key: 2, value: 36 }, { key: 3, value: 9 }, { key: 4, value: 64 }, { key: 5, value: 81 } ] Example: let users = [ {firstName : "Susan", lastName: "Steward"}, {firstName : "Daniel", lastName: "Longbottom"}, {firstName : "Jacob", lastName: "Black"} ]; let userFullnames = users.map(function(element){ return `${element.firstName} ${element.lastName}`; }) console.log(userFullnames); Output: [ 'Susan Steward', 'Daniel Longbottom', 'Jacob Black' ] 1.4 Installation for React Facebook developed React JS. React.js is an open-source component-based front-end JavaScript library. It is used to create fast and interactive user interfaces for web and mobile applications. It is easy to create a dynamic application in React because it requires less coding and offers more functionality. It is used by big MNCs and fresh new startups. Features of React: Reusable Components: A single React app consists of many components each component has its own logic and code but we can easily reuse components any number of times hence reducing the developer's time and increasing the efficiency of work. Debugging: React app can be easily debugged using “react developer tools”. It’s a browser extension that can be used for both Chrome as well as Firefox.  EMERGING TRENDS AND TECHNOLOGIES Installation React.js on Windows: Step 1: Install Node.js installer for Windows. Once downloaded open NodeJS without disturbing other settings, and click on the Next button until it’s completely installed. Install the 14.18.1 LTS Step 2: Open the command prompt to check whether it is completely installed or not type the command –> node -v.  EMERGING TRENDS AND TECHNOLOGIES If the installation went well it will give you the version you have installed Now, Check whether the node package manager is installed completely or not, to check npm is installed or not you have to type the command: npm -v It will give you npm version which is installed on your device. 1.6 Create a new React App npm install -g create-react-app Installation will take a few seconds It will globally install the react app for you. To check everything went well run the command create-react-app --version  EMERGING TRENDS AND TECHNOLOGIES version 4.0.3 If everything goes well it will give you the installed version of the React app Step 4: Now Create a new folder where you want to make your react app using the below command: mkdir Move inside the same folder using the below command: cd new folder (your folder name)  EMERGING TRENDS AND TECHNOLOGIES Step 5: Now inside this folder run the command –> create-react-app react first YOUR_APP_NAME It will take some time to install the required dependencies NOTE: Due to npm naming restrictions, names can no longer contain capital letters, thus type your app’s name in lowercase.  EMERGING TRENDS AND TECHNOLOGIES Step 6: Now open the IDE of your choice for Visual Studio code and open the folder where you have installed the react app new folder inside the folder you will see your app’s name reactapp (In our example). Use the terminal and move inside your app name folder. Use the command cd reactapp (your app name) Step 7: To start your app run the below command: npm start  EMERGING TRENDS AND TECHNOLOGIES Once you run the above command a new tab will open in your browser showing the React logo as shown below: Congratulations you have successfully installed the react-app and are ready to build awesome websites. 1.6 JSX The render function specifies the HTML output of a React component. JSX (JavaScript Extension), is a React extension that allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like Babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse. JSX allows you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then the preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children. Why use JSX? It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript. Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section. It is type-safe, and most of the errors can be found at compilation time. It makes it easier to create templates. Nested Elements in JSX  EMERGING TRENDS AND TECHNOLOGIES To use more than one element, you need to wrap it with one container element. Here, we use div as a container element which has three nested elements inside it. 1.7.1 JSX Attributes JSX uses attributes with the HTML elements the same as regular HTML. JSX uses a camelCase naming convention for attributes rather than the standard naming convention of HTML such as a class in HTML becomes a class Name in JSX because the class is the reserved keyword in JavaScript. We can also use our custom attributes in JSX. For custom attributes, we need to use the data- prefix. In the below example, we have used a custom attribute data-demo Attribute as an attribute for the tag. Example import React, { Component } from 'react'; class App extends Component{ render(){ return( hello world hello world1 ); } } export default App; Example hello world hello world1