
Guide to becoming a modern front end developer - Lilian_Lee
https://roadmap.sh/frontend
======
JimDabell
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.

~~~
benburleson
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.

~~~
Polylactic_acid
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.

------
mattlondon
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](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! :)

~~~
thrwaway69
Add functional programming to the list.

------
erikschoster
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.

~~~
johnnylambada
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?

~~~
ddnb
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.

~~~
johnnylambada
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.

~~~
mattlondon
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.

------
daenz
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.

~~~
jamil7
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.

------
gorpomon
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.

------
ahnick
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. :)

------
bound008
The backend one is GOLD. Literal GOLD.
[https://roadmap.sh/backend](https://roadmap.sh/backend)

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

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

------
kingludite
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!

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

Do you want me to fax this webpage to you?

------
DeathArrow
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.

------
nojvek
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.

------
thrwaway69
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.

~~~
DeathArrow
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.

~~~
thrwaway69
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.

------
tzmudzin
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?

------
yumario
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.

~~~
DeathArrow
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...](https://www.youtube.com/user/killerphp/search?query=web+development)

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.

------
adamleithp
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)

------
sunsetSamurai
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.

------
justlexi93
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.

