Forem: Drex72

Who is a Software Engineer

Drex72 — Fri, 03 Feb 2023 14:18:43 +0000

I remember the time I just got accepted for a junior software engineer role at a remote company and at the time I underestimated what it took to be a software engineer. I thought it was just all about writing code and knowing the latest technologies, so I said the name lightly, but after about 2 years of experience, I now have a better understanding of what being a software engineer entails and why they are sought after.

The first thing I'll say is that a software engineer isn't just someone who writes code, a software engineer is a problem solver. They take complex, real-world problems and break them down into manageable pieces that can be solved through code. This requires a deep understanding of both the technology and the business needs of the software being built.

A software engineer is also a communicator. Writing code is only one small part of the job, and effective communication skills are critical to the success of any software project. They need to be able to communicate technical concepts to non-technical stakeholders, as well as effectively collaborate with team members who may have different backgrounds and perspectives.

A software engineer is a lifelong learner. The technology landscape is constantly changing, and software engineers must stay up-to-date with the latest tools, languages, and methodologies to remain effective. This requires a willingness to continually learn and adapt, as well as a strong desire to improve both individually and as a team.

At its core, being a software engineer is about making a difference. It's about taking complex problems and finding simple, elegant solutions that change the world for the better. It's about working with talented individuals to build software that meets the needs of users, and it's about doing all of this in a way that is ethical, responsible, and sustainable.

Misconceptions about a Software Engineer

As an experienced software engineer, I have noticed that many junior developers have certain misconceptions about the field of software engineering. Here are some of the most common ones:

Coding is the only skill required - While writing code is an important aspect of software engineering, it is just one piece of the puzzle. Junior developers often overlook the importance of skills like problem-solving, communication, collaboration, and project management.
Code quality is not important - Junior developers may be focused on getting the code to work, but they may overlook the importance of writing maintainable, scalable, and secure code. This can lead to technical debt and make future maintenance and updates more difficult.
It's all about writing new code - While writing new code is an exciting part of the job, software engineers also spend a significant amount of time maintaining and updating existing codebases. This includes fixing bugs, optimizing performance, and ensuring the software meets evolving business needs.
Software engineering is a solitary activity - Many junior developers assume that software engineering is a solitary activity when in reality, it often requires close collaboration with cross-functional teams. Software engineers need to work with project managers, designers, and stakeholders to ensure that the software meets the needs of users.
Learning stops after graduation - Junior developers often assume that they will stop learning after they finish their formal education. However, software engineering is a field that is constantly evolving, and software engineers must be willing to continually learn and adapt to stay up-to-date with the latest tools, languages, and methodologies.

In conclusion, junior developers need to understand that software engineering is a complex and multi-faceted field that requires a wide range of skills, knowledge, and experience. By recognizing and overcoming these misconceptions, junior developers can set themselves up for success as they progress in their careers.

How can I be a Software Engineer?

Several junior developers have asked me the question, how can they become software engineers and truthis, I have seen many junior developers successfully transition into software engineering roles. Here are some key steps that I would advise a junior developer to follow to migrate toward becoming a software engineer:

Gain a strong foundation in computer science principles - Understanding core concepts such as algorithms, data structures, and software design patterns is essential for a successful career in software engineering.
Build practical experience - Participate in personal projects, contribute to open source projects, or seek out internships or entry-level positions to get hands-on experience building software.
Stay up-to-date with technology - The technology landscape is constantly evolving, and software engineers must be willing to continually learn and adapt. Keep up-to-date with the latest tools, languages, and methodologies.
Improve your communication skills - Effective communication skills are critical in software engineering. Practice explaining technical concepts to non-technical stakeholders and seek out opportunities to collaborate with cross-functional teams.
Seek mentorship opportunities - A mentor who is an experienced software engineer can provide guidance, advice, and feedback, and help you navigate the challenges and opportunities of a career in software engineering.
Focus on writing maintainable, scalable, and secure code - While writing code is an important aspect of the job, it's equally important to write code that is maintainable, scalable, and secure. Learn software engineering best practices and seek out opportunities to learn from more experienced software engineers.
Participate in the software engineering community - Joining online communities and attending industry events can help you stay up-to-date with the latest developments in the field, connect with other software engineers, and gain exposure to new ideas and approaches.

In summary of everything said so far, A software engineer is a professional who designs, develops, tests, and maintains software systems and applications. The role encompasses a variety of tasks including analyzing user requirements, developing algorithms, writing code, and testing and debugging software. Software engineers may also be involved in the ongoing maintenance and updating of existing systems, as well as collaboration with cross-functional teams such as project managers, designers, and stakeholders. In addition to technical skills, effective software engineers possess strong problem-solving and communication abilities.If you have a passion for technology, an ability to think critically, and a desire to make a difference, a career in software engineering might be the right path for you.

React JS vs Next Js (Client side vs Server Side)

Drex72 — Wed, 01 Feb 2023 16:18:26 +0000

Two of the most widely used JavaScript libraries for creating web applications are React and Next.js. Both are open-source and include a variety of functionality for creating dynamic user interfaces, but they differ significantly in some important ways.

What is React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and released in 2013. React allows developers to build reusable UI components and manage the state of their applications. React is a view-layer library, meaning it's only concerned with how the user interface looks and how it interacts with the user.

What is Next?

Next.js, on the other hand, is a framework for building server-rendered or statically exported React-based web applications. It was developed by Vercel (formerly known as Zeit) and was released in 2016. Next.js provides a simple way to build and deploy React applications, with automatic code splitting and optimized performance. In addition to the UI components, Next.js provides a way to manage routes, handle data fetching, and much more.

What are the main differences between react and next?

One of the main differences between React and Next.js is the approach to server-side rendering. React is typically used to build client-side applications, meaning that the application is rendered in the user's browser. Next.js, on the other hand, offers server-side rendering by default. This means that the initial render of the page is done on the server, making it faster and more accessible for users, especially on slow networks.

Another difference between React and Next.js is the way they handle routing. React requires the use of additional libraries to manage routes, while Next.js has built-in support for routing. This makes it easier for developers to manage the different pages of their applications and create seamless navigation.

Finally, Next.js offers built-in optimizations for performance, including code splitting, lazy loading, and automatic optimization of images. This can help developers to create fast and responsive applications with minimal effort. React, on the other hand, doesn't offer these optimizations out of the box and requires additional libraries or manual implementation.

Which Should i use?

The choice between React and Next.js depends on your specific use case and requirements.

React is a JavaScript library for building user interfaces. It is widely used for building dynamic and interactive web applications.

Next.js is a framework built on top of React. It provides several features that make it easier to build and deploy production-ready React applications, such as automatic code splitting, optimized performance, and server-side rendering.

If you are building a simple single-page application, React might be sufficient. However, if you need more features and scalability, Next.js could be a better choice.

Ultimately, the best choice depends on your specific project requirements and the development team's experience with the technologies.

Conclusion

In conclusion, React and Next.js are both powerful tools for building web applications, but they are designed for different purposes. React is a view-layer library for building reusable UI components, while Next.js is a framework for building server-rendered or statically exported React applications with a focus on performance and ease of use. The choice between the two will depend on the specific needs and requirements of the project.

Progressive Web Applications (PWA'S)

Drex72 — Mon, 30 Jan 2023 21:07:10 +0000

Earlier on, I wrote an article concerning websites versus web applications and a lot of people asked me to explain the concept of progressive web applications and how they differ from normal web applications.

So in this article, I will be writing about what progressive applications are, the cases to use them and the differences between progressive web applications and normal web applications.

What is a Progressive Web Application?

Progressive web applications in layman's terms are websites that look and behave like a mobile app. PWAs are built to take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download software locally.

PWAs are designed to work offline, be installable on a user's home screen, and provide fast, responsive, and engaging experiences. PWAs are built with HTML, CSS, and JavaScript, which are the same technologies used for traditional web applications, but with the added benefits of offline capability, performance optimization, and native app-like features. By providing users with a seamless and engaging experience, PWAs aim to improve user engagement and increase the likelihood of users returning to the app. Examples of PWA's are websites like Starbucks, Instagram, user, etc.

What is the difference between a progressive web application and a normal web application?

The installation process is one significant distinction between a PWA and a web app. On either a desktop or a mobile device, one can install a PWA. A web app, on the other hand, can only be used on a web browser and cannot be installed on a device. Because of this, it is preferred by consumers in this regard.Progressive Web Applications (PWAs) and normal web applications differ in other several key aspects, including:

User Experience: PWAs provide a native app-like experience to users, with features such as offline capability, home screen installation, and push notifications, while traditional web applications typically do not offer these features. It provides an experience that is so fluid and integrated that it is difficult to tell a PWA from a native app.
Accessibility: PWAs are designed to work seamlessly on any device and browser, with progressive enhancement ensuring that the user's experience is optimized based on their device's capabilities. Normal web applications may not be optimized for different devices and may not work as well on older browsers.
Performance: PWAs are optimized for fast loading times and smooth performance, with the use of technologies such as Service Workers and caching to ensure a seamless experience even without an internet connection. Normal web applications may not be optimized for performance, leading to slow loading times and a less smooth experience for users.
Maintenance: PWAs are easy to maintain and update, with updates automatically pushed to users and not requiring a separate app store submission process. Normal web applications may require more manual updates and may not be as easily accessible for users.
Development Process: PWAs are typically built with HTML, CSS, and JavaScript, which are the same technologies used for traditional web applications. However, the development process for PWAs includes considerations for offline capability, performance optimization, and native app-like features, while normal web applications may not require these considerations.

Advantages of Using a PWA as a Developer

Building a Progressive Web app rather than the native web app as a developer has a lot of advantages in which will be discussed below:

Cross-Platform Compatibility: PWAs are built with HTML, CSS, and JavaScript, which are the same technologies used for building traditional web applications. This means that developers can create a PWA that works on any device and browser, without the need to develop separate apps for different platforms.
Cost-effective: PWAs are cost-effective to develop, as they do not require separate development efforts for different platforms, unlike native mobile apps. This can be a significant advantage for small businesses and startups who are looking to get their app to market quickly and efficiently.
Easy Maintenance: PWAs are easy to maintain and update, as the updates are automatically pushed to users and do not require a separate app store submission process. This can save time and resources for developers and ensure that users are always up-to-date with the latest features.
Improved User Engagement: PWAs can provide improved user engagement, as they are easily accessible and provide a native app-like experience. This can increase the likelihood of users returning to the app and spending more time on it.

When should use a PWA over a traditional Web app?

Progressive web applications are better used than traditional web apps when you want to provide a reliable, fast, and engaging experience for your users, especially on mobile devices.

In conclusion, Progressive Web Applications are a powerful tool for developers looking to create engaging and high-quality web applications. With the ability to provide a native app-like experience to users, offline capability, and fast and responsive performance, PWAs offer a compelling alternative to traditional web applications. Additionally, the ease of maintenance and accessibility across a wide range of devices make PWAs an attractive option for businesses looking to improve user engagement and increase the likelihood of users returning to their app. As the demand for high-quality and seamless user experiences continues to grow, PWAs are poised to play an increasingly important role in the future of web development. By adopting PWAs, developers and businesses can take advantage of this cutting-edge technology to create innovative and engaging web applications that deliver a truly native app-like experience to users.

Website vs Web Application

Drex72 — Fri, 27 Jan 2023 22:22:49 +0000

My friend approached me while I was pondering the topic for today's article, and we then got into an intellectual discussion. Later in our talk, when I expressed my frustration with my lack of inspiration for an essay, he suggested that I write about the distinctions between web applications and websites which made me realize that not so many people know the difference.

In today's article, we'll be covering what is a website, How to build a beautiful website, what is a web application, How to build a better web application, and which one to use when you want to start a project.

What is a website?

A website is a collection of static web pages that are typically used to provide information to the user. Websites can be used for a variety of purposes, such as to promote a business, share information about a particular topic, or provide a platform for online shopping.

Websites typically include text, images, and other media that are meant to be viewed by the user but do not require any interaction or input from the user. Examples of websites include news sites, online portfolios, and personal blogs.

Tips to build a beautiful Website

Creating a website that is attractive to the user is one of the core tasks you'll perform as a developer. This is because sites are mostly judged by how they appear. Here are some tips that'll help you as a developer to build a beautiful website:

Keep it simple: A simple and clean design is often more effective than a cluttered and complex one. Avoid using too many colors, fonts, and images, and instead, focus on a clean and minimalistic design.
Use a consistent layout: Consistency is key when it comes to creating a beautiful website. Use a consistent layout throughout the website, and make sure that the font, colors, and other design elements are consistent as well.
Make it responsive: With the increasing number of devices and screen sizes, it's important to ensure that a website is responsive, meaning that it adapts to different devices and screen sizes.
Use high-quality images and videos: High-quality images and videos can greatly enhance the user experience and make a website more visually appealing.
Optimize for speed: A slow-loading website can be frustrating for users, so it's important to optimize the website for speed. This can include using a Content Delivery Network (CDN), compressing images, and minifying code.
Pay attention to typography: Typography is an important aspect of web design, and it can greatly impact the readability and aesthetics of a website. Use a font that is easy to read and consistent throughout the website.
Use whitespace effectively: Whitespace, also known as negative space, can be used effectively to make a website look cleaner and more visually appealing.
Test on multiple browsers: It's important to test a website on different browsers to ensure that it looks and functions correctly on all of them.
Keep accessibility in mind: Building an accessible website is not only a legal requirement but also a moral one, it allows people with disabilities to navigate and interact with the website.
Use analytics tools: Use analytics tools to track user behavior and gather data about how the website is being used. This data can be used to improve the website and enhance the user experience.

These tips are a good starting point for creating a beautiful website, but it's important to remember that every website is unique and may require a different approach.

What is a Web Application?

Web applications are dynamic programs that run on a web server and interact with the user in real-time. Web applications often require user input and provide some form of output, such as a personalized dashboard or a search results page. Some examples of web applications include online banking, email services, and social media platforms.

Web applications use technologies like JavaScript, HTML, REACT and CSS to create interactive features, allowing the user to interact with the application, such as filling out forms, making selections, and performing searches.

Tips to build a better Web Application

Web applications deal a whole lot more with functionality rather than just the design, so you need to write your code thinking from the user's perspective.

These are some tips that'll help you as a developer to build a better web application:

Understand the user's needs: Start by understanding the user's needs and what they want to achieve with the web application. This will help you to design and build an application that meets their needs and provides a good user experience.
Use a framework: Using a framework such as React, Angular or Vue.js can help to speed up the development process and make it easier to build a web application. Frameworks provide a set of pre-built components and tools that can be used to build the application.
Follow best practices: Follow best practices when building a web application. This includes using a consistent coding style, writing clean and maintainable code, and following security best practices to protect the application and its users.
Make it responsive: Ensure that the web application is responsive and can adapt to different screen sizes and devices. This will make it easier for users to access the application on a variety of devices.
Optimize for performance: Optimize the web application for performance by using techniques such as code minification, image optimization and lazy loading.
Use a Content Management System (CMS): Use a CMS to manage the content of the web application. This will make it easier to update and maintain the content of the web application.
Use a version control system: Use a version control system such as Git, to keep track of changes to the codebase and collaborate with other developers.
Test the application: Test the application thoroughly to ensure that it works correctly and that there are no bugs or errors.
Monitor and maintain: Use monitoring and maintenance tools to keep track of the web application's performance, security and uptime. This will help you to identify and fix any issues that arise.
Keep it simple: Keep the application simple and easy to use. Avoid adding unnecessary features and focus on providing a user-friendly and efficient experience.

It's important to keep in mind that the best practices for web development are constantly evolving, so it's important to stay up-to-date with the latest trends and technologies.

Differences Between a Website and a Web Application?

Some of the key differences between a website and a web application are:

Purpose: Websites are primarily used for providing information, while web applications are used for providing interactive user experiences.
Content: Websites have static content that does not change based on user input or other factors, while web applications have dynamic content that can change based on user input or data from a database.
Interactivity: Websites generally do not require any interaction or input from the user, while web applications often require user input and provide some form of output.
Complexity: Websites are generally easier to create and maintain, while web applications are more complex and require a higher level of skill and expertise to create and maintain.
Technologies: Websites are typically built using HTML, CSS, and JavaScript. Web applications, on the other hand, use a variety of technologies such as JavaScript, HTML, CSS, and server-side languages like PHP, Python or Ruby.
Functionality: Websites are primarily for providing information, while web applications can be used for a variety of purposes such as online banking, email services, and social media platforms.
User data: Websites usually don't store users' data and preferences but web applications do it quite often, they use databases to store user's data and preferences.
Security: Websites are less prone to security threats as they don't handle sensitive data, and web applications are more prone as they handle sensitive data such as personal information, financial data and so on.
Maintenance: Websites are generally easier to create and maintain, as they do not require the same level of coding and programming as web applications. Web applications, on the other hand, are more complex and require a higher level of skill and expertise to create and maintain.

How to know Which one to build?

Knowing which one to build when you want to start a project is relatively simple. If you're looking for an application that just displays your products or some information to the user with little or no user interaction, then use a website else if you want a tool for automating processes and so on, use a web application

In conclusion, while both websites and web applications are accessed through the internet and can be viewed through a web browser, they serve different purposes and have different features. Websites are primarily used for providing information, while web applications are used for providing interactive user experiences. Understanding the differences between these two types of online tools can help you make informed decisions about how to best use the internet to achieve your goals.

What Does DevOps Actually Mean?

Drex72 — Thu, 26 Jan 2023 19:30:07 +0000

What is DevOps, a friend of mine recently questioned? I realized that many people have either heard of the term or have a general understanding of what it means, but in this article, we'll be going into great detail on everything devops as a whole encompasses.

History of DevOps

DevOps was first conceptualized in the early 2000s, however, the phrase was not coined until approximately 2008. Belgian software engineer Patrick Debois originally used the phrase "DevOps" in Agile 2008. Since then, the DevOps movement has gained momentum.

In the early 2000s, the iterative and incremental development methodology known as Agile software development was becoming more and more popular. The use of cloud infrastructure at the same time made it simpler for businesses to provision and scale computing resources.

Early users of Agile and cloud infrastructure started to understand that by integrating the development and operations teams and automating many of the manual chores associated with software delivery, these techniques might be improved even further. DevOps, a movement that aims to improve collaboration, communication, and integration between development and operations teams, was born as a result of this.

What is DevOps?

DevOps is a set of practices and tools that aims to increase collaboration, communication, and integration between software developers and operations teams. The goal of DevOps is to enable faster and more reliable software delivery, while also reducing the risk of errors and downtime.

Automating processes is one of DevOps' main tenets. Teams may devote more time to innovation and problem-solving by automating repetitive and error-prone operations like testing and deployment. Additionally, automation supports consistency and reproducibility in software releases, lowering the possibility of errors and downtime.

Technologies Used in DevOps?

DevOps is a software development methodology that emphasizes collaboration between development and operations teams to deliver software quickly and efficiently. Several technologies are commonly used in DevOps to automate and streamline the software development process. Some of the most popular technologies include:

Version Control Systems (VCS): Git is the most widely used VCS in DevOps. It allows developers to keep track of their code changes and collaborate with others on the same codebase.
Continuous Integration (CI) and Continuous Deployment (CD) tools: Jenkins, Travis CI, CircleCI, and GitLab CI are popular CI/CD tools that are used to automate the process of building, testing, and deploying code changes.
Containerization: Docker is the most widely used containerization technology in DevOps. It allows developers to package their applications and dependencies into containers, which can be easily deployed and scaled across different environments.
Configuration Management: Ansible, Chef, and Puppet are popular configuration management tools that are used to automate the configuration and management of servers and infrastructure.
Cloud Platforms: AWS, Azure, and Google Cloud are popular cloud platforms that are used to deploy and scale applications in a DevOps environment.
Monitoring and Logging: ELK (Elasticsearch, Logstash, Kibana) and Prometheus are popular monitoring and logging tools that are used to collect and analyze log data from applications and infrastructure to detect and troubleshoot issues.
Virtualization: Virtualization tools such as VMWare and Hyper-V are used to create virtual environments that can be used for development and testing.

These are some of the most popular technologies used in DevOps, however, the list is not exhaustive and other technologies can be used depending on the organization's needs, infrastructure and other factors.

Practical Application of DevOps

DevOps has many practical applications in software development and operations. Some of the most common applications include:

Continuous integration and continuous delivery (CI/CD): DevOps teams use CI/CD practices to automatically build, test, and deploy code changes to production. This helps to ensure that code changes are integrated and tested frequently, and that new features and improvements are released to users more quickly.
Configuration management: DevOps teams use tools like Ansible, Chef, and Puppet to automate the provisioning and management of infrastructure. This helps to ensure that systems are configured consistently and repeatably, and that changes can be made quickly and easily.
Containerization and virtualization: DevOps teams use containerization and virtualization technology like Docker and Kubernetes to package and deploy software in a consistent and repeatable way, regardless of the underlying infrastructure. This helps to reduce errors and downtime and make it easier to scale and manage software systems.
Monitoring and metrics: DevOps teams use monitoring and metrics tools like Grafana, Prometheus and Elasticsearch to continuously monitor the performance and health of software systems. This helps to ensure that systems are always available and performing at their best, and can also help to identify areas for improvement.
Automated testing: DevOps teams use automated testing tools like Selenium, JUnit and TestNG to test software code and infrastructure. This helps to ensure that code changes are thoroughly tested before they are deployed to production, and that software systems are working as expected.
Cloud computing: DevOps teams use cloud computing services like AWS, Azure, and GCP to build, test and deploy software systems, providing scalability, cost efficiency, and flexibility.
Security: DevOps teams use security tools and best practices to ensure that software systems are secure and that vulnerabilities are identified and addressed quickly.
Communication and collaboration: DevOps teams use collaboration tools like Slack, Trello, and Jira to improve communication and collaboration between developers, operations, and other teams.

In summary, DevOps has a wide range of practical applications in software development and operations, including continuous integration and delivery, configuration management, containerization and virtualization, monitoring and metrics, automated testing, cloud computing, security and communication and collaboration.

Tech Careers that require the knowledge of Devops

The concept of DevOps applies to a wide range of technical careers, including:

Software Developers: Developers can benefit from DevOps practices and tools by being able to work more closely with operations teams, by automating repetitive tasks, by implementing CI/CD practices, and by continuously monitoring and testing their code.
Operations Engineers: Operations engineers can benefit from DevOps practices and tools by being able to work more closely with development teams, by automating infrastructure provisioning and management, by implementing containerization and virtualization, and by monitoring and metrics to identify and resolve issues quickly.
Systems Administrators: Systems administrators can benefit from DevOps practices and tools by automating infrastructure provisioning and management, by implementing containerization and virtualization, and by monitoring and metrics to ensure that systems are always available and performing at their best.
Quality Assurance Engineers: Quality assurance engineers can benefit from DevOps practices and tools by automating testing, by implementing CI/CD practices, and by continuously monitoring and testing the software.
Cloud Architects: Cloud architects can benefit from DevOps practices and tools by understanding and using cloud computing services, and by automating infrastructure provisioning and management, and by implementing containerization and virtualization.
Security Engineers: Security engineers can benefit from DevOps practices and tools by implementing security best practices, by understanding and using cloud computing services, and by continuously monitoring and testing the software.
IT Project Managers: IT project managers can benefit from DevOps practices and tools by understanding the entire software delivery process, by facilitating communication and collaboration between development and operations teams, and by implementing CI/CD practices.

How DevOps can improve a software engineer's skills

DevOps can make a software engineer a better software engineer in several ways:

Continuous learning: DevOps encourages continuous learning by emphasizing the importance of constantly improving and iterating on processes and tools. This can help software engineers to stay up-to-date with the latest technologies and best practices, and to continuously improve their skills.
Automation: DevOps practices and tools, such as CI/CD, configuration management, and containerization, heavily rely on automation, which can help software engineers to automate repetitive and error-prone tasks, such as testing and deployment. This can help software engineers to focus on more complex and interesting tasks, such as developing new features and solving problems.
Collaboration and communication: DevOps emphasizes the importance of collaboration and communication between developers and operations teams. This can help software engineers to understand the entire software delivery process, from development to deployment, and to improve their ability to work with other teams.
Testing and monitoring: DevOps practices and tools, such as automated testing, monitoring and metrics, help software engineers to identify and fix issues quickly, and to ensure that software systems are always available and performing at their best. This can help software engineers to improve the quality and reliability of their software, and to reduce the risk of errors and downtime.
Cloud and security: DevOps practices and tools help software engineers to understand and use cloud computing services, and to improve the security of software systems. This can help software engineers to improve the scalability, cost efficiency, and security of their software systems.

In conclusion, DevOps is a collection of procedures and methods designed to improve coordination, communication, and integration between teams of software developers and administrators. Teams may produce software more quickly and consistently by automating repetitive operations, using continuous integration and delivery, and monitoring and metrics. Teams may bundle and deliver software in a consistent and repeatable manner utilizing containerization and virtualization technology, which also helps to lower errors and downtime.

React Router Dom Version 6.7.0

Drex72 — Wed, 25 Jan 2023 18:56:57 +0000

In this article, we will talk about the new version of react-router dom that was released on January 18, 2023, and the differences between this current version and the previous versions, its advantages and disadvantages and how to use it in your projects.

How to Install React Router

Firstly Create a react Application using the below syntax

npx create-react-app myapp

After creating your react application, Simply type npm install react-router-dom in your project terminal to install React Router, and then wait for the installation to finish.

Use the yarn add react-router-dom command if you're using yarn.

How to Set Up React Router Dom

After the installation, your react application should look something like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Now that we want to make our router globally visible, we first create a component called Router after that, we then add some boilerplate code that every useful react component must have. The boilerplate code will look something like this.

import React from 'react'

function Router() {
  return (
    <div>
      Router
    </div>
  );
}

export default Router;

After creating our boilerplate code, we want to create the pages that we want to be rendered in our route. Firstly, we Create a pages folder in our src folder that is created for us by default when we create our react application. Inside our pages folder, let us create three components and call them Home, Blog and About. So our React app directory should look something like this.

Now, Let us write the boilerplate code that we wrote for our Router Component inside each of the components that we created inside our pages folder, but not forgetting to change the name Router to the name of the page. For Example, the Home Component should look something like this

import React from 'react'

function Home() {
  return (
    <div>
      Home
    </div>
  );
}

export default Home;

After Creating the pages that we want to be used in our route, we then import the createBrowserRouter function, The pages that we created earlier and the React-Router dom RouterProvider from the react-router-dom package. An array of routes is provided as a parameter to the createBrowserRouter method. Each route is an object made up of a path, to which the route belongs, and an element, which is the component that is displayed to the user when they are on that route.

Now, let us create three routes inside of the createBrowserFunction and using the paths and elements as shown below

import {createBrowserRouter,RouterProvider} from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";

const routerData = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "/blog", element: <Blog /> },
]);

function Router() {
  return (
    <div>
      Router
    </div>
  );
}

export default Router

Now, this is saying that when the user visits the initial route, display the home Component, When he visits the about route, display the About Component and the same goes for the Blog Component. Now we have set up our routerData, How do we Link it inside out Application, This is where the RouterProvider that we imported earlier comes into play. Inside the Router Component that we created Earlier, we return the RouterProvider component while passing the routerData as a prop into it. Your entire Router component should look something like this

import {createBrowserRouter,RouterProvider} from "react-router-dom";
import Home from "./pages/Home";
import Blog from "./pages/Blog";
import About from "./pages/About";

const routerData = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/about", element: <About /> },
  { path: "/blog", element: <Blog /> },
]);

function Router() {
    return <RouterProvider router={routerData} />;
}

export default Router

Now we import this Router inside our App component and rather than wrapping it using a BrowserRouter around our application as done in previous versions, we just insert it directly into the top of our App component. Your App Component should then look something like this

import React from 'react'
import Router from './Router'

function App() {
  return (
    <div>
        <Router/>
        App
    </div>
  );
}

export default App;

And like that, we have successfully used react router dom version 6.7.0 to create routes in our application.

Pros and Cons of React Router Dom version 6.7.0

Pros:

The unmountOnExit prop allows developers to specify whether a component should be unmounted when the route is exited, which can improve performance and reduce memory usage.
The useNavigate hook provides a way to programmatically navigate to a different route in a React application, which can make it easier to handle user interactions in functional components and hooks.
It addresses a bug that caused the <Link> component to not correctly handle relative paths in some cases, making the app navigate to an incorrect location.
It fixes an issue that caused the <Switch> component to not correctly match routes in some cases, making the app navigate to the wrong route when there were multiple routes that matched the current location.
It includes a change to the way the <Route> component handles the path prop, which allows developers to use the path prop to specify a string or an array of strings, making it more flexible and easy to use.

Cons:

React Router 6.7.0 is not backwards compatible with previous versions, so developers need to update their code to the new syntax and API.
It is compatible with the latest version of React, React 17, so developers need to make sure they have the latest version of React installed before upgrading to React Router 6.7.0
As React Router is a third party library, sometimes it may not fully align with the latest version of React, which can cause some bugs.

Overall, React Router DOM version 6.7.0 is a powerful tool for client-side routing in React applications, with many new features and improvements that make it easier to use and more versatile. However, developers should be aware of the potential issues and be prepared to update their code and dependencies.

Class Components vs Functional Components

Drex72 — Tue, 24 Jan 2023 15:56:47 +0000

In this article, we will be talking about the difference between functional and class components and which one is the most beneficial to use when creating a project

The primary distinction between the two is that while Class Component is a class that extends from React Component and creates a render function that also returns a React Element, Functional Components are just pure Javascript functions that take in arguments known as props and then return a React Element called JSX.

// Class Components
class MyClassComponent extends React.Component {
  render(){
    return (
      <div>Hello World<div>  
    ) 
  }
}

// Functional Components
function MyFunctionComponent (){
  return (
    <div>Hello World<div>  
  )
}

// Functional Components (Arrow Function)
const MyFunctionComponent = ()=> {
  return (
    <div>Hello World<div>  
  )
}

Major Differences Between Class and Functional Components

State

Class components are referred to as stateful components because they implement logic and state, which means they manage how the state changes and how the logic of the component is implemented.

Components without any state are known as stateless components, and you cannot use this.setState inside these components.

Without a render method, it behaves like a regular function.

Since it lacks a lifecycle, lifecycle methods like componentDidMount and other hooks cannot be used. From this definition, we can see that a functional component is a stateless component because they simply accept data and display them in some form that is they are mainly responsible for rendering UI. It accepts properties(props) in function and returns JSX.

LifeCycle

Lifecycle hooks are another feature that cannot be used in functional components.

All lifecycle hooks originate from the React. Component, which you extend in class components, for the same reason as for the state.

Functional components lack lifecycle methods since they are just straightforward JS functions that accept props and return their elements, whereas class components contain methods like componentWillMount, componentDidUpdate, etc.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      points: 0
    };
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    // called before every render (when props or state are changed)
    // returns
    // 1. object for updating state from props
    // 2. or null for no state updates

    if (nextState.points > nextProps.maxPoints) {
      console.log("points = maxPoints ---> reset points");
      return {
        points: 0
      };
    }
    return null;
  }

  shouldComponentUpdate(nextProps, nextState) {
    // returns
    // 1. true if rendering is needed
    // 2. false if rendering is not needed
    return nextState.points % 2 === 0;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("--- getSnapshotBeforeUpdate");
    console.log("prevProps", prevProps);
    console.log("prevState", prevState);
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
  }

  componentDidMount() {
    // called once when component is mounted to the DOM
    console.log("--- componentDidMount");
  }

  componentWillUnmount() {
    console.log("--- componentWillUnmount");
    // - clearing up timers
    // - cancelling network requests
    // - cleaning up subscriptions
  }

  handleAdd = () => {
    this.setState(state => ({
      points: state.points + 1
    }));
  };

  render() {
    const { points } = this.state;
    return (
      <React.Fragment>
        <h1>Points: {points}</h1>
        <button onClick={this.handleAdd}>ADD</button>
      </React.Fragment>
    );
  }
}

Order

When a function is returned, it can no longer be maintained because Functional components work from top to bottom, while for class Components, Different life cycle methods are kept alive, performed, and triggered based on the phase of the class component after it is created.

Syntax

In Class Components, the render method is necessary to render components and it uses the setState method to manage the state of the application.

class Counter extends React.Component {
  constructor(props) {
   super(props);
   this.state = {counter: ' '}
  }

  increaseCounter(){
    this.setState((state) => {
      return {counter: state.counter + 1};
    });
  }
  render(){
    return (
      <div>{this.state.counter}<div>  
    ) 
  }
}

While in Functional Components, we dont use the render method to render our components and we make use of hooks to manage our state.

const Counter = ()=> {
  const [counter, setCounter] = useState(0)
  const increaseCounter =() => {
    setCounter(counter + 1)  
  }
  return (
    <div>{counter}<div>  
  )
}

Which Should I Use

There have been so many questions and controversies as to which to use, whether functional or class and I believe that it all comes down to personal preference.

But i advise using Functional Components as most modern-day React/Next Projects are built on Functional Components and other reasons as mentioned below

They assist you in employing optimal practices.

If your component doesnt have access to setState(), it will become simpler to distinguish between presentational and container components because you will need to consider your components state more.
There is less code and it makes your code a whole lot easier to read
The React team mentioned that there may be a performance boost for functional components in future React versions

Conclusion

So according to all what was said earlier and after comparing pros and cons of both sides, i think its comfortable to say that when constructing presentational elements without their own states or requiring access to a lifecycle hook, the most optimal choice of component to use would be the Functional Components, otherwise, you can use Class components and even spice them up with Higher Order Components.