How to Become a Frontend Master?

Last Updated Date: 13.06.2023 ©Copyright: OnurDayibasi

You do not think that you have deep knowledge in the Frontend area. However, you have studied many learning contents; you are not confident in Frontend when you start a new job, and you cannot develop your codes although you comprehend the existing architecture. LearnReactUI.dev is a website where you can meet all your relevant requirements in a single place.

Although the focus of the learning content on this site is React, the main goal here is to introduce UI development. The learning content is based on the essentials and mechanics of the real work done; therefore, regardless of the UI library -React, Vue, Angular, Svelte, etc.- you use, you will be able to learn many subjects at this website irrespective of the language.

Any person just at the beginning of his career may ask, “**Which learning route should I follow?**”

There is no prepared route applicable for every person since the learning method and requirements of each individual are different. In the other learning courses, you can see roadmaps where the topics are arranged to be successive and grouped according to their simplicity.

It seems an easy and quick process to gain expertise by following these sequential steps, but we encounter a quite different mechanism running in real life. You can see with several examples and in connection with the projects you develop that there are many interconnected atomic structures instead of the consecutive structures placed one under another and that the content of these concepts is much more, and the connections are stronger.

This can also apply to learning. ****What is **Real Learning**?

“Real learning is not memorizing knowledge. It’s understanding and knowing how to use and find knowledge. Learning is what you do with knowledge, how you integrate it, and how you talk to your family, friends, and classmates about it. That’s what learning is. “(Dennis Littky)

For better clarification of the subject, an explanation is provided with the images below:

• The example given on the left side is the method commonly used in the market.
• The example on the right side shows the knowledge required during the development of an application in the real world.

Learning Content - Real World

Connection Between the Learning Content and the Information in the Real World

Generally, we can see that the educational contents are arranged in a way to give the instructional concepts and lessons in a predefined and successive order. A single topic is focused on, and this topic is explained instead of describing how the interconnection should be made between these contents and which type of applications should be created.

But this is not the real world. In the real world, knowledge is in the form of interconnected nodes. You may need to know and use some information and concepts at a higher level while it may be sufficient for you to know some on a limited scale. Some topics are provided on every platform, but you may find information on some topics on Stackoverflow or in the depths of the source codes of the GitHub open-source projects, or you may need to find a similar issue and implement it into your project.

When creating a component or a website, you need to use and combine all the information concerned in harmony. During this creation process, it is critically important for you to have full knowledge of many concepts, know the best practices and be aware of many hidden details. The essential point is that you need to know how to harmonize the knowledge gained.

In other words, the knowledge you will gain in the specified courses may introduce, for example; the ingredients that can be used, the tools, and the tutorials related to the tools, but it will NOT give the meals (components) you can cook with all these ingredients and tools.

LearnReactUI.dev site enables you to reach your goal in a really fast way with the learning content including examples close to the real-world practices, and for doing this, it takes the learning method which provides the aforementioned relations and depth as the basis.

1. Difference between LearnReactUI.dev and the Others: The Learning Content

First of all, it is a learning site that will prepare you for your project development process in the real world. For this purpose, you will find a course about the practices based on real project examples.

During my software development process of 20 years, I have taken place in UI development:

for applications running in different Backend environments

• On-Prem Machine, Near Real Time
• WebSocket and HTTP on Cloud

with teams in varying sizes

• Small Size Teams (5-20)
• Mid-size Teams (20-50)
• Very Large Teams (50-100)

in different sectors

• Military
• Insurance and Banking
• Governmental Institutions
• APM (Application Performance Monitoring)

by using different languages and libraries on the UI

• Java, Swing, JavaFX
• JS, JQuery, ExtJS
• JS, React

I have gained lots of experience from these projects. In the learning content I will prepare, I will try to explain these experiences to you through examples close to reality by using up-to-date technologies and libraries.

1.2 Difference between LearnReactUI.dev and the Others: The Learning Process

Comparison between the Learning Processes in the Learning Content and the Real Projects

The courses in the learning sites are generally in a specific line and order, as mentioned above, and they are provided in the below-mentioned structure:

• Details of the Topic
• Quiz
• Example

While this method of learning could be a useful way to follow if you are not familiar with a topic and you are trying to learn it for the first time, you may have to deal with unnecessary details if you have some knowledge of that topic or you may forget many topics you remember at the beginning as the course progresses.

However, in the real world, we experience learning through Mistakes, Development of Capability for Projects, or PoC (Proof of Concept) activities. During the development of projects, we also feel time pressure. We need to pay high attention in many respects during the development process:

• Not to damage the previous Legacy code
• To be in harmony with the architecture
• To complete the work within the given time
• To develop maintainable and reusable codes for the future

1.3 LearnReactUI.dev Gives the Ability to Think Outside the Box

Looking from different perspectives regarding the Frontend provides major advantages to the developers.

• Working on the End User’s Browser
• Working on the Development Environment
• Working on the Server

Thinking Outside the Box in Terms of Frontend Development

• With respect to Frontend, initially, there are tools and libraries used by the developers in the development processes in their environment.
• In the following process, the related outputs are deployed to specific servers, and services and tools are used while rendering service to the users from these servers.
• In addition, there is a section where the user monitors on the browser the data, such as HTML, CSS, and JS, has taken from the server via the browsers and the other data (JSON, Audio, Video, Image, Base64) and where the user manages the user interactions.

In sum, three environments could be mentioned in total. When you learn the exact position of the technology and concepts within this cluster, you can better comprehend many topics.

In the figure below, you can see the positions of the concepts within the cluster more clearly.

Technical Details for Thinking Outside the Box in Terms of Frontend Development

1.4 LearnReactUI.dev Uses Different Libraries and Shares the Related Experiences and Comparisons

Today’s Web Application development process runs over open-source libraries. Especially in the React Ecosystem, there are thousands of different libraries. It is particularly important to use these libraries correctly when required and to make the right selections. The libraries to be used may differ from project to project according to the requirements.

For example, there is more than one library in the State management for React: Redux, Apollo GraphQL, React-Query, etc. Here, you need to know the State Management concept's scope to understand which library should be selected. LearnReactUI.dev ensures comprehension of the topic by describing the concepts in question with examples based on one of these libraries.

1.5 Courses in LearnReactUI.dev Are Prepared Similarly to the Microservice Logic

Microservice has become popular initially on the Server side and then on the Frontend side. And what is Microservice? In the Microservice logic, the applications are designed as small applications instead of monolithic units; therefore, these parts will not affect the application generally and will be scalable.

Similarity Between the Learning Method in ReactLearnUI and Microservice

LearnReactUI.dev courses will similarly be in the form of small application parts. You can select the courses in the form of smaller parts like these application parts, and you can create the course close to your applications using the interrelated parts. Thus, you can quickly adapt the available learning examples to your projects.

HOW TO BECOME A FRONTEND MASTER?

Subscribe to the LearnReactUI.dev site to take the first step toward this goal and get access to the content that will always carry you a step forward. As the Technical Detail document, the continuation of this article is updated along with every topic of the course. You will receive a notification mail and will always be informed to benefit from the learning content you want.