Guide to becoming a modern front end developer(roadmap.sh) |
Guide to becoming a modern front end developer(roadmap.sh) |
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 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.
- 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...
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.
The state of front end development is a major shit-show.
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.
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.
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 :)
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.
Perfect is the enemy of good.
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! :)
I've got no answers, but this roadmap brought out all of those feelings.
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.
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!
Do you want me to fax this webpage to you?
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.
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.
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.
To build a HN clone you can use a MVC framework like Laravel, ASP.Net or Django.
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.
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?
I prefer the guide to be extensive like this one because it give me a sense of what I know and don't know.
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.
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.
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.
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".