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
- Browser, HTML, CSS and Javascript
- Rendering flow and native APIs
- Performance
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
When the Web started, it didn’t make much sense to have a specific professional for the client-side, since HTML and CSS were very simple and straightforward topics by that time. The programmer was someone who found a way to connect a folder on his/her computer to the Web, and generate some pages with content. Eventually, different technology companies specialized in (as well as took responsibility for and, of course, monetized) taking care of the infrastructure of putting something on the Web, which led some professionals to study the administration of servers and databases. The languages available in these online environments have given study material to Back-end developers. And with the evolution of browsers, the creation of Javascript and the maturity of users, a professional has become increasingly necessary in order to take care of the client-side (you can read more about the evolution of the Javascript ecosystem in this article).
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.
The browser, in addition to rendering HTML, CSS and Javascript, deals with networking, making requests and downloading content from appropriate servers, be they the original files of your Front-end code, or Back-end APIs that are likely to access databases. The devices, the browser, and the servers are made of programming languages, which were made exclusively to run on computers — and have a number of features that helps us to understand why they are called that way.
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.
- Understanding how information (variables, for example) is indicated and recorded in memory is important to learn specific data structures that are increasingly being implemented in Javascript. Furthermore, it is important to understand how Set, Map, Lists and other data structures with well-defined characteristics (unlike Array) — such as fixed size, keys and binary trees — influence the performance. It would be also important for you to understand the importance of Javascript compilers that use typing and other resources to try to bring some benefits from compiled languages.
- 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. ✋
