VueJS Tag

Vue JS State Management Solution

With Vue 3 gaining traction and becoming the new default, many things are changing, and the ecosystem is still shaping. Until recently, the choice for state management was clearly Vuex. But with the new composition API architecture, reactivity mechanism, and some new players in the game, the choice now might be different.

Let’s explore different ways of managing the state depending on your application size and try to predict what the future of State Management in Vue.js will look like.

Reactivity API

In options API, you can declare reactive data for a component using the data() option. Internally the object returned is wrapped with the reactive helper. This helper is also available as a public API.

If you have a piece of state that should be shared by multiple instances, you can use reactive() to create a reactive object and then import it from multiple components:

With this approach, data are centralized and can be reused across components. This can be a simple option with a minimal footprint for a small application.

Composables

A similar concept that composition API brought to the table is using a composable. This pattern, which is very popular in the React world, combined with the powerful reactivity mechanism of Vue can produce some elegant and reusable composables like the following.

Vuex 4

Pic courtesy: medium.com

Vuex is not going away. It supports Vue 3 with the same API and minimal breaking changes. The only change is that installation must happen on a Vue instance instead of the Vue prototype directly.

Vuex 4 will still be maintained. However, it’s unlikely that new functionalities will be added to it. It’s a good option if you already have a project using Vuex 3 and want to defer the migration to something else for later.

Introducing Pinia

Pic courtesy: medium.com

Pinia is a new store/state management system for Vue. This is a great tool for when wanting to share data between components in your application. One of the reasons for using a tool like Pinia (or Vuex for that matter) is that throwing events around and listening for these events in your application can easily become quite messy and unstructured. State management systems like Pinia (Vuex, Redux, etc.) can help solve this.

Pinia is now also the recommended choice by Vue and is now an official part of the whole Vue ecosystem, maintained and developed by core members of the Vue team. Last but not least, Pinia is super lightweight, only 1kb in size which is freaking awesome.

Pinia Setup Stores

Pinia supports an alternative syntax to define stores. It uses a function that defines reactive properties and methods and returns them very similar to the Vue Composition API’s setup function.

In Setup Stores:

• ref()s become stateproperties
• computed()s become getters
• function()s become actions

Setup stores bring a lot more flexibility than Options Stores as you can create watchers within a store and freely use any composable.

The state is a function that holds all the reactive data of this store and the getters are functions with access to the store as the first parameter. Both state and getters are identical to Vuex.

This statement doesn’t apply to actions. The context parameter has gone, and actions have access to the state and getters directly through their context(this). As you might have noticed, actions directly manipulate the state, which was strictly forbidden in Vuex.

Lastly, mutations are completely removed since state manipulation is now happening in actions.

All the magic is happening inside the setup function. The imported useFellowship hook is executed and returned. This will make it available to the component, including both methods and the template. Access to the state getters and actions are done directly using this object.

Of course, this component should be broken into smaller reusable ones but left like this for demo purposes.

If a different component needs to access the same state, it can be done in a similar manner.

Migrating from Vuex to Pinia

Pinia docs are optimistic that code can be reused between the libraries, but the truth is that the architecture is very different, and refactoring will definitely be required. First of all, while in Vuex, we had one store with multiple modules, Pinia is built around the concept of multiple stores. The easiest way to transition that concept to be used with Pinia is that each module you used previously is now a store.

Actions no longer accept context as their first parameters. They should be updated to access state or any other context property directly. The same applies for rootState, rootGetters etc. since the concept of a single global store doesn’t exist. If you want to use another store you need to explicitly import it.

It’s evident that for large projects, migration will be complicated and time-consuming, but hopefully, a lot of boilerplate code will be eliminated, and the store will follow a more clean and modular architecture. The conversion can be done module by module rather than converting everything at once. You can actually mix Pinia and Vuex together during the migration so that this approach can work.

For more information and to develop a website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a Website using Vue.js, please visit our technology page.

Content Source:

1. medium.com

What’s new in Vue 3

Vue 3 – The Progressive Javascript Framework’s progress over the years is nothing short of impressive.

If you’re someone migrating your apps to Vue 3 (or) experimenting Vue 3 for your next project this draft should help you kickstart with confidence.

First of all, why does this update matter?

If we look at the journey of Vue so far, it greatly traversed being a library to a framework trend making it much more powerful yet sticking to its lightweight nature.

With the core releasing a new major version, all the other parts of the framework needed to move forward together. Having said that, there were quite a lot of new members we would have in our party during migration. Let’s get introduced!

Why Vue 3?

In short, Vue 3 would be the new default.

Vue 2 would remain in LTS (long-term support) version for 18 months, which means that it will still get security updates and is absolutely safe to stick with it for a while. But, isn’t it a great time for us to migrate our existing projects if any?

Vue 3 is faster, smaller, more maintainable and it’s easier to target native - Evan Vue

Smaller Vue core – Size improvement reached by the combination of greater code modularity, a smaller core runtime, and a tree-shaking-friendly compiler. Thus the new core would thus be reduced from about 20KB to 10KB gzipped.

The compiler will generate tree-shaking-friendly code. If you use a feature that requires a function in your template, the compiler will automatically generate code that imports it. But if you don’t use a feature, then we generate code that does not import it, which means the feature will be tree-shaken.

Better rendering performance – The Vue 3 renderer improves the performance of the rendering process by using optimizations such as the hoisting and inlining of static parts and implementing Vue 3’s reactivity with ES6 proxies.

Below is an infographic proofing the metrics between v-2.5 and v.3.0 proto

Pic courtesy: medium.com

Vite – the next generation frontend tooling

Well, despite being one of our favorite topics to speak We’ll try to wrap it short.

Vite is a lightweight and fast build toolchain with first-class Vue SFC support. It is created by Evan You, the author of Vue himself!

Vue 3 official build setup is now powered by Vite. So this would be one of our newest members to welcome!

Composition API

This topic deserves a separate article on its own, yet will try to pin those dancing in my mind post my experimentations.

Vue 3 introduced the Composition API as an alternative method to the Options API for writing component states and logic. It’s simply a set of APIs that allows us to author Vue components using imported functions instead of declaring options.

It is an umbrella term that covers the following APIs:

Reactivity API, e.g. ref() and reactive(), allows us to directly create reactive state, computed state, and watchers.

Lifecycle Hooks, e.g. onMounted() and onUnmounted(), allows us to programmatically hook into the component lifecycle.

Dependency Injection, i.e. provide() and inject(), allows us to leverage Vue’s dependency injection system while using Reactivity APIs.

Vue clearly pointed out that they don’t have any plans to deprecate options API. Here’s the exact statement from the document FAQ

No, we do not have any plan to do so. Options API is an integral part of Vue and the reason many developers love it. We also realize that many of the benefits of Composition API only manifest in larger-scale projects, and Options API remains a solid choice for many low-to-medium-complexity scenarios.

Pros of using Composition APIs

We can create standalone reactive states and/or properties

In Vue 2 we’re kind of bound to the component scope for the reactive state. With Vue 3 you don’t need a component anymore to create a reactive state.

We can abstract reactive state

Sometimes setup in Vue components can get really bloated with creating many reactive properties. That’s why it could be nice to have them abstracted in standalone javascript files. This is preferably termed composable.

Better Logic Reuse

The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions. It solves all the drawbacks of mixins, the primary logic reuse mechanism for Options API

Better Type Inference

Code written in Composition API can enjoy full type inference with little need for manual type hints.

Smaller Production Bundle and Less Overhead

Code written in Composition API and <script setup> is more efficient and minification-friendly than Options API equivalent. This is because the template in a <script setup> component is compiled as a function inlined in the same scope of the <script setup> code. Unlike property access from this, the compiled template code can directly access variables declared inside <script setup>, without an instance proxy in between. This also leads to better minification because all the variable names can be safely shortened.

Better code sharing

Inside the setup hook, we can group parts of our code by logical concern.

More Flexible Code Organization

The Options API uses options like data, methods, and mounted. With the Composition API, we have a single setup hook in which we write our reactive code.

This results in better code organization. Let’s see how with a simple code example. We’ll see how we write in Vue2, rewrite in composition API then further fine-tune with the new script setup syntax.

Pic courtesy: medium.com

Pic courtesy: medium.com

Pic courtesy: medium.com

Common problems with Options API

Having said Vue doesn’t have plans to deprecate options API anytime soon. Why should we care about composition API?

Vue 2 supports a few ways to reuse code between components;

• Mixins
• Renderless components
• Higher-order components

These methods of reuse each come with their own drawbacks, namely:

• Unclear where component options are coming from (mixins)
• Namespace clashes (higher-order components, mixins)
• Performance costs (higher-order components, renderless components)

Scattered logics – In Vue2, component options such as data, computed, methods, watch are used to organize the logic. This approach makes it hard to read and understand as the component grows.

Note on <script setup>

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs). It is the recommended syntax if we are using both SFCs and Composition API. It provides a number of advantages over the normal <script> syntax:

More succinct code with less boilerplate

Ability to declare props and emitted events using pure TypeScript

Better runtime performance (the template is compiled into a render function in the same scope, without an intermediate proxy)

Better IDE type-inference performance (less work for the language server to extract types from code)

Unlike normal <script>, which only executes once when the component is first imported, code inside <script setup> will execute every time an instance of the component is created.

<script setup> can be used alongside normal <script>

Simpler state management with Pinia

Pinia, a lightweight state management library for Vue.js, allows us to share a state across components/pages & gained a lot of traction recently. It uses the new reactivity system in Vue 3 to build an intuitive and fully typed state management library. It’s now the new default state management library for Vue 3. It is maintained by the Vue core team and works with both Vue 2 and Vue 3.

For more information and to develop a website using Vue.js, Hire Vue.js Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft”.

To develop a Website using Vue.js, please visit our technology page.

Content Source:

1. medium.com

How to make your site 25x faster

Organic traffic is a great way to get eyeballs on your website and Google is the most popular search engine of choice that you can use to get that organic traffic coming.

Although Google ranks your site based on a lot of metrics, how fast your website loads is one of the critical factors.

Websites that load quickly are not just great for rankings but also for the overall user experience.

Since most of us developers( especially indie developers) are using JavaScript frameworks, such as React and Angular, which probably do a client-side rendering of data, the speed at which data is fetched forms an important aspect of the development process.

There is a simple way of making your site load faster, and that is caching and CDN(Content Delivery Network).

Using a combination of both can lead to miraculous drops in time taken to load the first byte.

In this blog, I will demonstrate caching with an example using Redis and also explain what is CDN.

Caching, in layman’s language, is storing data that you think might be used frequently into memory(called cache).

So the next time you need that data, you check whether it’s stored in the memory and if not, then you make a call to the database to fetch it and maybe store it into the cache for future use.

Pic courtesy: javascript.plainenglish.io

As you can see from the image above, caching is simply a layer of a data structure containing frequently accessed data between your data source and the app.

Not all data needs to be cached. For example, a user’s personal setting or shouldn’t be cached on the server. However, you can always store them in the client’s local storage for faster access.

Caching of data is one of the simplest ways to reduce the load time, at the same time, you have to be smart about how you cache your data.

What should you cache?

As stated before, frequently accessed data should be cached to provide a responsive and quick experience.

Different developers have different caching strategies depending on their preferences and needs. If you want me to cover various common caching strategies, then drop a response to this blog.

Below are some examples of items that you should cache:

Authorization & Session Tokens

Landing page data that doesn’t change often(such as recent projects in a portfolio site).

Blog and post drafts can be stored in cache for a while and then inserted into the database after a fixed amount of time.

Real-time comment streams & analytics.

Why Redis?

Although you are free to use whatever option you are comfortable with, I highly recommend at least checking Redis out.

Redis is an open-sourced in-memory data structure store that has familiar data types such as lists, dictionaries, strings, hashes, etc.

It is a key-value data store with extended abilities such as the ability to set expiry dates.

Redis is the most loved database as per the Stack Overflow 2021 survey.

AWS’s MemoryDB for Redis is a great choice if you need a durable transactional log that stores data across multiple Availability Zones.

Installation

Installing Redis is incredibly straightforward if you are on Linux.

Head over to the Redis download page and download the latest stable version available or you can simply run the following command in your terminal:

sudo apt-get install redis

Once you are done installing Redis, simply type redis-server to spin up a Redis server. The default port of this server is port 6379.

However, if you are on Windows, there are two options.

You can either follow the simple guide on how to install an outdated Redis on your Windows machine or you can use Windows Subsystem for Linux(WSL) and get the latest Redis.

I personally went with the WSL way and it created an Ubuntu 20.04 system for me to install Redis and any other packages I might need in the future.

Usage

There are plenty of guides available online on how to get started with Redis, hence I will just be providing a demo of what Redis can do to speed up your website.

I will be creating a simple Node.js server that fetches some data from the web and then sends them to its clients and later we will be adding caching to it and see the massive difference.

Below is a server that simply fetches the data from a data source and then passes it along to the client.

const express = require('express');
const app = express();
const redis = require('redis');

const fetch = require('cross-fetch');

const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
        await fetch('https://jsonplaceholder.typicode.com/photos')
        .then(response => response.json())
        .then(json => {
            console.log('Newly fetched data')
            return res.json({ data: json });
        })
});
app.listen(3000, () => console.log('listening on port 3000'));

You can see the response time in the image attached below:

Pic courtesy: javascript.plainenglish.io

Now we will implement caching using Redis.

First of all, we need an npm package.

npm i --save redis

Once this is installed, we will import it into our server.js file & create a client.

const redis = require('redis');
const cacheClient = redis.createClient(); // => Redis client

We need to edit our app.get() function and add caching logic to it.

It’s simple if-else logic. We first check if the data is present in our Redis server or not by calling the Redis client and using the .get() to get data.

If the data is not present, then we make a call to our data source to get fresh data. We insert this data into our Redis store by calling the .setex() function on our Redis client.

cacheClient.setex('sample',60,JSON.stringify(json));

The first parameter is the name(key) of the data we want to store, followed by the time to expire, and then finally the actual data(value) goes in as the third parameter.

We are using JSON.stringify() method to convert our JSON data to a string data type.

With the data stored in the Redis store, the next time the app.get(‘/’) function is called, the client will be able to fetch the data from the Redis server instead of fetching from our original data source.

Pic courtesy: javascript.plainenglish.io

With this implemented, we can instantly see amazing results as the time taken is just 52ms compared to 1301ms from before.

This was a very simplistic view of caching and Redis is capable of much more than caching and can even be used as a permanent storage option.

Our final server.js file will look like this:

const express = require('express')
const app = express();
const redis = require('redis');
const fetch = require('cross-fetch');
const cacheClient = redis.createClient();
app.get('/', async (req, res, next) => {
await cacheClient.get('sample', async (err, data) => {
        if (err) console.error(err);
        if (data) {
            console.log('Data was cached before')
            return res.json({ data: JSON.parse(data) });
        }
        else
          await fetch('https://jsonplaceholder.typicode.com/photos')
                .then(response => response.json())
                .then(json => {
                    console.log('Newly fetched data')
                    cacheClient.setex('sample',
                        60,
                        JSON.stringify(json));
           return res.json({ data: json });
        })
})
});
app.listen(3000, () => console.log('listening on port 3000'));

Content Delivery Network(CDN)

Caching data on the server is surely a great improvement but what about caching large HTML, video & image files?

CDN provides a simple solution to this issue. It is important to know that CDN and caching are not the same.

While CDN does cache content, not everything that cache data can be called a CDN.

CDN refers to a geographically distributed group of servers that work together to provide fast delivery of sites & other assets(like image & video files).

Popular sites such as Netflix and Facebook leverage the benefits of the CDN and deliver content quickly to you using the nearest group of servers near you.

Pic courtesy: javascript.plainenglish.io

CDN stores a cached copy of your content in multiple locations throughout the world.

So if someone from Australia visits your UK-hosted site, they will instead visit the nearest CDN server available to Australia and get a cached copy of your UK-hosted site.

This also saves bandwidth costs and increases reliability & uptime.

In some platforms and hosts, a CDN is at your disposal by default, and generally, using it is as simple as adding a header to your HTML file.

Personally, in my experience, I have found Vercel’s CDN to be the simplest to use with a good, detailed guide with a useful feature that prevents your data from being stale(outdated).

In Vercel, you just need to add a header to inform the CDN that the site needs to be cached. An example header is given below:

Cache-Control: s-maxage=1

It is worth noting that any data that you load client side will not be included in your site’s cached CDN copy. This is because the data is loaded dynamically on the client-side and not server-rendered.

However, you can always cache the data that is being loaded on the client-side via Redis, CDN, or any other option available to make the dynamic loading faster.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. javascript.plainenglish.io

Top 5 JavaScript trends to adopt in 2021

As the world leans more towards digital technologies, as more businesses focus on online and physical presence, and as content continues to dominate, web development becomes even more essential.

Accordingly, one of the best programming languages for better frontend development is JavaScript. That’s why, today, we want to show you some of the top JavaScript trends that can help boost your web application’s success.

Dark Mode

Dark mode has been one of the recent web development trends that have been blowing up everywhere. As a result, almost all popular apps can switch to a dark mode or stick with the standard light mode.

Moreover, since it uses less color and brightness, the dark mode also helps preserve the battery and makes it last longer. Some people also claim that dark selection can be beneficial for specific visual impairments. For web designers, the dark mode also allows them to use colors more creatively, as the black background of the dark option can help colors stand out even more.

Using this script snippet results in the widget appearing on your site automatically so that users can conveniently switch between their preferred themes. The plugin is relatively lightweight, and since it uses local storage, it will remember and save the last chosen theme.

React

Another JavaScript trend that remains on top for a few years and is gradually garnering more popularity is React.js. React is an open source, frontend, and entirely free JavaScript library for developing smooth and effective user interfaces, especially for single-page apps.

Facebook developed the React library several years ago and has built it into one of the most popular JavaScript libraries for frontend developers. In 2020, 80% of front-end developers were using React only. In addition, many companies like WhatsApp and Airbnb have taken on this library as well.

The reason behind this is that React offers a lot of convenience and benefits for today’s developers. The programming library is easy to learn and even easier to use. It comes with many tutorials and documents explaining how to utilize the library best.

If you are already skilled in JavaScript, picking up React will be no trouble at all, and you will find yourself easily using it within a few days. React also comes with a lot of reusable components, which are a lifesaver for any developer.

The JavaScript framework uses small user interface components, which you can use to create more prominent parts or reuse again to save your time and efforts. All the pieces have their logic, and they can control their rendering, which allows you to use them again wherever and whenever you need them quickly.

Convenience is important to me. It helps me navigate the flow more efficiently. How about you?

All this makes it easy to develop and maintain apps. In addition, since you are reusing the same essential components, you can keep your projects’ same feel and look. Other popular libraries besides React include Angular, Vue, and Svelte.

Animations

A better user experience does not just include a smooth and fast website. It also contains a unique and creatively designed website and what better way to show off your creativity than through animations.

Animations can make your website visually striking and keep visitors hooked on your page. They can help differentiate your website from all the usual static websites. If you think you need to go out and do some special courses on animation, we’ve got some good news.

JavaScript has several libraries that allow you to integrate animations on your website easily. These libraries include anime.js and JSTweener. You can input these into your website code, customize the code, and voila! Your animations are ready.

Data Visualization

Especially if you are running a business or have a product checkout page on your website, employing data visualization tools can significantly help you in many ways. First, it can improve the user interface and experience by filling out fields quickly and accurately.

As a result, the whole checkout experience for visitors and potential customers becomes much more accessible and makes them more willing to follow through on their purchases. Due to all these benefits, data visualization is a big trend within JavaScript for business and marketing purposes.

All you need is a little <input />

One specific library that is quite useful is Algolia Places. It allows you to create much more efficient forms, which help inaccurate data input and quick form filling. In addition, you can incorporate a map that will conveniently display a specific location for better data visualization.

Algolia Places uses OpenStreetMap’s extensive database and is incredibly fast to use. In addition, it can handle some typing mistakes and simplifies the entire checkout process for users.

Full-Screen Videos

Incorporating full-screen videos on your webpage is one of the most popular JavaScript trends developers utilize these days. Again, rather than creating an essential static website, incorporating dynamic videos and GIFs can help make your website more interactive and offer a better user experience.

A better user experience, then, can help drive more traffic to your website, making it easy to push your content, raise awareness about your brand and increase your ROI for your marketing and business objectives. But, how can you add full-screen videos to your website?

JavaScript offers a great resource: Bideo.js. This library makes it super easy to add full-screen videos to your website’s background. While it takes a while to load, you do not have to write endless code to incorporate the video smoothly.

The library has everything you need to add the videos along with several customization options quickly. The code works great for screens of all sizes and various platforms as well. This JavaScript tool can help play high-quality and engaging videos smoothly in the background, whether a computer or mobile. You can resize the video according to the browser, and it is also easy to implement using CSS or HTML.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. betterprogramming.pub

7 useful JavaScript shorthands you must know about

JavaScript is a very powerful programming language these days. There is a lot that you can do with it. In addition to that, JavaScript has a huge ecosystem that allows you to discover a lot of useful tools, frameworks, and libraries.

JavaScript has a lot of powerful features and tools that make the life of the developer much easier. The syntax contains a lot of shorthands that you can use to write JavaScript code much faster and reduce lines. Especially in the latest ECMAScript specifications.

In this article, we will give you a list of shorthands that you can use in JavaScript. So let’s get right into it.

1. Convert string to a number

Normally, to convert a string to a number, we use the method parseInt() . However, there is a shorthand that allows us to do that.

By using the unary operator + , we can easily convert a string into a number.

Here is an example:

let speed = "60";

console.log(typeof speed); //string

console.log(typeof +speed); //number

console.log(+speed); //60, not "60".

As you can see, only by adding + at the beginning of the variable speed , we were able to convert the speed to a number.

There is also another shorthand to convert from a number into a string. It’s by simply adding an empty string to the number.

Here is an example:

let speed = 100;

speed += ""; //returns "100" , not 100.

console.log(typeof speed); //string

2. Using the ternary operator

Another shorthand is the ternary operator, it allows us to easily write conditional statements in a short way using the keywords ? and : .

Here is an example using IF else statements:

Longhand:

let speed = 80;

if(speed < 30){

 console.log('slow');

}else if(speed > 60){

 console.log('fast');

}else{

 console.log('between 30 and 60');

}

//output: fast

Here is the same example, but now using the ternary operator instead:

Shorthand:

let speed = 80;

console.log(speed < 30 ? 'slow': speed > 60 ? 'fast'
: 'between 30 & 60');

//output: fast

As you can see, by using the ternary operator shorthand, we were able to easily reduce the amount of code we had to write. It only took us 2 lines of code to write the conditional statements.

3. Short-circuit evaluation

Have a look at the below example using an IF statement.

Longhand:

let isOnline = true;

if(isOnline){
 console.log("Online");
}

//returns "online"

We can write the same statement using the short circuit && . Here is the example:

Shorthand:

let isOnline = true;

isOnline && console.log("Online"); //returns "online"

The short circuit evaluation && is one of the shorthands that allow you to write short conditionals. It’s used between two values, if the first value is truthy, it returns the second value. Otherwise, it returns the first value.

4. Flattening an array

The best shorthand to flatten a multidimensional array is by using the method flat(). We have seen, a lot of developers use the method filter, concat, and all other long ways to flatten an array. Maybe because they don’t know about the flat method yet.

So this amazing method allows you to flatten an array in one single line of code. It accepts one optional argument(number), which is the level of flattening(how deep you want to flatten an array).

Here is an example:

let numbers = [9, [102, 5], [6, 3], 2];

numbers.flat(); //returns [9, 102, 5, 6, 3, 2]

5. Merging and cloning arrays

When it comes to merging and cloning arrays in JavaScript, the spread operator {…} is the best shorthand you can use.

Merging arrays:

const employees = ["Chris", "John"];

const entrepreneurs = ["James", "Anna"];

//merging both arrays to a new array.

const all = [...employees, ...entrepreneurs];

console.log(all); //output: ["Chris", "John", "James", "Anna"]

Cloning an array:

const numbers = [4, 8, 9, 0];

//cloning the numbers array.

const clone = [...numbers];

console.log(clone); //output: [4, 8, 9, 0]

6. For loop shorthand

Mostly when we want to loop through an array using a for loop, we do it like this:

Longhand:

const users = ["John", "Chris", "Mehdi", "James"];

for(let i = 0; i < users.length; i++){
   console.log(users[i]);
}

/*output:
   John
   Chris
   Mehdi
   James
*/

But we can achieve the same thing using the loop for of shorthand:

Shorthand:

const users = ["John", "Chris", "Mehdi", "James"];

for (let user of users){
  console.log(user);
}

/*output:
   John
   Chris
   Mehdi
   James*/

7. Arrow functions

Arrow functions are a shorthand that allows you to easily write functions in a short way and reduce your code.

Here are the examples:

Normal function:

function addNums(x, y){
 return x + y;
}

addNums(6, 5); //11

Arrow function:

const addNums = (x, y)=> x + y;

addNums(6, 5); //11

As you can see, these are some of the popular shorthands that you can use in JavaScript. They allow you to reduce code syntax and keep your code short as much as you can.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. medium.com

The best JavaScript practices to make your code look and work better

We always say that JavaScript is full of surprises. It never fails to amaze us. Every day, we learn something new about this programming language. Something which is very small but can make a huge impact on your code. Something which is worth sharing.

In this article, we’re going to share eight JavaScript hacks that you can use in your day-to-day stuff. So let’s learn something new!

1. Run Event Listeners Only Once

It’s very common to use event listeners in your web app, not just in Vanilla JS applications, but also in modern JS frameworks and libraries like Angular and React.

To cite an example, let’s say we want to do something on a button click. We can use event listeners here. Often, we want to act whenever a specific event fires. But what if we want to do it only once?

Not to worry. We can actually execute our event listeners only once by simply doing this:

const button = document.querySelector('button');

button.addEventListener('click', () => {

    console.log('We will only run once');

},{ once: true })

2. Use the ‘defer’ Attribute

To be honest, all of us have faced a situation where we felt like our web application is getting slower and we are not able to find out why. We’ve felt like we are doing everything as it should be, but still the browser is taking time to show the first content of our application.

Well, this might be because of long scripts getting executed before HTML. Often, we add our scripts inand we forgot that the next statements will not be executed until the script in <HEAD> finishes its execution.

We can simply use the defer attribute with our scripts to execute them after the HTML content.

/* No matter where you place this script tag inside the HTML, this will only run when the HTML content is completely loaded. */

<script src="main.js" defer></script>

3. Fast Conditional Checking

It’s always recommended to use shorthand to make our code look cleaner. As no application can survive without conditionals like the if statement, we should know the shortcuts for that, too. And thankfully, JavaScript provides the && operator.

We can shorten our conditional checking by using the && operator.

let condition = true;
// Long way
if (condition) {
    someFunction();
}
// Short way
condition && someFunction();

4. Random Number in a Given Range

We can simply generate a random number from a given range with just one line of code. These kinds of tricks are very useful in real-world applications.

function randomNumber(num1, num2) {
    return Math.random() * (num2 - num1) + num1;
}

console.log(randomNumber(50, 100)); // Expected output - random number between 50 and 100 (50 and 100 will be inclusive)

5. Empty an Array in One Line

This is one of the hacks which We love the most. We can empty an array just by giving the value 0 to its length property.

let sampleArray = ["John", "Bob", "Mark", "Alex"];
sampleArray.length = 0;
console.log(sampleArray); // Output - [] (it's empty now)

6. Check Whether the Object Is Empty

We can use the Object.entries() method to check whether an object is empty or not. Since Object.entries() returns the array of the object’s enumerable properties, therefore if the length of that array is 0, that means the object is empty such that the object has 0 property.

let sampleObj = {
    name: "Mark",
    occupation: "Developer"
};
let emptyObj = {};
console.log(Object.entries(sampleObj).length === 0); // false
console.log(Object.entries(emptyObj).length === 0); // false

7. Filter Duplicate Values From Array

From ES6, we have a new concept in JavaScript which is called Set.

"Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection." — MDN Docs

Since Set in JavaScript is a collection of items that are unique, i.e., no element can be repeated, therefore we can use it to filter duplicate values from an array.

This trick is again very simple but very useful. First, we will convert our array into Set, and as Set doesn’t have duplicate values, our new Set will have unique values from our array. Then we simply convert this new Set back into an array.

	let namesArray = ["John", "Bob", "Mark", "Alex", "Mark", "Alain", "Bob"];
	console.log([...new Set(namesArray)]); // Output - ["John", "Bob", "Mark", "Alex", "Alain"]

8. Clone Object Using One Line

Since objects in JavaScript are reference types, we can’t simply use = to clone them, so with the below three methods, you can properly clone an object using just one line.

const person = {
    name: "Mark",
    username: "@markcodes"
};
// Using Object.assign() Method
const clonePerson1 = Object.assign({}, person);
// Using JSON
const clonePerson2 = JSON.parse(JSON.stringify(person));
// Using Spread Operator
const clonePerson3 = { ...person };

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

1. betterprogramming.pub

The most useful Frontend coding tips and Database concepts

Frontend development is very important these days. There are a lot of tasks that a frontend developer has to do on a daily basis.

As front-end developers, we write a lot of HTML, CSS, and JavaScript code all the time. Knowing some coding tips could be very beneficial for us. That’s why in this article, I decided to share with you some frontend coding tips that you probably don’t know.

Hiding an HTML element

Do you know that you can hide an HTML element without using JavaScript?

By using the attribute hidden, you can easily hide an HTML element natively. As a result, that element won’t be displayed on the web page.

Here is the code example:

<p hidden>This paragraph won't show up. It's hidden by HTML.</p>

Use the inset shorthand in CSS

It’s always a good practice to use shorthands in order to make your CSS code smaller. The property inset in CSS is a useful shorthand for the four properties top , left , right , and bottom .

If these four properties have the same value, you can just use the property inset instead and your code will look much cleaner.

Here is an example:

Bad practice:

div{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Good practice:

div{
  position: absolute;
  inset: 0;
}

Detect internet speed

You can easily detect internet speed in JavaScript by using the navigator object. It’s very simple.

Here is an example:

navigator.connection.downlink;

Pic courtesy: blog.devgenius.io

As you can see above, it gives me 5.65 since my internet speed is not good at all.

Vibrate your phone

Again, you can easily use the method vibrate()in the navigator object to vibrate your phone.

Here is an example:

//vibrating the device for 500 milliseconds

window.navigator.vibrate(500);

So as you can see, the device in this situation will vibrate for 500 milliseconds.

Disable pull to refresh

By using only CSS, you can disable pull to refresh on mobile. The property overscroll-behavior-y allows us to do that. Just give it the value contain .

Here is the example:

body{
 overscroll-behavior-y: contain;
}

Prevent the user from pasting text

There will be situations where you will need to prevent the user from pasting text into inputs.

Well, you can easily do that in JavaScript using a paste event listener.

Here is an example:

<input type="text"></input>
<script>
//selecting the input.
  const input = document.querySelector('input');
  
//prevent the user to paste text by using the paste eventListener.
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>

As a result, now users can’t paste the copied text into the input field.

Database Concepts

Databases are the backbone of our applications, and the more you learn about how they work, the better you will be at using them, writing applications against them, and troubleshooting problems when things inevitably go wrong.
So let’s dive into seven things you should (probably) know about databases.

Choosing the Right Database Is Hard

We’ve seen a lot of dogmatic fist-banging about “the best” or “the worst” database, but the truth is the best database is the one that works best for your application. There’s no one-size-fits-all sort of database just like there’s no one-size-fits-all programming language or operating system.

When starting a new project, choosing the right database can be one of the most crucial decisions that you’ll make. So how should you choose which DB to use? We put together a list of five things to consider in our article on databases for developers, but let us also quickly go through them here.

What kind of data will be stored in the database?

Are you storing log files or user accounts?

How complex is the data that will be stored?

Can the data be normalized easily?

How uniform is the data?

Does your data roughly follow the same schema or is it disparate or heavily nested?

How often will it need to be read or written?

Is your application read- or write-heavy, or both?

Are there environmental or business considerations?

Do we have existing agreements with vendors? Do I need vendor support?

By answering these questions, you can help narrow down your choices to a few candidates. Once there, testing should tell you which one is the best for your application.

Moving to the Right Database Is Harder

Sometimes you don’t have a choice and the database is already chosen for you. Whether you came to the project after it was started or political winds forced you a certain way, using the wrong database for the job can be frustrating.

But equally, if not more, frustrating is the progress of migrating databases should you get the opportunity. Once you start down one path, it’s not easy to simply change paths in the middle of things. Not only do you have to figure out a way to replicate your data from one database to another and learn a whole new system, but depending on how tightly coupled your database code is with the rest of your application, you might also be looking at extensive rewrites as well. Changing databases is not a task that should be undertaken lightly and without a lot of consideration, debate, testing, and planning. There are so many ways that things can go horribly wrong. This is why #2 is so important: Once you choose, it’s hard to undo that choice.

NoSQL Doesn’t Replace SQL, It Complements It

The debate about using a SQL or NoSQL database will go on forever. We get that. But often missed in this argument is the fact that NoSQL databases don’t replace SQL databases. They complement them.

There are some things that NoSQL databases do very well and there are some things that SQL databases do very well. Prometheus is very good at storing time-series data like metrics, but you wouldn’t want to use MySQL for that. Is it technically possible? Yes, but it’s not designed for that and you’re not going to get the best performance or developer experience out of it. On the flip side, you wouldn’t want to use Redis to store highly relational data like user accounts or financial transactions for the same reasons. Sure, you could make it work in the code, but why add that complexity and headache when you could just use the right tool for the job?

There is going to be some inevitable overlap in some areas. There are some excellent databases that are technically NoSQL that do a good job of storing relational data (see: Couchbase), but there are other outside factors that go into using one over the other. Factors like client language support, operational tooling, cloud support, and others are all things to take into account when choosing a database.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

Content Source:

1. blog.devgenius.io
2. betterprogramming.pub

9 hidden features of Chrome DevTools

Web developers love nothing more than finding amazing extensions that accelerate the development process.

One such tool is Chrome DevTools, which offers a lot of features and it is the go-to tool for frontend developers, of all levels.

DevTools has a wide array of features and options, and Google has done a fantastic job documenting this tool.

However, despite the comprehensive documentation, there is still a list of helpful tools and features that most developers don’t know about.

From emulating mobile devices to finding useless JavaScript code, we’ll be covering 9 secret features the DevTools has to offer in this blog.

#1. Controlling Network Speed

Your website will be accessed by people from around the globe using devices of different sizes and platforms.

You can build websites that are responsive using media queries, but what about network speed?

Not every one of your visitors will have the same network speed, hence you need to check how your site behaves with different network speeds.

Luckily, DevTools has the option to switch between 3 network presets:

• Fast 3G
• Slow 3G
• Offline

Pic courtesy: javascript.plainenglish.io

You also get the ability to add a custom profile.

You can find this feature under the Network tab, by clicking on the “No throttling” dropdown menu.

#2. Multi Cursor

Pic courtesy: javascript.plainenglish.io

DevTools has an excellent code editor inbuilt.

If you’re someone who edits CSS or any code using this tool, you will absolutely love the multi-cursor support.

It’s very easy to set up as well. All you need to do is press and hold Ctrl( Command on Mac) and click on lines where you want multiple cursors.

You can also undo your selections by pressing and holding Ctrl(Command on Mac) + U.

Moreover, you can also press Alt and drag to get multiple cursors. You can see the implementation here.

#3. Dark Mode

For me, dark mode increases visibility & reduces eye strain. There are many upsides to using dark mode, as well as downsides.

Various articles cover this topic.

Pic courtesy: javascript.plainenglish.io

We use the dark mode wherever possible, from the Twitter app to our calculator app.

DevTools is no exception.

To enable the dark mode, open the Settings by clicking the three vertical dots present in the right corner of the screen.

Then go to Preferences > Appearance > Theme and finally select Dark.

#4. Command Menu

Pic courtesy: javascript.plainenglish.io

You can quickly open a Command Menu by pressing Ctrl(CMD on Mac)+Shift+P when DevTools is opened.

It provides a fast way to navigate the DevTools and over time, you become familiar with it.

This feature is handy if you are familiar with VS Code’s Command Palette.

You can delete the > and replace it with ? to see all the features offered by this menu.

#5. Detecting Unused Code

Pic courtesy: javascript.plainenglish.io

Modern JavaScript apps are becoming increasingly complicated and rely on a ton of third-party libraries.

There’s always some code that’s not used and is rendered redundant.

DevTools helps you locate such redundant code that may unnecessarily be hampering your site speed.

To do so, click the three vertical dots on the top-right corner of DevTools. Then click More Tools and select Coverage.

All you need to now is reload the page and the newly popped up panel will display the unused JavaScript code.

You can see the total bytes as well as the unused bytes along with the visual usage bar.

#6. Auto-Start

If your primary browser is some other browser that doesn’t offer such tools, and you only use Chrome for the Devtools, then this feature can be incredibly useful to you.

Pic courtesy: javascript.plainenglish.io

There is a global option under DevTools settings to auto-open DevTools for popups.

However, the better way of doing this is by starting DevTools not just on popups but with the Chrome browser itself.

You can do so by adding the following line as a property on Google Chrome.

 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs 

And for Mac users,

 --auto-open-devtools-for-tabs 

You can refer to the answers here to learn more options to enable DevTools.

#7. Color Picker

Pic courtesy: javascript.plainenglish.io

Color Picker is a great way to select the exact color you need and be able to easily add it to the CSS of your site.

DevTools offers a color picker and accessing it is a very straightforward process.

Go to the Elements tab and from there select the Styles panel to see the CSS.

Simply click on the color square (not the value) and the color picker will show up.

The color picker has the ability to easily convert between color modes, like from HEX to RGBA.

#8. Mobile Emulator

Pic courtesy: javascript.plainenglish.io

Over 60% of all online searches are performed by mobile devices, making responsive web design a critical part of web development.

Fortunately, DevTools offers a mobile emulator, which has predefined height and width which match that of some popular mobile devices like iPhone, Pixel, Surface, and iPad.

Open DevTools and click the Toggle Device Toolbar as shown in the media above.

You can also choose between mid-tier or low-tier mobile from the “No Throttling” drop-down menu.

Additionally, dragging the handles to resize the viewport is another handy option to get the exact dimensions you need.

#9. Breakpoints

Pic courtesy: javascript.plainenglish.io

Ever wondered how many media queries sites like YouTube have? You can easily check it by enabling the option to see media queries.

Just click the 3 vertical dots as shown in the media above and enable media queries visibility.

You will see a new panel showing various media query breakpoints which you can click to apply.

Besides this, you can also set breakpoints in your JavaScript code quite easily.

One way to do this is by writing debugger in your code, which will pause the execution when debugger is reached.

console.log('a');
console.log('b');
debugger;
console.log('c');

The other way is to go to the Sources tab and then head over to the code file and find the line where you want to pause the execution.

Then you have to click the line number on the left side of your code, which will make a blue icon appear on that line number. That’s it.

DevTools will pause before this line of code is executed.

For more information and to develop web applications using modern front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom web app using JavaScript, please visit our technology page.

Content Source:

1. javascript.plainenglish.io

Should You Use Dependency Injection in JavaScript?

Dependency Injection (DI), sometimes referred to as ‘Inversion of Control’, is when an object receives other objects or functions it depends on for part of its functionality. This can be achieved by passing an object through object instantiation with a constructor or with a property setting. This is very common in the world of statically typed languages like Java or C#. There are many popular frameworks built specifically for managing dependencies in the statically typed object-oriented world.

DI allows specific functionality to be loaded at runtime. One of the advantages of being able to change the functionality of an object at runtime is to provide greater flexibility and make our applications more loosely coupled. A very common use case is using mocking during testing. There are some great libraries in Node.js like Sinon that make mocking very easy, but we can accomplish the same task by using DI.

Testing scenario

It is very common with testing to substitute code that communicates with a database or a network request with a mock or fake. This is because in a lot of CI/CD workflows the build or testing server may not have access to a database server or a network needed for the actual service. This is an excellent use case for DI to substitute an actual service with a mock or fake service.

There are many different reasons to use DI, but testing is one of the most common reasons.

Poor Mans DI

We have a technique that We have used throughout the years for configuring DI in my applications whether they are statically typed or duct-typed like JavaScript that We like to call ‘Poor Mans Dependency Injection’. With this technique, We usually create default dependent objects if a required object is not passed in on object instantiation.

Lets’ say we have a cart object that needs to calculate a tax rate for a certain location. In a lot of e-commerce systems that kind of data has to be calculated based on the location of the user, with the sales tax being different for every location. We can create a factory function that creates a shopping cart with an injectable function for calculating the tax.

function createCart(settings) {

    const { taxrepository } = settings;
    let items = [];    

    function addItemToCart(item) {
        items.push(item);
    }

    function removeItemFromCart(removeThisItem) {
        items = items.filter((item, index, arr) => { return item.sku !== removeThisItem.sku });
    }

    function getSubTotal() {
        return items.map(item => item.price * item.quantity)
                    .reduce((accum, item) => accum + item, 0);
    }

    function getTotal() {
        return taxrepository(getSubTotal()) + getSubTotal();
    }

    function getTaxes() {
        return taxrepository(getSubTotal());
    }

    return Object.freeze({
        addItemToCart,
        removeItemFromCart,
        getSubTotal,
        getTotal,
        getTaxes
    });
}

If we look at the following example, we are creating an object with functions for adding items to the cart and calculating the totals and subtotals. We have a function that we can pass into our settings constructor object called taxrepository. We will use this function to calculate our taxes.

Lets’ create a test function for calculating our taxes. We will make this a pure function without any side effects.

function calculateMyTax(subtotal) {
    return subtotal * 0.11;
}

When we instantiate this object with our factory function, we can just pass it into our settings object;

const cart = createCart({ taxrepository: calculateMyTax });
myCart.addItemToCart({ sku: 'DEF456', price: 2.00, quantity: 2 });
myCart.addItemToCart({ sku: 'HIG789', price: 6.00, quantity: 1 });
myCart.addItemToCart({ sku: 'ABC123', price: 12.00, quantity: 1 });

We can now get the subtotal and calculate the taxes.

console.log(`subtotal:  ${myCart.getSubTotal()}`);
// subtotal:  22
console.log(`taxes:  ${myCart.getTaxes()}`);
// taxes:  2.42
console.log(`total:  ${myCart.getTotal()}`);
// total:  24.42

Defaulting Behavior

All of the objects that We define, We try to create defaults for whenever an injectable behavior is not included in the constructor. That way if someone is using my object without passing in the needed objects, it will either get an error or a default function if it is missing from the constructor. We can modify the factory function to use a default if no taxrepository is passed in the settings object.

We also might want to have our factory function fail if the developer calling our function forgets to pass the taxrepository into the constructor.

if (!settings.hasOwnProperty('taxrepository')) {
    throw Error(`This function requires a 'taxrepository' to be passed into the contructor!`)
}

Dependency Injection Frameworks

DI frameworks are extremely popular in the statically typed object-oriented world of Java and .NET development, but there are DI frameworks you can use for JavaScript. One of the frameworks is called di4js, and will work with either Node.js or plain old JavaScript in the browser. Here is an example from the di4js readme;

var Car = function (engine, year) {
  this.engine = engine;
  this.year = year;
};

Car.prototype.start = function () {
  this.engine.start();
};

var DieselEngine = function () {
  this.hp = 0;
};

DieselEngine.prototype.start = function () {
  console.log("Diesel engine with " + this.hp + " hp has been started...");
};

di
  .autowired(false)
  .register('dieselEngine')
    .as(DieselEngine)
    .withProperties()
      .prop('hp').val(42);
  .register('car')
    .as(Car)
    .withConstructor()
      .param().ref('dieselEngine')
	  .param().val(1976);

var car = di.resolve('car');

car.start(); // Diesel engine with 42 hp has been started...

This example is from the di4js Github repo

For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop your custom website using JS, please visit our technology page.

Content Source:

1. javascript.plainenglish.io

How to write clean API calls with Axios

Making frontend applications is not as simple as it used to be. Frontend frameworks like React and Vue.js rely heavily on APIs. This adds complexity to our app because we need to manage how we call these APIs. One solution is to simplify the process by writing clean API calls.

But wait, what are “clean API calls”? To me, that means the proper structuring of API calls, making them easy to read and maintain. First, we do this by utilizing the single-responsibility principle. Each function must have a single responsibility, and with this principle in mind, we need to separate the logic for each endpoint.

The other thing we try to consider is the DRY principle (“Don’t Repeat Yourself”). This is very important – arguably more so in the case of frontend API providers – because it gives a sense of tidiness in the code, thus improving readability. we use Axios because it gives features such as interceptors, defaults, etc. It reduces the amount of boilerplate code you need to write for each API endpoint.

Pros and Cons of Using Axios

There are many ways to achieve this. You can either use the Fetch API or you can use a third-party library called Axios. By the title of this article, you can guess that we prefer Axios. Why? Let’s weigh in on the pros and cons.

Pro: Simplicity

What we like most about Axios is that it is very simple to use. The programming API is so easy to use that we have gotten really used to it. Well, this might be too personal of a preference, but you can try it yourself. we have used jQuery’s AJAX and the Fetch API, and we would rank Axios above all of them – although not by too large of a margin since all three of them are nice to work with.

Pro: Backward compatibility

Honesty, you wouldn’t think about this feature until you needed it. we mean, most people have modern browsers, but if some of your customers aren’t most people, they might not be able to use your app if it isn’t backward-compatible. The Fetch API is relatively new and old browsers aren’t capable of using it. Otherwise, libraries like Axios and jQuery’s AJAX are built on top of JavaScript’s XMLHttpRequest. For those of you who are wondering, XMLHttpRequest is an old version of JavaScript’s built-in HTTP calling mechanism.

Pro: Mature library with lots of features

You can do a lot with Axios – a whole lot. For example, as of the writing of this article, the Fetch API does not have built-in request/response interceptors. You have to use third parties. Compared to Fetch, writing clean APIs using Axios is very simple. Axios already has so many built-in conveniences. To name a few, you can set default headers and default base URLs using Axios.

Con: Too sophisticated for small apps

we have used Axios for long enough to understand that this library can be overkill for small apps. If you only need to use its GET and POST-APIs, you probably are better off with the Fetch API anyway. Fetch is native to JavaScript, whereas Axios is not. This brings us to the next point.

Con: Axios bloats your bundle size

This second point corresponds to the first one perfectly. One of the main reasons we avoid the use of Axios for small apps is the fact that it bloats your production build size. Sure, you might not notice a size spike for large apps like in e-commerce and such. But you will notice a huge increase if you are making a simple portfolio site. The lesson to be learned? Use the right tools for the right job.

Con: It’s a third party

Look, let me just start by saying that this third point is really subjective and some people might have opposite views. Axios is a third party. Yes, you read that right. Unlike Fetch, it is not native to the browser. You are depending on the community to maintain your precious app. Then again, most apps these days do use open-source products. So would it be a problem? Not really. Again, this is a preference. we are not advising you to reinvent the wheel. Just understand that you don’t own the wheel.

Installing Axios

Axios is available in multiple JavaScript repositories. You can access it using yarn and NPM. If you are using regular HTML, you can import it from CDNs like jsDelivr, Unpkg, or Cloudflare.

Assuming you are using NPM, we need to install Axios using this command:

npm install -S axios

If there are no errors in the installation, you can continue to the next step. You can check alternative installation methods on GitHub.

Making Separate Axios Clients

What are Axios clients? Clients are how we set default parameters for each API call. We set our default values in the Axios clients, then we export the client using JavaScript’s export default. Afterward, we can just reference the client from the rest of our app.

First, make a new file preferably named apiClient.js and import Axios:

import axios from 'axios';

Then make a client using axios.create:

const axiosClient = axios.create({
  baseURL: `https://api.example.com`,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
});

As you can see, we initiated the base URLs and default headers for all our HTTP calls.

Using Interceptors for Clean Redirects

When calling interacting APIs – especially when there is authentication involved – you will need to define conditions when your call is unauthorized and make your application react appropriately. Interceptors are perfect for this use case.

Let’s say that we need our application to redirect us to our home page when our cookies expire, and when our cookies expire, the API will return a 401 status code. This is how you would go about it:

axiosClient.interceptors.response.use(
  function (response) {
    return response;
  }, 
  function (error) {
    let res = error.response;
    if (res.status == 401) {
      window.location.href = “https://example.com/login”;
    }
    console.error(“Looks like there was a problem. Status Code: “ + res.status);
    return Promise.reject(error);
  }
);

Simple, right? After you’ve defined your client and attached an interceptor, you just need to export your client to be used on other pages.

Exporting Axios Client

After configuring your Axios client, you need to export it to make it available for the entire project. You can do this by using the export default feature:

export default {
  axiosClient
);

Now we have made our Axios client available for the entire project. Next, we will be making API handlers for each endpoint.

Folder Structure

Before we continue, we thought it would be useful to show you how to arrange your subfolders. Instead of writing a long comprehensive explanation, we think it would be better for me to give you an image of what we are talking about:

How I would arrange my folders. Pic courtesy: betterprogramming.pub

This assumes we will have admin, user, and product endpoints. We will home the apiClient.js file inside the root of the network folder. The naming of the folder or even the structure is just our personal preference.

The endpoints will be put inside a lib folder and separated by concerns in each file. For example, for authentication purposes, user endpoints would be put inside the user file. Product-related endpoints would be put inside the product file.

Writing an API Handler

Now we will be writing the API handler. Each endpoint will have its asynchronous function with custom parameters. All endpoints will use the client we defined earlier. In the example below, we will write two API handlers to get new products and add new products:

import { axiosClient } from "../apiClient";

export function getProduct(){
    return axiosClient.get('/product');
}

export function addProduct(data){
    return axiosClient.post('/product', JSON.stringify(data));
}

This pretty much sums up how we would write an API handler, and as you can see, each API call is clean and it all applies the single-responsibility principle. You can now reference these handlers on your main page.

Using the Handlers in Your Web App

Assuming that you are using an NPM project for all of this, you can easily reference your JavaScript API handlers using the import method. In this case, we will be using the getProduct endpoint:

import { getProduct } from "../network/lib/product";

getProduct()
  .then(function(response){
    // Process response and
    // Do something with the UI;
  });

There you have it: a clean no-fuss API handler. You’ve successfully made your app much more readable and easier to maintain.

For more information and to develop your web app using front-end technology, Hire Front-End Developer from us as we give you a high-quality solution by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“. To develop your custom website using JS, please visit our technology page.

Content Source:

1. betterprogramming.pub