You are a backend or desktop developer, perhaps experienced, but overwhelmed with all these words like Node, webpack, React, ES6, CommonJS — and don't know where to start? I know this feeling! Modern web looks like a big complicated world without a single door to enter. However, there is at least one which I'd like to share today!

Why you may want it?

Indeed, being a hardcore backend dev is absolutely okay. Like being any other dev; like being any other professional 🙂 However, perhaps you want to have more impact over your product? Maybe there is some opportunity in your workplace, and you want to catch it? Or you just want to have fun exploring this bizarre word? Any reason is valid, so welcome 👋

Fundamentals

I was near to zero in the frontend. I knew how HTTP works, I could read and write some JavaScript, but didn't know what is Node and why the JS code is “bundled”. I tried to start a variety of “beginner” courses, but all of them actually assumed a lot of prior knowledge.

Course: Install node then npm i <whatever> then...
Me: Come on, what is npm? Not that fast please!
Course: Use create-react-app so that is wires everything up...
Me: What ”everything”? What does it “wire”?
Course: This is JSX hello world...
Me: How did you write HTML in JS? I'm lost, help! 😲

After browsing a lot I've found this wonderful course: Building a JavaScript Development Environment by Cory House. Starting from nothing, the course builds the whole JS app stack step by step, level by level, explaining every element in detail. That was exactly what I needed!

Sidenote: Pluralsight is a paid service, but not expensive at all. Anyway you may subscribe for couple of months, watch everything you need, and then unsubscribe.

Node fundamentals

Node is an engine which powers todays frontend development, so it worth taking a specific course on it. I watched Node.js: Getting Started by Samer Buna.

JavaScript

JavaScript is the native language of the web, so mastering it is the must. There are a lot of good courses on Pluralsight each covering the specific part:

• JavaScript Fundamentals by Mark Zamoyta
• JavaScript Objects and Prototypes by Jim Cooper
• Fundamentals of Functional Programming in JavaScript by Nate Taylor
• JavaScript Modules Fundamentals by Brice Wilson

React

I know, it's not the only frontend framework, there are also Angular, Vue, Svelte, Amber etc. It may sound controversial, but I have an impression that only React is special: others are more or less “traditional” templating engines with loops and conditionals in HTML. React is different: it defines UI as a pure function of state. What a beauty! I couldn't imagine webdev may be like that.

These are two courses by Cory House I recommend watching in order:

• Building Applications with React and Flux
• Building Applications with React and Redux

Notes

Courses are a bit dated. Please keep in mind:

• Cory uses Bootstrap for styling components. While this is perfectly fine, for React you may go straight to Material-UI getting “Reactiful” styling solutions and mobile browsers support out of the box. I'll discuss the lib later in this post.
• For any new application Redux Toolkit is recommended over just Redux. The Redux Toolkit has amazing tutorials describing everything in depth.
• Cory uses React-Redux connect() higher order component. While this is okay, there's modern approach resulting in less code: useSelector() hook.

Last update from Cory House

Managing React State — I didn't complete it yet but there's a lot of positive feedback.

The practice

Theory is good! But without actual coding you won't recall anything in couple of months. It's not necessary to complete all courses before coding — you may start at any moment, and constantly refactor/rewrite your project to embed new things. I made two projects:

• Guess CSS! It's the game to challenge your CSS knowledge; more on it in upcoming posts. It's open source.
• Fluent Streams. In “Guess CSS!” I make a lot of sophisticated arrays and tree-like structures processing to generate code, and existing libs were not enough. So I created my own 😄 Now it's ready for usage as a separate open source project. It's heavily tested and well documented.

TypeScript

There are people hating TS. I'm not among them 🙂 If you, like me, worked with 2M-lines codebases you know that it would be unbearable without static types. Unfortunately TS may be slow; some people may say it's too complicated. But its usage quickly pays off on medium and large projects.

I took my TypeScript knowledge mainly from books:

• Free TypeScript Deep Dive book by Basarat Ali Syed
• Programming TypeScript by Boris Cherny
• Effective TypeScript by Dan Vanderkam

If your Pluralsight subscription is alive yet, I'd recommend:

• TypeScript: Getting Started by Brice Wilson
• Creating Asynchronous TypeScript Code by John Papa
• Using TypeScript Modules by Dan Wellman

Note

TypeScript is not the only way to statically typecheck your app: there is also Flow.

CSS

Mastering a visual part is the completely different path; however if you can make your app visually attractive — good for you! I just scratched the surface to make simple layouts with the help from MDN tutorials.

Material UI

Material UI is a library with collection of “Reactiful” components: text, header, grid, button, app bar, expandable lists etc. You may use them as a palette to assemble your app. I watched free yet great YouTube series by Anthony Sistili.

Explore

What's next? A lot of interesting and fun things! Frontend world is relatively young, not everything is settled down. New JS features, WebAssembly, clouds and serverless, emerging and fading libs — this happens right now! And it's very, very interesting and rewarding being a part of this community.

---

Thanks for finishing this reading. What was your path into webdev? Share your experience! If you liked the post please consider leaving some feedback so I know it worth writing more stuff like this. Thanks!