trinethratechsolution

    Menu
    Menu

    FULL STACK

    TABLE OF CONTENT

    1.1 Introduction

    1.2 Definition of full stack

    1.3 Client Software and Server Sofware

    1.3 Popular stacks

    1.4 Advantages of full stack

    1.5 HTML

    1.6 HTML Attributes

    1.7 Semantic HTML

    1.8 Introduction of CSS

    1.9 How to add CSS

    2.0 Inline CSS

    2.1 Internal CSS

    2.2 External CSS

    2.3 Javascript

    2.4 Uses of Javascript

    2.5 Javascript functions

    2.6 React

    2.7 Definition of React

    2.8 React Components

    2.9 Types of React Components

    3.0 Features of React

    INTRODUCTION

    Traditionally, “full-stack development” refers to a collection of abilities and skills that are an indispensable precondition to developing web-based applications and websites on both the front end and back end. Nevertheless, full-stack development has seen a colossal increase in its employment in recent years. The first aspect to point out is that Full-stack software developers are now expected to know a wide range of additional domains, including cloud infrastructure and deployment, message brokers, and data analytics. AI/ML technologies and the Internet of Things (IoT) are also bringing new skill sets that require further training. In other words, for the most part, full-stack development is necessary to meet both the client- and server-side functionality requirements. Please continue reading to discover more about how full-stack development work.

    DEFINITION OF FULL STACK

    Full Stack Development (FSD) is a software development process that includes both the front and back end. To that end, a Full Stack Developer may design and create the front end while simultaneously designing, developing, and debugging databases and the software’s backend. There are two significant components to full-stack application development. Development of the FrontEnd and BackEnd

    CLIENT SOFTWARE

    • HTML
    • CSS
    • Bootstrap
    • JavaScript
    • HTML DOM
    • XML
    • jQuery
    • React
    • GraphQL

    SERVER SOFWARE

    • PHP
    • ASP
    • C++
    • C#
    • Java
    • Python
    • Node.js
    • Express.js
    • Ruby
    • REST

    POPULAR STACKS

    LAMP stack: JavaScript – Linux – Apache – MySQL – PHP

    LEMP stack: JavaScript – Linux – Nginx – MySQL – PHP

    MEAN stack: JavaScript – MongoDB – Express – AngularJS – Node.js

    Django stack: JavaScript – Python – Django – MySQL

    Ruby on Rails: JavaScript – Ruby – SQLite – Rail

    ADVANTAGES OF FULL STACK

    The advantage of being a full stack web developer is:

    1.You can master all the techniques involved in a development project

    2.You can make a prototype very rapidly

    3.You can provide help to all the team members

    4.You can reduce the cost of the project

    5.You can reduce the time used for team communication

    6.You can switch between front and back end development based on requirements

    7.You can better understand all aspects of new and upcoming technologies

    HTML

    1.HTML stands for Hyper Text Markup Language

    2.HTML is the standard markup language for creating Web pages

    3.HTML describes the structure of a Web page

    4.HTML consists of a series of elements

    5.HTML elements tell the browser how to display the content

    6.HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

    HTML ATTRIBUTES

    All HTML elements can have attributes

    Attributes provide additional information about elements

    Attributes are always specified in the start tag

    Attributes usually come in name/value pairs like: name=”value”

    SEMANTIC HTML

    Semantic HTML means that your HTML tags convey the actual meaning of what they are used for.

    Semantics has been an integral part of HTML since its inception in the early 90s. But it never gained particular relevance until the late 90s when CSS started working in most browsers.

    With semantic HTML, semantically-neutral tags such as <div> and <span> are frowned upon since semantically more descriptive tags such as <header>, <nav>, <main>, <section>, <footer> and <article> can do the same thing they do.

    A noticeable advantage of using semantic tags is that web crawlers are able to index the web page or website easily, improving SEO in return.

    In addition, a website that uses semantics becomes more informative, adaptable, and a ccessible to those who use screen readers to access websites.

     

    INTRODUCTION OF CSS

    CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web

    DEFINITION OF CSS

    CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL. CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

    HOW TO ADD CSS

    CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.

    • Inline CSS
    • Internal CS
    • External CSS

    INLINE CSS

    We can apply CSS in a single element by inline CSS technique.

    The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.

    If you want to use inline CSS, you should use the style attribute to the relevant tag.

    INTERNAL CSS

    The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

    EXTERNAL CSS

    The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.

    It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

    JAVASCRIPT

    JavaScript is a scripting language that is used to create and manage dynamic web pages, basically anything that moves on your screen without requiring you to refresh your browser. It can be anything from animated graphics to an automatically generated Facebook timeline.

    When most people get interested in web development, they start with good old HTML and CSS. From there, they move on to JavaScript, which makes sense, because, these three elements together form the backbone of web development.

    HTML is the structure of your page like the headers, the body text, any images you want to include. It basically defines the contents of a web page

    CSS controls how that page looks (it’s what you’ll use to customize fonts, background colors, etc.).

    USES OF JAVASCRIPT

    JavaScript is used in various fields from the web to servers, and here’s a quick list of the significant areas it’s used in:

    Web Applications: JavaScript is used for adding interactivity and automation to websites. So, if you want your web application to be anything more than just a static page of contents, you’ll probably need to do some “JavaScript’ing.

    Mobile Applications: JavaScript isn’t just for developing web applications; it is also used for developing applications for phones and tablets. With frameworks like React Native, you can develop full-fledged mobile applications with all those fancy animations.

    Web-based Games: If you’ve ever played a game directly on the web browser, JavaScript was probably used to make that happen.

    PRBack-end Web Development: JavaScript has traditionally been used for developing the front-end parts of a web application. However, with the introduction of NodeJS, a prevalent back-end JavaScript framework, things have changed. And now, JavaScript is used for developing the back-end structure also.

    FUNCTIONS OF JAVASCRIPT

    • A JavaScript function is a block of code designed to perform a particular task.
    • A JavaScript function is executed when “something” invokes it (calls it).
    • A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().
    • Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).
    • The parentheses may include parReact, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook.
    • React is a tool for building UI components.
    • A meter names separated by commas: (parameter1, parameter2, …)
    • The code to be executed, by the function, is placed inside curly brackets: {}

    REACT

    React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook.

    React is a tool for building UI components.

    DEFINITION OF REACT

    React is a JavaScript library for building user interfaces. It is the view layer for web applications. At the heart of all React applications are components. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component

    REACT COMPONENTS

    Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

    Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

    TYPES OF REACT COMPONENTS

    • Class Component
    • Function component

    CLASS COMPONENTS

    A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions. The component also requires a render() method, this method returns HTML.

    FUNCTION COMPONENTS

    Here is the same example as above, but created using a Function component instead.

    A Function component also returns HTML, and behaves much the same way as a Class component, but Function components can be written using much less code, are easier to understand, and will be preferred in this tutorial.

    FEATURES OF REACT

    • JSX (JavaScript Syntax Extension)
    • Virtual DOM
    • One-way data binding
    • Performance Extensions
    • Conditional statements
    • Components Simplicity

    JSX (JavaScript Syntax Extension)

     JSX is a combination of HTML and JavaScript. You can embed JavaScript objects inside the HTML elements. JSX is not supported by the browsers, as a result Babel compiler transcompile the code into JavaScript code.

    Virtual DOM

    DOM stands for Document Object Model. It is the most important part of the web as it divides into modules and executes the code. Usually, JavaScript Frameworks updates the whole DOM at once, which makes the web application slow.

    One-way Data Binding

    One-way data binding, the name itself says that it is a one-direction flow. The data in react flows only in one direction i.e. the data is transferred from top to bottom i.e. from parent components to child components.

    Performance

    As we discussed earlier, react uses virtual DOM and updates only the modified parts. So , this makes the DOM to run faster. DOM executes in memory so we can create separate components which makes the DOM run faster.

    Extension

     React has many extensions that we can use to create full-fledged UI applications. It supports mobile app development and provides server-side rendering. React is extended with Flux, Redux, React Native, etc. which helps us to create good-looking UI.

    Conditional Statements

    JSX allows us to write conditional statements. The data in the browser is displayed according to the conditions provided inside the JSX.

    Components

    React.js divides the web page into multiple components as it is component-based. Each component is a part of the UI design which has its own logic and design as shown in the below image. So the component logic which is written in JavaScript makes it easy and run faster and can be reusable.

    Simplicity

     React.js is a component-based which makes the code reusable and React.js uses JSX which is a combination of HTML and JavaScript. This makes code easy to understand and easy to debug and has less code.

    Conclusion

    Full-stack development gives software engineers the ability to design applications that do as much as they possibly can. They can be as visually appealing as Airbnb and as powerful as AWS (if you have the DS&A know-how). Use of ORMs and clever implementation of concepts like REST and WebSocket will expand the possibilities for your career even further.