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!
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 👋
npm i <whatever>then...
Me: Come on, what is npm? Not that fast please!
create-react-appso 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! 😲
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 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.
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:
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.
Managing React State — I didn't complete it yet but there's a lot of positive feedback.
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.
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
TypeScript is not the only way to statically typecheck your app: there is also Flow.
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 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.
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!