Fundamentals of web development

JavaScript

Introduction

JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of language elements like operators, control structures, and statements. JavaScript programs run using a single thread but there are some mechanism to handle asynchronous operations. It does not wait for I/O operations so that it called as non-blocking I/O language. It is dynamically typed. It is Multi-paradigm language as it support OOP as well as functional programming. 

JavaScript can be added to your HTML file in two ways:

  1. Internal JS:

By inserting the code inside the <script> tag, we may directly add JavaScript to our HTML file. <script> tags can be inserted in either the <head> or the <body> tags, depending on the situation.

     2External JS:

JavaScript code is written in another file with the extension.js and then link that file to the <head> tag of the HTML file. 

<script type="text/javascript" src="extension.js">

Features of JavaScript:

JavaScript is the most widely used programming language on the planet. It is capable of so much more, now that browser technology has advanced which made JavaScript to move into the server with Node.js and other frameworks. Today, It can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. Here are a few things that we can do with JavaScript: 

  • No compiler is needed.
  • Form Validation in websites
  • Dynamic Websites were made possible

Applications of JavaScript: 

  • Web Development
  • Web Applications
  • Server Applications
  • Games
  • Smartwatches
  • Art
  • Machine Learning

Limitations of JavaScript:

  • Performance
  • Complexity
  • Weak error handling and type checking facilities

Standardization of the Language:

ECMA was once an acronym for European Computer Manufacturers Association has standardized JavaScript to provide a standardized, international programming language based on the language. ECMAScript is a standardized version of JavaScript that operates the same in all programs that uses it.


Study of the Language

Classes and objects:

The ES6/ECMAScript2015 standard introduced classes in JavaScript but it is not yet adopted by all JavaScript engines. A class is a type of function that has the keyword class in its name. Because the class is run in strict mode, any code that contains a silent error or mistake will result in an error. A constructor method, which is a specific method that is called each time an object is created in JavaScript, can be added to a class. Constructor methods are typically used to set the objects' initial values. 

In JavaScript, an object is a single entity with properties and methods. Variables or arrays are frequently insufficient to imitate real-life circumstances, and JavaScript allows you to create objects to cope with these situations. When constructing an Object, the 'new' key keyword is used with a constructor function. When a function is used with the 'new' keyword, it becomes a Class. Object literals (") are another technique to create an object.

Prototypes:

Since JavaScript is a prototype-based language, whenever we define a function in it, the JavaScript engine adds a prototype property to it. A prototype property is essentially an object (also known as a prototype object) to which we can attach methods and properties, allowing all other objects to inherit these methods and properties. Every object created with literal syntax or constructor syntax with the new keyword has a __proto__ field that refers to the prototype object of the function that generated it. Prototypes are the recommended way of creating classes as well as to extending classes.

‘this’ keyword in JavaScript:

this keyword points to a particular object. Inside a object ‘this’ refers to object itself. In global context ‘this’ refers to global object (in browser it is the window object).This behavior is very noticeable in callback and closures.

Strict notation:

The strict mode of JavaScript, which was introduced in ECMAScript 5, allows you to choose between a restricted version of JavaScript and an unrestricted version of JavaScript. It makes it easier to write "secure" JavaScript Code. It converts "poor syntax" that was previously acceptable into actual mistakes.

Closure:

A closure in JavaScript is a function that returns another function. It encapsulates variables in a function and restricts external access to it. In other words, closure occurs when a child function retains the parent's scope's environment after the parent function has already completed.

Callback and promises:

A callback is a function in JavaScript that isn't immediately performed but is instead passed as a parameter to another function. It is then executed or 'called back in the body of the contained function at a later time. Most of the things we need to accomplish in web development are asynchronous (or 'async'). Asynchronous operations include things like retrieving data from our app's backend, interacting with an external API, and submitting a form. Because these tasks take an indefinite length of time, JavaScript will not wait for a response before continuing to execute. Callbacks are one technique to accomplish this task

In actual life, a promise is simply an assurance about something. A Promise in JavaScript is an object that holds the future value of an asynchronous operation. The following states are possible for a promise object:

  • Pending: it is an initial state, where the result is not ready, and it is waiting for the asynchronous operation to get finished.
  • Resolved/Fulfilled: it means that performed action completed successfully. i.e., Function returned promised value.
  • Rejected: it means that performed action failed or an error occurred. i.e., function did not return the promised value.

Promises are the best option for handling asynchronous tasks in the most straightforward way. They can easily handle many asynchronous operations and handle errors better than callbacks and events. In other words, promises are an excellent alternative for managing numerous callbacks at the same time, avoiding the undesirable callback hell condition.


Version controlling

The method of recording and controlling changes to software code is known as version control, sometimes known as source control. Version control systems (VCS) are software tools that aid software development teams in managing source code changes over time. In a special type of database, version control software keeps track of every change to the code. If a mistake is made, developers can go back in time and compare prior versions of the code to help repair the problem while causing the least amount of disruption to the rest of the team.

Benefits:

  • A complete long-term change history of every file.
  • Branching and merging: 
It keeps various streams of work independent from each other while simultaneously offering the facility to merge that work back together, enabling developers to check that the changes on each branch do not conflict.

  •  Traceability: It can track every change to the software and link it to project management.

Terminology:

  • Repository:
A software repository is a location where software products can be stored. These software packages can be viewed and installed on machines throughout your network as needed. These repositories make it simple to store, maintain, and backup software applications.
  • Trunk:
It is also known as the master branch. This is where the most reliable code, often known as production code, is stored.
  • Stage:
Files are marked in order to keep track of modifications.
  • Commit:
Make a copy of the modifications that are made to the files.
  • Branch
At a specific point, a copy of the master branch is taken. A branch will be used for all feature development and problem fixes. Multiple branches are usually permitted at the same time.
  • Checkout
Change the file's status by marking/unlocking it.
  • Merge
To update the master branch, branches are combined.
  • Merge conflict
When merging a file that has been modified in two different branches or locations, merge conflicts might occur. 

Best practices:

  • Commit Related Changes
  • Commit Often
  • Don’t Commit Half-Done Work
  • Test Before You Commit
  • Write Good Commit Messages
  • Do not use Version Control as a Backup System
  • Use Branches
  • Agree on a Workflow
  • Use Tools to Be More Productive

Git:

Git is a free and open source distributed version control system that can handle everything from tiny to very large projects with ease. It has lightning-quick performance. With capabilities like cheap local branching, convenient staging areas, and numerous workflows, it outperforms SCM solutions like Subversion, CVS, Perforce, and ClearCase. It usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows (thousands of parallel branches running on different systems).

Git commands:

  • Git clone
  • Git branch
  • Git checkout
  • Git status
  • Git add
  • Git commit
  • Git push
  • Git pull
  • Git revert
  • Git merge

NoSQL

NoSQL databases (aka "not only SQL") are non-tabular databases and store data differently than relational tables. NoSQL databases come in a variety of types based on their data model. The main types are document, key-value, wide-column, and graph. They provide flexible schemas and scale easily with large amounts of data and high user loads.

When should NoSQL be used:

  • Fast-paced Agile development
  • Storage of structured and semi-structured data
  • Huge volumes of data
  • Requirements for scale-out architecture
  • Modern application paradigms like microservices and real-time streaming

CAP theorem:

The CAP theorem, also known as Eric Brewers theorem, argues that a database can only meet two of three guarantees: 
  • Consistency:
all nodes in the network see the same data at the same time.
  • Availability : 
every request receives a response about whether it was successful or failed.
  • Partition tolerance :
The system continues to operate despite arbitrary message loss or failure of part of the system.

Types:

NoSQL Databases are mainly categorized into four types: 

  • Key-value pair:
Data is stored in key/value pairs. It is designed in such a way to handle lots of data and heavy load.

Ex: Redis, Dynamo, Riak 

  • Column-oriented:
Column-oriented databases work on columns. Every column is treated separately. 

Ex: HBase, Cassandra, HBase, Hypertable 

  • Document-oriented
Document-Oriented NoSQL DB stores and retrieves data as a key value pair but the value part is stored as a document. The document is stored in JSON or XML formats.

Ex: Amazon SimpleDB, CouchDB, MongoDB, Riak, Lotus Notes, MongoDB 

  • Graph-Based:
A graph type database stores entities as well the relations amongst those entities. The entity is stored as a node with the relationship as edges. An edge gives a relationship between nodes. Every node and edge has a unique identifier.

Ex: Neo4J, Infinite Graph, OrientDB, FlockDB 

MongoDB: 

It's a document-oriented NoSQL database for storing large amounts of data. MongoDB uses collections and documents instead of tables and rows, as in traditional relational databases. Documents are made up of key-value pairs, which are MongoDB's basic data unit. Collections are the equivalent of relational database tables in that they include sets of documents and functions. MongoDB is a database that first appeared in the mid-2000s. It uses Spider Monkey JavaScript engine. It has an In-built file storage called Grid File System.

MongoDB Queries:

  • Insert:
db.COLLECTION_NAME.insert({})
  • Find:
db.COLLECTION_NAME.find({})
  • Update:
db.COLLECTION_NAME.update(SELECTION_CRITERIA, UPDATED_DATA)
  • Remove:

db.COLLECTION_NAME.remove(DELLETION_CRITTERIA)

Comments