I started out with JavaScript -- and web development in general -- when everything felt brittle. Developing entire applications with jQuery felt just wrong, the JavaScript APIs (e.g. DOM API) weren't mature enough, the lack of supportive CSS made aligning HTML without hacks impossible, and in general, there was no tooling to ship qualitative web applications.
The lack of educational material was the tip of the iceberg which made learning JavaScript (or mostly jQuery at the time of learning it) an adventure in itself. There were no courses or bootcamps, but just copy and pasting Stack Overflow answers to make things work eventually.
In contrast, I find it's the best time to become a JavaScript developer right now. The JavaScript ecosystem is evolving every year -- lots of people are complaining about JavaScript changing all the time -- however, I find it has hit a sweet spot where many libraries, tooling, and the language itself are coming more and more to a halt. The perfect opportunity to get your foot into the door.
JavaScript Fundamentals
Before dipping your toes into any JavaScript framework, make sure to learn the fundamentals of the language. Over the last years, with ES6 and beyond, JavaScript got several exciting additions to make the language more powerful. Now only a few additions make it into the language every year. So it's a good time to learn the status quo. Modern JavaScript makes developing applications a breeze.
For instance, React uses lots of JavaScript. That's why I believe that every React developer becomes automatically a better JavaScript developer. So whatever framework for frontend or backend development in JavaScript comes next, you should have a good head start once you mastered the language.
It makes definitely sense to learn both, "old" JavaScript ES5 and the new way of writing JavaScript with all the ES6 and beyond additions. As a beginner, the different kinds of writing JavaScript can be puzzling. My recommendation would be to write down a comparison of different JavaScript syntax. Start learning modern JavaScript, but still check how people wrote certain syntax before JavaScript ES6. You can also do it the other way around, but however you do it, make sure to learn the nuances of the language. Everything that comes next just becomes easier with a good grasp of JavaScript.
JavaScript's Frontend Frameworks
There are many things like Svelte and WebAssembly which push the boundaries of web development with (or without) JavaScript every other day. There isn't a week without another announcement about something new in JavaScript. This makes the environment super exciting for developers who are able to keep up with it; yet makes it a place of FUD and FOMO for people entering the space. What newcomers to JavaScript often miss is that most shiny technologies are not the status quo of developing applications in a day-to-day business.
The JavaScript community has pretty much settled on React, Angular and Vue. Often the framework decision just depends on company size/type/philosophy or geographic location. However, all of the frameworks power modern applications nowadays. Depending on the job market in your (or remote) area, just double down on one of them. I believe you cannot do anything wrong about it.
The history of programming has shown that no framework, library or programming languages stays forever. But at the moment, I have a pretty good feeling about Angular, React, and Vue in JavaScript land. jQuery, Backbone and MooTools had no backing from large companies or individuals. But frameworks like Angular (Google) and React (Facebook) are used by many fortune 500 companies. From personal experiences, I can also see a huge shift in German enterprise companies entering the React/Angular market.
All of these companies have one thing in common: They hit limitations of these frameworks (e.g. Angular 1.x), but they already invested lots of resources in it, so they and the community make sure to introduce solutions for these issues (e.g. Angular 2). With growing applications, it's not as easy anymore to migrate from one to another framework. Most of the companies make it work with the one framework they have chosen to accomplish their mission. Double down on one as they are doing it.
JavaScript's Backend Frameworks
After Node.js got announced, its ecosystem evolved rapidly. Several frameworks like Express.js were developed to make client-server architecture development within the JavaScript ecosystem possible. Nowadays, the common communication between client and server is still REST, even though GraphQL gets more traction these days.
If you want to learn backend development with Node.js, double down on one framework which enables you to create client-server applications. How things get implemented doesn't change a lot jumping from one to another framework, if you were able to grasp the concepts behind routing and middleware. Express, Koa, and Hapi just become tools with different implementation details.
The future of web application will move towards serverless anyway. You will not need to set up an entire server application yourself anymore, but still be responsible for your API. However, I feel at the moment it's the perfect time to still learn how everything works in basic Node.js for client-server architectures, by setting up a backend server yourself, before everything moves into "serverless" functions.
JavaScript's Tooling
webpack, alt: parcel, no gulp or grunt anymore
mostly you will not see anything of it, because it's abstracted away
one package manager npm, there used to be more (e.g. Bower)
typescript is coming, but it's not as popular yet, so it's still a good point in time to start learning JavaScript. You can always choose later on to use TypeScript.
IDE integrations are becoming popuklar right now. Not so long ago, people used barebones editors
lots of developers who grew up wiht JavaScript lernen erst kurzlich zu schaetzen more poweruful IDEs
CSS in Web Development
- Css (flex box, grid, just apply some margins and padding’s, borders and you are good (see this simple GraphQL react app)
- CSS in JS
- maybe sass, CSS modules, less not as popular anymore
- Deno, Web Assembly, JAMstack, Serverless, TypeScript, GraphQL, learning the previous things first should give you the best fundamentals to look towards the shiny new things in the future (or hackernews).