DEV Community: Omolade Akingbade

Exploring React and Angular for Modern Web Development

Omolade Akingbade — Sat, 29 Jun 2024 19:14:26 +0000

When talking about Frontend Frameworks, React and Angular tops the list as the two most popular technologies.
In the current world of web development, deciding on a technology/framework to build with can be an hassle, this is because, the number of frameworks, tools and technologies keeps on rapidly increasing.

Thinking of a Frontend technology to use for your next project or to learn for web development? Do not freight, in this article, I will explain what each framework is, highlighting the significant features, their benefits and limitations.

What is React? React is a Javascript library for building user interfaces. It makes use of the component based approach, which ensures to help build reusable UI components.

Key Features and Benefits of React

It makes use of a single-direction data flow model. That is, a one-way data flow from parent to child components. The child components are typically designed to be more modular and can be reused across different parts of an application, enhancing code maintainability and reducing redundancy.
Makes use of Javascript ES6 and JSX. JSX which means Javascript xml, allows us write Javascript inside of Html. However, to ensure type safety, React can also be extended to use Typescript. Typescript provides a strong static typing system that allows developers to define and enforce types for variables, props, states, and function parameters within their React components and applications.
Uses a virtual DOM - a lightweight representation of the real DOM. React is able to produce high-performance interfaces with the help of the virtual DOM.
For state management, it features React Context, but requires external libraries like Redux or MobX for complex state management.

What is Angular?
Also a JavaScript framework, simply put, it is an open-source JavaScript framework built on top of TypeScript.

Key Features and benefits of Angular

It uses structured MVC (Model-View-Controller). Angular as a framework enforces a structured MVC architecture for clear separation of concerns.
Angular makes use of a two-way data binding system. It utilises a two-way data binding system between the model and the view.
Angular supports TypeScript natively, but can also work with JavaScript
Built-in state management. This ensures predictability and consistency throughout the application.

Major differences between Angular and React JS

Angular is an open-source structural framework developed by Google used to build dynamic web apps, while ReactJS is an open-source library, developed by Facebook, that allows us build UI components.
React JS is a JavaScript-based library, whereas Angular is a TypeScript-based web application framework.
Angular Utilises a two-way data binding system between the model and the view while React employs a one-way data flow from parent to child components.
By providing a structured approach to handling complex application state, Angular’s built-in state management supports scalability and maintainability . As the application grows, developers can rely on Angular’s patterns to manage state without introducing spaghetti code or ad-hoc solutions. On the other hand, React does not come with a built-in state management solution like Angular's services and RxJS observables. Instead, React encourages developers to choose from a variety of state management libraries and patterns based on the specific needs of their application.
React ships high-performance interfaces using the virtual DOM, while with Angular, High performance can get slower than React as the number of data bindings increase.

In conclusion, it’s no doubt that Angular and React are two powerful front-end frameworks, each with it’s own distinct strengths suited to different development contexts. Angular portrays a comprehensive, opinionated approach, offering built-in solutions for routing, state management, and testing that streamline development but may require developers to adhere to its conventions. In contrast, React emphasises flexibility and a vast ecosystem of libraries, allowing developers to tailor solutions to specific project needs while promoting modular, component-based architecture. The decision as to whether to choose React or Angular depends ultimately on project requirements, team expertise, and the desired balance between structure and flexibility in modern web development.

I'm currently enrolled in the HNG11 bootcamp, where I'll also be connecting and collaborating with other experienced developers across the world to build exciting projects. If this sounds interesting to you and you are thinking of how you can also be a part of this great feat, look no further, use either of these links https://hng.tech/internship or https://hng.tech/premium to register and let's change the world one project at a time!

Css Display Properties and Positioning

Omolade Akingbade — Fri, 29 Oct 2021 18:56:28 +0000

To talk about css display properties, we can’t but discuss briefly about how elements occupy space in html.

There are two types of html elements. Inline and Block level elements.

Inline elements take up the same space as their content i.e. the element contained within their tags. The elements are displayed in a line side by side from the left . The elements will only wrap to the next line if the content can’t fit on the same line within it’s container. Some common inline elements are anchor tags, span, strong, etc.

Block elements on the other hand are the same height as the content contained between their tags, but they span the entire width of their containing element, even if the content itself doesn’t. This is why block elements always start on a new line and stack on top of each other. Majority of elements are block. Some common ones are paragraphs, headings, article, section, etc.

The display property can be used to change the default behaviour of inline and block-level elements, using a value of block, inline, or inline-block.

For block elements, setting the width and height will change the size of the element, but not the display behaviour. The elements will still stack on top of each other.

For inline elements, adding width and height has no effect. This is where the display property can be used to adjust the default behaviour.

Adding

display: block

to an inline element will make it display like block elements. The width and height will be applied, and the elements are also stacked on top of each other, just like block elements.

Setting

display: inline

to a block element will give it the characteristics of inline elements. The elements will be displayed on the same line, and the width and height no longer applies.

There is one more important value which is inline-block. This will apply the characteristics of both Inline and Block.

display: inline-block

Using these properties help us separate content from style. You may want your elements to display on a new line, or on the same line, but instead of picking an HTML element that looks a particular way, choose the most semantic element for the content, and then change the display with CSS.

CSS POSITIONING

The position property can also be used to change the flow of the our document. There are 5 different position values. Each responsible for a different type of positioning.

Static is the initial value, which means elements are not positioned. The 4 other values:
relative, absolute, fixed, and sticky,
are positioned by arranging elements relative to its current position, its containing element, or the browser view port.

For all of these values, except static, the top, right, bottom, or left properties must also be suit to specify the placement of the positioned elements.

Relative positioning. It is the only positioned element that stays in the layout flow, so no changes is evident until at least one offset property is added. So, for example, if a top value of 10 pixels, and a right value of 30 pixels, is added to a box in a relative position, it pushes the box 10 pixels away from the top of it's current position, and 30 pixels away from the right of it's current position. Relative positioning does not affect the flow of the other elements.

Position absolute, Imagine there's a fixed box and an absolite box, and the fixed box was stacked below the absolute box, adding the

position: absolute

will have the absolute box move behind the fixed box because the absolute box has been removed from the normal flow. The fixed box will move up to fill the empty spot.

Elements with absolute positioning are relative to it's closest positioned ancestor element. If that exists, it will be relative to the body element.

Now the last one, the sticky positioning.
For example, when

position: sticky

and a top value of 10 pixels is added to an element, with sticky positioning, it stays in the initial spot until you scroll the page.

Conclusively, it may be tempting to use the position property for page layouts, since you can arrange them in specific positions. But positioning shouldn't be used in this way, since it takes the element out of the stacking order and the normal flow, with the exception of relative. Stick to using position for styling smaller page components such as a fixed navigation bar, rather than large page layout blocks.

Passion Led Me Here: HNG Internship 8; My Goals.

Omolade Akingbade — Sun, 15 Aug 2021 22:09:25 +0000

The thirst for success I would say, and the willingness to give it all it takes was what led me to join the tech community on Twitter and trust me, I try not to miss any tech-related post.

As fate would have it this very day, I was surfing through my twitter feed and boom, the opportunity I’ve been searching for, staring right at me, guess what; it was the Zuri Internship training. I can’t particularly recall the handle of the poster, but that was the beginning of an exciting and life transforming journey for me. To say the ZuriXI4G experience was great is an understatement. It was an awesome experience, the mentors were amazing, as a beginner, the ZuriXI4G training was just perfect.

Here’s a link to the Zuri training https://zuri.team for an extraordinary and life changing experience. I'll also be leaving below some links to beginner friendly tutorials that has helped me on this jouney.

Having sailed through all the stages of the Zuri training to the project phase, the opportunity to enroll for the HNGi8 internship came knocking. Who doesn’t want an internship that has produced the most sought after, world class developers both in and outside Nigeria?

The HNG internship has over the years been known to have produced exceptional developers. I consider it a great privilege to be part of the HNGi8.

In this Internship, My stack is Frontend, yes of course, I love to beautify and turn ideas/designs into reality.

One of my goals is to connect with people and build strategic relationships needed to excel in this field. In any field at all, the relationships we build, contribute greatly to our growth.

Moreover, I would love to put into good practice all that I’ve learnt in the training phase, to become a better developer.
Most importantly, my goal is to become an expert in this field, to become not just a developer, but one who is thoroughly proficient and efficient.

Also, becoming a finalist in HNG is a big deal, and that’s definitely one of my goals. I can’t wait to share my success story with you.

Conclusively, to achieve these goals, believe me, hard work balanced with smart work and determination is a necessity, and I’m determined to give it all it takes.
Below are some helpful and beginner friendly tutorial links, for learning how to design with Figma, how to use GIT, Introduction to basic HTML and JavaScript.

https://trydesignlab.com/figma-101-course/introduction-to-figma/
https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners
https://www.w3schools.com/html/
https://www.codecademy.com/learn/introduction-to-javascript