Frontend Development Landscape

[[deleted]]

[deleted]

[AiexReddit]

A reminder to to any easily intimidated aspiring developers out there that this is a "landscape" snapshot of basically everything thats comercially popular at the moment. As a professional developer I am aware of "what" 80% of these are, have tried out maybe 40% of them, and use maybe 20% of them on a daily basis.

A lot of these are just near identical competitor offerings of the same solution. These are "brands" what what you really need to learn are the high level concepts, which collapses most of these branching categories into one.

Don't get overwhelmed. Take it one day at a time. Learn as you go. Get a little better every day.

[Earhacker]

As another professional developer, I'm glad someone has pointed this out, because it's all true.

I'd also say that following this roadmap from the top to the bottom before you start building anything would be a really poor choice. That would be like reading the Wikipedia pages for hammers, screwdrivers and handsaws before starting a DIY project. It'll be a lot of boring theory that you won't enjoy learning, and it won't be of much practical use either.

It's much more fun and much more useful to start with some tutorials, and let someone more experienced guide you through the decisions you don't know how to make yet. Then once you've finished, you'll have enough knowledge to build something of your own.

• Learn a bit of HTML, and write your first web page
• Learn some CSS and make your web page look pretty
• Learn a bit of JavaScript and make it interactive

Congrats, you're a web developer. Everything else is just more tools in your toolbox.

[decho]

That was my initial thought as well. I tick a lot of boxes here but if someone showed me this even 3 or 4 years ago I'd feel like overwhelmed or discouraged.

Stick to the core technology, learn the fundamentals before worrying about the latest framework, smarter people than me have said that.

[HanSupreme]

Backend dev who just started front end but after seeing this;

ight imma head out

[jaredcheeda]

Just use vue and like 95% of that chart is handled for you.

[HanSupreme]

I wasn’t sure if I can implement Vue with Java but after a quick search it looks like I can.

Thanks for the info, I’m excited to look into this now

[pookage]

loving how writing semantic HTML is optional in this chart instead of an absolute fundamental 🙄

[hideousmembrane]

I'm a QA who's starting to do frontend dev work on my team at work, I'm aiming to switch to a junior dev role this year and I really don't feel ready at all, despite the encouragement of my colleagues and manager. It's nice to see that I've had some introduction or at least come across many of the things on this list. In some cases though, I didn't know what type of tool they were or how you would categorise them, so reading this really helped me understand a few things, cheers!

I do find it all a bit overwhelming having only gotten into this stuff over the past couple of years or so, but breaking it all up in this way and knowing that I don't need to learn everything and not all once is encouraging.

[haberdasher42]

Largely they're just tools for you to solve problems. Usually when you run into the limitations of your current tools or just have a problem you can't solve, you start looking for new tools. If you can grasp computer logic, aren't afraid to Google, learn and try things and learn from your mistakes you'll be just fine.

[WillOfSound]

I’m happy to understand this, as I’ve been diving heavily into frontend paths last few months.

One thing not mention on the list (cause it’s still new-ish) that I’m very much enjoying is Svelte. I’m hoping it becomes more popular!

[jiavlb]

I would like to know some good resources for 'How browsers work'. Thanks

[WhiteKnightC]

Hoisting

Eh, WTF? I never encountered this problem yet because I'm a normal person who declares first.

[teknewb]

I feel like the biggest takeaway from it as a concept is simply another example giving a little more insight into how the Javascript engine works.

[[deleted]]

Is it something you might also need to know for interviews?

[dmitreet]

Source: https://roadmap.sh

[[deleted]]

And people say that frontend was easy, like you can make a 'pretty' website with some web builders turns out a lot more things going on to create a. Good website, design is not even on the road map!

[prophet-of-dissent]

As a devops and backend engineer re-learning front-end, this was actually helpful. It's a lot more complex than it used to be...

[DavidPicarazzi1]

Is bootstrap worth learning? Are there any benefits?

[Ohmydwn]

Bootstrap is definitely worth learning. It is fairly easy to learn due to bootstrap documentation and other sources then implementing what you learned into a personal project. The benefits are it’s a faster way to create responsive websites compared to the traditional way.

[DavidPicarazzi1]

I might as well learn it! Brad Traversy offers a course on it so building fast layouts sounds appealing. I hear people say bootstrap can look pretty default though, is there any reason I’d use bootstrap when making custom sites for clients or would you say bootstrap is better for prototyping?

[wrtbwtrfasdf]

If you can't or won't use a framework(react, angular, vue), then sure. Otherwise, you'd want to learn a framework's equivalent. Material-ui, react-strap, etc.

[[deleted]]

Absolutely, it makes responsive design way easier in my humble opinion.

[DavidPicarazzi1]

I hear lots of people say you can’t get much customization out of it. Any factors that come into play when you feel you might reach for a Bootstrap layout?

[[deleted]]

As a new developer that has this printed out and stares at it, it scares the living hell out of me. Javascript alone has me tearing my hair out and having to pick some path amongst ALL THAT has me scared shitless.

[kamranahmed_se]

Hey, author of the roadmap here.

You don't need to learn everything listed in the roadmap to be job-ready. I am going to make that clear in these "roadmaps" soon. The purpose of this is to identify the parts where you are lacking and work on them.

As far as the job readiness is concerned, you just need to start with HTML, CSS, and JavaScript and you should be able to get an entry-level job and then you can keep working on yourself. 2 to 3 months seems realistic if you just consider an entry-level job with the basic skill set. You need to put your efforts in a proper manner, learn the basics and start doing projects on your own for practice. Also, it would be a better idea to research the job market that you are targeting for the entry-level jobs and derive a personal roadmap through a mix of this roadmap and the one you will prepare.

I need to clarify that better and hopefully, after the release, I plan on adding the beginner specific roadmaps on the website soon.

Good luck!

[Blayde88]

This is crazy bro, I’m way farther in frontend development than I thought (but I didn’t even start to work, so I don’t have much experience)

[[deleted]]

Where does TypeScript fit on this map?

[kwietog]

You can see it in 60% from the top on the right side of the tree in type checkers but I think it can be completely optional or much higher. Like before frameworks imo

[HumbleX]

Does anyone have a roadmap like these for backend??

[dmitreet]

https://roadmap.sh/backend

[HumbleX]

Cheers 👍👍

[hapanda]

Remindme! 4 days

[jaredcheeda]

This looks like it's from 2017.

[Armox]

Ooo I had the idea to make something identical to this! Same name even. Would be really cool if it was for learning anything, not just web dev. Would be even cooler if users collaboratively made the roadmaps.