MX-graph is a java-script based diagramming library which can be used to display interactive graphs or charts, having custom functionality. The benefit of using an MX-graph is that it is a vector-based graph, therefore, it runs natively in any browser. The popular graph-based websites like draw.io use the MX-graph library in their sites.



Angular is a popular framework to work for web-application and its easy to implement MX-graph in it for a quick start of your project.



After working on the MX-graph for a long time, I came to the conclusion that there’s not much content available about it and other related documents are not up to the mark. I’ve even seen some errors in the documentation.



So, here I am writing this blog to provide some details about how to integrate the MX graph with Angular 8.



This blog post is a brief discussion about important features of MX-graph and how to use them with Angular 8 without much sweat.

## Integration of MX-Graph to Angular



First of all, we need to install MX-graph. Well, there is already an NPM package available for it, we just have to install it with this command-

After the package is successfully installed, import the library to _angular.json_:


```
"build": {
          "options": {
            ...
            "assets": [
              { "glob": "**/*", "input": "src/assets/", "output": "/assets/" },
              { "glob": "favicon.ico", "input": "/src", "output": "/" },
              { "glob": "**/*", "input": "./node_modules/mxgraph/javascript/src", "output": "/assets/mxgraph" }
            ],
            ...
            "scripts": [
              "src/assets/js/mxgraph.conf.js",
              "node_modules/mxgraph/javascript/mxClient.js"
            ]
          }         
        }
```

Here, we change the assets and the scripts array, to the scripts we added two java-script files, mxgraph.conf.js that contains some MX-graph configuration and the mxClient.js that is MX-graph library.



But MX-graph has no typescript implementation, you need to create classes of it or even better, you can [copy files](https://github.com/gooddaytoday/mxgraph-typescript-definitions) and put to new directory _mxtypes_-


## Features of MX-Graph



MX-graph provides lots of in-build functionalities. As I can not go through them all in this blog, I’ve tried to include some of the very important features you would require to build your application.



In this blog, I will discuss how to generate canvas in which you can add or remove vertex which is moveable and resize-able in that canvas. I have also discussed how to create edges or simply you can say arrows to show a link between two nodes.

### Generating a New Graph-



After implementation, we can easily create a new graph in component as shown in the example-


```
export class AppComponent implements AfterViewInit {
@ViewChild('graphContainer') graphContainer: ElementRef;
ngAfterViewInit() {
    const newGraph = new mxGraph(this.graphContainer.nativeElement);
try {
      const parent = newGraph.getDefaultParent();
      newGraph.getModel().beginUpdate();
const vertex1 = newGraph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
      const vertex2 = newGraph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
newGraph.insertEdge(parent, '', '', vertex1, vertex2);
    } finally {
      newGraph.getModel().endUpdate();
      new mxHierarchicalLayout(newGraph).execute(newGraph.getDefaultParent());
    }
  }
}
```

Now, you have an integrated MX-graph and also have created a graph component but how to have custom graph punctuality that you want?



In the successive sections of this article, you will see some useful MX-graph functions to create custom functionality in the graph-



### Insert New Vertex-


```
const vertex= newGraph.insertVertex(newGraph, vertex-ID, content, x-coordinates, y-coordinates, width, height,style);
```

Here, _newGraph_ is the name of the graph (whatever you give it!), if there is some id to the vertex be given, you can pass it here else it can be null. In the third parameter, we can pass a string that is to be displayed inside vertex.




The next two parameters are x and y coordinates of the graph where you want to place the vertex and the last two are the width and height of the vertex. There is also an optional style parameter in which you can pass the style of the vertex. More on this is later in the article.

### Finding All Vertex in Graph-


>const cells = this.mxGraph.getChildVertices(this.newGraph );



It will help you find all the vertices with their data currently present in your graph. Create an edge between two vertices:



>this.mxGraph.insertEdge(Graph-Name, edge-ID,content,source,target,style)



If you don’t want to pass an id then you can pass null, it will work all fine. The source is the vertex id from which edge will start and the target is where your edge will end.



The last parameter style is an option, used only if you want to add style to the edge as the last parameter in quotes.



Link if I want edge with no arrow’s, in the end, I can add ‘endArrow=none;’ as the fourth parameter.



To check there is an edge to vertex-



>const edgeData = this.mxGraph.getEdgeBetween(source, target, true);



If there is an edge between source and target then all its properties with value will come in the _edgeData_ else it will be _null_.



### Remove Vertex-


>this.mxGraph.removeCells([vertex ID], true);



In removeCells, the third parameter is to remove all vertex edges in your graph. Also, if you don’t want to remove vertex edges you can make it false.

## Event Listener Functionality



Adding event listening functionality in your graph is one of the challenging tasks, MX-graph provides lots of event listeners like click, double click, hover, touch, and many more which you can check in their official documents. Some of the important have been mentioned below-


### For Single Click:



>this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) => {})



To detect whether vertex or graph was clicked, you can use MX-event property to get vertex id as well.


```
this.mxGraph.addListener(mxEvent.CLICK, (sender, evt) =&gt; {
const vertexID = evt.getProperty(‘cell’);
if(vertexID ) {
console.log(`Vertex with id{$vertexID } was pressed`)
} else {
console.log(`Graph was clicked.`)
}
}
```

### For Double Click:




It is mostly similar to the single click event, just with a slight change.



>this.mxGraph.addListener(mxEvent.DOUBLE_CLICK, (sender, evt) => {})



## Styling the Vertex



You can use mxStylesheet for styling the vertex but it is quite time-consuming as we don’t know all the properties in it. We have to find the required property first and then implement it which makes this approach slower.



For Fast implementation of required styling, I’ve found a better way-



As I mentioned earlier that draw.io also use MX-graph- Go to the site, create required shape and color, and then click on Edit Style as shown in below image-


![integrate-mx-graph-with-angular_1.jpg](https://backend.habilelabs.io/uploads/integrate_mx_graph_with_angular_1_28a407aaac.jpg)



In Edit Style Box, you can see some styling properties of the vertex, you can copy it and can use directly while creating a new vertex, like this-




![integrate-mx-graph-with-angular_2.jpg](https://backend.habilelabs.io/uploads/integrate_mx_graph_with_angular_2_3e6b4e6582.jpg)



### Inserting Complex Shapes in Graph-



One of the major problems I’ve faced is to insert a custom shape in the graph. The only effective solution I came to know is to create an SVG of that shape and add that shape to your style.



>shape=image;image=Image-URL

### Text Wrapping of Vertex-



You can do wrapping of the text from style parameter, and can find all properties in draw.io. But it’s not effective, especially for complex shapes. To overcome this problem, I have created a custom function with the help of the pre-build properties of the MX-graph.


```
wraptext(){
  this.mxGraph.getLabel = function(cell)
  {
    const label = (this.labelsVisible) ? this.convertValueToString(cell) : '';
    const geometry = this.model.getGeometry(cell);
if (!this.model.isCollapsed(cell) && geometry != null && (geometry.offset == null ||
        (geometry.offset.x == 0 && geometry.offset.y == 0)) && this.model.isVertex(cell) &&
      geometry.width >= 2)
    {
      const style = this.getCellStyle(cell);
      const fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE;
      const max = geometry.width / (fontSize * 0.625);
if (max < label.length)
      {
        return label.substring(0, max*2) + '...';
      }
    }
return label;
  };
}
```

Basically, the width of each vertex in the graph is being calculated in this function. Then the maximum amount of text that can be entered based on the font size of the vertex is calculated.



If the text present in the vertex is larger than max two line’s occupancy then the rest of all text will be not shown in the graph and in the end, “…” is placed to indicate that there is more text.


## Conclusion:


Now that we have a basic graph integration knowledge, the possibilities are limitless with MX-Graph. It can be used as the base for any custom graph-based application imaginable.



Lots of popular sites like draw.io uses the MX-graph in its core. It’s free unlike other libraries and is easy to use. Not only for Angular projects, this graph library can be used for other technologies also.



For a better understanding of this version, it would do no harm to have a better insight into Angular 8 and its Features.



If you enjoyed the blog, do clap on it (as many as you find worthy).



Thanks for reading!!

medium_integrate-mx-graph-with-angular_feature.jpg

small_integrate-mx-graph-with-angular_feature.jpg

thumbnail_integrate-mx-graph-with-angular_feature.jpg

How to Integrate MX Graph with Angular 8

In this technical era and the internet-driven world, hacking has become one of the biggest threats for business organizations and government agencies. Cyber-attack incidents are increasing at a disappointingly high rate and thus, it’s become an unarguable fact for the companies that the traditional network security measures are no longer potentially viable to prevent such malicious attacks.

As predicted under Moore’s Law, computer hardware is getting more cheap, capable, and faster. But, with these improvements have come complexity. This complexity leads to some unintended vulnerabilities, that get created most often due to lacking comprehensive knowledge of how to deal with the system configuration.

Therefore, Ethical Hacking came into the scenery to unveil the vulnerabilities and threats in the computer systems that can be a welcome-door for a cyber-attack.

Here in this blog, we’ll be discussing the role of ethical hacking in cyber-security for businesses and industries-

## What is Ethical Hacking??


The term ‘hacking’ was originated by the Massachusetts Institute of Technology (MIT) in the 1960s to define the concept of securing and redeveloping mainframe systems.

Ethical hacking is a form of legal hacking that is used in defense in case of a cyber-attack. In some cases, terms such as ‘Penetration Testing’, ‘Red Teaming’, or ‘Intrusion Testing’ are also used to define ethical hacking.

>“An ethical hacker is, however, an individual who is usually employed with an organization and who can be trusted to undertake an attempt to penetrate networks and/or computer systems using the same methods and techniques as a malicious hacker.”

Over the course of a decade, cyber or malicious attacks have become a matter of concern for the government as well as private organizations.

Whenever the term ‘Hacking’ is used, it carries the images of crooked techie guy breaking illegitimately into a computer system. However, the concept of White Hat Hackers is different as they retaliate against the attack caused by the ‘black hat’ practitioners. The white hat hackers demonstrate the impact of damage of a malicious security-breaching act upon the vulnerable systems and offer advice and protection from such dangers.

## Services Under Ethical Hacking –

The ethical hacking model includes services like –

- Application Testing
- Local Network Testing
- Wireless Security
- Wire Dialing
- System Hardening


These services test and infiltrate the security levels in applications, networks, wireless networks, etc. and provide promising measures to ensure system stability and accessibility.

![role-of-ethical-hacking-in-cyber-security – 1.jpg](https://backend.habilelabs.io/uploads/role_of_ethical_hacking_in_cyber_security_1_63b2251b05.jpg)

## Need and Advantages of Ethical Hacking
Ethical hacking goes hand-in-hand with ‘Penetration Testing’ and most often are the same concepts. However, ethical hacking covers a great scope than just penetration testing.

An organization hires an ethical hacker to penetrate the online defenses of a computer network and find out the vulnerabilities it may present to an attacker and developing solutions to prevent data breaches the security of the company’s data. Ethical Hacking prevents data breaches and protects businesses from cyber terrorists.

Here are a few advantages of ethical hacking for businesses –

- Testing Security Measures
- Finding Vulnerable Areas
- Understanding the Techniques and Approach of Hacker
- Identification and preparation for a cyber-attack
- Security Awareness to a data or network breach


## Cyber Security with White Hat Hackers
An ethical hacker looks into the server and network security of the organization and points out the vulnerabilities through with a black-hat hacker can attack. He is also permitted to penetrate into the target network.

The ethical or white-hat hacker plays an important role in network and data security and finds out the weak spots and can report about the concerned vulnerabilities so that the authorities can further proceed in the same lime.

The need for Ethical Hackers came into demand when networks and servers of organizations and government bodies were breached thoroughly. Here are the reasons that describe the need to hire an ethical hacker –

- To invent solutions that would safeguard the network and data from malicious attacks
- To determine which of the security measures are effective and which ones need upgradation, and which are not able to withstand an attack.
- To make decisions about how and where to improve data security.
- To create security awareness at all levels in an organization.
- To raise data and network security standards and make them impossible to breach.

## Summary:
Once you know what ethics are, it will eventually lead you to understand the term ‘ethical hacking’ more profoundly. In this 21st century, banking, business, and government bodies are driven not by the choice but the necessity of having ethical hackers.

For very good and obvious reasons, ethical hacking has become a significant part of industries and organizations all across the globe.

Thanks for reading!

Role of Ethical Hacking in Cyber Security

medium_role-of-ethical-hacking-in-cyber-security.jpg

small_role-of-ethical-hacking-in-cyber-security.jpg

thumbnail_role-of-ethical-hacking-in-cyber-security.jpg


>Hasura launched an open-source GraphQL engine that connects to various databases, serverless functions, and microservices and auto-generates a production-ready GraphQL backend.



**T**he Hasura GraphQL-based engine lets you configure event triggers for the Postgres database within minutes and helps to build instant and real-time GraphQL applications backed by PostgreSQL. While designing the GraphQL engine, team Hasura subjected to fulfill two main objectives in the nutshell, i.e.



- To make it compatible to run anywhere, including a local machine, Heroku free tier or on Google, Amazon, and Microsoft servers.
- To extract maximum performance/dollar.



It can accept client-app requests and easily evolve with your needs by processing 1000 queries/second (approx.), consuming only 50MB of RAM storage. The Hasura GraphQL engine contains a cutting-edge Postgres ecosystem with your favorite extensions and scales up to 1 million active GraphQL subscriptions and live-queries.

This blog is about giving a quick overview of the Hasura engine, its architecture, features, and use-cases. To get a better understanding, you must read it till the end-



## Features of Hasura GraphQL Engine



Hasura comes with a wide string of features, as given under-



- **Out-of-box Powerful Queries:** Auto generating of a range of all possible queries, built-in filtering, bulk insert, delete, update, and insert mutations.
- **Dynamic access control system integrating with your auth:** Creating field-level allow and deny rules, role-based schemas, and integration with existing auth system.
- **Trigger Webhooks on Database Events:** Build asynchronous and reactive apps, work with live and existing databases, capturing & delivering of events.

![hasura_1.gif](https://backend.habilelabs.io/uploads/hasura_1_094663db19.gif)

- **Adding to an Existing, Live PostgreSQL database:** You can add Hasura to any existing Postgres database as-it-is by using Heroku, Kubernetes, or Docker and get an all-set GraphQL API almost instantly.
- **Realtime with GraphQL subscriptions & live-queries:** Conversion of any GraphQL query to a live query by using subscriptions.
- **Restrict access in production:** Allow-list for safe queries stored in the metadata of the engine, execute only those particular queries that are present in the list.
- **Merge Remote GraphQL Schemas:** Seamless merging of remote schemas behind a single GraphQL API, using them for custom business logic, delegating to HTTP APIs, etc.
- **Query Performance Analysis:** Identification and fixing of performance holdups in the console.
- GraphQL Tight Integration
- Pre-configured API Gateway
- Admin UI & Schema Migrations

## Getting Started with Hasura



Hasura helps you setup the GraphQL server with the lease of hassle and you can start building applications within a fraction of time.



In order to use the Hasura GraphQL engine, first, we need to run the engine having access to the PostgreSQL database and then use the console, that connects to the GraphQL engine, to build schema and run queries and mutations.


![hasura_1.jpg](https://backend.habilelabs.io/uploads/hasura_1_88f406cf79.jpg)


The Hasura GraphQL engine automatically generates a GraphQL schema in the Postgres database and process queries, mutations, and subscriptions.



Let’s see what actually the [Hasura GraphQL engine](https://hasura.io/docs/1.0/graphql/manual/how-it-works/index.html) does-


### Schema Generation:


When one tracks a Postgres table/view in Hasura, the GraphQL engine generates GraphQL schema components and create a connection among them.



**Tables:** While tracking Postgres tables, it routinely generates the following schema components, -

- A GraphQL type definition
- A query and subscription field with where, order_by, limit and offset argument.
- An insert mutation field with on_conflict argument to support upsert and bulk inserts
- An update and delete mutation field with where argument to support majority updates and deletes.


**Views:** While tracking Postgres views, the Hasura GraphQL engine generates the same components as does for the table, except for mutation fields.



**Relationships:** While creating a relationship between table/view with another table/view, the Hasura GraphQL engine-

- Fetches nesting objects and extend the table/view by adding a reference.
- Augments order_byand whereclauses to filter and sort nested objects.

### Metadata:



All the information about schema generation is been stored as ‘Metadata’ by the Hasura GraphQL engine in its catalog.



Whenever one performs certain actions on the console, the Hasura GraphQL engine records it in the hasura_metadata_schema which is a hdb_catalog schema in the Postgres database. For instance, when a table is being tracked, an entry as hdb_catalog.hdb_table table is created in the Postgres database and quite similarly there are more tables to track functions, event triggers, relationships, and remote schemas.



This metadata can be exported in JSON format as hasura_metadata.jsonfile as a representation of the state of Hasura.


## GraphQL & Microservices with Hasura



Hasura provides a way of accelerating GraphQL API adoption and application developing productivity on your [microservices & serverless functions](https://hasura.io/blog/graphql-microservices-with-hasura/). It can connect and configure relationships across databases, external SaaS APIs, “mid-tier” microservices, and event-driven business logic without any upstream changes and picturize a unified GraphQL API.



It takes in metadata configuration at runtime so that the developers can map API resources and upstream data-models to an interconnected graph.


![hasura.gif](https://backend.habilelabs.io/uploads/hasura_f386592fc8.gif)


## End-to-End GraphQL Architecture Using Hasura Actions



Actions are user-defined mutations that seamlessly integrate and migrate an event-driven business logic into your GraphQL APIs. Team Hasura thought about using these ‘Actions’ in event-driven patterns in which the ‘read-models’ and ‘write-models’ are kept separate from each other. This architecture is able to deal with increasing complexity.



Hasura also helps in creating custom GraphQL mutation specifications which are converted to events and further delivered to microservices & serverless functions. The Hasura GraphQL engine interacts with microservices under [event-driven logic workflow](https://hasura.io/blog/introducing-actions/) and allows easier decoupling and fault-tolerance without compromising on scalability.


![hasura_2.jpg](https://backend.habilelabs.io/uploads/hasura_2_7d694f8351.jpg)

## Benefits & Use Cases of Hasura Actions-



Hasura Actions have several benefits over backend workflow, such as-



- Completely independent event handlers thus, no need to care about GraphQL types, schemas, and relationships.
- Easier event-driven backends building without much operational and setup efforts
Convenient GraphQL mutations
- Switching between sync & async modes considering the best for API consumers without burdening the event handlers



## Merging Remote Schemas in Hasura



The Hasura GraphQL Engine merges schemas from multiple remote GraphQL servers and stitches them together at a single endpoint in the form of a unified GraphQL API. All you have to do is to create a GraphQL service and then provide its endpoint to Hasura. The GraphQL services provide support to all languages/frameworks.


![hasura_3.jpg](https://backend.habilelabs.io/uploads/hasura_3_7bd7ef2ff0.jpg)



The directory comprises GraphQL backend boilerplates (regular as well as serverless) for custom GraphQL servers using various languages, deployment runtimes, and serverless platforms-



- Node.js: AWS, Azure, Google
- Python: Zeit
- Rust



The remote schemas have several use cases, that include various supporting features for payments, customizing mutations, and fetching dissimilar data from distinct sources.



Due to faster query processing, easier setup of permissions and relationships, blazing-fast production, and great UX, it is gaining huge popularity among fortune 500 companies.



#### Reference-


https://hasura.io/

https://hasura.io/docs/

https://github.com/hasura/graphql-engine/


medium_hasura_feature.jpg

small_hasura_feature.jpg

thumbnail_hasura_feature.jpg

Build real-time and powerful GraphQL APIs in an instant.

Hasura - An Open-Source GraphQL Engine

Remote Working, as the term suggests, means to work remotely- _“When individuals and teams are not required to show up at a specific physical location on a regular basis to work and they can work from anywhere they want to”_.

Remote working might be favorable when it comes to a few employees but shifting the whole business to remote, now that is something most companies try to avoid unless it is mandatory and it’s mostly preferred only in times of crisis. Though this mode of working is quite difficult in some areas of professional activity, it is a high time due to COVID-19 crisis that requires us to adopt it.


This blog is all about what challenges one might face during working from home and a few tips to maintain productivity-

## Common Challenges While Working Remotely


While working from home can be a relief, it can be quite challenging as well. Employees often struggle to adjust to this new working mode and face several difficulties, such as-

- Maintaining focus & engagement
- Dealing with distractions
- Keeping up morale
- Too much work to handle


A survey found the most common challenges employees face during working remotely-

![effective-remote-working-performance-management-tips-1.jpg](https://backend.habilelabs.io/uploads/effective_remote_working_performance_management_tips_1_3726e0137b.jpg)


However, these challenges can be vanquished by following a performance management strategy. Perhaps, you should refer to the Effective Remote Working Tips described in the subsequent paragraph-

## Performance Management in Remote Working


A major advantage of working from home is that the time tracking tool would speak about your hard work and dedication in a way, which is not possible in your day-to-day routine.

It’s been said that remote work diminishes the productivity and efficiency of the workers. It might be true in some cases, but on a whole, it’s more like a miscalculation. Yes, there are some disadvantages of remote working but this perception varies from person to person.


Here’re a few tips about **‘How to Stay Productive During Remote Working’**-

### #Figure Out a Schedule That Works for You


Figure out a routine that is convenient for you and stick to it. Fix a timing for everything from working hours to tea and lunch breaks. Taking breaks at regular intervals is important to release work anxiety and boredom.

In my case, I prefer to work half time in the morning and remaining in the evening, taking a proper break in the day-time. It helps me lift my spirits. Working continuously for 8 to 9 hours?? That doesn’t really work for me.

Maybe you like to work at night, that’s fine. Go for it! But while you’re working, try to put your hundred percent effort and concentration into it.

### #Find A Dedicated Workspace


Working remotely comes with several privileges such as working whenever, wherever and however one wants to. But it isn’t, at all, necessary to take it literally.

Working at the couch, bed, dining table, etc. seems fine but for a short while. Whereas, for long-term remote working, it becomes important to seek out a place that is invested for working only, where our mind feels ready and active to work, and the place makes you feel like a virtual version of office.

Having a dedicated workspace can act as a catalyst for your work. Find out a space at your home, maybe a spare room or a pair of table and chair in a corner, and create yourself a home-office where you can dedicate yourself to work.


### #Set Clear Goals & Timelines


Plan your tasks a day before and try to finish them in the given timelines only. Challenge yourself to complete that loads of work in a short span of time. It will keep you focused on the work. Before switching on the laptop, you should better have tasks in your mind because an aimless mind leads nowhere.

Keep yourself busy. Recently, I came to know about this bizarre fact that _“If you want something done, ask a busy person”_. So contradicting, but true. You’d have experienced yourself that busier you are, more productive you are. Whatever comes to your desk, you just want to finish it fast. It’s like Newton’s Law of Inertia- _Things in motion, want to stay in motion. Things at rest, want to stay at rest_.

### #Working Outside Home Can Do Wonders


Yes, that’s true. Just because you’re working from home, you don’t need to work only from home. Going out for a while in quiet evenings with your laptop to a nearby cafe shop or other similar places to work can enhance your mood greatly and keep your morale high. (Not in these COVID-19 times, of course!!)

However, in this lockdown period, working in the garden or in the balcony would be a good option too. Well, there is just this one place you should avoid- the bed. It’s fine if you’re sick but one should avoid using the bed as a workspace as the results come out are least productive.

## General Report About Remote Working Worldwide


Remote working is comparatively more common amongst youngster staff than others and the case is same across the continents.

Iwo Szapar, CEO of Remote-How says that – Employees in their 20s and mid-30s value meaningful experiences more than possessions, and they want to be able to pay attention to all the important aspects of their lives.

A survey report of 2019 found that-

- 61% of companies, globally, have some sort of remote working (Work from home) policy in their manual.
- The percentage of remote working has been increased by 140% since 2005.
- 80% employees of Japan are desirous to work from home.
- 4.3 million people in USA work remotely almost half the time.
- 85% of 15000 global businesses confirm that location flexibility has increased the productivity of their employees.


## Conclusion:


As almost the whole world is under lockdown, the businesses are coerced to operate from home in order to lower the corona outbreak. Following the lockdown, all of the Habilelabs members are working from home to safeguard themselves from the very unfortunate COVID-19 outbreak and contribute their bit in the lockdown period.

Well, I hope you would find this blog interesting.


Thanks for Reading!!

Effective Remote Working – Performance Management Tips

medium_effective-remote-working-performance-management-tips.jpg

small_effective-remote-working-performance-management-tips.jpg

thumbnail_effective-remote-working-performance-management-tips.jpg

**C**OVID-19 (Corona Virus Disease 2019) pandemic has unleashed itself upon the world and in a small period of just 2 months, has broken down the backbone of global economy.



Started as an epidemic in Wuhan of China, it has now turned into a global crisis. This outbreak was so sudden that nobody was prepared for it, even the Supreme Power (United States of America) was unable to recognize its devastating consequences.



By the time, the World Health Organization (WHO) warned the world about it and declared it a pandemic, it was too late. It had already set its foot across many continents. Though South Korea and China seem to have flattened the curve, the wrath of COVID-19 has just begun in other countries.



The situation has aroused fear and frustration amongst the population all around the world and the small business companies are left in a state of uncertainty, having both new opportunities and risks.



In the midst of such a crisis, several questions are occupying the minds of SMEs such as how to survive this outbreak? Are they even going to survive it? How does it going to impact their business and market? What can be expected from the post-pandemic market?

This blog is an effort to provide appropriate answers to all these suspicions along with stats derived by various surveys and researches-



## Impact of COVID-19 Crisis on Small Businesses-



>“The global outbreak of corona-virus came with a huge impact on various industries. From tailored product launches, cancellation or delay of major events, supply chain halted (shipments from China mainland), production delays to many other influencing factors.”



COVID-19 is as much contagious economically as it is medically. These are the distressing times for small businesses, daily workers, and small manufacturing units as the effects of this outbreak are catastrophic for them.



The economy is crashing, companies are shutting down, and people are losing their jobs. It will not be wrong to assume that the whole world is on the verge of falling down into the trench of unemployment and poverty.



According to a Goldman Sachs survey conducted in the USA on more than 1500 small-sized businesses and here’re the results (not very enthusiastic at all)-



- 51% say their business will only be able to continue to operate for 0–3 months.
- 96% say they have already been impacted by the outbreak.
- 75% say their business has been impacted by fewer sales.
- 53% say their employees don’t have the ability to telecommute.
- 13% are confident about their contingency plans to maintain.


If proper steps were not taken against it at the right time, the world’s economies would face a severe recession they had never seen before, even in the face of World Wars and other global crises.



Assuming that even if proper actions are taken, it may take years for the economy to recover the damage and reach to normalcy. This is the case for G7 countries, the situation will be worse for developing countries.



>“Michael Hicks, an economist at Ball State University, calculates that 28 million jobs or one in six U.S. workers are going to lose their jobs.”



India, being a developing country (and at an amazingly fast pace), had been expecting to achieve a $5 trillion economy by 2025 with a huge contribution from the MSMEs, could suffer substantial losses from the COVID-19 outbreak.

## How Can Small Business Survive Amidst Corona Outbreak??



Businesses are shuttering worldwide, and others are afraid of whether they will survive this outbreak or not. Only those who have gone digital are operating well which includes IT & software, digital marketing, and equivalent companies.



Here’re the few steps the small businesses can take to last in this pandemic period-



- Organizations are in the need for digital transformation. It’s time to shift to complete remote-working or work-from-home through various digital platforms to minimize business disruption.
- To remain in the market, businesses need to engage more with social media.
- Brands can channelize their businesses towards supporting healthcare professionals who are fighting against COVID-19 and advertising about precautions against it.
- Businesses should adopt new ways of marketing and agile methods to address customer needs.



Well, the businesses can expect great help from the respective governments. Let’s check what the world leaders have planned to handle this crisis-



## Government Aid Plans for SMEs



If your business has faced a great deal of loss and struggling to gather funds, it might be a relief that it’s not all over yet, the governments all over the world will be there to back you up.



The governments, worldwide, have come forward and announced proper financial aids and legislation to provide low-interest federal disaster loans amid this pandemic to help out the SMEs and restore their economies.

For instance,



- The US [Small Business Administration](https://www.sba.gov/disaster-assistance/coronavirus-covid-19) (SBA) is going to offer Economic Injury Disaster Loan assistance for small businesses to help them recover from the economic injuries caused by COVID-19. Also, the [CARES Act](https://www.usa.gov/funding-options) (Coronavirus Aid, Relief, and Economic Security) has been signed to help individuals as well as businesses affected by the coronavirus pandemic.


>“There are speculations that the US is looking at a Senate vote to roll out a $2 trillion package, touted as one of the largest rescue packages in American history.”



- Italy has come up with an [Emergency Plan](https://ec.europa.eu/commission/presscorner/detail/en/ip_20_530) of 28 billion dollars to recover from economical losses. The European Commission has approved various support measures and aid rules for the Italian States such as direct grants, tax advantages, loan approval for companies, subsidized public loans, and short-term export credit insurance.


- Indonesia announced a total of $733 billion stimulus package to rescue its travel, aviation, and property industries.

## What Can Be Expected from The Post-Pandemic Market?



What chaos this corona outbreak will lead the world into is, indeed, hard to imagine. But there is a way to have a quick look into the future-market by getting insights about the market and economic status of China.



Yes, we have a good example of China before us, we can learn a few things from it and can take essential measures to minimize the losses.



The ESIEC (Enterprise Survey for Innovation an Entrepreneurship in China) team led a rapid follow-up survey that reflects the impact of COVID-19 upon the small and medium-sized businesses in China.



According to the team,



>“Our survey shows that COVID-19 has landed a heavy blow on Chinese SMEs, with huge differential effects across sectors and regions.”



Let’s see what the survey says -



- 14% of the surveyed firms will not last more than a month and 50% not more than 3 months due to a lack of cash flow.
- 80% of the surveyed firms haven’t resumed work, at all, and 40% of those who are going to resume their work, are not able to determine the eventual timeframe for resumption.
- The export firms in China have suffered more compared to non-export firms because they provide employment for many migrants. Being one of the biggest exporters, the implications are huge on the global supply-chain stability of this export slowdown. There’s been a 17.4% dropdown of China’s exports in the year 2020.
- While upstream firms are suffering due to labor shortages, the downstream firms are facing more grave challenges due to supply-chain halt and consumer demands.

## Final Words-



The COVID-19 has emerged fiercely at unprecedented speed on the global level. Almost the whole world is under lockdown, as a result, the commercial and business activities have been seriously affected.



It seems like another time in another world when everything was good and the world economy was growing just fine and a small virus, appeared out of nowhere, derailed the global economy just in a few months.



With these fine final words, cited by an economist at Bangkok University, I’ll end this blog-



The economy is a complex system that faces shocks, stumbles a bit, and returns to its original state or even better state. It’s like elastic, stretch it and leave, it will come to its original state. How many times have the world economy faced natural disasters and wars? Each time it gets small glitches here and there but, in the end, it rebounds and grows more expansive than ever. We can learn a lot from Japan, faced an atomic bomb, tsunami, and several other disasters, but today, it is listed among the most developed countries.



>“We may lose some momentum, but after a short stumble, we push forward.”



Thanks for reading this blog!!

medium_post-covid-19-pandemic_feature.jpg

small_post-covid-19-pandemic_feature.jpg

thumbnail_post-covid-19-pandemic_feature.jpg

Impact of COVID-19 upon Small Businesses

Python is the simplest and easiest programming language, ever found, in the programming world. Everything about it is so simple, its syntax, commands, libraries. You can literally understand the code by reading it. Quite convenient, isn’t it??

It’s a module-rich programming language that has a wide stack of applications in the IT world. You see, this is the reason it’s been ruling over the developer’s hearts. If you’ve switched to Python after spending years on other languages, you’re going to love it.

But, apart from its simplicity, it has other benefits as well. Python is considered as one of the best Data Analytics tools for Big Data due to a large set of data processing libraries it has in-store for you. That is why this branch of python is also known as ‘Python Data Analytics’.

In this blog, I’ve curated **5 Best Python Libraries for Data Science** and going to give a brief about them-


## NumPy


Numerical Python, abbreviated as NumPy, is the most popular Machine Learning package for scientific computation and data analytics in Python. It’s a general-purpose, N-dimensional array processing package.

You would be aware that Python does not provide an array data structure but with the NumPy library, one can create and perform all kinds of manipulations on an array.


![best-python-libraries-for-data-science – 1.jpg](https://backend.habilelabs.io/uploads/best_python_libraries_for_data_science_1_847dd01fe2.jpg)


It is to be noted that a Python list may contain any object type whether it is a character, number, tuple, whereas, the multi-dimensional NumPy arrays are homogeneous, i.e. they can contain only one object type at a time. Though, the advantage with these same object types is that it makes the comprehension of the required storage size for the array easier.

#### Features & Applications-


- Powerful N-dimensional Array Object
- Tools that integrate C/C++ and Fortran Code
- Sophisticated Functions
- Useful Linear Algebra, Fourier Transform, and Random Number Capabilities
- Seamless Integration of Various Databases

## Pandas

Pandas, stands for Python Data Analysis, is an open-source Python library package that contains fast, flexible, high-performance, and easy-to-use data analysis tools to perform various computing operations on data in Python programming language.

The variety of functionalities it possesses, i.e. data reading, manipulation, aggregation, and visualization, makes it the perfect tool to be used for data analysis in Machine Learning and Big Data Analytics.

>‘Pandas is a Python package providing fast, flexible, and expressive data structures designed to make working with structured (tabular, multidimensional, potentially heterogeneous) and time-series data both easy and intuitive.’

It is well suited for heterogeneous object types, ordered as well as the disordered, tabular, arbitrary matrix, and other different forms of statistical and observational data sets.

#### Features and Functions-


- Explicit & Automatic Data Alignment
- Size Mutability
- Handling of Missing Data
- Robust Input/ Output tools for Uploading Data
- Performing of Split-Apply-Combine Operations on Data
- Label-Based Slicing, Subsetting, and Indexing of Large Datasets
- Intuitive Joining and Merging of Datasets
- Data Plotting

## TensorFlow


TensorFlow is an open-source, end-to-end platform used to create and deploy Machine Learning powered applications. It’s comprehensive libraries, the wide ecosystem of tools and active community resources let the developers push the limits beyond ML and help them to build Deep Learning models.

Its architecture consists of three main parts-

- Data Preprocessing
- Model Building
- Training and Estimation of the Model


TensorFlow manages all aspects of the ML system with its different APIs. It was first developed to work on an Artificial Intelligence (AI) model. The term ‘TensorFlow’ was derived from its core framework, i.e. Tensor. A tensor is an N-dimensional matrix that represents all types of data; the shape of this data defines the dimensionality of the matrix.


![best-python-libraries-for-data-science – 2.jpg](https://backend.habilelabs.io/uploads/best_python_libraries_for_data_science_2_ad02a5e86a.jpg)


The specialty of the TensorFlow library is that it uses Graph Computation- _It allows the developer to visualize the construction of the neural network with Tensorboard._

#### Its key features are-



- Easy Model Building
- Simple & Flexible Architecture
- Intuitive High-Level APIs
- Easy Deployment of Models on Cloud
- Robust ML Production Anywhere
- Support Deep Neural Networks and ML Concepts
- GPU/CPU Computing
- High Computation Scalability Across Huge Data Sets
- It has a large community on GitHub compared to other frameworks.

## SciPy


SciPy, also known as Scientific Python, is a collection of mathematical functions and algorithms and uses NumPy extension for more numerical operations. It contains several domain-specific modules and toolboxes that are used in signal and image processing, statistics, linear algebra, interpolation, optimization, integration, special functions, Fourier Transform, etc.

SciPy provides high-level classes and commands to the user for visualizing and manipulating data sets. Apart from that, it also provides an additional benefit of making powerful and robust programming language to develop modern programs and applications.

It’s a great module for data processing and fits well in the list of system-prototyping environment rivaling systems, such as MATLAB, Octave, R-Lab, IDL, and SciLab.

#### Features & Applications:



- Collection of Numerical Algorithms and Domain-Specific Toolboxes.
- Multidimensional Image Processing
- Built-in Functions for Solving Integral and Differential Equations
- Data Processing, Manipulation, and Visualization
- Parallel Programming to Web and Data-Base Subroutines

## Matplotlib


While the other libraries, mentioned above, are used to manipulate, operate and visualize the data sets, Matplotlib is specifically built for Data Visualization only.

>“Matplotlib is a comprehensive MATLAB-style data visualization library for creating static, animated, and interactive visualizations in Python.”

In simple words, Matplotlib is a data plotting and graphing library in Python that can generate a wide variety of different charts and graphs of various formats, such as scatter graphs, line charts, bar charts, heat maps, pie charts, and 3D plots. It processes the data by visualizing or plotting it in the form of a graph, diagram or chart.

#### Features:

- Support Animations and Interactive Displays
- Constructing of a Variety of Analytical Graphs

## Conclusion:


Apart from these five libraries, as discussed above, there are several other wonderful Python library modules available for data science that are special in their own functionalities and must be known to you and the world. If you passionately want to become a Data Science Specialist then the more data processing libraries you learn, the better.

Hope this article is useful for you. As you know Python is a popular programming language and you can get the best 10 tricks and facts about python programming easily by click on it.

Thank you for reading!! If you have like it, hit the like button.

medium_best-python-libraries-for-data-science.jpg

small_best-python-libraries-for-data-science.jpg

thumbnail_best-python-libraries-for-data-science.jpg

5 Best Python Libraries for Data Science

**R**eact, the most popular front-end framework nowadays, and for good reasons, let alone its virtual DOM, one-way data binding, simplicity, and several other amazing features.



Preact, on the other hand, is a clever approach to come around with a tiny core-value proposition of React, having the same API composition, but way faster and easier than React.



>“The objective behind developing PreactJS is to offer memory efficiency, better performance, and closer compatibility with React.”



Over the course of a few years, a wide spectrum of websites from small open-source projects to the large MNCs have managed to switch to Preact, that includes Google, Uber, Pepsi, Financial Times, Tencent QQ, Housing.com, The New York Times, Dailymotion, Groupon, and the list goes on and on.

Here, we’ll discuss a few things about Preact-



## What is Preact??


Preact is a JavaScript library, known as _“Fast 3kb React Alternative with Same ES6 API” _or _‘Drop-in replacement for React’_, created by Jason Miller. The most interesting thing about this library is its small size. The particular ‘3kb alternative’ term is used to indicate its 3kb size.




Regardless of its smaller size, it claims to perform better than React. It is a React clone library that is identical to React in terms of modern API, Components & Virtual DOM. Swapping React with Preact is very easy and that too without worrying about performance attenuation.


## What Does Preact has In-Store for You?



You would be surprised to see how easy it is to use Preact. All you have to do is to install Preact and preact-compat and alias this preact-compat in your code with React. (Here, compat stands for compatibility)


>“preact-compat is a 2kb compatibility layer that allows you to leverage the many libraries of the React ecosystem and use them with Preact.”



This aliasing enables the React ecosystem to be used in your application. You can import and use react modules & libraries, as many as you want, in your Preact project. That’s incredible, isn’t it??



Here’s a small list of features that Preact has in-store for you-



- Similar React API & Patterns
- ES6 Class Components: Classes that expressively define stateful components.
- Higher-order Components: Return other components from render()
- Stateless Pure Functional Components: Functions that accept props as arguments and return JSX/VDOM
- Extensive React compatibility
- Virtual DOM Diffing: Preact’s diff is simple, effective, and extremely fast
- Supports all modern browsers and IE11+
- Highly Optimized Algorithm
- Seamless Server-Side Rendering
- Component and Element Recycling
- Transparent Asynchronous Rendering with a Pluggable Scheduler
- Instant Production-Grade App Setup with Preact CLI

## Features of Preact



Preact supports almost all the modern browsers nicely, such as- Chrome, Firefox, Safari, Edge, and IE11+.



Due to its plethora of plugins and add-ons, companies are taking a quick shift to it. It aims to deliver a few key goals, as given below-



- **Lightweight:** The feature that makes it highly popular is its considerably smaller size. To your surprise, the largest part of the application will be your code. That means, without stressing about keeping the framework under control, you’ll have a lot of time for coding only.
- **High Performance:** Preact is one of the fastest virtual DOM libraries. The qualities that make it faster is not just its tiny size but also the simple and predictable diff implementation that makes it faster.
- **Embeddable:** Preact can be embedded into a widget and by applying some tools, you can build an app without complex integration.
- **Instantly Productive:** Productivity increases many times when you don’t have to work on its size. Being lightweight, it spares your efforts and gets you productive instantly.
- **Ecosystem Compatible:** By aliasing React to Preact, you can make use of thousands of components from the vast React ecosystem.
- **Portability:** The virtual DOM component can easily be taken to other places, which could not be done otherwise.



## How Preact Differs from React??


While discussing ‘what makes Preact different from React’, the very first and most obvious difference is its size. When React weight 45kb (around), Preact is just 3kb.



However, there are some other reasons that add up to the differences. Though, many of them are either frivolous or can be removed completely by using the compatibility layer ‘preact-compat’.



Let’s see what are differences in this so-called replica of React-



- Instead of className, you can just use classfor CSS Classes.
- this.state and this.props have been passed to render().
- The h() function turn JSX into a ‘Preact-understandable’ structure.
- Element and component pooling is possible in Preact.
- setTimeout(1) for batching of DOM updates, debounced or collated.
- PropType is not available in Preact’s core, though supported in preact-compat.
- Preact components do not implement childContextTypes or contextTypes, receive all context entries from getChildContext()

## Starting Up with Preact CLI



Preact CLI is the Command-Line Interface that runs in the terminal of your system and helps you get started with building modern preact applications instantly, without any configuration. It is built upon the open-source tools such as Webpack, Terser, Babel, etc.



In order to get started with [Preact CLI](https://github.com/preactjs/preact-cli/), you don’t need any prior knowledge and this, the simplicity, makes it the most preferred way to use Preact above all. You’ll get everything, right from hot reloading to critical CSS inlining, organized here for you. You can expect excellent and amazing performance from Preact projects with it.



#### You can install it with a simple command-

Let’s move further and bring the out-of-box features of it in the limelight-



- Fully Automatic Code-Splitting
- Differential JavaScript Serving
- PRPL Pattern Support for Efficient Loading
- Pre-rendering for a fast Time to First Paint
- Support for Sass, Stylus, LESS and CSS Modules
- Hot Module Replacement
- Automatic App Mounting & Debug Helpers

## Switching from React to Preact



Preact is an exquisite choice to develop progressive and interactive web applications. The small size of Preact is preferable when you’re on a tight loading performance budget. The large bundles of JS lead to stretch the loading times, but by shorting down the library code by Preact, it loads quicker.



Switching to Preact from React can shave off multiple KBs in your project and makes it faster by enhancing the interactivity in one RTT.



There are basically two approaches to switch from React to Preact, that is-



- Setting up & aliasing preact-compat
- Switching imports to Preact and removing incompatible code


In your existing React app, you can try out Preact using the preact-compat compatibility layer. It lets you continue with your React/React DOM code with slight or no changes at all in the codebase.



This preact-compat package increases the bundle size by 2kb only and provides a major advantage by supporting the vast ecosystem of React modules. It enables you to work with Preact just like react and react-dom.


The process includes a few steps-

### #Installing & Setup

### #Aliasing React to Preact via Webpack


```
{
"resolve": {
  "alias": {
    "react": "preact-compat",
    "react-dom": "preact-compat"
    }
  }
}
```

## A Simple ‘Hello World’ App



Let’s make a simple ‘Hello World’ app. Our end goal here is to have an app that renders a text ‘Hello World’-




```
#With JSX
const App = <h1>Hello World!</h1>;      
#Without JSX
const App = h('h1', null, 'Hello World');
#Injecting the app into DOM
render(App, document.body);
```

Congrats, we’re done here. You’ve built your first Preact app.

## Upgrading to Preact X



Recently, Preact Team took a huge step by releasing the newest version, i.e., [Preact X](https://preactjs.com/guide/v10/whats-new), in the series after Preact 8.x. In a nutshell, it’s a tiny, complete and feature-rich package.



According to the team-


>“We’ve rethought every bit and byte of our code and added a plethora of major features in the process. The same goes for compatibility enhancements with the React ecosystem to support more third-party libraries.”



It brings a bunch of new and exciting features, some of them are mentioned here-

- **Fragments:** Special components that, without an extra wrapping DOM element, render children elements in line with the parent elements. Also, they allow returning multiple nodes from render.
- **Hooks:** Make logic-sharing within the components easier and can be imported via preact/hooks .
- **preact-compat** has moved to the core repository and now can be imported via preact/compat (note the slash).
- **componentDidCatch:** Enable catching and handling of errors within render.


There are so many other fixes in Preact 8.x, if you’ve filed to work with a library then give it a try with Preact X, I’m sure you won’t be disappointed.



Well, folks, I’ve tried to cover almost all the important matters (in-short) in this blog. Still, there’s so much more to know and learn about Preact. Whatever we learn can never be enough.

>“Knowledge is infinite and indestructible. It can never be destroyed and remains in this universe in one or other forms.”




## Final Words:


Are you confused about what to use, React or Preact?? Well, it completely depends upon your project requirements. Both of them have their own set of features and functionalities, though quite similar, but unlike enough.



You can use React for large scale apps, complex projects or other heavy stuff, whereas, the opposite is true in the case of Preact. It would work better for smaller and lighter apps. There is no point in building a complex application with Preact and importing several modules from the React ecosystem, wouldn’t it be better to just finish it with React??



Thanks for reading till the very end!! If you liked it then go further and reach out to our website [https://www.habilelabs.io/blog/ ](https://www.habilelabs.io/blog/ ) for more similar stuff.

medium_preact-a-clever-alternative-of-react.jpg

small_preact-a-clever-alternative-of-react.jpg

thumbnail_preact-a-clever-alternative-of-react.jpg

Preact- A Clever Alternative of React

Decorators are literally used to decorate the code with clean syntax. They are simple functions and placed immediately before the code that is being decorated.

## Overview About Decorators

- These Decorators dynamically change the functionality of property or function.
- They are identified with the symbol ‘@’ as prefixed before a method or a variable name.
- Whenever we want to use any decorator, we must need to explicitly import it from ‘lwc’ as shown below:


```
import {LightningElement, decoratorName} from 'lwc';
```

In Lightning Web Components, we are having three types of Decorators.

-  @api
-  @track
-  @wire


Here, we have shown in detail how to decorate a method or a property-

## Decoration with a Method


```
@decoratorName
getMethodName()
{
    return somevalue;
}
Ex: @track
getName()
{
return name;
}
```


```
@decoratorName propertyName='propertyValue';
Ex: @api name = ‘John’;
```

### @api:
- With @api, we can expose a public property.
- Public properties are reactive.
- If the value of public property changes, the component re-renders., so when a component is re-rendered, all the expressions used in the template are re-evaluated once again.


Import the @api decorator from lwc as shown below:


```
import { LightningElement, api } from 'lwc';
export default class TodoItem extends LightningElement     {
    @api name= 'John';
}
```

- Parent component can make use of the Public Property.
- A component that declares a public property can set only its default value.
- A parent component that uses the child component in its markup can set the child component’s public property value.


Let us understand @api decorator with the help of an example:

We have 2 components:

- api_example_child
- api_example_parent


#### api_example_child –
**In .html-**

![salesforce-decorators-in-lightning-web-components-1.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_1_1b3ae817b7.jpg)

**In .js-**

![salesforce-decorators-in-lightning-web-components-2.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_2_e0cd721ccc.jpg)

Here, we have a course as public property as it is decorated with the @api course. Now, parent components can make use of this Public Property course.

#### api_example_parent–
**In .html-**

![salesforce-decorators-in-lightning-web-components-3.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_3_c75e8671da.jpg)

Here, Course is the public property (i.e  @api) of the child component so its values can only be passed by parent components as shown above.

**In .js-**

![salesforce-decorators-in-lightning-web-components-4.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_4_5229d8ff07.jpg)

Final Output:

![salesforce-decorators-in-lightning-web-components-5.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_5_7d672a9d89.jpg)

### @track :

- With @track, we can expose a Private reactive property.
- Here, Reactive means if there is any change in JavaScript property, the component will re-render and all the expressions used in the template will be re-evaluated again.
- The properties, which must be used within the component where it’s been defined, are termed as Private Properties.
- When we use the @track decorator, we must import it explicitly from ‘lwc’ as shown below.


```
import { LightningElement, track } from 'lwc';
```

Example:

We have a component named as track_example–

**In .html-**

![salesforce-decorators-in-lightning-web-components-6.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_6_eb161ceaf4.jpg)

**In .js-**
![salesforce-decorators-in-lightning-web-components-7.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_7_21023462d7.jpg)

Here,

- Description is private reactive property as it is declared with @track. So, it can only be changed with-in the component where it is defined. (track_example).
- The default value for description is ‘Lightning Web Component Decorators’. So, when we click on the ‘Update Message’ button on the UI, the description property value is getting updated.

### Output

![salesforce-decorators-in-lightning-web-components-8.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_8_9ba135898c.jpg)
![salesforce-decorators-in-lightning-web-components-9.jpg](https://backend.habilelabs.io/uploads/salesforce_decorators_in_lightning_web_components_9_8095de060a.jpg)

Then, Click on ‘Update Message’ Button.

### @wire:


- By nature, it is reactive.
- When inside the Lightning web component, we need data from Salesforce, we go with @wire as it is used to read the salesforce data.
- When we use the @wire decorator, we must import it explicitly from ‘lwc’ as shown below.


```
import { LightningElement, wire} from 'lwc';
```

- While using the @wire to call the apex method from a class, the apex method must always be annotated with @AuraEnabled(cacheable=true).


```
public class wireFromLWC {
@auraEnabled(cacheable = true)
public static string retrunName(){
	return ‘John’;
}
}
```

- Those apex methods which are not ‘cacheable=true’ can’t be called via @wire decorator.
- The data returned by apex method can’t be modified within the .js file.
- The refreshApex functionality can only be used with @wire property or function.

## Conclusion:
In this blog, we have learned about the decorators used in the Lightning Web Components (LWC) that can add the functionality to a method or a property as per the business requirements.

All the above-mentioned decorators are unique to LWC. I hope that you find this information beneficial for your next project.

Thank You for reading!

Salesforce – Decorators in Lightning Web Components

medium_salesforce-decorators-in-lightning-web-components.jpg

small_salesforce-decorators-in-lightning-web-components.jpg

thumbnail_salesforce-decorators-in-lightning-web-components.jpg

I am working on a project where we have a React web app, React Native app, and another React Native app which is built using expo. All these three projects share a common backend, service layer, and redux logic.



There are some other common components as well that can be used across react native and expo app.



So, we needed an architecture to avoid duplicate code across the projects. I stopped for a moment and thought, what could be better than the monorepo architecture? It will also solve the problem stated above.



The Monorepo architecture provides the leverage to reuse much of the service layer, redux related code, and other shareable pieces of code across the components.



In the tutorial below, I will show step by step how can you use react web, react native, and react native Expo project in one monorepo.

Let’s check out what exactly is a Monorepo??



## Monorepo??


As stated by Wikipedia-

>A monorepo, syllabic abbreviation of monolithic repository, is a software development strategy where code for many projects is stored in the same repository.


![react-native-react-web_1.jpg](https://backend.habilelabs.io/uploads/react_native_react_web_1_e80c604f85.jpg)


In simple words, monorepo contains more than one project code, which allows us to share code between many projects. Each project can have its own build and deployment system or can share build systems.



Many companies, including Google, Twitter, Facebook, etc. follow this process.



Now, I will discuss all the things that we used, the challenges we faced, and resolved during this journey.



You can also take the help of the demo repository I created. (Link is given at the end of this tutorial).


## Getting Started with Monorepo for React and React-Native


We decided to use yarn-workspaces for our use-case. Lerna is an excellent tool to manage yarn workspaces.



As described on the Lerna website about itself -


>Lerna is a tool that optimize the workflow around managing multi-package repositories with git and npm.



To use Lerna, we will first need to install it. I am assuming you’ve already had Node.js and npm installed in your system.


```
#Installing Lerna 2.x
$ npm install --global lerna
#Creating project repository
$ git init lerna-repo && cd lerna-repo
#Turning folder into Lerna workspace
$ lerna init
```


```
lerna-repo/
  packages/
  package.json
  lerna.json
```

Now, you are ready with Lerna Workspace. Here, the packages, as per the name dictates, will contain different modules.

Let’s start adding a React js project into packages-



## Create React App into Monorepo


```
#Creating app in packages folder
$ npx create-react-app <app-name>
#Example
$ npx create-react-app web-app
```

Please note that NPX _supports only npm 5.2+ and higher versions, so if you have a lower version then you definitely need to upgrade it._



Once it is completed, go to the root folder of your repository and run-

All the required modules will be installed and hoisted to the root folder by this command.


To start the web application-


```
$ lerna --scope=web-app run start
```

Congrats!! You are done with your first package.

## Add React Native App Package


Go to the packages folder and run the following command-


```
$ npx react-native init <App name>
```


```
$ npx react-native init NativeApp
```

It will create all the folders and files required for the native app.



Once the process gets completed, go to the root folder and install packages again-

It will create React Native and other dependencies to root in npm_modules of monorepo. However, create-react-native-cli command expects react-native to be inside the package. If we still try to run it, there will be an error.



To fix this issue, we will use the yarn-workspaces [nohoist](https://classic.yarnpkg.com/blog/2018/02/15/nohoist/) feature.



In workspaces key of JSON package, we will add-


```
"nohoist": ["**/react-native", "**/react-native/**"]
```

Now, we’re gonna install packages again using yarn command.

Then we can start the apps using the following commands.


```
#Starting the android app
lerna --scope=NativeApp run android
#Start iOS app
lerna --scope=NativeApp run ios
```

Please note that an iOS app will work in MacBook only.



Well, now you have a repository that has both React web app and React Native mobile apps.



As we move further, we will try to add a React-Native expo project in this Monorepo as another package. If you don’t need an expo project, then you’re done here. You can stop right here!

## How to Make Expo Work with Monorepos??


1. Add expo-yarn workspaces as devDependency to the expo project, inside the ExpoApp folder.


```
$ yarn add --dev expo-yarn-workspaces
```

2. Add a postinstall script to package.json.

3. Add "postinstall": "expo-yarn-workspaces postinstall" under the "scripts" object in the app's package.json file.



>As per the documentation, expo-yarn-workspaces work only on macOS and UNIX based systems, Windows is not supported.



If we want it to work on Windows as well, then we need to make slight modifications to it.



Firstly, remove the postinstallscript from package.json and move it to the main package.json-


```
"postinstall": "cd ./packages/ExpoApp && expo-yarn-workspaces postinstall"
```

I tested the above workaround on macOS & Windows, and guess what?? It works like charm.



4. Now, define the entry module in the "main" field of package.json.



5. Specify "__generated__/AppEntry.js" as the value of the "main" field in package.json



Here is how the final package.json will look like-


```
{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^3.20.2"
  },
  "dependencies": {
    "metro-config": "^0.56.0"
  },
  "scripts": {
    "android": "lerna --scope=NativeApp run android --stream --",
    "ios": "lerna --scope=NativeApp run ios --stream --",
    "web": "lerna --scope=web-app run start --stream --",
    "expo": "lerna --scope=ExpoApp run start --stream --",
    "postinstall": "cd ./packages/ExpoApp && expo-yarn-workspaces postinstall"
  },
  "workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": ["**/react-native", "**/react-native/**", "**/expo", "**/expo/**"]
  }
}
```

6. Create metro.config.js in ExpoApp root folder with the following content-


```
const { createMetroConfiguration } = require('expo-yarn-workspaces');
module.exports = createMetroConfiguration(__dirname);
```

5. Reference metro.config.js in the app.json file inside the expo key.


```
"packagerOpts": {
  "config": "metro.config.js"
}
```

Now, go to the root folder and install packages again, using $ yarn .


```
#Start expo app
$ lerna --scope=ExpoApp run start
```

It will successfully start the expo app. But when you scan the app code on it, you will get an error as ‘react-native not found’.



As we said earlier that React Native should not be hoisted but the expo package is still hoisted. As a result, expo cannot find React-Native.



So, we need to update the hoisting of packages inside the _package.json_ file.


```
"nohoist": ["**/react-native", "**/react-native/**", "**/expo", "**/expo/**"]
```

After updating the package.json file with proper hoisting, we need to install the packages again using $ yarn .


Now try starting the expo project again-


```
$ lerna --scope=ExpoApp run start
```

Wow!! You’ll see that the Expo app has started working inside the monorepo environment.



Together with the expo project, you can run the React web app and React Native projects as well.



Here is the full folder structure-


![react-native-react-web_2.jpg](https://backend.habilelabs.io/uploads/react_native_react_web_2_45a9808e7e.jpg)

You will find the full code [example here](https://github.com/habilelabs/expo-react-react-native-monorepo-example).


All the code is quite simple and straightforward. I hope I’ve made every step very clear. Furthermore, if you have got any queries, feel free to reach out. If you are looking for a team for react or react-native then please contact us.



If you liked the blog then hit claps to it. Do you know that you can clap up to 50+ times??

medium_react-native-react-web_feature.jpg

small_react-native-react-web_feature.jpg

thumbnail_react-native-react-web_feature.jpg

React Native, React Web and Expo-Together in One Monorepo

Welcome to this journey to learn JMeter! Before discussing JMeter, we will learn about what’s Performance Testing.

It is important to ensure the effective performance of software application and therefore, Software Testing is required to ensure that the application runs smoothly without any fiascos.

## What is Performance Testing?
Performance Testing is a non-functional type of testing. It ensures software applications to perform well under their expected workload.

#### Attributes of Performance Testing:

- **Speed–** It checks the response time, rendering of data, and accessing.
- **Scalability –** It determines the maximum user load.
- **Stability –** It checks the stability of application under varying loads.
- **Reliability–** It determines whether the software product is secure or not.

## JMeter Basics:

JMeter is an open-source, pure Java platform software that is designed to load test functional behavior and measure performance. It can perform load and performance tests on Web Pages, Web Applications and static or dynamic resources Like Database, Rest Webservices, LDAP, Java Objects and more.

## How to Install JMeter –

- First of all, download JDK latest, and JMeter.
- Now install the prerequisites.
- Start the JMeter and follow the path.
- JMeter > go to bin folder > Double click on JMeter batch file & wait for few seconds to launch the JMeter GUI.

![how-to-test-performance-testing-using-jmeter-1.jpg](https://backend.habilelabs.io/uploads/how_to_test_performance_testing_using_jmeter_1_7864d510e1.jpg)

## Elements of JMeter:


JMeter consists of several components, known as Elements. These elements are designed in such a way that each one performs a specific task. Some of the main elements are:

- Thread Group
- Samplers
- Listeners
- Configuration


### Thread Group


It is a collection of threads. These threads simulate how the user interacts with the application, how the load is maintained and over what period of time.

![how-to-test-performance-testing-using-jmeter-2.jpg](https://backend.habilelabs.io/uploads/how_to_test_performance_testing_using_jmeter_2_1364f0ae8e.jpg)

For example, if you set no. of threads 100, JMeter will create and simulate 100 user requests to the server under test.

### Samplers
JMeter supports testing HTTP, FTP, JDBC, and many more protocols. Samplers help JMeter to send a request to the server and wait for the response. Each sampler generates one or more sample results.

![how-to-test-performance-testing-using-jmeter-3.jpg](https://backend.habilelabs.io/uploads/how_to_test_performance_testing_using_jmeter_3_23a24d5c8d.jpg)


- **FTP request:** An FTP request is made to do a performance test on the FTP server. Users can send an FTP ‘Download File’ or ‘Upload File’ to the FTP server.
- **HTTP request:** User can send an HTTP/HTTPS request to a web server.
- **JDBC request:** This sampler lets you execute Database Performance Testing. It sends a JDBC Request to a database.
- **BSF Sampler:** This sampler allows you to write a sampler using a BSF scripting language.
- **Access Log Sampler:** This sampler lets you read access logs and generate HTTP requests.
- **SMTP Sampler:** Used to send email messages using the SMTP protocol.

### Listeners
Listener is a component that shows the results of the test execution. These results can be shown in various different formats such as a tree, table, graph or log file.

![how-to-test-performance-testing-using-jmeter-4.jpg](https://backend.habilelabs.io/uploads/how_to_test_performance_testing_using_jmeter_4_fdcc54d586.jpg)

- Graph result listeners: It displays the server response time on a Graph.
- View Result Tree: It shows the result of the user request in basic HTML format.
- Table Result: It shows the summary of test results in the tabular format.
- Log: It shows the summary of test results in the text file.

### Configuration Elements
These elements are used to set up the defaults and variables for later use by samplers.

![how-to-test-performance-testing-using-jmeter-5.jpg](https://backend.habilelabs.io/uploads/how_to_test_performance_testing_using_jmeter_5_8af5855404.jpg)


- **CSV Data Set Config:** It allows us to read different parameters from the text file. Also, we can read lines from the file, and split them into variables.
- **HTTP Cookie Manager:** It has the same feature as a web browser. If an HTTP Request has made and the response contains a cookie, the Cookie Manager automatically stores that cookie to use it for all future requests.
- **HTTP request default:** This element lets you set default values that your HTTP Request controllers use.
- **Login Config Element:** The Login Config Element lets you add or override username and password settings in samplers.

## Conclusion:
As we discussed the JMeter performance, with the help of this open-source tool you can check the performance both on static and dynamic resources. It can be integrated with Bean Shell & Selenium for automated testing.Script Test.

I hope, this blog will help to better the performance testing results while using its element components & features in testing. You can also know that How to Create Maven Project in Eclipse for Selenium? for automation testing.

Feel free and ask me anything in the comment box related to “Test Performance Testing Using JMeter”, if you have some confusion.

Thanks for reading this blog!!

How to Test Performance Testing Using JMeter

medium_how-to-test-performance-testing-using-jmeter.jpg

small_how-to-test-performance-testing-using-jmeter.jpg

thumbnail_how-to-test-performance-testing-using-jmeter.jpg

How to Test Performance Testing Using JMeter?

**W**ondering what Docker is? Actually, it’s something worth wondering about. If you’re a Network Engineer or Software Developer, you would already be familiar with Docker- a fantastic tool for developing, shipping and deploying applications within “containers”.



It would be hard not to get attracted to it seeing its amazing ability of containerizing applications.



If you take a dive into the depths of the Internet you would find a whole stack of articles about it but only a few of them are beginner-friendly. Thus, I found myself coerced to write about docker for beginners.



Hopefully, this post will clear all your concepts about docker, and you’ll be able to create your first container.

## What is Docker??


Docker is a stateless server that packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime.



>Docker is an open-source software platform that lets us build, test, run and deploy applications reliably and quickly. It was launched in the year 2013 by Docker Inc. Since then, it’s been the cause of attraction and excitement among developers across the IT world.



Some short-listed features that make it so popular, are-


- Compatibility with almost every programming language you’re familiar with.
- Easier Workflow
- Agility and Simplicity for Software Development
- Handy Application Encapsulation
- Easy Scaling and Monitoring
- Faster Development & Deployment



## Why Do We Need Docker ?



Almost every developer finds himself in such a situation, every so often, when their project works fine as long as its running on their laptop/machine. But, when it is moved onto production state, server or maybe another machine, it usually fails to work even close to fine (and It’s very annoying!). The efficiency, optimization, and performance with which it was working earlier get compromised critically.



You would be baffled to know how frequently these cases come out. The average rate is — about every 3 out of 4 projects.



Likewise, if you develop any website using any framework and move it onto the web server, you’ll definitely face some diminishes and uncertainties.



Docker is an ultimate solution to all these problems and a relief for the developer’s world. In fact, it’s been designed specifically to address and resolve such issues.


## Docker Terminology



Let’s understand a few important terms about Docker-



**Docker Engine:** Docker Engine is a key part of Docker. It is a client-server application, having a CLI (Command Line Interface), Rest API, and a server as its components. It creates and runs the containers from the Docker Image.


![docker_1.jpg](https://backend.habilelabs.io/uploads/docker_1_e8d89e56a5.jpg)



**Docker Container:** A docker container is a standardized, lightweight, stand-alone unit of software that contains entire software/application code, along with its configuration, dependencies, libraries, and tools, all wrapped up into a portable format, ready to run on any computing environments.



You can put these containers anywhere you like and the application will run exactly and absolutely like it was working on your machine.



>A docker container is a docker image brought to life.



Docker container is the running instance of the code that was stored in the form of a docker image.



Algorithm for a docker container looks like-


![docker_2.jpg](https://backend.habilelabs.io/uploads/docker_2_e206e2d605.jpg)

**Docker Image:**  By the term ‘Image’, you don’t need to suppose it to be a picture. The context of Docker Image goes beyond the physical images, they are more like blueprints of a software, holding together the code, libraries, Dockerfile and everything else that needed to run it.



A docker image is a set of stateless and immutable files containing the application code and environment required by an application to run. It’s a read-only file which means you cannot modify it. It will remain like that forever as nothing has ever changed.



## What are Virtual Machines (VMs)??


Before containerization entered into the picture, the job of isolating and organizing applications was done by Virtual Machines (VMs).



_A virtual machine is a software or virtual server that emulates the functionality of a hardware server. It makes it possible to run what appears to be multiple machines on hardware which actually is a single computer._



The virtual machines run many applications on the same hardware, this process is known as Virtualization.



Both containers and VMs pursue the same goal of isolating the applications and its dependencies in a self-contained unit that can run in any environment. While the VMs virtualize the hardware, containers virtualize the operating system.



So, which one is better??



Now, this is the tricky part. Both play a significant role, depending upon the requirement. While VMs are more secure, containers are still preferred as they are more portable, efficient, flexible, lightweight and, above all, consume fewer resources.



## Essential Functions of Docker



There is a long list of tasks that we can do with docker, which is quite impossible for me to explain in this single blog but we will definitely learn about some important ones -



- Client-side Application Program- You can pack up the whole software code along with its configuration, libraries and move it anywhere you like.
- It acts as a service and can be deployed on to any server.
- You can fix the bugs and redeploy the application in the development environment only.
- Acts as a social networking platform where you can share your work in the form of docker containers.

## Understanding Docker with ‘Hello World’ Example



You’re going to learn a lot form this very simple example (If you’re a beginner!!). If you’re a regular user of Docker then it’ll be like a nursery-class lecture.



Starting from the installation, I’ll go through every necessary step such as creating Dockerfile, building, and processing Docker Image, running the container, and a few additional things.



Keep up with me so that you don’t miss anything-


### Install Docker:


#### For Windows:


```
https://hub.docker.com/editions/community/docker-ce-desktop-windows/
```

#### For Linux:



Install some prerequisite packages under the following command-




```
#Installing some prerequisite packages
$ sudo apt install apt-transport-https ca-certificates curl software-properties-common
#Add the GPG key to the docker repository
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
#Add the docker repository to APT
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable"
#Update the database
$ sudo apt update
#Install Docker
$ sudo apt install docker-ce
```

### Create a Dockerfile and Index:



I’m sharing an example of creating a simple ‘Hello World’ container in here. Follow me step by step to learn the whole process of building and running a container-



After successfully installing Docker, we will create a Dockerfile-



- Create a text file named ‘Dockerfile’.
- Pull the Nginx docker image to serve your static webpage in the Dockerfile, as mentioned here-


```
FROM ubuntu
RUN apt-get update
RUN apt-get install nginx -y
COPY index.html /var/www/html/
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
```

Add the commands for a simple web application of ‘Hello World’ in index.html file, like this-


```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Hello World</h2>
<p>&copy; Welcome to Docker</p>
</body>
</html>
```

**Note:** The index.html and Dockerfile have to be saved in the same directory.

### Create a Docker Image:


To build the docker image, run the command-

Note: “_hello_world_ is the name of the docker image.”


### Run the Docker Container:



After the successful build of the docker image, run the container with the following command-


```
docker run -d -p 8080:80 hello_world
```

To check the running container or to render the docker container on the web browser you need to hit the URL-

#### Output goes here -


![docker_3.jpg](https://backend.habilelabs.io/uploads/docker_3_4fd77e46d6.jpg)


**Note:** The -p parameter represents the port number. Any web application is run on a browser with a specific port number.



For example-



_8080:80_ means all the requests hitting on port 80 will bind to 8080 port only.



**Additional:** 


```
#To check the status of your docker container
docker ps
#To enter into the docker container
docker exec -it <container ID> bash
#To check the logs of running container
docker logs <container ID>
```

Once you’re done by creating a Docker Image, you can share it on Docker Hub and make it public.

## Future with Docker/ Business Value of Docker



Do you have any rough guesses about what is the statistical condition of Docker in the marketplace?? Not even close?? That’s fine, let me break it to you that more than 15,000 companies are currently using Docker.



The pie-chart below will picturize the general usage of Docker in the international market-



![docker_4.jpg](https://backend.habilelabs.io/uploads/docker_4_d93bb2cc46.jpg)


With 40%, Software companies have occupied the majority of ratio. Then comes IT field with 17%, followed by HR & Recruiting industry with 10%.



The remaining proportion is covered by Telecommunications, Hardware, Consulting, Healthcare, Accounting, Socializing, and Retail industries. With every passing year, the pace of using Docker is increasing at a high rate, in each and every niche.



## Parting Words:



From the very moment when Docker was first introduced, it’s been easing the lives of developers. There have been a few misconceptions about Docker, such as, it’s not secure, requires Cloud, and all, but it has ruled them all out.



As a result, most of the companies have started shifting towards containers-driven environments.



The unbound flexibility and portability of Docker makes it a powerful tool. And who knows what the futuristic Docker has in store for us??



Thanks for reading this blog. Hopefully, you liked it. If it’s a yes, then stay connected with us.

Docker — Develop & Deploy Containerized Applications

medium_docker_feature.jpg

small_docker_feature.jpg

thumbnail_docker_feature.jpg

React is a JavaScript library, developed and maintained by Facebook, used to build user interfaces. It is a component-based architecture in which one can use two approaches, Class/Stateful Component, and Functional/Stateless Component. This architecture increases the reusability of the code.

In Class Components, we have all the lifecycle methods and can say like a game with complete control in our hands, while the same is not true in the case of Functional Components and we don’t have control over it. Therefore, in order to take control, React.js gives us the power of Hooks for the functional components. So, let’s start playing with this power of new controls.

## React Classes & Hooks

In React version <=16.7, if we are creating any component with state or which can access the react life cycle methods, it has to be a class component. We can create a class component by extending **React.Component** class of React and using **render()** function which will return HTML.

Hooks were introduced from >=React 16.8 versions. Basically, Hooks are the functions that provide us to write stateful logic, which was only possible in the Class component, but with the help of hooks, we can write the same logic separately and reuse that logic.

## Overview About React Hooks


Hooks are functions that let you “hook into” React state and lifecycle features from functional components. Hooks don’t work inside classes, instead, let you use React without classes.

By using hooks, we can remove the nesting, only left is our render function which is of pure rendering logic. We have some pre-built **hooks like- useState, useEffect, and useContext-**

![react-hooks-why-better-than-classes-1.jpg](https://backend.habilelabs.io/uploads/react_hooks_why_better_than_classes_1_f68747f320.jpg)

- **useEffect** stops it from being spread across three different lifecycle hooks. We can use the same hooks useEffect when we need to update something after every render, code won’t become increasingly nested.
- **useState** allows us to use the stateful logic in functional components. In the above example, we are using useState to maintain the key-p

## Use Cases:
Though hooks have some benefits over classes, it does not address all the features of classes. We can still use classes, let’s see in the example below-

![react-hooks-why-better-than-classes-2.jpg](https://backend.habilelabs.io/uploads/react_hooks_why_better_than_classes_2_5f7d262dd4.jpg)

There are some downsides as well, let’s have a look at them-

- If you need to use the same key pressed logic in some other component than we need to write the same code again and again.
- If you have more behavior like this code gets complicated.


Let’s review some of the ways we can use them-

### Mixins –
Using mixins we can group all lifecycle like-

![react-hooks-why-better-than-classes-3.jpg](https://backend.habilelabs.io/uploads/react_hooks_why_better_than_classes_3_dd53eda9bb.jpg)

Mixins allow you to mix some additional functionality into React components. Refactoring needs to be easy. These mixed-in behaviors need to be more obvious that they don’t belong to the component. They shouldn’t be using the internals of the component. ES6 classes do not support mixins to React. Instead, we have a HOC concept.

Mixins are not deprecated from React, you can still use mixins by using React.createClass to create React components.

## Higher-Order Components (HOC) –


The HOC is a technique of re-using react components all over again. HOC is a function that accepts a component and returns a new component. HOC commonly used by third-party libraries like Redux connect.

We can use the Higher-Order component by creating a container that passes in props. Let’s try the composition –

![react-hooks-why-better-than-classes-4.jpg](https://backend.habilelabs.io/uploads/react_hooks_why_better_than_classes_4_2fb0923003.jpg)

Now, we have all the benefits of MIXINS. We have a <KeyRender/> component that is not tightly coupled to the subscription behaviour. Do we always need to make a new component??

#### Rules to Remember-

While using hooks, there are some rules you need to remember-

- Hooks always call at the top level of the render function.


We can’t make conditional hooks and can’t reorder them on every render. If you want conditional effects, you should split your hooks into other components.

- Hooks can use only in React Function Components, and in Custom Hooks.
- There are not hook primitives for **componentDidCatch**
- Avoid using lifecycle methods like **componentDidMount, componentDidUpdate, componentWillUnmount**.


While using hooks, avoid lifecycle methods, instead, you can use hooks like useEffect or you can also create your own custom hooks.

## Wrap-Up


Using hooks will solve many of the problems which we often experience while using React Classes, but there are still some cases like we cannot access lifecycle methods while using hooks.
Again, this guide was not meant to convince you to use hooks or completely refactor the Classes to Hooks.
Just a friendly reminder that there are other options as well, available out there to experiment with!
Hooks don’t replace your knowledge of React concepts. If you are really interested in learning more about hooks, try to apply this concept to the new projects, you are assigned with.

Thank You!

Insights for the enthused minds!

Want to know more

How we build pillars to achieve heights

Want to join us ?

Let’s fill the gaps with IT