Guide to becoming a modern front end developer | Hacker News Reader

Guide to becoming a modern front end developer

roadmap.sh

116 pointsLilian_Lee52 comments

This is a disaster and more likely to put a newbie off or confuse them than to help them.

Why is the largest callout dedicated to WebAssembly, noting it as not ready yet? Why is "Using DevTools" near the bottom, branched off PWAs instead of near the top? Why are server-side things like Apollo on there, above things like static site generators? Why are mobile and desktop applications on there? There's a stack of "Redux, MobX, RxJS, NgRx, VueX" boxes along one side with a tick next to each one. Who is that supposed to be helping?

How is a newbie trying to get into front-end development meant to make sense of this without being completely overwhelmed? I know developers with years of experience that would be scared by this; it's one gigantic imposter syndrome trigger.

In order for a resource like this to be effective, it needs to prioritise and contextualise. This reads more like a "look at all the things I know about" boast. Less is more. A resource that aims to actually help newbies should be at most a quarter of the size and actually provide context and priorities.

I read your comment first and went on to read the OP expecting something terrible. What I actually found is something that is about 90% right, specially in the beginning, where it matters most for beginners.

I feel like it work as a good guide for a beginner as it is, but yes I would change it a little bit myself, mostly what you mentioned.

As a newbie, looking to learn front end (and programming in general) without a programming background nor related career goals, I actually feel like this is gold. One of the hardest things when learning is that you don't know what you don't know. That's where this is so useful:

- I can easily see areas where I feel comfortable, and identify concepts I've at least heard of before. I can put them in context to learn more about them. For example, I learnt SASS but didn't know about css preprocessors.

- Where I identify gaps in my knowledge, it gives me the keywords to start digging deeper.

I do get imposter syndrome, but it is usually triggered by uncertainty and unclear expectations etc. This actually helps by giving me a more objective way to assess my skills - or lack thereof.

Also, I find actual beginner ressources particularly unhelpful. It's always the same: a painstaking slow build up from "hello world" to substractions, which I can't skip because I'll miss one thing that's critical to understand the specific tool/language/framework but doesn't teach me any new concepts... and then suddenly! arrays, realistic physics, Documentation that just lists functions with 50 parameters and assumes you'll guess the correct syntax... This at least gives me choices where I feel like I can pick an achievable next step...

As a non-developer who has a career track-change in the back of my mind, I can't speak to the accuracy of the information, but I disagree with your take that it needs to be pared down. This kind of extended view of the path forward is exactly what seems to be missing in the endless world of beginner tutorials.

Now maybe the truth is this kind of path simply can't be accurately laid out like this. But don't not attempt it just because it might be intimidating for some.

I took a quick look at the scale of the chart and assumed it was satire.

The state of front end development is a major shit-show.

The presence of many tools does not make something a shit-show. I have been doing frontend development using a modern toolset for years now and I have not even heard of half the tools listed on this chart and I only actively use about a quarter. And most of the stuff listed isn't some major investment to learn, you just find it when you need it and spend a day reading the docs.

There are plenty of problems with frontend dev but this chart doesn't highlight anything more than searching github for a list of C++ libraries does.

Same experience. I thought this was a joke then looked closer and realized it is legit. And helpful also!

Calling this a disaster is such hyperbole. Anything can be better but the OP's document is a great first start! It's a really good roadmap to learning the technologies that matter for web development in the order that they should be learned.

> Calling this a disaster is such hyperbole.

Every time I see this, the first thing that comes into my head is to wonder how many aspiring developers took one look at this and decided that it was too difficult and that they should try something else instead. That's why I call it a disaster, and I don't think it's hyperbole.

There are many topics that are difficult and complex, that doesn't mean they're not worth studying and understanding. Just because you take a look at this and think "wow that's too much for me to learn" doesn't mean that everybody thinks that.

I've been doing this over twenty years, I'm not concerned for myself. But if you have led less experienced developers, you'll know that their confidence levels can vary immensely. If I showed this to some of the less experienced developers I've led, they would freak out. Just because not everybody is intimidated by it, it doesn't mean it doesn't intimidate some people who would make excellent developers. This is actively harmful.

"disaster" and "actively harmful" are hyperbole. This is a helpful document for people who want to understand what development from first principles. If that doesn't describe the people you work with that's fine, but yours is the first comment people will currently see about this article so it matters.

> If that doesn't describe the people you work with that's fine

That is not the problem. I cannot put it any blunter than this:

I have worked with good developers who, had they seen this when they were newbies, would probably not have become developers. I have worked with good developers with years of experience who, had they seen this, would have panicked and thought they were not good developers. This hurts people.

If you don't care about that, then I cannot explain it any further in such a way as to make you care. But it is not simply "oh, some people aren't interested and that's fine because others are".

I’m far from a newbie developer, and every time I see something like this, I think “why bother”?

Modern front end development is a shit show and pays less than any other area of software development. I know enough HTML/CSS to build a workable internal website and I know Javascript like the back of my hand. But, given a choice between specializing on the front end and compete with “good enough” boot camp grads and specializing in backend architecture and infrastructure, I chose to do the latter.

> it's one gigantic imposter syndrome trigger

Yes, this was exactly my experience when I first encountered the repo for this project a couple years ago [0]. I actually still remember what it was like to read this for the first time.

From the perspective of someone who has been impaled on the hedgerow of despair, trudged through the endless shale of '5-minute-must-reads' and fought their way through the jungle of 'lazy tutorials rehashing a languages main beginner resource', I see why these kinds of things are created and upvoted/proliferated by developers who are no longer beginners. They're probably helpful to a minority I expect to show up in this thread. But to me these roadmaps are pathological (no pun intended) - inducing a cocktail of fear, apathy, and perfectionistic mania.

If you happen to be a beginner reading through this thread and thinking of using this map - don't. Get a feeling for the territory first. Don't worry about all these empty terms. Once you have a feeling for this programming thing you can use your powers of prediction, analogy, and noting minor differences to learn new stuff. You don't have to (you don't WANT to) jam it all into your brain at once. I took that route and it makes it really hard to play and explore for yourself, it was so painful and inefficient.

Go the naturalistic route. It's not wrong unless it doesn't work, in which case it's still not wrong. It's all good. Have fun. Make yourself laugh. Do it stupid, who cares. Edit/break/play around with stuff, maybe go Codepen [1] if that sounds fun. Maybe you want structure and streamlining, go see if FreeCodeCamp is for you - you'll tick off half the boxes here without even realising it, and that half will be the half that's worth anything to you :)

[0] https://github.com/kamranahmedse/developer-roadmap/

[1] https://codepen.io/picks/pens/

I think there was a word trick there. "becoming a modern front end developer" != "becoming a front end developer", so I guess maybe the guide was for people who already are front end developer, but not modern enough (????)

The real evil I think is when somebody starts to use roadmap like this one to measure other people. Don't do that, my dear comment readers, roadmap is a better tool when you use it against yourself, not the others.

It’s a roadmap, not a how-to. Think Thomas Guide, not Google Maps. All the main streets are on the map, so if you get lost, you can check the map to see where you are.

I totally agree. Calling it a step by step guide without providing any context to support the technologies makes this unusable to most beginners. It may have utility for a mid-level dev trying to make sure they’re well polished, but it’s not for the novice, and needs much more to be truly useful.

This is great. It's a very comprehensive map of current technologies.

Perfect is the enemy of good.

It will be really good to see a post on the roadmap you have in mind.

I also find the ordering a bit strange in some cases. If you look at it as a bottoms up documentation of how technologies build on each other, that's one thing. But learning things in this order would have been overwhelming to me. I've bumped up against every technology on this list, but mostly as they've come up on projects.

This seems to be very specific to certain libraries and frameworks (mainly react and it's ecosystem it seems).

This I feel is a mistake.

Not so long ago AngularJS was the framework, and now it is basically legacy-/maintenance-only (...and before that jQuery-based things). React will suffer the same fate one day too ... the same way that it happens to all things in tech eventually. Plus react is not the only game in town either, and you may never even touch it in your work so you might be wasting time learning all the react ecosystem things on that list.

I think it would be better for new developers to focus more on the core fundamental techs (while cognizant that these techs may change in the future!) and transferable skills first rather than bothering to even think about react and it's ecosystem:

- know inside-out what happens front-to-back when you put in https://example.com in your browser and the page appears (so DNS, TCP/IP, TLS, HTTP, HTML, DOM etc)

- learn HTML + CSS (semantics, layout approaches, accessibility etc)

- learn how to run your own server (Apache, nginx, iis or whatever - doesn't matter) so you know how things get hosted and served. Do some basic server side "hello world" thing using PHP/C#/Ruby/Java/whatever + a DB to learn how server-side rendering happens, then try just returning JSON instead of rendered-HTML.

- learn JavaScript and then get really really comfortable doing lots of JavaScript. Also learn how JavaScript + HTML DOM work together.

- Optionally now learn typescript and if you're not from a technical background also learn about testing, build tools and source control (these are a given for experienced Devs from other disciplines)

- learn the OWASP top 10 security problems, and strategies/techniques to mitigate them.

- Don't forget basic UX fundamentals in case you find yourself being the designer as well as the developer (happens a lot for better or worse)

... now you are ready to go and use whatever the current flavour of the month library is both for today and for tomorrow.

Good luck to any aspiring Devs! Frontend work is really fun and satisfying work IMO. Stick at it! :)

Add functional programming to the list.

It’s nice to a number of articles making it to the front page that prioritize fundamentals, but it made me sad to see accessibility listed here as a second class topic. It goes well beyond HTML annotations. Opening the door wide shouldn’t be an afterthought.

Please. Most books and articles don't mention accessibility at all. Accessibility is important but is it really as important as understanding http or other main line topics?

It really should be, people with disabilities can really have trouble navigating websites, the least we can do is make it a relative smooth experience.

For sure. Accessibility should also encompass things like making content or functionality usable on terrible networks and ancient devices.

I don't doubt that. I even said as much. But one has to understand how to build a web site before they can understand how to build a website for a specific class of individual.

Ideally you should design in and implement accessibility from the start.

Doing the site first then accessibility second usually either means accessibility simply doesn't get done at all (since people forget and/or priorities change before it is done), or it is retrofitted in a really half-assed way.

This is really important stuff (both legally these days in many countries, but also ethically) so giving it second-billing is probably a mistake.

The thing is, it's not a specific class of individuals, these are just people. They deserve access to online content just as everybody else.

I've been teaching my partner to code lately (Python). She's picking it up fairly quickly, but what I am learning is just how damn complicated and unapproachable we've made everything. There's layers upon layers of outdated/wrong documentation online. Frameworks/best practices/patterns falling in and out of favor. Giving a new person the abbreviated version of why some things are the way they are is a really difficult task. It's demoralizing to me because I know how demoralizing it would be to her if she knew the breadth of things she needs to learn to even have a hint of competence.

I've got no answers, but this roadmap brought out all of those feelings.

I’m going through the exact same thing with my girlfriend. She has a fair bit of scientific programming experience from uni but wanted to build a small hobby app. I set her up with react native and expo thinking that would be the easiest and quickly found myself struggling to explain in a simple way why it worked the way it did without delving into what came before and what it’s built on top of. I’m struggling to know if this is the right way to introduce newcomers to building apps or if going back to fundamentals and building the app natively is better.

These flowchart guides to being an X developer are posted on here periodically, and they're often pilloried for being bloated and intimidating. I think they're plenty fine, they just require the right framing.

The keyword for this one is "modern", and the keyword for almost all of these comprehensive lists should be "senior". As a senior front end engineer I have exposure to almost every item on this list and can speak to either a time I've used them, or why I opt not to use them (Tailwind CSS, Gatsby.JS, Rollup, and some others). As a newer developer, you are not expected to have exposure to most items in the list. Rather we just want you to be on your way to being highly proficient in the important ones.

Also, picking one item from a group (items connected to a block by dotted lines are in the same group) and learning it well is sufficient. In learning one of those well you'll get scant exposure to the others (via reading articles and such), and from that you can make a switch at some point, or better know why you won't be switching.

These charts can be valuable for understanding the scope of a profession, but they shouldn't be intimidating.

I remember when being a frontend developer meant having gone through most of the material on the HTMLGoodies site. Life was so much simpler in the 90s. :)

The backend one is GOLD. Literal GOLD. https://roadmap.sh/backend

Interesting. Connected the the “Learn a Language” box, the only one the author personally recommends is Javascript. All others are labeled as alternate options and while I know this is a subjective resource, that still seems odd to me.

Following this chart it looks like I need to set up rabbitMQ and use graphQL before I learn how to set up nginx.

You also seem to have to master neo4j before learning about web sockets. :D

As much as I hate most things onthere I have to applaud the overview.

Now for the jokes since I cant help myself:

1 - I feel the map needs pictures of sea monsters and mermaids.

2 - Imagine how much more useful this would be printed on paper.

3 - View the source of the page and "woah!" with me, all that to display an <img>?

4 - Which one of all these tools makes such wonderful flowcharts?

5 - Why cant html make such beautiful pages?

6 - I tried clicking on one of the many boxes expecting a tutorial. Having to look up the entries on a different page is really not-done in IT.

7 - I tried copying the text but it is an image. (see 4th & 5th item on the right)

8 - "Find the detailed version of this roadmap on..." wait.. I'm already on roadmap.sh? You could put a div with a white background-color over the image to cover up this [extra] bit of confusion (Even I don't know if I'm joking anymore)

9 - At the end above "keep learning" it should say: "static html"

10 - Where do I buy the T shirt?

Conclusion: Well done! Ill be visiting this page many times! Thanks for making it!

> 2 - Imagine how much more useful this would be printed on paper.

Do you want me to fax this webpage to you?

So if you, God forbid, use MVC to generate views on the server side or use plain JS and jQuery that means you are using antiquated, obsolete, outdated methods of web development?

What if you are bypassing JS and target web assembly using Blazor? Is Blazor obsolete before even being officially released?

I strongly believe in "right tool for the job" and while Angular & React & NPM & Node can be the right tool for a particular job, I don't think they are the answers to all web development needs, modern or antiquated.

The same with React Native. I don't think that every mobile app should be written in React Native just because it exists, it's JS and it's "modern".

Somehow I won't be surprised if someone will release a "modern" JS framework targeting systems programming. And people trying to write game engines, operating systems and process images with it because it's modern.

We’ve seen this before.

The guide to modern front-end isn’t hard. Learn html, with css for styling and raw vanilla JS for a bit of interactivity.

Learn git so you don’t lose your work. May be deploy with GitHub pages.

That’s it, everything else will come later when you experience the pain for it.

Road map to frontend development:

1. Learn about internet (domains, http, browsers, servers etc)

2. Build something with html and css. Learn about accessibility (so many people don't properly add all the properties on their html tags)

3. Learn javascript to add interactivity.

4. Get a book for functional programming. Most modern ui frameworks use a lot of functional concepts. Learn a functional language too. (Elixir is pretty)

5. Deployment, stuff that was supposed to be backend engineers job but now you can do it. Functions, cloud stores, cdns, etc.

5. Look for jobs on the job boards and see which framework is trending right now.

6. Build a HN clone in it.

Thank you for coming to my hn talk.

You can't build a HN clone using the JS frontend framework of the day because HN isn't an SPA.

To build a HN clone you can use a MVC framework like Laravel, ASP.Net or Django.

Uh no. You definitely can.

MVC isn't unique to those frameworks or languages. It's just an architecture. You can find many MVC frameworks in js.

Secondly, you don't need MVC architecture to build HN. You can use a different pattern and still have a server side rendered app that reloads on each page click.

Also, afaik HN uses firebase to expose an api. You can directly store data to firebase from client side. So you still don't need those full stack frameworks to build HN.

I see a commendable effort, but am very concerned about the treatment of security/privacy topics.

If we educate our front-end developers like that, web security will remain an unwanted bolt-on providing minimum protection and no regard for privacy.

It is a shame these topics are not addressed in more detail, as they will likely remain more useful than the tool of the day.

May I suggest treating that as an opportunity?

See a lot of criticism here. For a math new grad who wants to break in software development, what similar guide would HN recommend? I'm specially interested in backed.

I prefer the guide to be extensive like this one because it give me a sense of what I know and don't know.

Take a look at Stefan Mischook videos. They are rather general, targeted to beginners and can teach you what to learn and in what order. https://www.youtube.com/user/killerphp/search?query=web+deve...

In short, in any kind of programming, you have to learn the basics first. For web frontend, these I think will be: HTML, latest CSS spec, Javascript ES6. After that you can pick up a small library like jQuery. After that, you will know by yourself if you need to learn a particular JS framework.

For backend: A bit of HTML/CSS/JS, a language usable on server side (C#, PHP, Python, maybe Java, maybe JS), SQL and one RDBMS (Postgres, MySQL, SQL Server etc.). After that you can learn about REST, CORS and more advanced stuff. If you reach this point, you will know by yourself what you need to learn next.

There is a comment in this thread that has a link to the same map, but for back end.

I know Angular has it's place in this world, but I just don't like it, and will never like it. React, Vue, or Svelte for me (Coming from a front end to full stack)

It would be great if it had a list of resources attached to every concept, sometimes it's hard to know where to study from.

Learn HTML and CSS. And become good at it. Build things. Playing around with (small) UI elements is one thing. Read, read, read. There's more to front-end development than building a website. Know your tools. Version control will save your life.... Be the middleman. Do not rush.

Reply on news.ycombinator.com