The model-view-controller pattern suggests three main components to be used in software development:

• A Model, which describes the underlying logical structure of data in a software application. The model component does not contain any information about the user interface.
• A View, which explains the elements in the user interface (all of the things the user can see and respond to on the screen, such as buttons, display boxes, and so forth)
• A Controller, which defines connecting the model and the view, and is used to communicate between characters in the model and view.

MVC provides very loose coupling between these three layers. MVC patterns provide the facility of parallel development. It means that each layer of the application is independent of each other i.e. different developers can work on the single application simultaneously. One team can work on user input logic (controller logic), and the second team can work on the user interface logic (view) and some others can work on the business logic (model) at the same time.

The MVC pattern is widely used in development with programming languages such as Java, .NET, PHP. The MVC pattern has been proclaimed by many developers as a useful pattern for the reuse of object code and a model that lets them to significantly decrease the time it takes to produce applications with user interfaces.

Advantages of using MVC framework

• It saves time with faster development process
• It enables the user interface to display multiple views of the same data at the same time.
• The modification does not affect the entire model: MVC makes it easy to change the view, as every layer is independent. User Interface can be updated without slowing down or interfering the business logic process.
• MVC provide ease to create SEO friendly URL’s

Why performance matters

To retain users – High performing websites engage and retain users much better than non-performing sites. It doesn’t matter how beautiful a site is, for every delay in site load, you lose some users. Performance plays a major role in the success of any online investment.

To improve conversions – A high performing website has a positive impact on revenue.

It Improves UX – Slow sites make a user wait and there’s no user experience to speak of. Waiting time on every user response creates more problems. Even if we have a faster network, mobile devices have limited CPU power and memory. They might perform under if we have no code optimization.

Performance is about cost – Most of the user access the web on mobile devices through 4G, 3G maybe even 2G networks with limited data plans. Low performing sites can increase user costs which leads to more limited users.

How to achieve performance

Check for the resources you send and receive – Resources like heavy CSS and JavaScript frameworks are great, but use only if you need them. Such resources create heaps of CSS and JavaScript files, the browser needs to download. If we need any framework, go for a lightweight alternative. Not all websites need to be single-page applications, as they often make extensive use of JavaScript.

Minify text assets – minifying JS and CSS makes website smaller and loads faster. It removes white-space, strips comments, combines files and optimizes some common programming patterns.

Reduce HTTP requests or Migrate to HTTP/2 – In general, the more HTTP requests your web page makes the slower it will load. Consider using Code splitting in a webpack. This allows you to split your code into various bundles which can then be loaded on demand or in parallel.

Optimize images – Image optimization is about reducing a image size without sacrificing image quality, which makes web page loads fast. Use new web standard image formats like JPG 2000 and WebP for raster images and SVG for vector images.

Serve scaled images with alt attribute – Image size should be adjusted to match the exact size required for a site.

Deliver images responsively (srcset attribute) – we can send different images for devices with different screen sizes and resolutions, that work well on them.

Reduce assets such as third-party plugins that make a large number of external requests. Don’t use them unless they are really needed.

Inspect render-blocking resources – Check for what might be blocking the DOM causing the delay in your page load time. Use defer or async directive to avoid render-blocking JavaScript.

Reduce latency with a content delivery network (CDN) – CDN is an interconnected system of computers on the internet that provide web content rapidly to users by duplicating or caching the content on multiple servers and directing the content to users on proximity.

Caching resources – The performance of web sites and applications can be significantly improved by reusing previously fetched resources. web caches reduce latency and network traffic. By making use of HTTP caching, web sites become more responsive.

Hotlink protection – It allows you to prevent other websites from directly linking to files from your website.

PWAs give us the ability to create web apps that take benefit of both web and native app features. Web apps are more discoverable than native apps, it’s a lot easier and fater to visit a website than to install an application, and you can also share web apps by simply sending a link. On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users can easily access their favorite apps through icons, rather than navigating to it using a browser. 

There are many commonly used technologies to create progressive web apps. To call a Web App a PWA, technically speaking it should have the following features: It must run under Secure contexts (HTTPS), must implement a Service Worker, and a manifest file.

The PWA approach is characterized by the following set of attributes:

1. Responsive
2. Connectivity independent
3. App-like interactions
4. Fresh
5. Safe
6. Discoverable
7. Re-engageable
8. Installable
9. Linkable

Benefits of PWA

• Cheaper than other apps
• Count towards SEO
• lower usage threshold
• not dependent on app stores

Disadvantages of PWA

• Fewer functionalities and therefore less UX
• No access to innovations (Such as Bluetooth or NFC)
• No extra room for business model 

References:

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

https://en.wikipedia.org/wiki/Progressive_web_application

https://medium.com/@amberleyjohanna/seriously-though-what-is-a-progressive-web-app-56130600a093

Serverless computing is a cloud computing execution model in which the cloud provider runs the server, and dynamically manages the allocation of machine resources. Pricing is based on the actual amount of resources consumed by an application, rather than on pre-purchased units of capacity.

The Serverless computing provides developers a platform which removes the need for managing server software and hardware. Application can divide into individual functions, which can be used and scaled separately. On a serverless architecture, you only focus on standalone functions in the application code.

With serverless computing, you get backend services on an as-used basis. Developers can deploy code without bothering about the underlying foundation. Traditional server charges for a set bandwidth or number of servers, whether they are used or not. This results in lots of server space went to waste. On the other hand, serverless computing provides an auto-scaling model, which reduces cost by only charging for the services you use.

Serverless computing doesn’t mean there is no server, it is the developer who do not need to be aware of it. The term ‘serverless’ is somewhat misleading, as there are still servers providing these backend services, but all of the server space and infrastructure concerns are handled by the vendor. Serverless means that the developers can do their work without having to worry about servers at all.

Services serverless computing provides

Serverless service providers mostly offer database and storage services and many also have Function-as-a-Service (FaaS) platforms. These platforms can execute pieces of code on the edge without storing any data.

Advantages of serverless computing

• Lower costs
• Simplified scalability
• Simplified back-end code
• Quicker turnaround

Top Serverless Vendors

• AWS Lambda
• Cloudflare Workers
• Google Cloud Functions
• IBM Cloud Functions
• Microsoft Azure Functions
• Oracle Functions

Who Should Use Serverless?

The serverless model is best if you need a small number of functions to be hosted. Although a complex application can still take benefits. If you have an existing application, it may not be feasible to build all in one go, gradually migrating small pieces of the application into serverless functions makes more sense.

References:

https://www.twilio.com/docs/glossary/what-is-serverless-architecture

https://hackernoon.com/what-is-serverless-architecture-what-are-its-pros-and-cons-cc4b804022e9

APIs (Application Programming Interface) is a set of procedures and functions used to create applications that can communicate with the features or data of other applications or an operating system. For example, many websites show reviews and ratings from other third-party website so they use APIs from other application on their website to display their reviews and ratings.

APIs are helpful to developers because they can easily add specific functionality or access data to their application, without rewriting all of the code.

Usually, APIs are referred to as web APIs. However, APIs can be two local applications that don’t require a network to communicate with each other.

Web service APIs

Web service APIs are small applications that utilize URLs on the internet to provide their services to other web applications.  It is a method for two machines to interact with each other over a network. A web-server running on a computer listens to requests from other computers. When a request is received, the web service returns the requested resources, which could an HTML file, JSON or XML type. A Web service is simply an API wrapped in HTTP.  A Web service might not include a complete set of specifications and sometimes might not be able to perform all the tasks that may be possible from a complete API.

“All Web Services are APIs, but not all APIs are Web services.”

SOAP vs REST APIs

SOAP (Simple Object Access Protocol)

SOAP messaging protocol specifications in terms of the level of security and the approach to send messages are more defined than REST. SOAP grants comprehensive security, built-in ACID (Atomicity, Consistency, Isolation, Durability) compliance and reliable messaging functionality which makes it more suitable for enterprise applications like banking transactions, LDAP interaction and more.

SOAP allows processes running on different operating systems (such as Windows, macOS, and Linux) to connect and communicate using XML (Extensible Markup Language). The devices don’t need to use the same platforms because they both understand the language of XML.

REST (Representational State Transfer)

A REST API is a standardized architecture style for creating a Web Service API. REST APIs are based on URIs (Uniform Resource Identifier) HTTP protocol and uses different data formats like JSON, HTML, XML and plain text for sending messages, which are super browser-compatible. The usage of simpler data formats makes the payloads lighter which makes REST APIs be more desirable for a wider range of applications. REST APIs are simple to build and scale as opposed to other types of APIs. REST APIs use SSL security which means it can use HTTPS. 

What does stateless mean in REST?

In REST architecture, the server does not store any state of the client session on the server-side. Each request from the client must contain all of the information required to understand by the server. The client is responsible for storing and handling all application state-related information on the client-side. It also means that the client is responsible for sending any state information to the server whenever it is needed. Because, there is not session affinity or sticky sessions on the server the connection is stateless.

Resources:

https://www.decipherzone.com/blog-detail/Types-of-APIs

“Wikipedia’s definition of Data Visualization: Data visualization refers to the techniques used to communicate data or information by encoding it as visual objects (points, lines or bars) contained in graphics.”

To be highly effective visualization, it is important to design the right visualization for the data so that users can interpret and make decisions based on what they observe.  

General types of data visualization:

Charts, Tables, Graphs, Maps, Info-graphics, Dashboards

More specific types of data visualization: 

Area Chart, Bar Chart, Gantt Chart, Heat Map, Highlight Table, Bullet Graph, Circle View, Histogram, Matrix, Bubble Cloud, Dot Distribution Map,

Data Visualization tools:

The most common tool for ordinary users is Excel. For more sophisticated abilities, we have Tableau, D3.js, Microsoft Power BI, Oracle Visual Analyzer, Google Charts etc.

About D3.js

D3 produces interactive data visualization in web browsers. D3.js, as the name suggests (Data Driven Documents), it’s a JavaScript library used to manipulate DOM objects using data. D3.js offers high flexibility and providing you to implement complex data. D3.js can be used for data range from few bits to gigabits.

D3 uses HTML, SVG and CSS to bring data to life. D3 follows web standards and uses full capabilities of latest browsers. You can use D3 to generate an HTML table or create an interactive, dynamic SVG charts. The D3.js uses pre-build functions to select elements and create SVG objects. You can style or add transitions to these objects. D3 is extremely fast and supports large datasets in various formats such as JSON, CSV.

Installing D3.js

You can install using npm (npm install d3) . You can also download or load directly from d3j.org. 

References:

https://d3js.org/

https://en.wikipedia.org/wiki/D3.js

https://towardsdatascience.com/9-data-visualization-tools-that-you-cannot-miss-in-2019-3ff23222a927

What is react router?

React router is a routing library built on top of the react which is used to create the routing in react apps. React Router conditionally render certain components to display depending on the route being used in the URL (/ for the home page, /about for the about page, etc.).

In the below example, we are using the BrowserRouter with the assumption that the server running the application is dynamic.

Installing the React Router

npm i react-router-dom

Creating components and Router

Open the App.js file and import the components. In this example we have Home, About and Contact.

React router gives us four components Route, Link, BrowserRouter and Switch which help us to implement the routing. You’ll need to import BrowserRouter, Route, and Switch from react-router-dom package:

file: /App.js

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import AppHeader from './components/AppHeader';
import Home from './pages/home';
import About from './pages/about';
import Contact from './pages/contact';

function App() {
  return (
    <Fragment>
      <Router>
        <AppHeader />
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/contact" component={Contact} />
          </Switch>
        </main>
      </Router>
    </Fragment>
  );
}
export default (App);

The <Route/> component is one of the most important building blocks in the React Router package. It renders the appropriate user interface when the current location matches the route’s path. In the Route component, we need to pass the two props, one is path and second component. The path describes the pathname that the route should match. The component prop describes the component user needs to see when they will navigate to that path.

The react-router library also contains a <Switch/> component that is used to wrap multiple  <Route/>  components. The Switch component only picks the first matching route among all its children routes.

Now if you enter manually localhost:3000/about you will see About component is rendered.

Adding Navigation using Link component

The react-router package also contains a <Link/> component that is used to navigate the different parts of an application by way of hyperlinks. It is similar to HTML’s anchor element but the main difference is that using the Link component does not reload the page but rather, changes the UI. Using an anchor tag would require that the page is reloaded in order to load the new UI. When the Link component is clicked, it also updates the URL.

File: ./components/AppHeader.js

import React from 'react';
import { Link } from 'react-router-dom';
const AppHeader = () => (
     <header> 
        <nav className="site-main-nav">
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact Us</Link></li>
            </ul>
        </nav>
     </header>
);
export default AppHeader;

After adding navigation you will see the routes are rendered on the screen. if you click on the navigation links you will see url is changing and appropriate navigation components are rendered.

The <Link/> component uses to as a prop to define the location to navigate to. This prop can either be a string or a location object. If it is a string, it is converted to a location object. Note that the pathname must be absolute.

Adding 404 Pages

We need to import another component called Switch which is provided by the react router. Switch component helps us to render the components only when path matches otherwise it fallbacks to the not found component.

File: ./pages/404.js

import React from 'react'
const Notfound = () => (
       <h1>Page Not Found</h1>
)
export default Notfound

File: /App.js

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import AppHeader from './components/AppHeader';
import Home from './pages/home';
import About from './pages/about';
import Contact from './pages/contact';
import NotFound from './pages/404';

function App() {
  return (
    <Fragment>
      <Router>
        <AppHeader />
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/about" component={About} />
            <Route exact path="/contact" component={Contact} />
            <Route component={NotFound} />
          </Switch>
        </main>
      </Router>
    </Fragment>
  );
}
export default (App);

Let’s check it now by manually entering wrong path “localhost:3000/pagenotfound”. you we see NotFound component rendered.

Conclusion

React Router is a clean and organized method and makes adding and deleting pages easier. It’s easy to navigate around a React app, without using anchor tags.