Web Development Subway Map — 2019

8 min readJun 18, 2019

Picture this: Imagine arriving in a town with only three streets and several blocks. With local businesses and a small community, the town don’t need a map to move around because it’s straightforward to navigate and it would take you only a day or two to figure it out. That was Web Development Town a decade ago, where HTML, CSS, and JavaScript were the only streets. Well planned and with few changes over the years, the golden web standards were easy to understand for developers until 2006, when a small library called jQuery changed that peaceful place.

Fast forward to 2019. Web Development Town is now an overcrowded metropolis, and the way it expanded resembles New York City in the early years and maybe even now (chaos, ambition and noise but also plenty of opportunities).

A special New York icon, the NY City Subway, could help us understand the current state of affairs in Web Development. The New York Subway is a complex and mammoth system, expanded throughout the city for more than a century. But it wasn’t always easy to use. The lack of cohesive signs, typography and colors made the subway navigation system a challenge reserved only to experts for many years. That was fixed by the Italian designer Massimo Vignelli with the adoption of graphic standards and the removal of geographically accurate maps.

After I saw The 2019 Web Developer RoadMap post, I found myself wondering if there is another way to represent this complex roadmap and make it easy to navigate, specially for new developers.

How cool would it be to see all this information with a subway map style, with an easy to follow design despite the complexity of the data? I tried to find one but, without any luck.

Then, Massimo Vignelli whispered in my ear:

“If you can’t find it, design it.”

So I did. I made a map with a more natural way to navigate for developers, especially newcomers, that can be used without too much guidance and can also encourage people to start their journey. This map shows some paths to become a professional web developer (or back-end developer), but there is not a fast-track or an one-day trip.

As Thomas Edison said,

“There is no substitute for hard work.”

This journey is more like if you immigrate to a new country. You are trying to succeed in a complex field, but don’t hesitate; it’s not an impossible mission! You need time, patience, hard work, and a good map.

For more savvy developers, this map can help you to expand your vision about the possibilities and connections.

How to use this map:

There are color-lines, each line represents a subject of study, and in the line, you have stations marked with black dots. Do you need to stop in all the stations? Yes and no, that depends how deep you want to go. Interceptions are where two subjects connected.

Terminal are color-circles and letters. Station are grouped by zones. There are seven zones:

If Front-End is your goal, you need to learn the Core and Open-Source Community zones first, but if you want to pursuit a full-stack carrier, you have to master: The Core, Open-Source Community, Front-End, QA, Back-End, Data, DevOps and Cloud zones.

TL;DR Web Development paths.

Core

The core is the only zone where you have to complete all the lines of study and stations.

As you can infer from the zone’s name, the knowledge you get here is used in any direction you decided to take. That is similar to music fundamentals for professional musicians. You can’t read any score or play an instrument without it.

At the end of this zone, you have to be confident with algorithms, Object-oriented programming (OOP), data structures (Array, List, Stack, Queue), basic network (HTTP, SSH), code version control with git, open your GitHub account and clone some relevant projects, as well as, basic Linux commands to manipulate files (i.e., ls, cp, mkdir, history, ps, rm).

I recommend “this is CS50” YouTube channel to cover some of this topics.

Cool Fact: GTAC also represents the four letters for the bases of the DNA structure. We can say that these four letters have the same relevance here.

Open-Source Community (with Front-End direction)

In the Open-Source community, there are special terminals; some are mandatory for Front-end; in some others, you would have the opportunity to choose your path.

Mandatory Path:

W3C: HTML5, CSS3
ECMA: JavaScript (ES5, ES6)
Apache: HTTP Server
N: Node.js, NPM (or Yarn)

Custom path :

You can pick one of the JavaScript Frameworks or Libraries (React.js, Angular, Vue.js, Ember.js)
Pick one CSS Frameworks (Bootstrap, Materials, Bulma) and pre-processor (SASS, LESS)
For advanced developers add Typescript. For newcomers, we recommend start with Vanilla JavaScript (ES5 and ES6)
The final step of your custom path: Create your specific UI stack (i.e., React + Bootstrap, Angular + Materials, Vue.js + Bulma) and master it. My advice is to research the job posts from companies in your area and use them as a baseline. UI stacks can change from one city to another, and you want to be sure you are investing in the right skills.

At this point you have to be familiar with the top Github projects related with your custom UI stack flavor, preferably making contributions.

Also, you have to understand why you choose one tool over another. React.js vs. Vue.js, for example. No technology can resolve all your problems, and they have PROS and CONS that you need to know to take better decisions.

Front-End

Finally, you enter the zone in which you will spend most of your time as front-end developer. After you decided your IU stack, it’s time to go in deep. Here, you also have to decide about your IDE and browser preferences. Visual Studio Code is an excellent option for IDE and Chrome + DevTools for the browser.

You can try to master as many lines on the map as you want but always start for some point. That makes it easy for you to reuse the lessons you’ve learned. Many of these concepts are common for other lines such as; MVC, DOM, one-way or two-way binding. After you’ve selected your UI stack, your next stations to stop in are clear. For example: if your select path is React.js, you have to invest time to understand JSX, Redux, Mobx, (maybe Relay) to build your web apps. Also, you need to know how to organize a React project from scratch and how to create automated tasks to make your local build. Fortunately, you have GitHub and NPM to find helpers to do these jobs. Google is your best friend, use it!

You may see that many lines merged into others, why? Because finally, we have to produce HTML/CSS/JS components that are the only languages accepted by the browsers. React.js or Angular or Vue.js are just specific approaches in how to implement the Web standards. The same happens with SASS styles; they need to be processed to generate the final CSS file. There are two tools useful for this task:

Babel: is a free and open-source JavaScript compiler and configurable transpiler. It is especially helpful to transform JSX from React.js and to compile the latest JavaScript specs (ES6) into the most supported ES5.
Webpack: is an open-source JavaScript module bundler. It helps you create production-ready files for your Web App.

At this point, you have to be familiar with RESTful API, MVC and MVVM patterns and how to create a local development environment, how to manage your project dependencies with NPM or Yarn and how to create a build script to pre-process your SASS files with NPM or Gulp.

Also, you have to able to produce quick prototypes for the UX team with only HTML, CSS and JS.

QA (with Front-End direction)

QA is an exceptional zone, and as front-end developer, you have to be aware of the two main types of tests you are responsible for:

Unit Test
Integration Test

Ideally, the QA team should take care of the end-to-end test.

Depending on your custom UI stack, you have specific tools to make these tests.

If you gotten up to this point and you had taken the time to learn how web applications work and how to use the right tools to create clear and efficient codes, congratulations! You can call yourself a front-end developer.

Conclusion

Regardless what station you can find yourself on this map, I hope this post helps you get clarity to plan your next moves. The routes are wild and it takes time to know it all, but the effort is worth it. Go.