DEV Community: Joseph Akinwole

React vs Angular: Tips to help you choose ⚔️💻

Joseph Akinwole — Sun, 30 Jun 2024 00:10:01 +0000

Web apps are the most preferred for websites in 2024, they are known for their efficiency in building user-friendly apps, just like adding icing to a beautiful wedding cake. In other words, they make the best UI and functionalities that also run faster.

Today, I will be comparing two notable frontend frameworks for building web applications ReactJS and AngularJS which are both javascript-based frameworks and explore their qualities and uniqueness under the hood as this will be helpful to anyone looking to learn to code with any of both.

React

React shines as a speedy and adaptable JavaScript library for building user interfaces. It mostly works with managing reusable components, making it a great choice for projects that require quick changes and a focus on a smooth user experience. Unlike a full-fledged framework, React offers flexibility, allowing you to integrate it with other libraries and tools during your development process.

Angular

Angular is all about structure. it is really best at tackling complex web applications because of its strong foundation with built-in features for switching pages, working with dependencies, and more. Angular also works alongside typeScript which still focuses on a more structured code. If you are looking to work on projects that focus more on aligned rules, then angular is your guy 👍.

Framework Comparison

To best classify their differences, I will be considering these three simple criteria,

Structure vs. Flexibility

Personally, I see Angular as a pre-built Lego set with clear instructions, where every approach follows a particular structure with built-in features. React is the opposite. it's like a big box of regular Legos, giving you more freedom to design and build how you see fit. So if you prefer more flexibility in your code, you should just go for React

Learning Curve

Angular has a more steeper learning curve because it is quite comprehensive with strict rules and uses TypeScript which is a superset of JavaScript. This adds more features like type-checking, code quality and more, requiring in-depth knowledge of javascript to use. React is more easier to learn for beginners as it focuses on core JavaScript concepts. The best way to think of it is like learning to ride a bike with training wheels (Angular with TypeScript) versus starting on a regular bike (React with JavaScript). While the training wheels provide initial support, they might take a bit longer to master. Although, Once you get the hang of React, working with Angular can feel more natural and flexible.

Speed and Performance

React is known for its speed, especially in smaller apps, because of its virtual DOM system that helps with updates. While, Angular with its structured framework, might be a bit slower to start, but it can be very efficient for complex applications by providing ways to manage data and components smoothly.

Conclusion

Even though it seems like I'm taking the side of reactJS, I can assure you that both frameworks are exceptional and can equally make fully functional and beautiful applications. Now, you should be able to choose which to learn first as a start to your coding journey and I wish you all the best of luck 👍

Want to learn more about coding and development opportunities? Check out these resources:

HNG Internship Program: https://hng.tech/internship,
HNG Hire Platform: https://hng.tech/hire

Font Loading API: A Fun and Powerful Tool for Making Your Web Pages Look Amazing

Joseph Akinwole — Mon, 23 Oct 2023 23:25:19 +0000

The Font Loading API is a JavaScript API that allows developers to load fonts asynchronously. This means that fonts can be loaded in the background, without blocking the rendering of the page. This can improve the performance and user experience of web applications.

Benefits of using the Font Loading API

There are several benefits to using the Font Loading API, including:

Improved performance: The Font Loading API can improve the performance of web applications by loading fonts asynchronously. This means that the page can start rendering before all of the fonts have loaded, which can improve the perceived load time of the application.
Better user experience: The Font Loading API can also improve the user experience of web applications by preventing the "Flash of Unstyled Text" (FOUC). The FOUC occurs when the page is rendered using a fallback font before the desired font has loaded. This can make the page look unprofessional and can be jarring for users.
Support for multiple fonts: The Font Loading API supports loading multiple fonts at the same time. This can be useful for applications that use a variety of fonts, such as web editors or design tools.

How to implement the Font Loading API

To implement the Font Loading API, you can use the following steps:

Create a new FontFace object for each font that you want to load.
Set the src property of each FontFace object to the URL of the font file.
Call the load() method on each FontFace object.
Once all of the FontFace objects have been loaded, developers can use the document.fonts property to access the loaded fonts.

Here is an example of how to use the Font Loading API to load a single font:

const fontFace = new FontFace('MyFont', 'url(my-font.woff2)');
fontFace.load().then(() => {
  // The font has been loaded successfully.
});

To load multiple fonts at the same time, developers can use the following code:

const fonts = [
  new FontFace('MyFont1', 'url(my-font-1.woff2)'),
  new FontFace('MyFont2', 'url(my-font-2.woff2)'),
];

fonts.forEach(fontFace => {
  fontFace.load().then(() => {
    // The font has been loaded successfully.
  });
});

Once the fonts have been loaded, you can then use the document.fonts property to access the loaded fonts. For example, the following code will get the MyFont1 font:

const myFont1 = document.fonts.get('MyFont1');

Then use the myFont1 variable to apply the font to elements on the page. For example, the following code will set the font of the <h1> element to MyFont1:

document.querySelector('h1').style.fontFamily = myFont1;

Conclusion

The Font Loading API is a powerful tool that can be used to improve the performance and user experience of web applications. It is especially useful for applications that use a variety of fonts.

Additional tips for implementing the Font Loading API

Use a fallback font: It is always a good idea to specify a fallback font in case the desired font cannot be loaded.
Use a font loader: There are a number of third-party font loaders available that can simplify the process of loading fonts asynchronously.
Optimize your font files: Make sure that your font files are optimized for web use. This can be done by using a tool such as Font Squirrel Webfont Generator.

I hope this guide has been helpful. If you have any questions, please leave a comment below.

Internships Goals

Joseph Akinwole — Tue, 17 Aug 2021 11:04:09 +0000

It's zuri internship again! And I'm glad to be part of it. It's been two days since my entry on the frontend pathway and my goal is to learn more on frontend web development and be grounded in my career path as a frontend developer.
I seek to brighten my design concept and explore many frontend frameworks and frontend tools for making better UI experience. Being able to have the right attitude to work is one important skill for a developer and I will be looking to attain knowledge on important work ethics and how to handle different technical situations I find myself in.
Most importantly, I would love to connect with a whole lot of awesome people along my field and learn from them.
I have been able to ground myself in some helpful frontend tutorials which I will be linking below and I'm glad to run this internship. Go! Zuri!
https://internship.zuri.team

Git
https://youtube.com/playlist?list=PLxuUHF3OiqfVlhMh2XaA7gx_NaavKM7C9

Figma
https://youtu.be/1MbQaYCCzzI

Nodejs
https://youtu.be/fBNz5xF-Kx4

HTML
https://youtu.be/UB1O30fR-EE

Css
https://youtu.be/yfoY53QXEnI

React
https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3