Forem: Mayank Yadav

A Tale of Two Frontend Frameworks

Mayank Yadav — Thu, 20 Jul 2023 16:36:22 +0000

In the vast realm of web development, selecting the right frontend framework is akin to choosing a path in a dense forest, with each turn leading to new challenges and revelations. My journey commenced in 2019 when I decided to embark on the path of React, mesmerized by its soaring popularity and vibrant community. Brimming with enthusiasm, I completed an extensive React course, diligently coding alongside the instructor, and mastering its concepts. Yet, as I approached the end of the course and ventured into building my own projects, I felt lost in a labyrinth of possibilities.

Undaunted by the roadblocks, I resolved to deepen my understanding by revisiting the course. Armed with prior knowledge, I grasped the concepts with ease, yet the chasm between theory and practical implementation persisted. Though I managed to crack interviews due to my solid grasp of React's core concepts, I couldn't help but wonder why I struggled to create real-world projects.

Fast forward to 2020, my career took a new trajectory as I transitioned to a role that introduced me to Angular. To my surprise, the experience was markedly different. Within a mere fifteen days, my Angular code was in production, a feat that had eluded me with React. This newfound fluency with Angular led me to ponder over several theories that may have contributed to my affinity for the framework.

Prior Backend Experience: Having a background in backend development using Java, I found Angular's concepts, such as classes, interfaces, strong typing, and dependency injection, strikingly familiar. Angular's adherence to object-oriented principles resonated with my backend development practices. Furthermore, the concept of services for business logic aligned harmoniously with my previous experience.
Too Many Choices in React: React's ecosystem is brimming with myriad options and libraries, providing developers with unparalleled flexibility. However, this abundance of choices often leads to indecision and confusion. While one method might seem appropriate for a particular task, an entirely different approach might be suggested elsewhere, leaving developers perplexed and doubting their choices. This phenomenon, known as the "too many choices" problem, can hinder productivity and slow down the learning process.
Learning at Work: The idiom "learning by doing" holds true in the realm of software development. My hands-on experience with Angular at work provided invaluable insights into the framework's inner workings. By studying code written by seasoned professionals, I gained practical knowledge that I could apply to new projects. Comparatively, self-paced online learning, while valuable, often lacks the real-world context that on-the-job experience can provide.
Lack of Segregation in React: In React, it is not uncommon to find components containing HTML (JSX), JavaScript, and CSS within the same file. This lack of clear segregation may lead to cluttered codebases, making it challenging to maintain and troubleshoot. While it is possible to separate concerns into separate files, React does not enforce a standard practice, leaving it up to developers to decide on an organization strategy. Ironically, this lack of clarity brings to mind the very reason JavaServer Pages (JSP) faced criticism and was eventually phased out.
Complex State Management in React: State management is a crucial aspect of building scalable and maintainable applications. In React, various approaches exist, such as React Context and Redux, each with its complexities involving reducers, actions, and effects. This complexity can be overwhelming, especially for developers new to frontend development. In contrast, Angular offers a more straightforward state management mechanism. For simpler applications, one can store state in services, while for more complex scenarios, Angular provides NgRx, which embraces the Flux pattern.
Modularity in Angular: One of the standout features of Angular is its emphasis on modularity through the concept of modules. By dividing the application into cohesive, self-contained modules, developers can control loading strategies, share states, and manage services more efficiently. This design fosters collaboration within teams, with each team focusing on distinct parts of the application while maintaining overall coherence. The modularity aspect of Angular is further echoed in the concept of Angular libraries, allowing the reuse of components and services across multiple projects.
Why Use a Framework: The allure of frontend frameworks lies in their ability to abstract complexities, providing developers with a smooth development experience. However, React's need for vigilance in avoiding direct state updates and nested function calls can sometimes challenge the very essence of a framework's purpose. Ideally, a framework should interpret changes and update the application efficiently, promoting immutability and unburdening developers from micro-managing state updates.

After all these experiences, I now find myself in the year 2023, at a point in my career where I have the opportunity to explore React once again. The buzz surrounding React has not diminished over the years, which piqued my curiosity to reevaluate the framework with a fresh perspective. As a developer who has gained proficiency in a component-based SPA framework like Angular, I now find myself better equipped to comprehend React's intricacies.

Surprisingly, this time around, I am finding React easier to understand. My prior experience with Angular has provided me with a valuable foundation to grasp React's concepts more effectively. The years of working with a component-based architecture have honed my skills in structuring applications and managing state, which in turn allows me to navigate React's ecosystem more confidently.

Yet, even with this newfound appreciation for React, I still wonder why it continues to reign supreme in popularity compared to Angular. Both frameworks boast a rich set of features, catering to different development needs and styles. It could be that React's flexibility and wide array of community-contributed libraries continue to attract developers of all backgrounds and preferences.

In conclusion, my journey with React and Angular has been a profound learning experience, shaping my understanding of frontend development. Each framework possesses its unique strengths and weaknesses, and the decision to choose one over the other must be based on the specific requirements of the project and the preferences of the development team.

As I embark on new adventures in the ever-evolving web development landscape, I remain open-minded, ready to embrace the next challenge that comes my way. Whether it's React, Angular, or any other emerging framework, my journey as a full-stack developer continues with excitement and anticipation for what lies ahead.

Markdown: The second step to writing your Blog/Documentation

Mayank Yadav — Mon, 27 Jan 2020 07:33:05 +0000

The first step is sitting down and writing it. I'm serious Karen. Stop watching that TV show and start writing. 😜

As per Wikipedia,

Markdown is a lightweight markup language with plain text formatting syntax. Its design allows it to be converted to many output formats, but the original tool by the same name only supports HTML. Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

It is much easier as compared to HTML as the latter is quite verbose and not easy to read with all the tags. Let's take a look at how it's done.

NOTE: Markdown may have different flavors, i.e., it may be parsed differently on different platforms.

Paragraph and line breaks

Markdown does not trouble you too much with paragraphs and line breaks. Just press and enter (or return) and start writing. Just like writing an email.

Headers

We get 6 different sizes for headers Just like HTML. The number of #'s you precede the text with is the header size.

# This would be an h1 header
### This would be an h3 header
###### This would be an h6 header

Result:

h1 header text

h3 header text

h6 header text

Emphasize Text

Bold: Surround the text to be bolded by two asterisks(**) or two underscores(__).
Italics: Surround by a single asterisk(*) or underscore(_)
~~Strikethrough:~~ Surround the text with two tildes (~~)

**This is some bold text**
__This is also bold text__
*This text is in italics*
_And so is this one_
_This_text_won't_be_emphasized
*Here's the best __of both the worlds__*
~~Hello! I'm Darth Maul~~

Result:

This is some bold text*
This is also bold text
This text is in italics
And so is this one
This_text_won't_be_emphasized
*Here's the best __of both the worlds_*
~~Hello! I'm Darth Maul~~

NOTE: Markdown does not allow underlines between the texts. Probably because it affects the readability. Another reason is maybe that underlined texts could be misunderstood for links.
However, we can use line breaks and have underlines for headings. Let's see.

Horizontal Lines

At the start of the line, we can put ___ or *** and the press enter↵ (or return) to get a horizontal line break.
We can make an underlined heading by using = (for H1 heading) or - (for H2 heading) below the heading text.

___
I'm a sandwich
***
This is h1 heading
===
This is h2 heading
---

Result:

I'm a sandwich

This is H1 underlined heading

This is H2 underlined heading

Block Quotes

We can add block quotes by starting our line with >. We can also chain block quotes by increasing the number of >.

> This is the end, beautiful friend  
> This is the end, my only friend  
> > The end of our elaborate plans  
> > > The end of everything that stands  
> The end

Result:

This is the end, beautiful friend

This is the end, my only friend

The end of our elaborate plans

The end of everything that stands

The end

We can end the blockquote with an additional enter↵ (or return).

Lists

Ordered lists are very simple. Just do the numbering as you'd do on a notepad.
We can create unordered lists using the plus (+), minus (-) or the asterisk (*)
Use the Tab key to indent and do list nesting.

1. Go downstairs
2. Ignite the engine
3. Roam aimlessly
* Try Gatsby
- Write an article on Hooks
    + Learn GraphQL
        + Dive deep into MongoDB

Result:

Go downstairs

Ignite the engine

Roam aimlessly

Try Gatsby

Write an article on Hooks

Learn GraphQL

Dive deep into MongoDB

Task Lists

Task Lists are basically lists with a checkbox. They can be implemented using square brackets.
([ ]) for incomplete
([x]) for complete

[x] Create a plan for the week
[ ] Exercise
[ ] Get groceries

Result:

[x] Create a plan for the week

[ ] Exercise

[ ] Get groceries

Code Blocks

Code blocks can be created by enclosing the paragraph/code with three backticks.
We can also highlight the code as per the language by writing the language name after the first set of three backticks
To use inline code, enclose the code with a single backtick.

Result:

if (!hungry) {
 code();
} else {
 orderFood();
}

typeof NaN === 'number' // true
Infinity === 1/0        // true
0.1 + 0.2 === 0.3       // false

We must use for...in to iterate objects and for...of for arrays.

Tables

Tables in Markdown are created using pipes(|).
Create the first row of headers enclosed and separated by pipes.
Fill the second row with hyphens(-).
Use colons(:) with hyphens to set alignment for the cells in the column.
Colons on left of hyphens for left-aligned, on the right for right-aligned and on both the end for center-aligned.

|Toy Story Movies|Year of release|Rating (Rotten Tomato)|
|:---------------|:-------------:|-----------:|
|Toy Story|1995|100%|
|Toy Story 2|1999|100%|
|Toy Story 3|2010|98%|
|Toy Story 4|2019|97%|

Toy Story Movies Year of release Rating (Rotten Tomatoes)

Toy Story 1995 100%

Toy Story 2 1999 100%

Toy Story 3 2010 98%

Toy Story 4 2019 97%

Toy Story Movies	Year of release	Rating (Rotten Tomatoes)
Toy Story	1995	100%
Toy Story 2	1999	100%
Toy Story 3	2010	98%
Toy Story 4	2019	97%

We can also use inline markdown properties in the table cells.

Links

Links can be created using the below format.

 [<1. Link Text>](<2. The actual link> <3. Title for the link>).

We can also create internal links, to link within a page.

No one really follows me on [Twitter](https://twitter.com/_mayank_09 "Please follow me. Please follow me. Please follow me.").
You know what happened to [Darth Maul](#Emphasize Text "He got sliced.")

Result:

No one really follows me on Twitter.
You know what happened to Darth Maul

Images

Inserting an image is very similar to inserting a link.

![<1. Alt Text>](<2. Path to image> <3. Optional Title>)

!["Hello World"](https://thepracticaldev.s3.amazonaws.com/i/yo9k0p5d6rk0fdj5q6xi.gif "When you successfully print Hello World")

Emoji 😄

Emojis are simple to implement, but it's hard to really remember them.
I usually refer to this link whenever I need to. It has almost all the codes for emojis you can possibly use.

Can you guess the movie: :boy: :older_man: :car: :watch:

Result

Can you guess the movie: 👦 👴 🚗 ⌚

Highlight

To highlight a text, enclose it with two equal to signs (==)

Look if you had one shot or one opportunity  
==To seize everything you ever wanted in one moment== 
Would you capture it? Or just let it slip?

The bad news is Dev.to does not support == for highlighting.
The good news is, we can use plain HTML in Markdown too. HTML <mark> tag does the job of highlighting really well.

Look if you had one shot or one opportunity  
<mark>To seize everything you ever wanted in one moment</mark>
Would you capture it? Or just let it slip?

Result:

Look if you had one shot or one opportunity
To seize everything you ever wanted in one moment
Would you capture it? Or just let it slip?

Conclusion

There is a lot more in Markdown but this shall be enough to get you through.

If you think Markdown is not worth your time or if you keep forgetting the syntaxes, you should try Typora. It lets you create Markdown with a really interactive GUI.

Also, you can edit markdown online and watch the effects side by side using StackEdit or Dillinger

You can always refer to this article or some other links below:
Markdown Guide
Markdown Guide Extended Syntax
Github Guides: Mastering Markdown

If you are going to write an article on dev.to, do check out Dev.to Editor Guide

Thanks for reading. 💙

My Postman

Mayank Yadav — Sat, 28 Dec 2019 17:05:06 +0000

Almost everyone who works into web development, front-end or back-end, has in some part of their development career used "Postman" or some other API client to test the app we are building. But, do we all know that Postman provides so much more than what we usually use it for.

Let's see how we can be more productive and use Postman to its full potential.

*Since this is not an introduction, I am assuming that everyone here is familiar with basic Postman features such as sending requests, saving requests, creating collections, blah blah blah. *

Time to deliver some letters. 😛

Environments and Variables:

Setting up environments can boost up your productivity if your application is deployed in different systems. With environments, we can switch between different versions in no time.

It's also better to create different environments for the different applications we are working on so that we don't mix up the variables from one application into another.

Variables provide a dynamic nature to the values we use in our application. We can set variables in different scopes, thus we not have to carry the values from the requests manually from place to place.

Postman supports the following variable scopes:

Global
Collection
Environment
Data
Local

The heirarchy of variavbles scopes is like: Data < Local < Environment < Collection < Global

We can set the environments by clicking on the "gear" (⚙️) icon in the top right corner.

We can set the environment variables while adding the environments.

We can easily switch between the environments created.

In order to use the variables declared, we simply have to enclose the variables names in double curly braces.

Scripts:

Scripts can be of two types:

Pre-request Script
Test Script

Pre-request Scripts:

Pre-request Scripts gives us the option to execute something right before sending a request. This can be anything such as setting a variable.

Say, we want to set the date variable to the current date in every request, we can do it by adding the following in the Pre-Request Scripts section

pm.environment.set("time", new Date());

Other Scripts (Tests):

The "Test" section serves a generic purpose of running test cases as well as using it to perform some other tasks such as setting up variables dynamically, chaining requests, etc., right after a request has finished running.

All this happens due to the Postman Sandbox.

Postman Sandbox is a JavaScript execution environment that lets us play with our requests and getting more out of it.

Postman also provides the console option where we can debug side-by-side the tests that we are writing.

We can make an entry into the console using the simple JavaScript console utilities such as

console.log(),
console.error(),
console.info()

Now, let's say we have to save a parameter from the response into a variable. We can simply write a script for that.

The value for "token" will be set in the environment and we can use it later just like any other variable.

Chaining Requests:

Variables are not only useful in switching between the environments, but they also come really handy when we want to set the values from one request and use it into another. We can do this using the scripts we just learned about.

Let's see how we can do this:

Suppose we want to fetch the current weather of a particular place.

We are using two APIs to fulfill our purpose:

We send our location to LocationIQ and get the latitude-longitude pair. We then use these values to get the weather using the Dark Sky API.

The values have been set (we can see the preview on hovering)

We simply have to use the variables to get the values from the previous request into the current one.

Adding Tests:

We can run a sequence of tests on the completion of a request.

Postman provides us a lot of sample test scripts that we can simply add by clicking on it.

Here the first argument in the method test gives the name to that test, and the following argument is the function that executes the test.

Postman sandbox provides us a variety of options to test the desirability of the response. We can write them as:

pm.response.to.be.<condition>  
pm.response.to.not.be.<condition>  
pm.response.to.have.<condition>  
pm.response.to.not.have.<condition>

Say we have to check, in our weather example, that we get an OK response and the response always contains the current weather. We can do it as below:

And then we can see if our test cases have passed in the "Test Results" section

Running a Collection:

Postman provides us a feature called the Collection Runner. It helps us run all the APIs within a collection one after the other.

The Collection Runner then gives us the details of all the APIs that ran successfully with all their details.

Let's take a look.
I have a collection "Task Manager" which has a sub-folder "Users".

The Users folder contains the whole lifecycle of the user form creation to login to update to finally deletion.

On running the collection we get something like this:

All the green dots denote that the request was run successfully.

We can also click on a particular request to see its info:

Authorization:

Postman provides us a lot of options to authorize and authenticate our requests.

With respect to the option we choose, we are given further options corresponding to the option we have selected.

Say, if we choose OAuth 1.0, we will be required to fill out the details such as "Consumer Key", "Consumer Secret", "Access Token" and "Token Secret".

If we choose Bearer Token, then we simply have to input the JWT token which would be appended to the header of our requests, hence authenticating it.

Remember the example in the scripts section? No? Scroll up.

There we had set the token value from the response as an environment variable, we can simply use that value from the environment into our corresponding request, this sparing us of the hassle of copying the token everywhere to each one of our requests.

Wasn't it amazing.

That was all for this article. I have some more features in mind that I may write in future posts.

If you want to learn more about Postman features then refer to the following links:

Enjoy building APIs

Cheers 🍻