The Front-end Learning Map, part 1
When I worked at Huge, one of the coolest aspects of the job — and one of the things that the team used to like most — was the time set aside to formal learning. Different people participated in the organization of that time, and we tested many different models for it. Eventually, after several rounds of lectures, workshops and free courses, we still missed a direction, mainly about Front-end. Very informally, I started to work on a knowledge map and to speculate about all the different paths we could choose. From then on, everyone could study properly, in addition to the possibility of presenting what they knew and even inviting other people to teach.
I decided to use a Mindmap for this, and what happens when you use it is a “mental” flood of connections with different subjects, so that this method goes a little beyond the Front-end itself. In addition, despite being quite wide-ranging, as I did it in my spare time, it was far from complete and presented several imperfections. I tried to find a model that was easier to share, so that other people could collaborate and help me polishing it, but I didn’t find what I was looking for. Even writing an article may be a little bit difficult when using the format of mindmaps. For all these reasons, the aim of the map I will propose is not to explain the world, but to be an inspiration for you to study in depth the points you want, as well as to help you to understand some elements that might be useful when it comes to deciding on the directions you are going to take in your studies, since there are already very good sources of information about each topic.
I will organize my ideas throughout 12 sections, which will be divided into some articles:
- Computer and Programming
- Internet and Network
- Requests and Servers
- Rendering flow and native APIs
First off, we have to reflect on what Front-end development is and what this kind of professional knows, since unlike other positions — such as the Back-end developer of a specific language (like Java or C#) that has a well-defined ecosystem –, the Front-end has always been a continuously changing professional area.
A possible evolution towards the Front-end developer
Programmer → Webmaster < Back-end and DBA < Infrastructure, DBA, Back-end and Front-end.
What does a Front-end developer do?
If you think about it, the work of a Front-end developer is just the end of a long chain of professionals whose goal is to organize and share information. In fact, people have been engaged with that kind of activity for a long time.
And so our map begins…
Once it became possible to store and organize information on the computer, the Front-end journey officially began. From this point onwards, it would be useful for the client-side developer to learn at least a little about the following subjects.
We can make a “reverse engineering” of our ecosystem, based on the result of the Front-end’s work. This result is noticeable on the screen of some devices, which have their own human-computer interaction mechanism. More specifically, our work runs encapsulated in some ecosystem within these devices, such as the browser, for example. Browsers have access to a part of the device’s engine where they work, via APIs, and as a result we have access to some of these native APIs, as well as to the browser APIs.
These applications were developed using different paradigms and standards that have been upgraded in order to deal with the most common problems. In the end, they are compiled and manipulated by the most basic units of the machine.
To present didactically the conclusions of this map, each segment will have a list of the most important points for the Front-end, as discussed.
Computer and Programming
- Knowing a little about how information is transformed into different formats, bits, bytes, and stored, provides you a background to better understand data structures and formats, such as typed arrays (Uint8Array, etc.), Buffers, and so on.
- Recording information in the HD is slow, so avoid caching or recording things straight in files.
- Choose RAM memory, because the access is faster. You will rarely need anything so persistent that could not be written into memory.
- The GPU processes graphics data faster than the CPU, so hardware acceleration in CSS animations is important.
- If you understand how threads and processes work, it will be much easier for you to understand the differences between the languages and features of Node and Eventloop.
Try to understand the compilation process in order to properly know the difference between compiled and interpreted language. This will help you to understand the reason for the choice for specific languages in projects. Moreover, it will streamline your debugging process — since you will know where each error will appear, as you understand which part is interpreted, compiled, or rendered in the browser.
- If you learn about threads, you will know what concurrency and parallelism are, and it will give you a background to understand WebWorkers and Parallel.js.
Contexts and purposes of different paradigms, concepts and programming design patterns:
- Academic / mathematical / scientific context: depending on the purpose, you will often come across the functional paradigm
- Enterprise software, object-orientation
- Graphical interface (GUI), a lot of MVC and its variations
Your Front-end language and tools were initially programmed with “Back-end” languages, so they share many of their basic concepts:
- Data structure and algorithms
- Garbage collection
- Blocking and non-blocking code
- Synchronous and asynchronous
- Paradigms, such as imperative, functional and object-orientation
A Front-end developer deals directly with people, their needs and habits. From time to time someone carries or adapts a concept to a new client-side framework or library in order to encompass the growing interactivity, the evolution of technology and people’s demands. The following are some examples — now much easier to understand, given the previous background:
If you have any idea on how to improve the mindmap, or how to make a collaborative knowledge format possible, leave your comment. Ideas are welcome, and I will try to incorporate them in the next articles. ✋