This is a disaster and more likely to put a newbie off or confuse them than to help them.<p>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?<p>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.<p>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.
This seems to be very specific to certain libraries and frameworks (mainly react and it's ecosystem it seems).<p>This I feel is a mistake.<p>Not so long ago AngularJS was <i>the</i> 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.<p>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:<p>- know inside-out what happens front-to-back when you put in <a href="https://example.com" rel="nofollow">https://example.com</a> in your browser and the page appears (so DNS, TCP/IP, TLS, HTTP, HTML, DOM etc)<p>- learn HTML + CSS (semantics, layout approaches, accessibility etc)<p>- learn how to run your own server (Apache, nginx, iis or whatever - doesn't matter) so you know <i>how</i> 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.<p>- learn JavaScript <i>and then get really really comfortable doing lots of JavaScript</i>. Also learn how JavaScript + HTML DOM work together.<p>- 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)<p>- learn the OWASP top 10 security problems, and strategies/techniques to mitigate them.<p>- 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)<p>... now you are ready to go and use whatever the current flavour of the month library is both for today and for tomorrow.<p>Good luck to any aspiring Devs! Frontend work is really fun and satisfying work IMO. Stick at it! :)
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.
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.<p>I've got no answers, but this roadmap brought out all of those feelings.
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.<p>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.<p>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.<p>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. <a href="https://roadmap.sh/backend" rel="nofollow">https://roadmap.sh/backend</a>
As much as I hate most things onthere I have to applaud the overview.<p>Now for the jokes since I cant help myself:<p>1 - I feel the map needs pictures of sea monsters and mermaids.<p>2 - Imagine how much more useful this would be printed on paper.<p>3 - View the source of the page and "woah!" with me, all that to display an <img>?<p>4 - Which one of all these tools makes such wonderful flowcharts?<p>5 - Why cant html make such beautiful pages?<p>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.<p>7 - I tried copying the text but it is an image. (see 4th & 5th item on the right)<p>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)<p>9 - At the end above "keep learning" it should say: "static html"<p>10 - Where do I buy the T shirt?<p>Conclusion: Well done! Ill be visiting this page many times! Thanks for making it!
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?<p>What if you are bypassing JS and target web assembly using Blazor? Is Blazor obsolete before even being officially released?<p>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.<p>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".<p>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.<p>The guide to modern front-end isn’t hard. Learn html, with css for styling and raw vanilla JS for a bit of interactivity.<p>Learn git so you don’t lose your work. May be deploy with GitHub pages.<p>That’s it, everything else will come later when you experience the pain for it.
Road map to frontend development:<p>1. Learn about internet (domains, http, browsers, servers etc)<p>2. Build something with html and css. Learn about accessibility (so many people don't properly add all the properties on their html tags)<p>3. Learn javascript to add interactivity.<p>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)<p>5. Deployment, stuff that was supposed to be backend engineers job but now you can do it. Functions, cloud stores, cdns, etc.<p>5. Look for jobs on the job boards and see which framework is trending right now.<p>6. Build a HN clone in it.<p>Thank you for coming to my hn talk.
I see a commendable effort, but am very concerned about the treatment of security/privacy topics.<p>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.<p>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.<p>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.<p>I prefer the guide to be extensive like this one because it give me a sense of what I know and don't know.
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)
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.