Path into webdev for backend folks
Tags: webdev, beginners, javascript, react
Published: 2020-10-09 16:16:32

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](https://app.pluralsight.com/library/courses/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](https://app.pluralsight.com/) 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](https://app.pluralsight.com/library/courses/nodejs-getting-started/table-of-contents) 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](https://app.pluralsight.com/library/courses/javascript-fundamentals/table-of-contents) by Mark Zamoyta
* [JavaScript Objects and Prototypes](https://app.pluralsight.com/library/courses/javascript-objects-prototypes/table-of-contents) by Jim Cooper
* [Fundamentals of Functional Programming in JavaScript](https://app.pluralsight.com/library/courses/javascript-functional-programming-fundamentals/table-of-contents) by Nate Taylor
* [JavaScript Modules Fundamentals](https://app.pluralsight.com/library/courses/javascript-module-fundamentals) by Brice Wilson


# React
I know, it's not the only frontend framework, there are also [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Amber](https://emberjs.com/) etc. It may sound controversial, but I have an impression that only [React](https://reactjs.org) 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](https://app.pluralsight.com/library/courses/react-flux-building-applications)
* [Building Applications with React and Redux](https://app.pluralsight.com/library/courses/react-redux-react-router-es6)

### Notes
Courses are a bit dated. Please keep in mind:

* Cory uses [Bootstrap](https://getbootstrap.com/) for styling components. While this is perfectly fine, for React you may go straight to [Material-UI](https://material-ui.com/) 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](https://redux-toolkit.js.org/) is recommended over just [Redux](https://redux.js.org/). The Redux Toolkit has amazing tutorials describing everything in depth.
* Cory uses React-Redux [connect()](https://react-redux.js.org/api/connect) higher order component. While this is okay, there's modern approach resulting in less code: [useSelector()](https://react-redux.js.org/api/hooks#useselector) hook. 

### Last update from Cory House
[Managing React State](https://app.pluralsight.com/library/courses/react-state-managing) — 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!](https://guess-css.app/) It's the game to challenge your CSS knowledge; more on it in upcoming posts. It's [open source](https://github.com/aleksei-berezkin/guess-css).
* [Fluent Streams](https://github.com/aleksei-berezkin/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](https://aleksei-berezkin.github.io/fluent-streams-docs/).


# 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](https://basarat.gitbook.io/typescript/) book by Basarat Ali Syed
* [Programming TypeScript](https://books.google.ru/books?id=YemUDwAAQBAJ) by Boris Cherny
* [Effective TypeScript](https://effectivetypescript.com/) by Dan Vanderkam

If your Pluralsight subscription is alive yet, I'd recommend:
* [TypeScript: Getting Started](https://app.pluralsight.com/library/courses/getting-started-typescript/table-of-contents) by Brice Wilson
* [Creating Asynchronous TypeScript Code](https://app.pluralsight.com/library/courses/typescript-asynchronous-code/table-of-contents) by John Papa
* [Using TypeScript Modules](https://app.pluralsight.com/library/courses/typescript-modules/table-of-contents) by Dan Wellman

### Note
TypeScript is not the only way to statically typecheck your app: there is also [Flow](https://flow.org).

# 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps).

# Material UI
[Material UI](https://material-ui.com/) 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](https://www.youtube.com/playlist?list=PLQg6GaokU5CwiVmsZ0d_9Zsg_DnIP_xwr) 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!*