The Front-End Learning Map, Part 1

Get unlimited access to the best of Medium for less than $1/week.
Become a member
The Front-end Learning Map, part 1

Caio Vaccaro · Follow
7 min read · Aug 24, 2020
49
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.
Paintings in caves, before the written word.
Libraries with indexed and cataloged information.

Datacenters with indexed information in computers hardware.
Search Medium Write
Software, organised and cataloged information in your computer.
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.
You can see the whole map with its branches here.
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:
How a Virtual DOM works
Why immutability is very smart
How WebAssembly is super fast
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. ✋
Photo by Daniil Silantev on Unsplash
Programming Front End Development JavaScript Learning
Software Development
Written by Caio Vaccaro Follow
474 Followers
You can change direction ⛵
More from Caio Vaccaro
Caio Vaccaro Caio Vaccaro in Better Programming
Arquitetura Front-End: Definindo React and MobX — Lessons

padrões Learned
Você vai passar horas, todo dia, por meses Get started with MobX as your state
olhando para esse projeto, não seria… management library today
5 min read · Jul 20, 2020 · 6 min read · Oct 1, 2020
51 2 209
Caio Vaccaro Caio Vaccaro in Better Programming
React + MobX, lições aprendidas Programmers, Take Care of Your

Introdução Brain
Programming is an exhaustive cognitive
activity, and we humans are not machines
7 min read · Jun 3, 2018 · 8 min read · Aug 11, 2020
175 2 159
See all from Caio Vaccaro
Recommended from Medium

Jeswanth Reddy in Version 1 Dmitry Kruglov in Better Programming
Difference Between Promise and The Architecture of a Modern

Async/Await Startup
If you’re reading this, you probably Hype wave, pragmatic evidence vs the need
understand how the promise and async/awa… to move fast
2 min read · May 12 16 min read · Nov 7, 2022
1.2K 10 5.6K 50
Lists
General Coding Knowledge It's never too late or early to

20 stories · 313 saves start something
15 stories · 110 saves
Stories to Help You Grow as a Coding & Development

Software Developer 11 stories · 161 saves
19 stories · 354 saves
Love Shar… in ByteByteGo System Design Allian… Coding Beauty in Dev Genius
System Design Blueprint: The 10 essential VS Code tips & tricks

Ultimate Guide for greater productivity
Developing a robust, scalable, and efficient Boost your productivity with VS Code:
system can be daunting. However,… discover key features to enhance your codin…
· 9 min read · Apr 20 10 min read · Aug 20
7.7K 53 1.3K 10
Adham Dannaway in UX Planet Arslan Ahmad in Level Up Coding
16 little UI design rules that make a Don’t Just LeetCode; Follow the
big impact Coding Patterns Instead
A UI design case study to redesign an What if you don’t like to practice 100s of
example user interface using logical rules or… coding questions before the interview?
14 min read · Mar 14 5 min read · Sep 15, 2022
16.8K 143 3.4K 16
See more recommendations

The Front-End Learning Map, Part 1 - by Caio Vaccaro - Medium

Uploaded by

Copyright:

Available Formats

The Front-End Learning Map, Part 1 - by Caio Vaccaro - Medium

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Front-End Learning Map, Part 1 - by Caio Vaccaro - Medium

Uploaded by

Copyright:

Available Formats

Get unlimited access to the best of Medium for less than $1/week.

I will organize my ideas throughout 12 sections, which will be divided into

Computer and Programming

Internet and Network

Requests and Servers

Browser, HTML, CSS and Javascript

Rendering flow and native APIs

A possible evolution towards the Front-end developer

What does a Front-end developer do?

Libraries with indexed and cataloged information.

Software, organised and cataloged information in your computer.

And so our map begins…

We can make a “reverse engineering” of our ecosystem, based on the result

These applications were developed using different paradigms and standards

Computer and Programming

Knowing a little about how information is transformed into different

Understanding how information (variables, for example) is indicated and

Recording information in the HD is slow, so avoid caching or recording

Try to understand the compilation process in order to properly know the

Contexts and purposes of different paradigms, concepts and programming

Academic / mathematical / scientific context: depending on the purpose,

Enterprise software, object-orientation

Graphical interface (GUI), a lot of MVC and its variations

Data structure and algorithms

Blocking and non-blocking code

Paradigms, such as imperative, functional and object-orientation

How a Virtual DOM works

Why immutability is very smart

How WebAssembly is super fast

Programming Front End Development JavaScript Learning

You can change direction ⛵

More from Caio Vaccaro

Caio Vaccaro Caio Vaccaro in Better Programming

Arquitetura Front-End: Definindo React and MobX — Lessons

5 min read · Jul 20, 2020 · 6 min read · Oct 1, 2020

React + MobX, lições aprendidas Programmers, Take Care of Your

7 min read · Jun 3, 2018 · 8 min read · Aug 11, 2020

See all from Caio Vaccaro

Recommended from Medium

Difference Between Promise and The Architecture of a Modern

2 min read · May 12 16 min read · Nov 7, 2022

General Coding Knowledge It's never too late or early to

Stories to Help You Grow as a Coding & Development

System Design Blueprint: The 10 essential VS Code tips & tricks

Adham Dannaway in UX Planet Arslan Ahmad in Level Up Coding

14 min read · Mar 14 5 min read · Sep 15, 2022

16.8K 143 3.4K 16

See more recommendations

You might also like