Our Global Presence

Canada
57 Sherway St,
Stoney Creek, ON
L8J 0J3

India
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049

USA
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
In this article, you will learn about the progressive web app, and why PWA is gaining popularity, and also you can create a simple PWA app using NextJs.
PWA = web + experience of a native application
What is PWA?
The progressive web app is a simple web application that runs on a web browser similar to that of a website and provides an installable feature on a mobile device. PWA gives you a rich mobile experience via native-like functionalities such as the ability to work offline, push notifications, device hardware accessibility, and many more. Web applications can reach anyone, anywhere, on any device with a single codebase as a result PWA is more special. PWA offers the same experience as the native app and you need not download it from an app store or play store. PWA loads runs and functions in a web browser.
The Native app is known for rich and reliable with its own standalone user experience, the web app are best for reachability. Progressive Web Apps combine the best features of both native and web apps, including native-like functionality, dependability across all platforms with a single codebase, installability, and accessibility to anyone, anywhere. They are designed, developed, and enhanced using cutting-edge and modern APIs.
Why PWA?
Some people may wonder why we need PWA if we can have a separate version of apps like android, IOS, and web. The PWA is gaining popularity because of the following features:
You will use NEXTJS to implement the PWA which is a react framework for developing feature-rich frontend web applications. Now, Let’s create the project executing any commands mentioned below in your terminal based on the package management tool that you have.
npx create-next-app@latest --ts # or yarn create next-app --typescript # or pnpm create next-app --ts
After executing the command you will have a pre-configured NextJs project.
Now you will work on the implementation of PWA in the project that you just configured. For PWA implementation you will make use of next-pwa which is a zero-config PWA Plugin for NextJs. Let’s install the plugin in the project using the command below:
yarn add next-pwa npm install next-pwa
Now, update or create next.config.js
/** @type {import('next').NextConfig} */ const runtimeCaching = require("next-pwa/cache"); const withPWA = require("next-pwa")({ disable: process.env.NODE_ENV === "development", dest: "public", register: true, skipWaiting: false, runtimeCaching, }); const nextConfig = withPWA({}); module.exports = nextConfig;
After running next build, this will generate two files in your public: workbox-*.js and sw.js, which will automatically be served statically.
This step is optional. So if you want to use a custom server then you can proceed with this step. To create a custom server using express the root of the project with the file name server.js in order to load the service work. For creating the express server, you need to add express into the project
yarn add express npm install express
const express = require("express"); const next = require("next"); const port = parseInt(process.env.PORT, 10) || 3000; const dev = process.env.NODE_ENV !== "production"; const app = next({ dev, }); const handle = app.getRequestHandler(); app.prepare().then(() => { const server = express(); server.get("/service-worker.js", (req, res) => { app.serveStatic(req, res, "./.next/service-worker.js"); }); server.get("*", (req, res) => { return handle(req, res); }); server.listen(port, (err) => { if (err) throw err; }); });
You have to generate the manifest file inside the public folder in the project. For this, you can use any online tool for generating the manifest file.
Pic courtesy: medium.com
Fill in all the information and generate the manifest file. After that copy the content into the public directory and rename the file as manifest.json
Pic courtesy: medium.com
So now lets _document.tsx page and include the manifest.json link inside the Head tag as below:
import Document, { Html, Head, Main, NextScript } from "next/document"; class MyDocument extends Document { render() { return ( <Html> <Head> <link rel="manifest" href="/manifest.json" /> <link rel="apple-touch-icon" href="/logo.png"></link> <meta name="theme-color" content="#fff" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ); } } export default MyDocument;
You have successfully configured your project with PWA up to this point. Now run the following command and build the project.
yarn build npm build
After build completion starts the build app using the following command:
yarn start npm start
Pic courtesy: medium.com
When the app is started, you can see an install icon at the top of the browser like in the above image. Now you can install and use the app.
For more information and to develop web application using React JS, Hire React 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 custom web apps using React JS, please visit our technology page.
Content Source:
Angular is a TypeScript-based free and open-source web application framework. It is a complete rewrite of AngularJS.
This article outlines a few of the standards and best practices of Angular that you could use and experience when developing the applications.
Let’s go through this one by one!
Typescript is a type-checking language. But there may be some instances like where you need dynamic contents, where you don’t know the exact data type of some variables etc. In such cases, you can use the data type ‘any’ to tell typescript that the variable can be of any type.
But using ‘any’ always is not a good practice. Using ‘any’ tells the typescript to skip the type checking. This may expose your code to issues that are difficult to trace and debug which will cost you a lot.
You can minimize these issues by trying to declare variables or constants with a type other than ‘any’ whenever possible.
Another advantage of having good and proper type declarations in the application is that it makes refactoring easier.
A template in an angular application defines the component’s view. It is very important to keep them neat and understandable.
If you add logic in the template, it becomes difficult for unit testing and will lead the application more prone to bugs. Even if you have a simple logic in your template, it is better to extract it out into its component.
Linting forces an application codebase to be cleaner and more consistent. Lint rules will ensure the readability of the code. Having lint rules will give a nice error when you do something that you should not be. It is widely supported across all modern editors and also possible to customize with your own lint rules and configurations. You can apply lint rules for Typescript and SCSS.
Before Angular 11, linting was supported via a library called TSLint. However, the TSLint has been deprecated. Fortunately, thanks to tools from the Angular ecosystem, migrating to ESLint has become easier.
ESLint is compatible with both JavaScript and TypeScript. This makes jumping between the two languages a bit easier, especially for new developers.
tslint, eslint and stylelint have many inbuilt options.
Some lint rules even come with fixes to resolve the lint error.
If there are parts which you need in many places in the code in the application, extract the parts which can be reused in the component and make it a new one. Make the component as dumb as possible where the component does not contain any special logic in it and operates purely based on the inputs and outputs provided to it.
As a general rule, the last child in the component tree will be the dumbest of all. (You may have to use property and event bindings to pass inputs to the components and receive output events from the components, respectively.)
This will be very effective for many reasons.
If the UI has to be changed at any point, there is no need of going around and changing the UI code in all the places where it is used. Instead, you can change the code in the common component created.
Also, It is very difficult to debug, manage and test Large components. So If the component becomes large, break it down into more reusable smaller components, so that you can easily manage, maintain and debug with less effort. Reusable components reduce duplication of code, therefore, making it easier to maintain and make changes.
Pic courtesy: medium.com
The same developers will not always be involved continuously with the same project they work on. So always document the code as much as possible. It will help the new developers involved in a project to understand its logic and increase readability.
For methods, you need to define them using multi-line comments on what task the method actually performs and all parameters should be explained.
The default environments in angular are development and production environments. Angular has different environment configurations to declare individual variables for each of the different types of environments. It is possible to even add more environments, or add new variables in existing environment files.
E.g:
Dev environment -> environment.ts
Production environment -> environment.prod.ts
The environment variables are applied automatically from the specified environment file during the application build.
Always try to define small functions which would have a limit of no more than 75 lines.
Advantages of using small functions are that it is easier to test and reuse since they may probably do one thing and serve one purpose. Also they are easier to maintain and read.
Creating and Maintaining a proper folder structure is an important factor developers should consider before initiating any angular project. The folder structure should be easily flexible to adapt new changes throughout development.
Below image shows one of such example folder structure.
Pic courtesy: medium.com
It is better to follow a set of rules as much as possible in order to have the project with the proper coding standard and a best user experience. Here are a few out of them.
Lazy loading is the process which loads some features of the Angular application only when their routes are navigated for the first time. Lazy loading will load something only when it is used. This helps to improve the application’s performance and helps keep initial bundle sizes smaller, which can decrease the application load time by not loading the modules that are not used.
So, try to lazy load the modules in an Angular application whenever possible.
For more information and to develop web applications using Angular, Hire Angular 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 your custom web app using Angular, please visit our technology page.
Content Source:
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.
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.
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.
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.
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 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:
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.
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:
This RFC outlines the biggest update to Next.js since it was introduced in 2016:
The new Next.js router will be built on top of the recently released React 18 features.
This RFC introduces new routing conventions and syntax. The terminology is based on React and standard web platform terms. Throughout the RFC, you’ll see these terms linked back to their definitions below.
Pic courtesy: nextjs.org
URL Path: Part of the URL that comes after the domain.
URL Segment: Part of the URL path is delimited by slashes.
Pic courtesy: nextjs.org
Pic courtesy: nextjs.org
To ensure these new improvements can be incrementally adopted and avoid breaking changes, there is a proposed new directory called app.
The app directory will work alongside the page directory. You can incrementally move parts of your application to the new app directory to take advantage of the new features. For backward compatibility, the behavior of the page directory will remain the same and continue to be supported.
Pic courtesy: nextjs.org
You can use the folder hierarchy inside the app to define routes. A route is a single path of nested folders, following the hierarchy from the root folder down to a final leaf folder.
For example, you can add a new /dashboard/settings route by nesting two new folders in the app directory.
Note: With this system, you'll use folders to define routes, and files to define UI (with new file conventions such as layout.js, page.js, and in the second part of the RFC loading.js). This allows you to colocate your own project files (UI components, test files, stories, etc) inside the app directory. Currently this is only possible with the pageExtensions config.
Each folder in the subtree represents a route segment. Each route segment is mapped to a corresponding segment in a URL path.
Pic courtesy: nextjs.org
For example, the /dashboard/settings route is composed of 3 segments:
The / root segment
The dashboard segment
The settings segment
Note: The name route segment was chosen to match the existing terminology around URL paths.
New file convention: layout.js
So far, the folders are used to define the routes of our application. But empty folders do not do anything by themselves.
A layout is UI that is shared between route segments in a subtree. Layouts do not affect URL paths and do not re-render (React state is preserved) when a user navigates between sibling segments.
A layout can be defined by default exporting a React component from a layout.js file. The component should accept a children prop which will be populated with the segments the layout is wrapping.
There are 2 types of layouts:
Root layout: Applies to all routes
Regular layout: Applies to specific routes
You can nest two or more layouts together to form nested layouts.
Pic courtesy: nextjs.org
You can create a root layout that will apply to all routes of your application by adding a layout.js file inside the app folder.
Note: The root layout replaces the need for a custom App (_app.js) and custom Document (_document.js) since it applies to all routes. You'll be able to use the root layout to customize the initial document shell (e.g. <html> and <body> tags). You'll be able to use data fetching methods inside the root layout (and other layouts).
Pic courtesy: nextjs.org
You can also create a layout that only applies to a part of your application by adding a layout.js file inside a specific folder.
For example, you can create a layout.js file inside the dashboard folder which will only apply to the route segments inside dashboard.
Pic courtesy: nextjs.org
Layouts are nested by default.
Pic courtesy: nextjs.org
For example, if it were to combine the two layouts above. The root layout (app/layout.js) would be applied to the dashboard layout, which would also apply to all route segments inside dashboard/*.
New file convention: page.js
Pic courtesy: nextjs.org
A page is UI that is unique to a route segment. You can create a page by adding a page.js file inside a folder.
Pic courtesy: nextjs.org
For example, to create pages for the /dashboard/* routes, you can add a page.js file inside each folder. When a user visits /dashboard/settings, Next.js will render the page.js file for the settings folder wrapped in any layouts that exist further up the subtree.
Pic courtesy: nextjs.org
You can create a page.js file directly inside the dashboard folder to match the /dashboard route. The dashboard layout will also apply to this page:
This route is composed of 2 segments:
Note: For a route to be valid, it needs to have a page in its leaf segment. If it doesn't, the route will throw an error.
When a layout component is rendered, the children prop will be populated with a child layout (if it exists further down the subtree) or a page.
It may be easier to visualize it as a layout tree where the parent layout will pick the nearest child layout until it reaches a page.
For more information and to develop web application using React JS, Hire React 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 custom web apps using React JS, please visit our technology page.
Content Source:
Node.js 18.0 is released by the Node.js community. The most wonderful news is that in October 2022, this version will be elevated to long-term support (LTS). The codename for the release will be ‘Hydrogen’ once it is promoted to long-term support. Support for Node.js 18 will last until April 2025.
The most exciting news is that version 18 will finally provide native fetch functionality in Node.js. For the longest time, Node did not contain support for fetch, which is a highly standard API on the web for conducting HTTP requests or any other type of network request, and Node did not support it by default. If you wanted to make an HTTP request, you had to either use third-party tools or write the request from scratch. The implementation comes from undici and is inspired by node-fetch which was originally based upon undici-fetch. The implementation strives to be as close to spec-compliant as possible, but some aspects would require a browser environment and are thus omitted.
The API will remain experimental until further test coverage is introduced and the contributors have verified that the API implements as much of the requirements as is practicable.
Because JavaScript is utilised in so many areas, this is actually wonderful news for the entire ecosystem.It’s utilised on the web, in Node.js, and in Cloudflare workers, for example.
Cloudflare workers are currently shipping with their own proprietary implementation fetch. You’ll ought to install some few packages until you can use Node.There is a version for the web, so there is a lot of inconsistency along the route. Node is now providing formal support for this. That is, any environment that runs JavaScript on servers is almost certainly running Node. If it isn’t running Deno, it will support fetch by default, and because this is the team, the real team, doing it.
Pic courtesy: medium.com
If you look at this issue closely, you can see that Node utilised or primarily ported a library called Undici. What exactly is this library? It’s officially produced by the Node team, however it’s really an HTTP 1.1 full-fledged client written entirely in Node JS.
Pic courtesy: medium.com
The node:test module facilitates the creation of JavaScript tests that report results in TAP format. To access it:
import test from ‘node:test’;
This module is only available under the node: scheme. __Node Document
Node.js 18 features a test runner that is still in development.It is not meant to replace full-featured alternatives such as Jest or Mocha, but it does provide a quick and straightforward way to execute a test suite without any additional dependencies.
It provides TAP output, which is extensively used, and makes the output easier to consume.
More information may be found in the community blog post and the Node.js API docs
Pic courtesy: medium.com
Note: The test runner module is only available using the node: prefix. The node: prefix denotes the loading of a core module. Omitting the prefix and importing ‘test’ would attempt to load a userland module. __Node Documents
As with other major releases, this one upgrades the minimum supported levels for systems and tooling needed to create Node.js. Node.js includes pre-built binaries for a variety of platforms. The minimum toolchains for each major release are evaluated and raised if needed.
Due to issues with creating the V8 dependencies in Node.js, prebuilt binaries for 32-bit Windows will not be accessible at first. With a future V8 upgrade, we hope to restore 32-bit Windows binaries for Node.js 18.
Supported platforms is current as of the branch/release to which it belongs
Node.js relies on V8 and libuv. We adopt a subset of their supported platforms.
There are three support tiers:
The V8 engine has been updated to version 10.1 as part of Chromium 101. The following new features are added in Node.js 17.9.0 over the previous version:
With the findLast() and findLastIndex() methods, This use case is easily and ergonomically solved.They perform identically to their find() and findIndex() equivalents, with the exception that they begin their search at the end of the Array or TypedArray.
Pic courtesy: medium.com
For more information and to develop web applications using Node JS, Hire Node 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 your custom web app using Node JS, please visit our technology page.
Content Source:
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.
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!
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
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!
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.
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
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;
These methods of reuse each come with their own drawbacks, namely:
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.
<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>
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:
If you’re building a minimalist product, but want to add an extra level of customisation or expansion, then plugins are a great way to enable that. They allow each instance to be customised with additional code that anyone can create.
In this tutorial, we will extend a minimal web server with a plugin system, create a plugin, and use that plugin with the server. We’ve already created a very basic web server. We’ll use this as our starter code.
But before we start, what is a plugin? A plugin is an extra piece of code that expands what a program can normally do. Web extensions are a good example of this. They leverage existing APIs, and build new functionality upon them. In certain circumstances, they can also be used to patch bugs and flaws that the main software provider has not yet addressed.
In this tutorial, we’ll be building a request counting plugin, and the system to load and unload that plugin.
Let’s start by creating a fresh Node.js project. I’ll be using NPM in this tutorial, but I’ll add the Yarn commands too.
mkdir my-plugin-app
cd my-plugin-app
npm init -y (yarn init -y)
npm i express (yarn add express)
We won’t go through the process of creating an app for our plugins system. Instead, we’ll use this starter code. A simple server with one endpoint. Create an index.js file and add this starter code.
const express = require('express'); const EventEmitter = require('events'); class App extends EventEmitter { constructor() { super(); this.server = express(); this.server.use(express.json()); } start() { this.server.get('/', (req, res) => { res.send('Hello World!'); }); this.server.listen(8080, () => { console.log('Server started on port 3000') this.emit('start'); }); } stop() { if (this.stopped) return; console.log('Server stopped'); this.emit('stop'); this.stopped = true; process.exit(); } } const app = new App(); app.start(); ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => { process.on(event, () => app.stop()); });
To get a sense as to what our plugin system will do, let’s create a little plugin containing everything a plugin will need. The type of plugin system we’ll be implementing has two events. load and unload are the two times we will directly call any code in the plugin. load sets up any extra routes, middleware or anything else that is part of the plugin, and unload tells us to safely stop whatever we’re doing and save any persistent data.
This plugin will set up a middleware to count the number of requests we get. In addition, it will add an API route so we can query the number of requests that have been made so far. The plugin will export two different functions, one for each event.
const fs = require('fs'); let count = 0; function load(app) { try { count = +fs.readFileSync('./counter.txt'); } catch (e) { console.log('counter.txt not found. Starting from 0'); } app.server.use((req, res, next) => { count++; next(); }); app.server.get('/count', (req, res) => { res.send({ count }); }) } // Save request count for next time function unload(app) { fs.writeFileSync('./counter.txt', count); } module.exports = { load, unload };
Our plugin system will all be kept in a separate class from the main app, we’ll put this in a new file plugins.js. The point of this class is to load and unload plugins.
The load function takes a path to a plugin file, and uses the require method to load it during runtime. The loadFromConfig method allows us to load plugins defined in a config file.
const fs = require("fs"); class Plugins { constructor(app) { super(); this.app = app; this.plugins = {}; } async loadFromConfig(path='./plugins.json') { const plugins = JSON.parse(fs.readFileSync(path)).plugins; for (let plugin in plugins) { if (plugins[plugin].enabled) { this.load(plugin); } } } async load(plugin) { const path = plugins[plugin]; try { const module = require(path); this.plugins[plugin] = module; await this.plugins[plugin].load(this.app); console.log(`Loaded plugin: '${plugin}'`); } catch (e) { console.log(`Failed to load '${plugin}'`) this.app.stop(); } } } module.exports = Plugins;
We’ll use a plugins.json file to store the paths to all the plugins we wish to load, then call the loadFromConfig method to load them all at once. Put the plugins.json file in the same directory as your code.
{ "counter": "./counter.js" }
Finally, we’ll create an instance of the plugin in our app. Import the Plugins class, create an instance in the constructor, and call loadFromConfig leaving the path blank (the default is ./plugins.json).
const express = require('express'); const Plugins = require('./plugins'); class App { constructor() { super(); this.plugins = new Plugins(this); this.server = express(); this.server.use(express.json()); } async start() { await this.plugins.load(); this.server.get('/', (req, res) => { res.send('Hello World!'); }); this.server.listen(8080, () => { console.log('Server started on port 3000') }); } stop() { if (this.stopped) return; console.log('Server stopped'); this.stopped = true; process.exit(); } } const app = new App(); app.start(); ["exit", "SIGINT", "SIGUSR1", "SIGUSR2", "SIGTERM", "uncaughtException"].forEach(event => { process.on(event, () => app.stop()); });
We now need to handle the unload method exported from our plugin. And once we do, we need to remove it from the plugins collection. We’ll also include a stop method which will unload all plugins. We’ll use this method later to enable safe shutdowns.
const fs = require("fs"); class Plugins { constructor(app) { super(); this.app = app; this.plugins = {}; } async loadFromConfig(path='./plugins.json') { const plugins = JSON.parse(fs.readFileSync(path)).plugins; for (let plugin in plugins) { if (plugins[plugin].enabled) { this.load(plugin); } } } async load(plugin) { const path = plugins[plugin]; try { const module = require(path); this.plugins[plugin] = module; await this.plugins[plugin].load(this.app); console.log(`Loaded plugin: '${plugin}'`); } catch (e) { console.log(`Failed to load '${plugin}'`) this.app.stop(); } } unload(plugin) { if (this.plugins[plugin]) { this.plugins[plugin].unload(); delete this.plugins[plugin]; console.log(`Unloaded plugin: '${plugin}'`); } } stop() { for (let plugin in this.plugins) { this.unload(plugin); } } } module.exports = Plugins;
To make sure that plugins get a chance to unload when the app closes, we need to call Plugins.stop. In the index.js code, we included a stop method that gets called when the app is killed, and we’ve just added a stop method to the Plugins class. So let’s call the Plugins.stop method when our app stop method is called.
Add the following to the App.stop method.
stop() { if (this.stopped) return; + this.plugins.stop(); console.log('Server stopped'); this.stopped = true; process.exit(); }
For more information and to develop web applications using Node JS, Hire Node 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 your custom web app using Node JS, please visit our technology page.
Content Source:
The new release of Google’s popular TypeScript-based web framework is available now.
This post will bring you closer to the most important new features and breaking changes in Angular 13 and help you decide whether an update for your project is worthwhile.
Angular has introduced its next-generation compilation and rendering pipeline Ivy since its version 8. Angular 9 has used Ivy by default while maintaining support for the predecessor compiler and runtime View Engine.
The new version of the framework is now 100 percent Ivy.
To streamline and modernize the Angular Package Format (APF), View Engine specific metadata and older output formats are now removed, which will reduce maintenance costs and the complexity of the codebase in Angular 13. All internal tools are converted to Ivy beforehand so that the change should work smoothly.
Ivy compiles individual components more independently of one another, which improves development times. The use of ngcc (Angular compatibility compiler) is no more required for libraries built with the latest version of the APF. This will offer a faster execution for libraries developers.
The load time is reduced in Angular 13 with the help of ergonomic code-splitting APIs and granular code breakdown at a component level.
A performance improvement was also achieved with the introduction of ESBuild, an extremely fast JavaScript bundler. ESBuild works now with terser to optimize global scripts and supports CSS sourcemaps, which enables optimized global CSS.
The time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.
Pic courtesy: betterprogramming.pub
To benefit from native web APIs and modern browser features such as web animations and CSS variables, the Angular team has removed the Internet Explorer 11 support.
This offers a smaller bundle size and faster load for apps and an improved user experience because of the absence of IE-specific polyfills and the no need for differential loading.
This breaking change will certainly affect authorities or institutions that still use IE 11 and have not yet switched to Microsoft Edge or other modern browsers.
You can now create dynamic components with less boilerplate code thanks to an improvement of ViewContainerRef.createComponent API.
Here is the old way of creating a dynamic component:
export class InquiryDialog implements OnInit { componentRef: ComponentRef; @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef; constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData, private componentFactoryResolver: ComponentFactoryResolver) {} ngOnInit(): void { const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.inquiryPageComponent); this.componentRef = this.container.createComponent(componentFactory); } }
And with Angular 13, there is no need to use ComponentFactoryResolver:
export class InquiryDialog implements OnInit { componentRef: ComponentRef; @ViewChild('inquiryPage', {static: true, read: ViewContainerRef}) container: ViewContainerRef; constructor(@Inject(MAT_DIALOG_DATA) public data: InquiryDialogData) {} ngOnInit(): void { this.componentRef = this.container.createComponent(this.data.inquiryPageComponent); } }
Angular 13 way of creating a dynamic component
TestBed is the primary unit tests API for Angular applications and libraries.
In order to decrease the test time in TestBed, the new version is released with an improved test API. The framework can now set up and tear down the test environment and learn the DOM automatically after each test run. This leads to faster, less memory-intensive, and better-isolated tests.
Angular 13 has introduced a new type for forms, which is FormControlStatus. It’s a union of all possible status strings for form controls:
There is an Accessibility (A11y) improvement in Angular Material: all Material Design Components (MDC) have been checked for better Accessibility.
Checkboxes and radio buttons, for example, have now larger touch sizes, and other components have better high contrast modes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
A comparison of touch target sizes. The sizes on the right are the new sizes.
Pic courtesy: betterprogramming.pub
For more information and to develop web applications using Angular, Hire Angular 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 your custom web app using Angular, please visit our technology page.
Content Source:
Angular keeps growing in adoption and keeps becoming every day more popular among Frontend implementations.
In this brief guide, we will have a look around some of the greatest and most popular UI kits and frameworks, trying to understand which one of those could be the right choice for your next project.
Angular Material is considered today one of the most popular UI kit for Angular, probably the most one, despite its root feature that makes it anchored to the material design style, which could be not good for everyone. With more than 22k stars on GitHub, this kit is proving its so much beloved by developers and guarantees good community support that keeps posting and discussing bugs, features to integrate, eventually performances issues, and more.
Pic courtesy: betterprogramming.pub
Good to develop a CRM or an admin software, very bad for general-purpose Front end needings. Still missing good documentation and the material look-and-feel could not be good for everyone. Found it very stable: use it and don’t pretend to customize it a lot, because despite the CDK it will drive you mad as hell.
Defined as “Bootstrap widgets — The angular way” by its authors, the Ng-bootstrap UI kit has been popular for a lot and was one of the first kits available around.
The anthem has been “let’s replicate Bootstrap features and make them all available to Angular”. The result is a good basic UI kit without complaints, but really essential. Some components are a bit inadequate compared to the original ones and the documentation is very concise. A good choice if you need the “basic bootstrap”, but not much more.
Pic courtesy: betterprogramming.pub
Ng-bootstrap is a good kit if you need plain Bootstrap features, not useful if you need more. Today it’s suffering the Ngx library as a rival, but Ngx is more complete, newer, and even more professional in some cases, so let’s choose this if you don’t need much.
This recent UI kit designed by Valor Software is becoming rapidly popular and lives on the “Develop faster and better” motto. Could sound like an Ng-bootstrap clone and it could be considered something similar, but the truth is that this one is completely redesigned and provides better features and advanced components.
Supports Bootstrap 3, 4, and even the 5th version proving that this library provides a good supporting community and that is often updated.
Pic courtesy: betterprogramming.pub
To me, Ngx is the best Bootstrap-based UI Kit. Very solid, very comprehensive documentation, and never had issues. Consider this one to be the basic standard for modern web apps. If you miss something, just integrate. This is a real bootstrap to me.
Yet another Bootstrap-based UI kit, MDBootstrap is a HUGE kit and is almost the quintessential of UI components for Angular, providing really everything for any need.
It’s the only one that comes with a CLI, premium support, and which looks like a “professional” tool. But other than that the result is not much satisfying. I found it really messy, really heavy, and hard to set up.
Pic courtesy: betterprogramming.pub
I’ve had a brief experience with this and it just didn’t fit my needings. Could be a good choice if you want to invest some time to really understand it and to adopt it as a “company standard” development process, not really suited for spare developers or Open source projects. Too complex and too less immediate, it feels like working with a “big Java framework” more than a UI Kit for angular.
The IBM’s solution for Front end needings: this UI kit looks enterprise, professional, and even beautiful. Carbon didn’t become a real breakthrough in the UI kits panorama and competition, but it’s worth trying.
The documentation is superb, covering really a lot of aspects about components implementations.
Pic courtesy: betterprogramming.pub
The Carbon IBM’s solution looks very fascinating and charming but must be considered an advanced tool which could not suit your needings. There are many projects where you really don’t need that much technique and its complexity will force you to spend some hours to really understand approaches and mechanisms. Give it a try if you need an enterprise tool.
For more information and to develop web applications using Angular, Hire Angular 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 your custom web app using Angular, please visit our technology page.
Content Source:
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.
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.
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.
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.
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'));
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.
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
57 Sherway St,
Stoney Creek, ON
L8J 0J3
606, Suvas Scala,
S P Ring Road, Nikol,
Ahmedabad 380049
1131 Baycrest Drive,
Wesley Chapel,
FL 33544
© 2025 — HK Infosoft. All Rights Reserved.
© 2025 — HK Infosoft. All Rights Reserved.
T&C | Privacy Policy | Sitemap