Like you, I was also in that shallow waters of what observability means at abstraction level when the people would talk about, especially the DevOps folklore.

I am going to share you my experience on take on observability and why you should care about it.

3 pillars of observability

• Logs
• Metrics
• Traces

there are other components, but so far I've come across these 3 when I deal with setting up observability for any project/web-app.

Logs

Logs, that term you would have been familiar as it dates back to decade or two. Essentially, logs are a piece of text data generated in a particular format. These pieces of text contain crucial information about all stuff going in your system. It may be internal system log, database log, HTTP request log or server log.

Let me show you example of http-log:

{
  "timestamp": "2019-05-30T23:40:24.654+0530",
  "level": "info",
  "type": "http-log",
  "detail": {
    "request_id": "072b3617-6653-4fd5-b5ee-580e9d098c3d",
    "operation": {
      // operation details such as error, req payload and other headers
    },
    "http_info": {
      "status": 200,
      "http_version": "HTTP/1.1",
      "url": "/api/send-mail",
      "ip": "127.0.0.1",
      "method": "POST"
    }
  }
}

These logs are crucial when it comes to troubleshooting any issue within your software. Essentially, you can find error regarding specific request/operation/program and can get to know why it’s failing at certain time.

For example, DataDog gives you a platform to store your logs and perform certain analyze/search queries on top of it.

Metrics

You would have seen those type of images (like below) where you can get visual overview of your system be it, request traffic or CPU/memory or any other stats.

Metrics are stored in time-series database. Don’t overthink database here, but the general rule is that data is stored in time-series fashion, where you have complete control over time range and time interval you want to capture data from, and then you can use it to display in visualization tool such as above one, which in this case is Grafana.

When I say database, that also means you can query time-series data over a specific period using certain query language against that database. For example, Prometheus provides PromQL query langauge to query time-series data from Prometheus (it stores data in time-series fashion).

I’ve used Prometheus so far for capturing the time series data exported from certain 3rd party service (be it metrics collector (like MetricBeat or PromTail) or opentelemetry collector like OTEL collector).

Using metrics, …

You can find certain patterns in your system to know where it’s behaving abnormal, which results in performance degradation of your product/web-app. Based on that, you can take certain measures which would alleviate the perf issue and help your product to get back to normal state.

Traces

Suppose you want to find bottleneck of where is high latency coming from your request pipeline, assuming request pipeline has initial point from client and ends at database. With help of trace , you can observe how request was break down (in spans or segments) and where it had spent most of the time.

These break down into segments is the most fascinating part of trace, where you can get understanding that which of the services/processes were involved in one specific request/operation and in which “order”. Services here could be client HTTP execution, load balancer, API server, database queries and to name a few.

Ending note:

That’s all, I had to keep it short and crisp. I hope you had a good time reading it.

Next up : I am thinking of writing a post for covering the practical aspect of it, like using OpenTelemetry collector, logging stack (like Loki) and viz dashboard (like Grafana) and showing you how the flow of logs/metrics goes from end-to-end.

Feel free to leave any kind of feedback !

I had this scenario where I needed to figure out that how many tabs are open of same website(app) in React.js. Since I researched and came to know that there’s no official API for detecting tabs open for the same website, I needed to develop a solution using whatever JS offers from its existing API with React’s useEffect hook.

Core idea

We will use help of localStorage API. With that we will keep track of tabs open counter.

Simply to put words as: we increment counter of “tabs open” when some user opens up a new tab or decrement counter of “tabs open” when some user closes tab or browser.

Init (increment tabs open counter) setup

First, we implement the base setup for counter increment.

We check that if key( lets say tabsOpen) is available in localStorage or not. If not, then we initialize by supplying value of 1 to it. Otherwise if it's available, we simply increment its counter

const tabsOpen = localStorage.getItem('tabsOpen')
console.log('tabsOpen', tabsOpen)

if (tabsOpen == null) {
  localStorage.setItem('tabsOpen', 1)
} else {
  localStorage.setItem('tabsOpen', parseInt(tabsOpen) + parseInt(1))
}

Using window.onunload for detecting close event of a tab or browser window

We use window.onunload method which helps us when a user closes a tab or whole browser window. That means it programmatically captures closing of tab or window.

This is where we will decrement the tabs open counter.

window.onunload = function (e) {
  const newTabCount = localStorage.getItem('tabsOpen')
  if (newTabCount !== null) {
    localStorage.setItem('tabsOpen', newTabCount - 1)
  }
}

Demo

Final Source Code snippet

Place this code snippet into your root component (for eg. App.js) .

NOTE: Please make sure for you to test this code, you should set/delete localStorage key acc. to your values to reset in to preferable value

Thanks for reading this. I would love your feedback or criticism for this content, which helps me to structure this article even more better.

Keep hustling

In this article, I tried my best to make it easier for you to understand what are react hooks. I have written this for guys coming from traditional class component pattern who want to explore react hooks.

We’ll cover how to use useState , useEffect() and more techniques to simulate the experience you were having in class component era

🎣 Hooks and Class Components

Hooks don’t work inside classes and that gives us benefit of using them in functional component.

But what about lifecycles and state which we were leveraging in class components? Well, there is a way for replicating them in form of hooks.

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes — React.js Official Documentation

🌟 Let’s talk about managing state: useState

useState is a hook which helps us manage state.

You can get a glimpse from this above image as what useState hook offers. So when you call setToggle(true) then toggle value changes from false to true

If we were to replicate this into class component then, it would look like this

Unlike class, we can’t have multiple state properties into one object. We have to always create another set of useState for new state properties.

How to use props?

As we know, functional components can access props by either passing it directly in function argument (eg: MyComponent(props)) or you can spread them for performance improvements (eg: MyComponent({name,title}))

So there’s no explicit API or section on how should we use props in react hooks.

🔗 APIs, where we should call them ?!

Old Class-ical way

Usually we would write network requests(APIs) in `componentDidMount` lifecycle which is the preferable one as per react documentation suggests.

componentDidMount(){
 this.props.getData()
}

But for hooks we have a similar way to do network requests in particular fashion.

useEffect( )

As documentation says, it’s a hook that lets you perform side effects.

Remember that any useEffect( ) hook will be called atleast once at time of render phase regardless of its arguments

We can call our APIs in useEffect() as following:

So as you can see if we pass empty array []in second argument of the function and it will be executed only once when that component completes its first render. This is because there're no values in array(i.e. second arg) to keep track of whether those values change or not.

Take a look at this scenario

1. useEffect with no args: This means function passed in useEffect(fn)will always trigger when there’s re-render of the component
2. useEffect with empty arg: This means function passed in useEffect(fn,[name]will trigger atleast once and after that it will trigger whenever the value supplied in argument( []) of useEffect(fn,[name] changes. name here is just a variable containing value which we want to subscribe if it changes or not
3. useEffect with one or more args: This means function passed in useEffect(fn,[name,title]will trigger atleast once and after that it will trigger whenever the value(s) supplied in argument( []) of useEffect(fn,[name,title] changes

You can read more about useEffect here — https://reactjs.org/docs/hooks-effect.html

Wait, how can I listen to changes for props and state values?

The most common approach in class component for this use case was achieved using componentDidUpdate

componentDidUpate(prevProps,prevState){
  if(prevProps.data !== this.props.data){
    // do some action
  }
}

Discuss how useEffect() hook can be used for it

This can be achieved in hooks by writing your logic in function ofuseEffect and by passing your value on which you want to check if that changed in dependency array[]

Passing our logic into function and list of dependency(s) into dependency array will conclude that whenever any of the dependency(s)’s value changes, then the function will be re-triggered hence our logic will be applied as per old method in class component

Again, take note that this useEffect() will always be executed atleast once as I said earlier. This means that if your props.userInfo hasn’t changed then also your hook will be triggered.

To overcome this, you could add extra condition in function which differentiates initial state(stale) of props.userInfo

When can I know that my component is going to unmount?

This can also be achieved via passing [] empty args in useEffect with main function returning another function where we can have unmount logic in it

You will get clear understanding when you’ll try it with

Note there are two things here. 1) the empty braces 2) return function to contain unmounting logic

This means this useEffect snippet will act like:

1. initial logic in function gets executed (as in component just mounted )
2. the logic inside return function gets executed when component is unmounted

How can I wrap them ?

Same way as we did with class components. Yeah literally, we wrap as authWrapper(Dashboard) .

📖 Conclusion

So folks, these were essential barebones for getting up and running with hooks.

Please report or suggest me if I have included any misinformation, incorrect logic or lack of proof.

I will do another post on covering other hooks considering the amount of response I get here.

Thanks, keep grinding!

Are you looking for a quick boilerplate for your awesome SaaS dashboard project? You’ve come to the right place. We have created a Vue dashboard template that is integrated with an ElasticSearch backend, vue-material as a design system and vue-chartjs for rendering the charts UI widgets. You can change this easily to connect with your own dataset.

In addition to the pre-built template, we also explain how it works with a code example so that you can create a dashboard UI of your own from the ground up.

Not Just Another Dashboard Template

While there are many templates available for mock dashboards, they miss out on the most important aspect of using a dashboard. A dashboard exists to enable you to:

1. Tailor the data visualizations for your business case,
2. Visualize data from a backend source. And what better would be a source be than ElasticSearch — the #1 open-source search and analytics engine that can scale without limiting you down the road,
3. Configure the existing UI widgets and be able to add new widgets with ease — ReactiveSearch, our choice of the underlying library here for querying ElasticSearch enables you to do exactly this.

For dashboard, performance matters above all.

With these needs in mind, our data-driven dashboard’s boilerplate comes pre-baked with:

1. An ElasticSearch backend that’s configurable to your own choice of ES backend and the dataset,
2. ReactiveSearch — A declarative, props-driven UI library for querying and managing the search state and comes with over 30 UI component presets. This lets you customize both your queries and UIs to render in minutes and comes with extensive documentation,
3. vue-chartjs for rendering the charts UIs. It is a wrapper for Chart.js in Vue. You can easily create reusable chart components. You can either add more charts from these easily or replace them entirely with other charting libraries such as d3.js, highcharts or Victory,
4. Auth0 for the login and authorization functionality. This is easy to extend and tailor for your use-case. You can also choose to replace Auth0 with another OAuth provider such as Firebase,

You can buy the entire template now for $69 over here. The template comes with a walkthrough video and you get free updates and support for the next 6 months.

Try the template live over here- https://charts-dashboard-vue.netlify.com

Who Is This For

The need for overall representation of data in a single glance is an essential requirement for all businesses. That’s where a dashboard comes into play. The ability for a company to now use real-time graphs and charts that clearly display how key aspects of their business is performing — has gone from a convenient ‘nice to have’ to a ‘must have’.

A dashboard can be used to:

• Enable your business team to visualize the important business metrics in a single glance,
• Share performance and ROI reports with your clients,
• Empower your end-users to visualize metrics relevant to them,
• A collating of existing dashboards into a unifying dashboard.

There are dashboard builder tools such as Kibana and Grafana which let you create ElasticSearch powered dashboards with no code. We recommend them whenever they fit your use-case. However, they become limiting as soon as you need:

• A chart that’s not available in their walled garden,
• Need to programmatically filter and visualize the data, e.g. filter data for the logged-in user and set access controls on the data that’s visible,
• Need to integrate other JavaScript code within your dashboard, or extend further by calling other backend routes.

What’s Inside This Template

This template comes with a dataset that sales data of games published over the years. It contains data visualizations powered by vue-chartjs. We use ElasticSearch for powering the search (aggregations) backend here and the template is using the ReactiveSearch library to fetch the hits and then render the charts using recharts.

Tools and libraries we have used in this app:

• Auth0 for Authentication
• vue-material is used for the design system
• Appbase.io for hosting ElasticSearch
• ReactiveSearch for querying ElasticSearch with a props-driven interface
• vue-chartjs for visualizing data via charts UIs

Authentication (Auth0)

In this app, we have used Auth0’s library to integrate the authentication flow. It also supports password-less authentication using social login such as Google.

Auth0 supports industry standards such as SAML, OpenID Connect, JSON Web Token, OAuth 2.0, OAuth 1.0a, WS­-Federation, and OpenID. Also, Auth0’s widget(UI) gives you a fully customizable, enterprise-ready login/registration box with just a few lines of JavaScript. You can learn more about it over here — https://auth0.com/why-auth0/.

Note: In the template’s source code, you’ll have to replace existing Auth0 credentials with your ones. AUTH0_CLIENT and AUTH0_DOMAIN are the variables responsible for passing credential values to Auth0 API.

Design System (vue-material)

The core design system that we have used in this app is vue-material. It follows Material-UI (https://material-ui.com/) design specs, so that you can build beautiful apps with Material Design and Vue.js. Dashboard UI’s integral elements like grids, layouts, cards, and various visual elements are built using vue-material.

Dataset and Search infrastructure (ElasticSearch + Appbase.io)

This template uses an app that is hosted with appbase.io — An ElasticSearch hosting provider. We recommend using appbase.io for your own dataset as well as it comes with a free tier, but you can also use any other ElasticSearch hosting provider.

ReactiveSearch

We have used ReactiveSearch for querying ElasticSearch using declarative props. It comes with a rich API for customizing the queries and comes with over 30 UI component presets.

Data Visualization (vue-chartjs)

We have used vue-chartjs which is wrapper for chartjs library. You can easily create reusable chart components

Screenshots

Landing page for unauthorized user

Main dashboard page

Game Platform Page with filters and pagination

Image: Specific game view page for a specific platform

Try It Live

You can try it out live over here — https://charts-dashboard-vue.netlify.com.

How To Use ElasticSearch With Vue

We have used ReactiveSearch — an open-source library to build the data-driven components in this template. It offers a range of highly customizable rich UI components that can connect with any ElasticSearch server and provide you with a good default queries for all the typical search use-cases (think e-commerce, aggregators, events).

Components Used:

ReactiveBase — All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together.

Read more about it over here.

DataSearch — This component creates a search bar UI that allows a user to search for data inside the dashboard.

GlobalSearch (using DataSearch component)

Read more about it over here.

MultiList — This component helps a user filter data by specific fields, e.g. a filter by year.

Read more about it over here.

ReactiveList — This component is used for rendering the result list view.

Read more about it over here.

ReactiveComponent — This component is responsible for connecting custom Vue components to ElasticSearch on top of ReactiveSearch.

We have used it to embed chart components with ReactiveSearch layer.

Donut chart wrapped with ReactiveComponent which remains in sync with data

Read more about it over here.

If you are more curious about how to use ReactiveComponent to build custom data-driven components, here’s an example of building a Donut Chart using it:

https://codesandbox.io/embed/vue-reactivecomponent-example-fd094?fontsize=14&hidenavigation=1&theme=dark

Summary

If you are finding challenges in building a performant and data-driven dashboard and want to do it less time, then this template app can help you set up with minimum efforts so that you can focus on your core business logic.

Compatible with your dataset 📦, Plug’n’Play extensible UI components 🔧, blazing fast backend 🚀, instant search infrastructure ⚡️ and interactive data-visualizations 📊, this dashboard template app is perfect starter for your product’s development.

💻 You can try it live over here.

❤️ Buy this template from here so you can build that awesome dashboard project in no time.

A Vue.js Dashboard Template With ElasticSearch was originally published in All things #search on Medium, where people are continuing the conversation by highlighting and responding to this story.

Are you looking for a reusable boilerplate for your next ▦ data grid project? You’ve come to the right place. We have created a React based data grid template that is powered by an ElasticSearch backend. It is searchable, filterable and can render thousands of rows on the frontend thanks to react-virtualized.

Why Yet Another Data Grid Template

We hear you! While there are plenty of data grid libraries and templates available that offer an amazing assortment of frontend functionalities, they often don’t consider the performance impact of rendering everything into the DOM and/or how to connect to a backend that doesn’t become limiting as data, filtering and search needs scale.

Given that ElasticSearch’s main use-case is providing a blazing fast ⚡️ and scalable search and aggregations backend, we offer a React data grid UI that’s powered using ElasticSearch as its backend. The frontend is based on Dejavu’s architecture — one of the most popular data browsers for ElasticSearch (over 1MM+ downloads). You can configure the template to work with your own ElasticSearch index. You can also configure a variety of UI options for searching, filtering, sorting, setting page size, switch b/w using pagination and infinite scrolling as well as setting the column visibility.

In this post, we also explain how you can build a data grid app from ground up using ReactiveSearch, react-virtualized, and ElasticSearch.

You can buy the data grid template with the source code for $99 over here. The template comes with a walkthrough video and you will receive free updates for the next 6 months.

Template Features:

• Apply the template to your dataset and ElasticSearch index
• Infinite scrolling, pagination, and data grouping with global search
• Sorting and filtering data on a column-by-column basis
• Blazing fast search experience
• Ability to customize columns and rows elements

You can try out the live demo over here.

Who Is This For

This template is meant for web developers who are looking for building a scalable data grid that doesn’t become limiting down the road.

Whether you’re considering building your next dashboard project, or your e-commerce search for end users, data grids provide the most flexible way to slice and dice any structured data.

While the template is powered by ElasticSearch, you don’t need to have experience with it to be able to configure / make the most of it. Our walkthrough video and use of declarative props make it accessible to developers with no prior experience working with it.

With this template, you can:

• Render tens of thousands of records of data seamlessly,
• Build a delightful search experience powered by appbase.io/ElasticSearch,
• Extend and customize the UI components,
• Use the built-in features for changing filtering, sorting and pagination options.

What’s inside this template?

This template uses ReactiveSearch and react-virtualized libraries to render the data grid UI.

1. ReactiveSearch — ReactiveSearch is search UI library for data-driven components. We have used ReactiveSearch for querying ElasticSearch using declarative props. It comes with a rich API for customizing the queries and comes with over 30 UI component presets.
2. react-virtualized — For rendering large set of data for grid, we have used react-virtualized library which uses virtual rendering techniques to render data without lagging the interface.

You can check the walkthrough video below:

A brief idea of ElasticSearch

ElasticSearch is a NoSQL database which can search through large amounts of data in a short time. It performs a full-text search on the data which is stored in the form of documents (like objects) by examining all the words in every document.

Here’s what the ElasticSearch docs say:

ElasticSearch is a highly scalable open-source full-text search and analytics engine. It allows you to store, search, and analyze big volumes of data quickly and in near real time.

Even if you’ve never used ElasticSearch before, you should be able to follow along with this post and build your very own ElasticSearch powered search using React and ReactiveSearch.

How to use ElasticSearch with React?

We will be using ReactiveSearch — An open-source UI library for building data-driven components for ElasticSearch. In order to search and filter data with ElasticSearch, you need to use the Query DSL — an imperative ElasticSearch specific query language that takes some getting used to if you haven’t worked with search engines in the past. ReactiveSearch simplifies the entire process by offering declarative props, with the ability to override them by writing the QueryDSL.

In this template, we have used ReactiveList, SelectedFilters, ReactiveBase, MultiList and DataSearch components from the ReactiveSearch library.

ReactiveBase

All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together. Read more about it over here.

ReactiveList

We’ll be using ReactiveList inside the DataTableWrapper component composed with react-virtualized. ReactiveList is responsible for rendering list records of data perform Infinite scrolling or pagination.

Read more about it over here.

DataSearch

This component creates a search bar UI which allows us to search for data inside the Table. It has ability to remain linked with ReactiveList which helps to render search results seamlessly.

Read more about it over here.

SelectedFilters

SelectedFilters creates a selectable filter UI view displaying the current selected values from other components

Read more about it over here.

The Need For Virtual Rendering

Working with data in React is relatively easy because React has capability to isolate data into its component’s state and its children. The hassle begins when the amount of data you need to render becomes massive.

For a common data grid, one of the main issues that still persists is to have a smooth rendering of data. To overcome this challenge, we use virtual rendering techniques which will only render list of data visible on screen and will fetch more data while user scrolls eventually.

How We Use react-virtualized

Here we have used react-virtualized to enable displaying large amounts of data without making the browser unresponsive. If you are unfamiliar with it and want to check how react-virtualized works, this post should help you out.

Summary

If you are looking to build powerful and flexible React data grid powered by ElasticSearch, this template should be a good starting point for you. ReactiveSearch enables querying ElasticSearch declaratively — making it accessible to build powerful search UIs. This also makes it easy to tailor both the queries and UIs as per your use-case.

Try out the live demo over here.

You can buy the template for a one time use for $99 from here.

This template is part of the ReactiveSearch Marketplace which contains a variety of other examples such as:

• A React Dashboard Template With ElasticSearch
• Learn To Build An Airbnb Like Full Stack App — Video Course ▶️

A React Data Grid Template Powered By ElasticSearch was originally published in All things #search on Medium, where people are continuing the conversation by highlighting and responding to this story.

Read our latest post update from Feb, 2022 over here: https://blog.reactivesearch.io/react-dashboard-template-with-elasticsearch

Are you looking for a quick boilerplate for your awesome SaaS dashboard project? You’ve come to the right place. We have created a React dashboard template that is integrated with an ElasticSearch backend and uses recharts and apexcharts for rendering the charts UI widgets. You can change this easily to connect with your own dataset.

In addition to the pre-built template, we also explain how it works with a code example so that you can create a dashboard UI of your own from the ground up.

Not Just Another Dashboard Template

While there are many templates available for mock dashboards, they miss out on the most important aspect of using a dashboard. A dashboard exists to enable you to:

1. Tailor the data visualizations for your business case,
2. Visualize data from a backend source. And what better would be a source be than ElasticSearch — the #1 open-source search and analytics engine that can scale without limiting you down the road,
3. Configure the existing UI widgets and be able to add new widgets with ease — ReactiveSearch, our choice of the underlying library here for querying ElasticSearch enables you to do exactly this.

For dashboard, performance matters above all.

With these needs in mind, our data-driven dashboard’s boilerplate comes pre-baked with:

1. An ElasticSearch backend that’s configurable to your own choice of ES backend and the dataset,
2. ReactiveSearch — A declarative, props-driven UI library for querying and managing the search state and comes with over 30 UI component presets. This lets you customize both your queries and UIs to render in minutes and comes with extensive documentation,
3. Recharts and Apexcharts for rendering the charts UIs. They come with a comprehensive selection of charts. You can either add more charts from these easily or replace them entirely with other charting libraries such as d3.js, highcharts or Victory,
4. Auth0 for the login and authorization functionality. This is easy to extend and tailor for your use-case. You can also choose to replace Auth0 with another OAuth provider such as Firebase,
5. A map UI (which is also data-driven) that is rendered using react-simple-maps. You can also extend this and/or replace it with a Google Maps / OpenStreetMap based maps UI.

You can buy the entire template now for $99 over here. The template comes with a walkthrough video and you get free updates and support for the next 6 months.

Who Is This For

The need for overall representation of data in a single glance is an essential requirement for all businesses. That’s where a dashboard comes into play. The ability for a company to now use realtime graphs and charts that clearly display how key aspects of their business is performing — has gone from a convenient ‘nice to have’ to a ‘must have’.

A dashboard can be used to:

• Enable your business team to visualize the important business metrics in a single glance,
• Share performance and ROI reports with your clients,
• Empower your end-users to visualize metrics relevant to them,
• A collating of existing dashboards into a unifying dashboard.

There are dashboard builder tools such as Kibana and Grafana which let you create ElasticSearch powered dashboards with no code. We recommend them whenever they fit your use-case. However, they become limiting as soon as you need:

• A chart that’s not available in their walled garden,
• Need to programmatically filter and visualize the data, e.g. filter data for the logged-in user and set access controls on the data that’s visible,
• Need to integrate other JavaScript code within your dashboard, or extend further by calling other backend routes.

What’s Inside This Template

This template comes with a dataset that sales data of games published over the years. It contains data visualizations powered by recharts and apexcharts. We use ElasticSearch for powering the search (aggregations) backend here and the template is using the ReactiveSearch library to fetch the hits and then render the charts using recharts.

Tools and libraries we have used in this app:

• Auth0 for Authentication
• Material-UI is used for the design system
• Appbase.io for hosting ElasticSearch
• ReactiveSearch for querying ElasticSearch with a props-driven interface
• ApexCharts, Recharts, and react-simple-maps for visualizing data via charts UIs,

Authentication (Auth0)

In this app, we have used Auth0’s library to integrate the authentication flow. It also supports password-less authentication using social login such as Google.

Auth0 supports industry standards such as SAML, OpenID Connect, JSON Web Token, OAuth 2.0, OAuth 1.0a, WS­-Federation, and OpenID. Also, Auth0’s widget(UI) gives you a fully customizable, enterprise-ready login/registration box with just a few lines of JavaScript. You can learn more about it over here — https://auth0.com/why-auth0/.

Note: In the template’s source code, you’ll have to replace existing Auth0 credentials with your ones. AUTH0_CLIENT and AUTH0_DOMAIN are the variables responsible for passing credential values to Auth0 API.

Design System (Material-UI)

The core design system that we have used in this app is Material UI (https://material-ui.com/) which provides React components and is used by thousands of developers. Dashboard UI’s integral elements like grids, layouts, cards, and various visual elements are built using Material UI.

Dataset and Search infrastructure (ElasticSearch + Appbase.io)

This template uses an app that is hosted with appbase.io — An ElasticSearch hosting provider. We recommend using appbase.io for your own dataset as well as it comes with a free tier, but you can also use any other ElasticSearch hosting provider.

ReactiveSearch

We have used ReactiveSearch for querying ElasticSearch using declarative props. It comes with a rich API for customizing the queries and comes with over 30 UI component presets.

Data Visualization (Apex Charts, Recharts, react-simple-maps)

We have combined set visualizations containing:

• Charts & Graphs — We are using Apex Charts react.js wrapper for building customizable charts. For introducing more variety, we have used the Recharts library.
• Maps — We are using react-simple-maps package for displaying a map based on the sales by geography (see image below).

Screenshots

Try It Live

You can try it out live over here — https://charts-dashboard.netlify.com/.

How To Use ElasticSearch With React

We have used ReactiveSearch — an open-source library to build the data-driven components in this template. It offers a range of highly customizable rich UI components that can connect with any ElasticSearch server and provide you with a good default queries for all the typical search use-cases (think e-commerce, aggregators, events).

Components Used:

ReactiveBase — All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together.

Read more about it over here.

DataSearch — This component creates a search bar UI that allows a user to search for data inside the dashboard.

Read more about it over here.

MultiList — This component helps a user filter data by specific fields, e.g. a filter by year.

Read more about it over here.

ReactiveList — This component is used for rendering the result list view.

Read more about it over here.

ReactiveComponent — This component is responsible for connecting custom react components to ElasticSearch on top of ReactiveSearch.

We have used it to embed chart components with ReactiveSearch layer.

Read more about it over here.

If you are more curious about how to use ReactiveComponent to build custom data-driven components, here’s an example of building a Donut Chart using it:

Summary

If you are finding challenges in building performant and data-driven dashboard and want to do it less time, then this template app can help you setup with minimum efforts so that you can concentrate on your core business logic as the foremost priority.

Compatible with your dataset 📦, Plug’n’Play extensible UI components 🔧, blazing fast backend 🚀, instant search infrastructure ⚡️ and interactive data-visualizations 📊, this dashboard template app is perfect starter for your product’s development.

💻 You can try it live over here.

❤️ Buy this template from here so you can build that awesome dashboard project in no time.

A React Dashboard Template With ElasticSearch was originally published in All things #search on Medium, where people are continuing the conversation by highlighting and responding to this story.

Suppose you are doing some calculation using an appropriate series of input. There is some computation done at every instance to derive some result. You don’t know that you had encountered the same output when you had supplied the same input. So it’s like you are doing re-computation of a result that was previously achieved by specific input for its respective output.

But what’s the problem here? Thing is that your precious time is wasted. You can easily solve the problem here by keeping records that map previously computed results. Such as using the appropriate data structure. For example, you could store input as key and output as a value (part of mapping).

Those who cannot remember the past are condemned to repeat it. ~Dynamic Programming

Now by analyzing the problem, store its input if it’s new (or not in the data structure) with its respective output. Else check that input key and get the resultant output from its value. That way when you do some computation and check if that input existed in that data structure, you can directly get the result. Thus we can relate this approach to dynamic programming techniques.

Diving into dynamic programming

In a nutshell, we can say that dynamic programming is used primarily for optimizing problems, where we wish to find the “best” way of doing something.

A certain scenario is like there are re-occurring subproblems which in turn have their own smaller subproblems. Instead of trying to solve those re-appearing subproblems, again and again, dynamic programming suggests solving each of the smaller subproblems only once. Then you record the results in a table from which a solution to the original problem can be obtained.

For instance, the Fibonacci numbers 0,1,1,2,3,5,8,13,… have a simple description where each term is related to the two terms before it. If F(n) is the nth term of this series then we have F(n) = F(n-1) + F(n-2). This is called a recursive formula or a recurrence relation. It needs earlier terms to have been computed in order to compute a later term.

The majority of Dynamic Programming problems can be categorized into two types:

1. Optimization problems.
2. Combinatorial problems.

The optimization problems expect you to select a feasible solution so that the value of the required function is minimized or maximized. Combinatorial problems expect you to figure out the number of ways to do something or the probability of some event happening.

An approach to solve: top-down vs bottom-up

There are the following two main different ways to solve the problem:

Top-down: You start from the top, solving the problem by breaking it down. If you see that the problem has been solved already, then just return the saved answer. This is referred to as Memoization.

Bottom-up: You directly start solving the smaller subproblems making your way to the top to derive the final solution of that one big problem. In this process, it is guaranteed that the subproblems are solved before solving the problem. This can be called Tabulation (table-filling algorithm).

In reference to iteration vs recursion, bottom-up uses iteration and the top-down uses recursion.

Here there is a comparison between a naive approach vs a DP approach. You can see the difference by the time complexity of both.

Memoization: Don’t forget

Jeff Erickson describes in his notes, for Fibonacci numbers:

The obvious reason for the recursive algorithm’s lack of speed is that it computes the same Fibonacci numbers over and over and over.

We can speed up our recursive algorithm considerably just by writing down the results of our recursive calls. Then we can look them up again if we need them later.

Memoization refers to the technique of caching and reusing previously computed results.

If you use memoization to solve the problem, you do it by maintaining a map of already solved subproblems (as we earlier talked about the mapping of key and value). You do it “top-down” in the sense that you solve the “top” problem first (which typically recurses down to solve the sub-problems).

Pseudocode for memoization:

So using recursion, we perform this with extra overhead memory (i.e. here lookup) to store results. If there is a value stored in the lookup, we return it directly or we add it to lookup for that specific index.

Remember that there is a tradeoff of extra overhead with respect to the tabulation method.

However, if you want more visualizations for memoization, then I suggest looking into this video.

Tabulation: Filling up in tabular form

But once we see how the array (memoized solution) is filled, we can replace the recursion with a simple loop that intentionally fills the array in order, instead of relying on the complicated recursion to do it for us ‘accidentally’.

Tabulation does it in “bottom-up” fashion. It’s more straight forward, it does compute all values. It requires less overhead as it does not have to maintain mapping and stores data in tabular form for each value. It may also compute unnecessary values. This can be used if all you want is to compute all values for your problem.

Pseudocode for tabulation:

As you can see pseudocode (right side) in an image, it does iteration (i.e. loops over till the end of an array). It simply starts with fib(0),fib(1),fib(2),… So with the tabulation approach, we can eliminate the need for recursion and simply return the result with looping over elements.

Looking back in history

Richard bellman was the man behind this concept. He came up with this when he was working for RAND Corporation in the mid-1950s. The reason he chose this name “dynamic programming” was to hide the mathematics work he did for this research. He was afraid his bosses would oppose or dislike any kind of mathematical research.

Okay, so the word ‘programming’ is just a reference to clarify that this was an old-fashioned way of planning or scheduling, typically by filling in a table (in a dynamic manner rather than in a linear way) over the time rather than all at once.

Wrapping up

That’s it. This is part 2 of the algorithm series I started last year. In my previous post, we discussed about what are searching and sorting algorithms. Apologies that I couldn’t deliver this in a shorter time. But I am willing to make things faster in the coming months.

Hope you liked it and I’ll be soon looking to add a third one in the series soon. Happy coding!

Resources:

• Introduction to Dynamic Programming 1 Tutorials & Notes | Algorithms | HackerEarth
• Community - Competitive Programming - Competitive Programming Tutorials - Dynamic Programming: From Novice to Advanced

https://www.geeksforgeeks.org/overlapping-subproblems-property-in-dynamic-programming-dp-1/

Special props to Jeff Erickson and his notes for algorithm — http://jeffe.cs.illinois.edu/

An intro to Algorithms: Dynamic Programming was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

They are either linear or non-linear. Arrays and linked lists are examples of linear data structures. On the other hand, graphs and trees are forms of non-linear data structures.

• For example, one common data structure is the list or array, which is an ordered sequence of values. Here’s a list of numbers: 0, 1, 1, 2, 3, 5, 8, 13. The concept of the list isn’t particular to one language, and it’s also used outside of programming in everyday life — wish lists, shopping lists, and so on.

Algorithms are recipes for logical execution of the problem. They are not the same as data structures. Algorithms are usually “better” if they work faster or more efficiently (using less time, memory, or both).

But here in this article, it’s all about looking into non-linear data structures: graphs

Diving into graphs

A graph is a system in which there are potentially multiple ways to get from an arbitrary point, A, to another arbitrary point, B.

A graph is normally defined as a pair of sets (V,E). V is a set of arbitrary objects called vertices or nodes, and E is a set of pairs of vertices, which we call edges or (more rarely) arcs. In an undirected graph, the edges are unordered pairs, or just sets of two vertices. I usually write u v instead of {u,v} to denote the undirected edge between u and v.

In a directed graph, the edges are ordered pairs of vertices. I will use u → vinstead of (u,v) to denote the directed edge from u to v and vice versa for all edges in this article.

Graphs can also be undirected or directed, cyclic or acyclic (mostly directed), or weighted.

Traversing a graph

To visit each node or vertex which is a connected component, tree-based algorithms are used. You can do this easily by iterating through all the vertices of the graph, performing the algorithm on each vertex that is still unvisited when examined.

Two algorithms are generally used for the traversal of a graph: Depth first search (DFS) and Breadth first search (BFS).

Depth first search (DFS) algorithm

Depth-first Search (DFS) is an algorithm for searching a graph or tree data structure. The algorithm starts at the root (top) node of a tree and goes as far as it can down a given branch (path), and then backtracks until it finds an unexplored path, and then explores it. The algorithm does this until the entire graph has been explored.

Many problems in computer science can be thought of in terms of graphs. For example, analyzing networks, mapping routes, scheduling, and finding spanning trees are graph problems. To analyze these problems, graph search algorithms like depth-first search are useful. -Source

The simplest pseudo-code would be:

Depth-first search is a common way that many people naturally use when solving problems like mazes.

First, we select a path in the maze (for the sake of this example, let’s choose a path according to some rule we lay out ahead of time) and we follow it until we hit a dead end or reach the end of the maze. If a given path doesn’t work, we backtrack and take an alternative path from a past junction, and try that path.

To turn this into a graph traversal algorithm, we basically replace “child” with “neighbor”. But to prevent infinite loops, we only want to visit each vertex once. Just like in BFS, we can use marks to keep track of the vertices that have already been visited, so we don’t visit them again. Also, just like in BFS, we can use this search to build a spanning tree with certain useful properties.

dfs(vertex v)
    {
    visit(v);
    for each neighbor w of v
        if w is unvisited
        {
        dfs(w);
        add edge vw to tree T
        }
    }

Here’s the Python implementation using recursion:

This was a basic overview of how DFS works. If you want to dive deeper, there is some great stuff available all over the internet and also on Medium.

Breadth first search (BFS) algorithm

It starts at the tree root (or some arbitrary node of a graph, sometimes referred to as a ‘search key’), and explores all of the neighbor nodes at the present depth prior to moving on to the nodes at the next depth level.

The only catch here is, unlike trees, graphs may contain cycles, so we may come to the same node again. To avoid processing a node more than once, we use a boolean visited array. For simplicity, it is assumed that all vertices are reachable from the starting vertex.

What we do in a BFS is a simple step-by-step process:

1. Start from a vertex S. Let this vertex be at what is called…. “Level 0”.
2. Find all the other vertices that are immediately accessible from this starting vertex S, that is they are only a single edge away (the adjacent vertices).
3. Mark these adjacent vertices to be at “Level 1”.
4. You might be coming back to the same vertex due to a loop or a ring in the graph. If this happens, your BFS will take ∞ time. So, you will go only to those vertices who do not have their “Level” set to some value.
5. Mark which is the parent vertex of the current vertex you’re at, i.e., the vertex from which you accessed the current vertex. Do this for all the vertices at Level 1.
6. Now, find all those vertices that are a single edge away from all the vertices which are at “Level 1”. These new set of vertices will be at “Level 2”.
7. Repeat this process until you run out of graph.\

See this — https://www.programiz.com/dsa/graph-bfs

Python Implementation Using Queue

Directed and Undirected graphs

An undirected graph is a graph in which edges have no orientation. The edge (x, y) is identical to the edge (y, x). That is, they are not ordered pairs, but unordered pairs — i.e., sets of two vertices {x, y} (or 2-multisets in the case of loops). The maximum number of edges in an undirected graph without a loop is n(n − 1)/2.

For any edge uand v in an undirected graph, we call u a neighbor of v and vice versa. The degree of a node is its number of neighbors. In directed graphs, we have two kinds of neighbors. For any directed edge u — >v, we call u a predecessor of v and v a successor of u.

Cyclic and Acyclic graphs

Among the many properties of graphs, two are important for a great number of applications : connectivity and acyclicity. Both are based on the notion of a path.

A cyclic graph is a graph containing at least one graph cycle. Also remember that cyclic graphs cannot be a form of tree because tree’s nodes are only visited once via DFS or BFS(traversal methods).

An acyclic graph is a graph without cycles (a cycle is a complete circuit). When following the graph from node to node, you will never visit the same node twice.

What is Directed Acyclic Graph?

A directed acyclic graph is an acyclic graph that has a direction as well as a lack of cycles.

A tree is a formation of Directed acyclic graph

The parts of the above graph are:

• Integer = the set for the the Vertices.
• Vertices set = {1,2,3,4,5,6,7}.
• Edge set = {(1,2), (1,3), (2,4), (2,5), (3,6), (4,7), (5,7), (6,7)}.

A directed acyclic graph has a topological ordering. This means that the nodes are ordered so that the starting node has a lower value than the ending node. A DAG has a unique topological ordering if it has a directed path containing all the nodes; in this case the ordering is the same as the order in which the nodes appear in the path.

In computer science, DAGs are also called wait-for-graphs. When a DAG is used to detect a deadlock, it illustrates that a resources has to wait for another process to continue.

How can we detect cycles in a graph?

As it turns out, the reason that the depth-first search algorithm is particularly good at detecting cycles is because of the fact that it is efficient at finding backward edges. We’ll look in to DFS algorithm later in this article

Adjacency matrices and adjacency list representation

Carrying out graph algorithms using the representation of graphs by lists of edges, or by adjacency lists, can be cumbersome if there are many edges in the graph. To simplify computation, graphs can be represented using matrices. Two types of matrices commonly used to represent graphs will be presented here. One is based on the adjacency of vertices, and the other is based on incidence of vertices and edges.

Given an adjacency matrix, we can decide in Θ(1) time whether two vertices are connected by an edge just by looking in the appropriate slot in the matrix. We can also list all the neighbors of a vertex in Θ(V) time by scanning the corresponding row (or column).

Understanding Adjacency matrix from above given image…

Let’s understand how adjacency matrix is constructed from above given image. For simplicity I have discussed this only for vertex “a” . Same applies to all vertex.

Due to page limit, I have not included analysis for a → d and a → e. As we can conclude from image that there is an edge from a → d and a → e respectively.

And what about adjacency list?

The adjacency list data structure should immediately remind you of hash tables with chaining;the two data structures are identical.

An adjacency list is an array of linked lists, one list per vertex. Each linked list stores the neighbors of the corresponding vertex.

For example for a vertex there are edges leading to neighbors as b,d and e . So its respective linked list contains vertex that are connected via edge.

Reminder → For undirected graphs, each edge(u,v) is stored twice, once in u’s neighbor list and once in v’s neighbor list; for directed graphs, each edge is stored only once.

Weighted Graphs

A weighted graph (or weighted digraph) is a graph (or di-graph) with numbers assigned to its edges. These numbers are called weights or costs. An interest in such graphs is motivated by numerous real-world applications, such as finding the shortest path between two points in a transportation or communication network or the traveling salesman problem.

Examples of graphs in real life

Google Maps — it’s just one big graph! Where Edges represent streets and vertices represent crossings.

Graph theory underlies the Internet. It’s very heavily used in networking code (building routing tables, etc), but it comes up all kinds of places like building an internet search engine, or a social media platform.

For diving deep into trees, this article is one of the preferable I chose — https://medium.freecodecamp.org/all-you-need-to-know-about-tree-data-structures-bceacb85490c

Facts that matters the most:

• All trees are graphs. Not all graphs are trees.
• A tree is a kind of graph, Only if it’s connected. For instance, the graph consisting of the vertices A and B and no edges is not a tree, although it is an acyclic graph.
• A single vertex is also considered a tree (no cycles, vacuously connected). So two unconnected vertices makes a forest of two trees.
• A tree is a special kind of graph where there are never multiple paths, that there is always only one way to get from A to B, for all possible combinations of A and B.

Resources:

• Depth-First Search (DFS) | Brilliant Math & Science Wiki
• GeeksforGeeks
• Algorithms | Computer science | Computing | Khan Academy
• Linear Search Tutorials & Notes | Algorithms | HackerEarth

http://www.cs.uiuc.edu/~jeffe/teaching/algorithms

Exploring Data Structures: Graphs and its traversal algorithms was originally published in HackerNoon.com on Medium, where people are continuing the conversation by highlighting and responding to this story.

An algorithm is a finite sequence of precise instructions for performing a computation or for solving a problem.

For example, here is an algorithm for singing that annoying song “99 Bottles of Beer on the Wall”, for arbitrary values of 99:

As Donald Knuth wrote in The Art of Computer Programming– which could be described as the encyclopedia of algorithms and data structures– it’s a confusing word that looks like someone mashed up logarithm and arithmetic.

Properties of Algorithms

1. Input -An algorithm has input values from a specified set.
2. Output -From each set of input values an algorithm produces output values from a specified set. The output values are the solution to the problem.
3. Definiteness -The steps of an algorithm must be defined precisely.
4. Correctness -An algorithm should produce the correct output values for each set of input values.
5. Finiteness -An algorithm should produce the desired output after a finite (but perhaps large) number of steps for any input in the set.
6. Effectiveness -It must be possible to perform each step of an algorithm exactly and in a finite amount of time.
7. Generality -The procedure should be applicable for all problems of the desired form, not just for a particular set of input values

Now before heading up to main topic, I want to share the basics of analysis of the algorithms including time complexity and space complexity.

Time Complexity and Space Complexity in algorithms

Always a question arises -

When does an algorithm provide a satisfactory solution to a problem?

• One measure of efficiency is the time used by a computer to solve a problem using the algorithm, when input values are of a specified size
• second measure is the amount of computer memory required to implement the algorithm when input values are of a specified size

Questions such as these involve the computational complexity of the algorithm. An analysis of the time required to solve a problem of a particular size involves the time complexity of the algorithm. An analysis of the computer memory required involves the space complexity of the algorithm.

There are three types of time complexity — Best, average and worst case.

In simple words for an algorithm, if we could perform and get what we want in just one(eg. on first instance) computational approach, then that is said as O(1) i.e. Time complexity here falls into “Best case” category.

Say for example, same algorithm results into many iterations/recursions or say n times it had to perform to get the result, then the example used for this algorithm describes it’s worst case time complexity.

Below are some common time complexities with simple definitions. Feel free to check out Wikipedia, though, for more in-depth definitions.

Simple example with code -

So scenario on time complexity for this above given example would be -

Asymptotic Notations

Asymptotic Notations are languages that allow us to analyze an algorithm’s running time by identifying its behavior as the input size for the algorithm increases. This is also known as an algorithm’s growth rate.

The following 3 asymptotic notations are mostly used to represent time complexity of algorithms:

Big Oh (O)

Big Oh is often used to describe the worst-case of an algorithm by taking the highest order of a polynomial function and ignoring all the constants value since they aren’t too influential for sufficiently large input.

Big Omega (Ω)

Big Omega is the opposite of Big Oh, if Big Oh was used to describe the upper bound (worst-case) of a asymptotic function, Big Omega is used to describe the lower bound of a asymptotic function. In analysis algorithm, this notation is usually used to describe the complexity of an algorithm in the best-case, which means the algorithm will not be better than its best-case.

Big Theta (Θ)

When an algorithm has a complexity with lower bound = upper bound, say that an algorithm has a complexity O(n log n) and Ω(n log n), it’s actually has the complexity Θ(n log n), which means the running time of that algorithm always falls in n log n in the best-case and worst-case.

If you want to dive deep into time complexity, then refer Michael Olorunnisola ‘s article:

Algorithms in plain English: time complexity and Big-O notation

or look at Shilpa Jain ‘s article —

The Ultimate Beginners Guide To Analysis of Algorithm

Space Complexity

Space complexity deals with finding out how much (extra)space would be required by the algorithm with change in the input size. For e.g. it considers criteria of a data structure used in algorithm as Array or linked list.

How to calculate space complexity of an algorithm — https://www.quora.com/How-do-we-calculate-space-time-complexity-of-an-algorithm

I’ll cover up at least 2 practically used algorithms in each category based on searching and sorting. I had written pseudocode and explanation in my personal notes(images here).

Searching Algorithms

Search algorithms form an important part of many programs. Some searches involve looking for an entry in a database, such as looking up your record in the IRS database. Other search algorithms trawl through a virtual space, such as those hunting for the best chess moves. Although programmers can choose from numerous search types, they select the algorithm that best matches the size and structure of the database to provide a user-friendly experience.

The general searching problem can be described as follows: Locate an element x in a list of distinct elements a1,a2,...an or determine that it is not in the list. The solution to this search problem is the location of the term in the list that equals x and is 0 if x is not in the list.

Linear Search

The linear search is the algorithm of choice for short lists, because it’s simple and requires minimal code to implement. The linear search algorithm looks at the first list item to see whether you are searching for it and, if so, you are finished. If not, it looks at the next item and on through each entry in the list.

How does it work ?

Linear search is the basic search algorithm used in data structures. It is also called as sequential search. Linear search is used to find a particular element in an array. It is not compulsory to arrange an array in any order (Ascending or Descending) as in the case of binary search.

Into Linear Search

Given a sample array as shown in figure and value we want to search for is 7, then it’ll traverse in linear way.

Pseudocode

Here is the pseudocode as divided into two images -

Linear search is rarely used practically because other search algorithms such as the binary search algorithm and hash tables allow significantly faster searching comparison to Linear search.

Time complexity

The time complexity of above algorithm is O(n).

Simple code in python -

Binary Search

Binary Search is one of the most fundamental and useful algorithms in Computer Science. It describes the process of searching for a specific value in an ordered collection.

Binary search is a popular algorithm for large databases with records ordered by numerical key. Example candidates include the IRS database keyed by social security number and the DMV records keyed by driver’s license numbers. The algorithm starts at the middle of the database — if your target number is greater than the middle number, the search will continue with the upper half of the database. If your target number is smaller than the middle number, the search will continue with the lower half of the database. It keeps repeating this process, cutting the database in half each time until it finds the record. This search is more complicated than the linear search but for large databases it’s much faster than a linear search.

This algorithm can be used when the list has terms occurring in order of increasing size

Binary Search is generally composed of 3 main sections:

1. Pre-processing — Sort if collection is unsorted.
2. Binary Search — Using a loop or recursion to divide search space in half after each comparison.
3. Post-processing — Determine viable candidates in the remaining space.

How does it work ?

In its simplest form, Binary Search operates on a contiguous sequence with a specified left and right index. This is called the Search Space. Binary Search maintains the left, right, and middle indices of the search space and compares the search target or applies the search condition to the middle value of the collection; if the condition is unsatisfied or values unequal, the half in which the target cannot lie is eliminated and the search continues on the remaining half until it is successful. If the search ends with an empty half, the condition cannot be fulfilled and target is not found.

Into Binary Search

Given a sample array, first we find out midpoint and split it out. If midpoint is the search value, then it’s game over. So O(1) time complexity is achieved.

But if it’s not the midpoint’s value, then we have to go on an enchanted search for the value in divided halves. Because of this, now we can achieve time complexity in order of log(n) or n i.e. O(logn) or O(n).

You can see here in above example that 19 was found after so much of divisions of a single array(lists in python).

Pseudocode

There are two pesudocodes possible for this algorithm. 1. Iterative 2. Recursive.

You can find difference between iteration and recursion as part of debates in reddit or stackoverflow .

Time complexity

The time complexity of Binary Search can be written as

T(n) = T(n/2) + c

Binary search implementation in python -

Sorting Algorithms

Ordering the elements of a list is a problem that occurs in many contexts. For example, to produce a telephone directory it is necessary to alphabetize the names of subscribers. Similarly, producing a directory of songs available for downloading requires that their titles be put in alphabetic order.

Putting addresses in order in an e-mail mailing list can determine whether there are duplicated addresses. Creating a useful dictionary requires that words be put in alphabetical order. Similarly, generating a parts list requires that we order them according to increasing part number.

The Art of Computer Programming, Donald Knuth devotes close to 400 pages to sorting, covering around 15 different sorting algorithms in depth! More than 100 sorting algorithms have been devised, and it is surprising how often new sorting algorithms are developed.

Bubble Sort

Bubble sort algorithm starts by comparing the first two elements of an array and swapping if necessary, i.e., if you want to sort the elements of array in ascending order and if the first element is greater than second then, you need to swap the elements but, if the first element is smaller than second, you mustn’t swap the element. Then, again second and third elements are compared and swapped if it is necessary and this process go on until last and second last element is compared and swapped. This completes the first step of bubble sort.

To carry out the bubble sort, we perform the basic operation, that is, interchanging a larger element with a smaller one following it, starting at the beginning of the list, for a full pass. We iterate this procedure until the sort is complete.

It is one of the most inefficient sorting algorithms because of how simple it is. While asymptotically equivalent to the other algorithms, it will require O(n²) swaps in the worst-case.

Pseudocode (Source — Wikipedia)

Suppose a is an array size n

swapped = true
      while swapped
        swapped = false
        for j from 0 to N - 1
           if a[j] > a[j + 1]
              swap( a[j], a[j + 1] )
              swapped = true

Time Complexity

• Worst and Average Case Time Complexity: O(n*n). Worst case occurs when array is reverse sorted.
• Best Case Time Complexity: O(n). Best case occurs when array is already sorted.

Insertion Sort

Insertion sort is a simple sorting algorithm that builds the final sorted array (or list) one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort. However, insertion sort provides several advantages:

How it works

To sort a list with n elements, the insertion sort begins with the second element. The insertion sort compares this second element with the first element and inserts it before the first element if it does not exceed the first element and after the first element if it exceeds the first element. At this point, the first two elements are in the correct order. The third element is then compared with the first element, and if it is larger than the first element, it is compared with the second element; it is inserted into the correct position among the first three elements.

Into Insertion Sort

Pseudocode

Time Complexity: O(n*n)

Auxiliary Space: O(1)

Boundary Cases: Insertion sort takes maximum time to sort if elements are sorted in reverse order. And it takes minimum time (Order of n) when elements are already sorted.

Uses: Insertion sort is used when number of elements is small. It can also be useful when input array is almost sorted, only few elements are misplaced in complete big array.

Implementation of Insertion Sort in python -

Conclusion

So, these were some basic algorithms that will provide a glimpse before diving deep into advanced and complex algorithms. As I titled it “I” part, I think I’ll be making part 2 covering more greedy and dynamic algorithms in future.

Also If I have been missing some topic to cover or maybe fault in my notes please put suggestions in comment.

Thank you for spending your time to read this article. Keep coding !

https://cdn.dribbble.com/users/571755/screenshots/3516921/big-data.jpg

Resources :

• http://blog.thefirehoseproject.com
• Rosen’s Discrete Mathematics and its application
• GeeksForGeeks
• TechWalla
• blogs.msdn.microsoft.com

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

An intro to Algorithms: Searching and Sorting algorithms was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

In Information Technology, a boilerplate is a unit of writing that can be reused over and over without change. By extension, the idea is sometimes applied to reusable programming, as in “boilerplate code.”

Legal agreements, including software and hardware terms and conditions, make abundant use of boilerplates.

For instance, a lawyer may give you a five page contract to sign, but most of the contract is boilerplate — meaning it’s the same for everyone who gets that contract, with only a few lines changed here and there.

In computer programming, boilerplate code or boilerplate refers to sections of code that have to be included in many places with little or no alteration. It is often used when referring to languages that are considered verbose, i.e. the programmer must write a lot of code to do minimal jobs.

For example, in web development, simple boilerplate for HTML would look like this:

<!DOCTYPE html>                       
<html class="no-js" lang="">                           
<head>                               
  <meta charset="utf-8">                               
  <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    
    <title></title>              
                 
  <meta name="description" content="">                         
  <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
 <link rel="stylesheet" href="css/main.css">
</head>   
                       
 <body>            
                  
   <p>Hello world! This is HTML5 Boilerplate.</p>          
     <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js>
     </script>

 </body>
</html>

You can view the whole repository here :

GitHub - h5bp/html5-boilerplate: A professional front-end template for building fast, robust, and adaptable web apps or sites.

In the 1890s, boilerplate was actually cast or stamped in metal ready for the printing press and distributed to newspaper presses and firms around the United States. Until the 1950s, thousands of newspapers received and used this kind of boilerplate from the nation’s largest supplier, the Western Newspaper Union. Some companies also sent out press releases as boilerplate so that they had to be printed as written.

Most professional web developers have created a collection of assets and snippets of code that they reuse on projects to accelerate development. There are some universal or near universal patterns that all websites share in common. Rather than continuously rebuild these, most developers start by copying the code they used for a similar project and then start modifying it.

Some developers recognize the value of these boilerplate starter templates and take the time to make the boilerplate more generic and share them online for others to use.

This is not only limited to web development. It is used beyond in AI/ML as there are more growing frameworks and libraries.

Necessary characteristics of boilerplate for large projects (production ready)

• Good and Readable Documentation 📓
• Code structure with a deeper abstraction level
• Follows Proper Coding Standard
• Has CLI tool (for rapid prototyping and setup)
• Scalable 📈
• Easy testing tools
• Necessary API modules
• Support for Internationalization and Localization 🌃
• Code Splitting
• Server and Client code for setup
• Proper Navigation and Routing Structure 🚦

After all these minimum specs, you should start editing and altering the code in order to build your project.

There are some Big Tech Companies who even build their own boilerplate. They use it for respective and similar projects throughout time.

A perfect example for this would be react.js’s boilerplate:

GitHub - react-boilerplate/react-boilerplate: :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.

Boilerplate for smaller projects(Scaffolding)

These type of boilerplates are generally kind of “Starter Kits” or in professional way it is called “Scaffolding”. Their main target users are novice developers or new early adopters.

It focuses on fast prototyping by creating the elements which are necessary only for new projects. These require less functionality and are not scalable over time and project.

Their code structure is not much expanded, and doesn’t involve deeper abstraction layer as users only need to build core features. This eliminates the need for extra utilities.

The simplest example is Facebook’s create-react-app boilerplate:

facebook/create-react-app

What’s the difference between a boilerplate and a template?

I read one answer on Quora which seemed most resonating to me. Boilerplate is something that you copy and paste and just add to a document. It comes up most often in contracts where language is used and reused, spelling out things like conditions and caveats.

Writers use templates as models, sometimes with negative effects. In broad terms, a template is a model or pattern used to create new objects. In writing, it is a standardized form of something like a resume that writers can use to flesh out their own versions.

Unlike boilerplates, templates are adapted for a particular use. The problem arose for me when students used Word templates for their resumes, and they all ended up looking the same.

Both templates and boilerplates can make business writing stilted and artificial if used unwisely.

Style Guide for writing code

Regardless of whether you’re using boilerplate or not, there are some standards followed by companies for writing code . One of them is Style Guide. It attempts to explain the basic styles and patterns that are used in various companies or organizations. It’s generally a rule that employees must adopt the coding style guide of their company.

The Style Guide describes tons of rules for writing code, like indentation of tabs and spaces, naming of variables and functions, writing necessary comments, formatting, source file structures, using proper method of data structures, avoiding hoisting, scoping, control statements and a lot more.

Programming styles commonly deal with the visual appearance of source code with the goal of readability. Software has long been available that formats source code automatically, leaving coders to concentrate on naming, logic, and higher techniques.

As a practical point, using a computer to format source code saves time, and it is possible to then enforce company-wide standards without debates. (Source — Wiki).

These are some common debates like: Tabs v Spaces Holy war, choosing the perfect Code IDE, and so on. The interesting thing is that you can get involved in these debates which mostly happen on Reddit. You can also participate in some of the stackoverflow Q&A’s.

For web developers, the most common style guide for JS is Airbnb’s javascript style guide. It’s open source and everyone can contribute.

GitHub - airbnb/javascript: JavaScript Style Guide

If anyone is in doubt as to why Javascript needs a style guide, then read this issue’s second answer by Harrison Shoff, who is programmer at Airbnb .

Why does JavaScript need a style guide? · Issue #102 · airbnb/javascript

Here are some style guides for some of today’s more popular languages:

DotNet Code Formatter

Java: Google-Java-Format

Javascript Standard Style (different from airbnb’s javascript)

PHP Coding Standards Fixer

Python: Google’s YAPF

Ruby: Rubocop

More from Boilerplate: Concept for OOP

In object-oriented programs, classes are often provided with methods for getting and setting instance variables. The definitions of these methods can frequently be regarded as boilerplate.

Although the code will vary from one class to another, it is sufficiently stereotypical in structure that it would be better generated automatically than written by hand.

For example, in the following Java class representing a pet, almost all the code is boilerplate except for the declarations of Pet, name, and owner:

public class Pet {
    private String name;
    private Person owner;

public Pet(String name, Person owner) {
        this.name = name;
        this.owner = owner;
    }

public String getName() {
        return name;
    }

public void setName(String name) {
        this.name = name;
    }

public Person getOwner() {
        return owner;
    }

public void setOwner(Person owner) {
        this.owner = owner;
    }
}

Boilerplate definition is becoming more global in many other programming languages nowadays. It comes from OOP and hybrid languages that were once procedural but have become OOP. They now have the same goal of repeating the code you build with a model/template/class/object, so they adopt this term. You make a template, and the only things you do for each instance of a template are the individual parameters.

This part is what we call boilerplate. You simply re-use the code you made a template of, but with different parameters.

Boilerplate as an API

Since you’re simply re-using the template code with different parameters, this implies that we could build reusable API’s that only need a change of inputs and outputs.

Conclusion

“Boilerplate code” is any seemingly repetitive code that shows up again and again in order to get a result that seems like it ought to be much simpler.

I wrote this article because I was recently instructed by a Team Lead to learn about the many varieties of boilerplate that might be suitable for our project. So I had to go on a search for the perfect boilerplate.

Any type of feedback will be appreciated! Hustle On!

What is boilerplate and why do we use it? Necessity of coding style guide was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.