As a web developer since 1997, currently working in both the Rails & JAMstack spaces, I can assure any and all beginners out there you don't need to know anything about at least 50% of this stuff, probably closer to 70%.
I also deeply resent the notion that you have to "choose a path." Depending on the task at hand and what I'm trying to accomplish, I'm working on the backend, the frontend, and/or the devops side. I jump between all of those daily. If your stack, website, or web app is so complicated that you simply have no ability to understand how it's built bottom-to-top, back-to-front, and how to deploy it easily, then either (a) you're in a massive team at a gigantic software company, or (b) you're doing it wrong!
Yup. Been doing this since 1999.
The whole "front end"/"back end" thing is an incredibly unrealistic and unnecessary division. Real life work is much more complicated and nuanced than that. I don't know of anyone, maybe outside of (as you said) huge companies, who works that way, having "picked a path" and entirely focusing on one side of the stack. Even if you are a "front end" developer, you are going to need at least passing familiarity with the other side, and vice versa.
Right now, I have back end code open in one split, front end JS in another, HTML in another, an ORM model for reference, and Paw with some API calls. All of these things go together, and I would have a hard time understanding any single part without being familiar with the others.
After you've been doing this for a few years you realize that code is code, whether it's running on a server, or in a browser, or on a desktop or mobile device. It's just code. Once you understand how to "think" like a developer (which in my experience is the biggest hurdle people face), the differences between any of them aren't nearly as large as they seem, and almost all of those things in that graphic are just abstractions over code.
Well, one is client development and the other is server application development.
Pretty big differences there even though there may be some overlap, like the server being able to render HTML which is a unique feature of web clients. I'd cluster "web client development" with iOS and Android development, not with server application development.
Too many people dump on front-end development without realizing that client development isn't easy on any platform, and they all require credentialization in apis or design patterns with major warts.
Except, it's not "just code". Front-end/back-end/ops, whatever, all have vastly different contexts. Hence the separate learning paths. You should know all three, but that doesn't mean you have to learn them at the same time or the same pace. You people are taking this chart way too literally.
I said nothing about want to. Want to and capable of are two different things. If somebody wants to just be a back end dev (or front end, or iOS, or...), by all means, go right ahead. I won't stop them. I don't want to do Android development, but I could if I needed to (after some spin-up time).
But I disagree with the idea that they are so wildly divergent that no mere mortal can grasp them. People in this thread are really selling themselves short with their knowledge, which is more transferable than they realize.
> Certainly, if and when you are ‘full stack’ you can and may do both.....but that implies both exist to begin with.
Not too long ago, both didn't exist and everyone was a web developer. And before that we were just programmers. It's a fairly recent idea.
At a smaller companies go for breadth; there's only a few of you. Larger companies prefer depth - but! at larger companies there can be more projects for you to have your fingers in.
Depending on specialisation, work can be rare but more rewarding - but you can also paint yourself into a corner with things moving out of vogue. Silverlight/flash, Ruby, VB, etc.
I've been at it since the 90s. I'm a generalist, mastered a few areas, and worked in. It gives me choices - I where to go for a web-based job, I'd call myself a web developer and not boast no much about my C knowledge.
At my current job, most the skills I provide aren't necessarily rare, but the combination of them is - where it could take 2+ people to replace me (excluding productivity).
The balance is to specialise enough in a few areas, but not be a "jack of all trades; master of none"
Like I said above, code is code. Code is just syntactic sugar around concepts, and concepts transcend languages and environments. Understand the concepts and you can pretty easily jump around just about any programming environment, from front end to back end to desktop to mobile.
It's kinda weird to me how many people think these things are so different when really they're not. Yes, every language will have its quirks and every context will have domain specific knowledge and tooling. But they are more similar than they are different, and once you grok the similarities, the differences become easy to recognize.
I've seen so many things (languages, toolkits, environments, etc) come and go over the years that I refuse to be pigeonholed into one specialty because they always change, often without warning. Ask a Flash developer how they feel about that today - in one day (the day the iPhone was released) that whole industry collapsed. The great thing about being a generalist is that you can move on, jump in and do the work that needs to be done, no matter what that work is or where it is.
Every so often something genuinely new will come along, that requires some learning and understanding. The container ecosystem are a good fairly recent example of that. But as a generalist, it doesn't look hard or magical to you because it's just something you haven't learned yet. You're prepared for that and you have the understanding to know what you need to know. You also know your limits, and the things that do (or don't) interest you and can adjust the arc of your career appropriately.
I routinely work back and forth between front and backend every day. That is a normal day for me, I love it and and I would not change it. Occasionally I'll lend a hand on an iOS app (that we're about to migrate to React Native as it happens) and maintain some internal Mac apps as well as writing my own Mac apps for fun. I've also run a side consulting business for several years to keep my skills fresh where I tackle everything from DevOps/server maintenance/cloud migrations to frontend/backend to desktop and mobile development. Basically whatever itch I'm feeling at the time.
Concepts translate pretty easily and, where they are different, as a generalist you accumulate enough experience to know what those differences are. And if companies want to divide their jobs into "front end" and "back end," that's fine, because you have the knowledge to apply for either. :)
A lot of people in this thread are really selling themselves short. They know more than they realize and the "other side" of the stack is not some mysterious magic that requires years of intense specialization. It's just programming. Same thing we've all been doing for years.
"Specialization is for insects." - Heinlein
'There is so many things to learn I started with Python but there is this and this and that'
A language is just a language, the principles and your ability to translate problems to code is what is making you a programmer.
But will you see this comment given that you don't get notifications?
If you only have 3 developers, it doesn't make much sense to have one backend, one frontend, and one dev-ops. Are you always going to have exactly equal amounts of work for all three to do each day?
But apart from that, it also seems so much easier to divide up work by feature without stepping on anyone's toes. Like, you code search, I'll code chat. Not you code search backend, I'll code search frontend. That increases overhead and coordination.
Generalist or polyglot developer still doesn't fully capture the broad scope of knowledge you can call on beyond cutting code and may have lost any of its negative connotations over the last 23 years.
e.g. webpack, I ended up getting it setup because 90% of the tutorials out there use it. Same thing for NPM scripts, use NPM, you figure out 'npm run' pretty quick. It isn't learned per se, it is just sort of acquired.
Same thing for eslint, most tutorials start off with "ok now install eslint and use these rules"
If you use react, you'll learn redux or mobx because that is what all the tutorials teach you to use. It'll just happen, and maybe after a month or so of use (or some independent research), the new developer will understand the code they are using.
Learning a test framework, hopefully, comes naturally after the code base grows large enough that a quick manual pass through no longer suffices.
I think going out and purposefully learning these technologies one by one is sort of silly, thinks make a lot more sense in situ. Go build something, after it is mostly done, figure out what gaps in knowledge exist, fill those gaps in.
Yeah sure, I know a bunch of stuff on that list. SemVer? Yeah, I get what the numbers mean. I google the ^x.x.x syntax, whatever.
ESLint, Prettier, yep, install and drop a .config file somewhere. Copy someone else’s. It’s hardly rocket science.
Webpack, I know that it exists and as soon as the defaults installed by create-react-app break, I’ll figure it out.
This is a big list but let’s not pretend that you need to be an expert in any great amount of it to get something made. And the purpose is right there at the top:
“The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy.”
I think it does that pretty well. Settle down a bit, everyone.
If you want to know what to learn, learn web fundamentals. Learn the Web APIs and everything that's been standardized in HTML, CSS and JS. Learn relational databases. Etc. Learn how to build your graphics using SVG. Learn how to do your animations with CSS. Hell, if that's too boring learn WebGL and WebAssembly. They may not be ready, tested or in vogue, but they'll be here for the long haul. Screw libraries that abstract over this stuff. If you don't learn from the ground up you're putting your future career in the hands of things that may end up being ephemeral. Stuff like React, Sass, D3 etc might seem like safe bets, but so did jQuery at one stage.
Just, be aware that your goals as a developer are sometimes at odds with the goals of your employer or even the community as a whole. There's a lot of pressure to get up to speed and be productive as quick as possible. You can see this in things like the React docs, which encourage you to ignore language features and just memorise patterns.
(Also, I have no desire to "work" as a developer for someone else as my salaried job. Perhaps that affects my outlook.)
My usual measuring stick is "if this thing disappeared tomorrow, would I be able to recreate it from scratch myself with no documentation?" (obviously not up to the same performance standards).
It's still a long way off disappearing and in many high security environments might be the only approved library.
I think it could be intimidating for a beginner to think, "Damn, I've gotta learn all these things" and you totally, totally don't. But as you work in this space for a while, you'll encounter a lot of this, and the more you learn about the different pieces, the better code you'll write everywhere.
And heck, a depressing number likely don't even use version control.
The picture of what's 'normal' in this field (via blogs, Reddit, Hacker News, etc) is as distorted as a picture of what a 'normal' life would be like is on social media sites.
If you're at a tech savvy startup or planning to get started as a web developer in Silicon Valley, you'll probably want to know a decent amount of what's on this list. If you're outside of that situation or working contract/freelance/whatever, then you'll only need to know about 50% or so of it.
It's useful to learn about these things but never lose sight of the big picture. Frameworks, tools, languages, trends, all go in and out of fashion very quickly, for various reasons. On the other hand, practices, patterns, soft skills and a good understanding of how things really work will be valuable for an entire career.
Put your energy into understanding which problems are being solved by the above things, not into becoming masters of any particular set of tools. You'll still be very good at those tools because you'll know the role they play and what to expect from them.
I couldn't set up webpack for a project if my life depended on it. To be fair, I spend a lot more time doing back end development.
But even for the back end development pathway, I don't know anything about web sockets, GraphQL, message brokers, ElasticSearch et al, NoSQL, or caching with Memcached/Redis.
It's not that I couldn't learn how to use all of the above, but rather that it's just something I don't have to use at my job. Most employers don't/shouldn't require you to know these things in order to get a job, they are skills you can learn on the job.
The ability to learn is the most important skill an employee can have. The rest is just decoration.
Nobody "needs" anything, so it's not a fair standard to set.
I'd say if you're a developer and you don't know about something on this list, you should probably learn about it. Master? Nah. Know what it is/means? Yeah.
Btw that is some sweet looking graphs, but I think they would be even nicer if they where SVG instead of binary png's.
> If your stack...so complicated that you simply have no ability to understand ... and how to deploy it easily
You are correct. That said I don't share your reaction at all.
You don't need to understand all of these things to understand how one stack is built, or how to deploy, but you DO need to start understanding these things when it comes to making decisions.
I mean, look at the list. Sure, you don't need to know Bootstrap, BEM, etc to work on a website. But if you're a webdev, soon you should know what Bootstrap is, and a few of the competitors. You should understand what the pros/cons are. If your shop uses BEM, that's all you need to know...but once you're no longer new and are starting to make decisions, you need to understand WHY BEM is the way it is, that it's basically trying to NOT cascade, and thus why random CSS advice you read may or may not apply. (and then begin to decide what BEM is good/not good at, and what the alternatives are).
Continue this for discussion for more than 30 seconds and you enter into territory where any realistic human has a path. I've been full stack, backend, frontend...but I always have a "current" path, because that defines what I'm keeping up with, because I can't keep up with it all. So yeah, you have to choose a path, by definition of human limitations. If you don't choose one consciously, you're still choosing one.
Starting webdev? Understand the very very basics of HTTP, add HTML, and realistically add CSS. Read/Write from DOM with JS. Add some templating framework on the backend or frontend. CSS preprocessors show up quick if you're doing anything of any real size or complexity. Front end quickly hits bundlers and transpilers and minifiers...After a year in the biz the list gets pretty long. 5 years? 10 years? 20 years?
The list of topics I can barely mumble about is huge, but that still leaves a big list of items. OAuth? OIDC? Web Services? CORS? SOP? cookies, localstorage? IndexedDB? The field is vast and any individual may only cut one path through each roadmap, how do you know what path is appropriate? Someone might have a path on any number of the roadmaps listed, or just one: They appear to just be a separation between domains, not a declaration that you must have only one (and they're pretty fair IMNSHO - You can definitely focus on just one roadmap fairly naturally).
Where do you feel you must "choose a path"? Why do have such "deep resentment" when I don't see that being said at all? This just shows the topics at different scopes of knowledge, separated by domains that may or may not apply to you, but are natural domain boundaries anyway.
Your response has merit but it would be better if you assumed good faith. Even if you don't understand their thinking.
>I was convinced for a while there as I scrolled down that this was a joke. "Good parody!" I thought to myself. Then I realized to my horror this is actually serious.
...is pompous and holier than thou. Being unable to see the value in this infographic doesn't mean it's trash, and I think it's unnecessary to comment with such an arrogant attitude like that, especially when it's obvious they're just either not the intended audience or they're misinterpreting the goal of the graphic.
That's not a good faith interpretation.
Many of us share a general lighthearted humor about the state of the industry: Becoming a developer in some fields is less about engineering and more about "piecing things together."
Nobody's looking down on anyone. This is often something we joke about because we find ourselves piecing things together, too, almost to a point of silliness. It's not a rip at anyone sharing information, more like a jarring reality check.
But is it obvious? I'm sure others resonate with that.
You have to consider the possibility that his criticism is entirely valid and that a non-zero number of people find this roadmap way more convoluted than it ought to be.
All a beginner needs to know is JS and the basics of HTML/CSS/SQL. If they have a mentor, the mentor should draw out and explain how frontend, backend and databases relate, and the general lifecycle of a request to a webpage.
That's all you really need to start building stuff. The next thing will probably be a basic understanding of DNS and how requests get routed.
Anything much more than that is overkill.
Since the early 2000s, I'd been working with HTML/CSS, with a touch of JS and making visually rich, pixel perfect websites. Then a few years later, I taught myself Python and came to understand how programming works and my skills transferred over to JS as well.
It wasn't until many years after that I finally learned some unix command lines that I was able to bring together my skills to make any use out of them.
CORS potentially might be worth mentioning to get a beginner familiar with security (why can't I just scrape Facebook cookies from my personal website), yada yada.
I think that's kind of still high level to hold limited attention spans without overwhelming but deep enough to prove that there's a bit more going on beneath the scenes.
I feel most new web developers in those jumpstart "become a programmer in 60 days" classes probably know a bit too much about React and probably not enough about the sockets/IPs/networking serving the static assets. Probably not a requirement on day one, but I bet it might make their first "I have to debug this all the way through the stack" problem less painful.
All hypothetical, at least.
To me, the idea is to get a shallow understanding of everything involved from hitting a page, submitting some data, and having it be displayed back to you. Once you have that picture in your mind, adding things like frameworks, git, docker, etc, will be easier for the person to grasp.
Hello, world from a compiler in a terminal is a good start.
You should show them how many lines of code a web browser is and say "here is what it takes to get <p>Hello!</p> on the page" lol
Scare everybody away :)
HTML pages will be served over HTTP too, so that's already necessary to understand how web works.
I would agree that handing this to a beginner would be over kill.
This is probably best suited for people who are in the 'I know the basics, but want to know what this technology-of-the-month is and how it fits in to what I already know' stage.
Once they are reasonably experienced and have started to get the lay of the land, something like this can serve as a good mind map.
If they're going to dabble on their own stuff for fun sure, that's all you need. If you're trying to get a job that won't cut it.
Of course, you should do a great job, dedicate regular time to learning, and explore things that interest you. These maxims are probably true for success in many other careers.
I suppose that charts like this could be useful to find new things to learn? But you certainly don't need to know all of this to get a job. Trying to tick every box on a learning list like this amounts to procrastinating the real tasks of finding work and writing code.
Here's a list of things I have never even heard of just from the "Front-end Roadmap" section: BEM, OOCSS, SMACSS, Bulma, JSCS, ngrx, Vuex, Ava, Protractor, Cypress, Emotion, Radium, Glamorous, After.js, Universal, Nuxt.js, Carlo.
That's only the ones I've never even heard of until today. There's a bunch more I've heard of but never used.
This page is completely the wrong way of thinking about how to become a web developer.
Kinda like in css frameworks, you probably know what bootstrap is, so Bulma is basically alternative to that, but you don't actually need to know/learn them all
In the old days, the big vendors gave you a tool-set and you mastered whatever that gizmo was. Those days are probably dead. Most modern programmers are multi-sub-gizmo gluers.
As a sales tool for STEM, yes it's bad, but it's good as a reality-check about the industry.
Instead, learn how to ask people "what sucks the most?" and then go and build solutions.
I've been doing that for more than 20 years for CxO's, product owners, developers themselves and consumers. One thing that has been constant is the solution is always different and the technology and tools come and go.
I would also add understanding the underlying protocols will help you immensely in any front/back/ops/busdev roles. They stick around a whole lot longer than tooling or frameworks/abstractions.
Why does modern web development have to be so convoluted? Here is a wishlist of what I want from ONE language:
- A package manager like nix so that each project folder doesn't have to be hundreds of megabytes
- Static typing with minimally expressive (i.e. ADTs) type system, type inference
- Built in immutable data by default, so you don't have to pile on 3 different immutable data libraries
- A better alternative to HTML+CSS like Elm UI 
- One very high quality backend framework (exactly like Phoenix)
- One very high quality frontend framework like Elm but with better component reusability, that makes fewer allocations, and that compiles to efficient WASM
For FE, I'm glad DOM manipulation is in there somewhere. These days with modern frameworks becoming a big thing an all, I feel DOM manipulation as a skill is falling by the wayside.
I still recommend http://domenlightenment.com/ to ppl to get a nice base line of what you can do with the browser (a 2013 book but the browser APIs don't change much, they mostly keep adding stuff).
https://hpbn.co/ is a good resource for the networking side of things, if maybe a bit advanced, not sure what would be a more gentle resource to start with.
With regard to CSS, I don't really have any good book recommendation, maybe someone can chime in.
E.g. for me the defining text is Jakob Nielsen's “Designing Web Usability: The Practice of Simplicity,” which probably didn't lose any value in the time since publication, because humans don't change so fast.
P.S. I'm also of firm belief that the proximity principle is by far the most important tool of graphic design and that everyone should learn to see and use it. To, ahem, not make diagrams where everything is lumped together.
(I'm a backend coder, by the way.)
i like rails a lot, but i can somewhat sympathize with the view that the magic underlying it might hinder learning for a beginner. but having learned other languages/frameworks first, rails seemed much cleaner (and welcome) in comparison.
In fact, we're coming up on ten years now! Holy shit I feel old now.
I want to write some text and show it on my browser. (Learn some basic HTML)
I want to add some styling to the text I just wrote. (Learn some basic CSS and understand how it relates to the HTML you wrote previously.)
OK, now I want to publish what I wrote so I can show off to my friends. (Learn basics of static hosting and uploading files to a web server.)
And so on. Travel down the rabbit hole and pick up new concepts and tools as you need them. This will keep you motivated, unlike "bottom-up" learning where you learn concepts first without a clear idea of when and why you might need them (if ever).
I'm in my seventh year of this career, and recently obtained a senior front-end role. I've worked my way through the front-end chart and it's not wrong. To write really solid web applications that work for you, other devs, users and users of limited ability, you should know all that stuff. Only lately have I gotten my skills up to the point where I can write high quality JS, CSS, HTML, and test it fully, automation test it, organize my CSS effectively, make sure it's accessible and make sure I am at least aware of possible security issues. It's a lot of work that requires a lot of knowledge that takes years to develop, but it's not wrong.
We sure have made some progress!
My first website in '96 had a repeatable background image with text over the top. That's still problematic in email templates and easiest to avoid.
Building these types of emails without tables is doable, but you are going to get a lot of inconsistency depending on the device/client/browser.
It "worked" in Outlook (2003, 2007, 2010), Yahoo, Hotmail, and Gmail. And had to display correctly to the recipient in each of those clients.
It was by far the biggest pain in the ass I've ever worked on. Tables weren't enough to make it work outright. Outlook 2007+ couldn't do background images on a table cell, gmail would collapse empty cells, hotmail would remove certain inline styles, and yahoo was actually pretty nice.
The company I worked for took the project on for an equity split + payment plan, we saw a few hundred dollars from it before they went out of business.
15 years later...
It seems they made things "simpler" by replacing all tags with `div`.
I think it is important to understand how basics work before jumping into details. You will not enjoy the best tools available if you don't know how to use them either.
I spent 3 years in front end, largely because I didn't have a CS degree and didn't want to study for those "invert a binary tree" style Google interview questions (I don't have a problem with theory, I just prefer working on real-world problems than studying for interviews).
I was making a good six-figure salary before taking a sabbatical, but may be re-entering the workforce in the not too distant future. I need to decide whether to pursue front-end/full-stack jobs again, or to specialize in something else.
Although front-end would seem to be the most logical since it was my specialty (specifically React), I'm afraid that the influx of bootcamp grads pumping out React devs will saturate the front end talent pool and make jobs more competitive and limit salaries. That and front end still seems to have this stigma of being "easier" than backend, and I don't see that changing. I don't want to invest my career in a field that doesn't garner any respect or have any long-term job security.
Is there any truth to this, or am I being overly pessimistic?
The major issue with this roadmap is that many of the listed items are not necessary for a junior web developer, can be learned later on, or not at all, etc. I don't see any distinction between these different categories of topics.
You only need to master the fundamentals of a small subset of the graphic to get your first job as a web developer.
It's a good resource but I'd be looking more at using this to stay up to date with modern web dev work flows (which seems to have become insane over the past few years.)
Learn HTML, CSS, JS, and work from there.
- Single Repository Principle
- Open/Closed Principle
- Liskov Substitution Principle
- Interface Segregation Principle
- Dependency Inversion Principle
Depending on your goal, the thing is that none of these you need to know as an expert, but need to know the knowledge to collaborate with other people on it.
But yes, the times that you could make “top notch” websites on your own: doing a photoshop design, doing the css/html and code it in bare php are over :)
This diagram is scrary and gives a feeling of overkill.
(I actually transitioned to product/project management at that point, just wondered)
How much money should you command
Also I enjoy seeing cross overs that you can compare such as you could make a transition into dev ops if you choose an appropriate back end, scripting language.
Everyone here is too critical, I think it's a lot of information, but it's very useful to see the goal and steps in front of you.