My short journey to web development with Javascript and its frameworks - Javascript beginner.
Javascript, fancy frameworks, and web development
Disclaimer: Opinionated post alert. I'm not a Javascript expert by any means. I'm not a fan of any JS frameworks. I have about a month of development experience in total with Javascript's fancy frameworks, building the "Device tracking" application from the ground up. I have learned those frameworks as I had to teach them to one of my "brothers". I found some materials very useful in this journey. I wanted to share with the audience. I noticed that it's possible to build the chain of courses and tutorials which I have used so that one can learn step by step to become a decent developer independently.
In short, these days many developers are interested in web development, especially with Javascript programming language and its fancy web frameworks. Not so long ago, I was also so gung ho about learning and teaching Javascript application development with its frameworks to my "brother", and I gave it a shot even though I do not use them at all in my current software engineering role. I was able to master them within a month or so to develop a full-fledged "Device tracking" app with my "brother". I have found some materials pretty useful in this learning experience and decided to share them with you.
If you are a total stranger to the world of computers and electronics like my "brother" who only knows how to use a calculator, I would fully recommend mastering the basic skills to understand what computers are and how dumb machines can be, by watching CS50, 2020 provided by Harvard.
Once you master these very fundamentals of computers and became close friends with basic terminologies and theories, you may go ahead with a little more advanced topic.
Fundamentals of Programming with Javascript.
So, master the core of Javascript programming language before jumping to any fancy topics such as Node.js, Express.js and etc.
So, if you are a bookworm and like learning by reading books, I would recommend Eloquent Javascript by Marijn Haverbeke. The book has a really good introduction to modern programming in general and to Javascript specifically. If you are able to understand all the content of the book logically, I believe you have mastered the core of most Javascript. Try to solve the programming exercises and the project in the book by yourself.
If you like learning by watching videos which I personally prefer sometimes when I want to learn things by visualizing them, freeCodeCamp.org distributes very high-quality engineering content on YouTube for free. When I said high quality, I really meant it.
- Core Javascript Course for Beginners - if you are a total beginner to the programming world in a way that you never wrote a single line of code since your birth.
- Javascript Programming - Full Course - if you have a little understanding of programming and would like to get a quick but full introduction to Javascript.
Once you master one of the courses above, I would also recommend going to Javascript complementary courses including asynchronous, non-blocking, and modular programming.
- Asynchronous JavaScript Course (Async/Await, Promises, Callbacks) - all about asynchronous programming. Personally think it's necessary content.
- Design Patterns in Javascript - very basic design patterns which you always need as a Javascript developer in every step. Master them very well.
If you have mastered all the content up until now, you should have a solid knowledge of the fundamental core of Javascript, I believe you are ready to jump into your fancy frameworks now. As an optional, I have listed several other interesting courses related to Javascript.
- Build 15 JavaScript Projects - Vanilla JavaScript Course - if you want to learn Javascript more interactively by building simple static apps.
- Learn JavaScript by Building 7 Games - Full Course - if you want to learn Javascript by building simple interactive games.
Interesting topics to watch (Optionals)
- Deep Foundations of Advanced JavaScript — Kyle Simpson — Frontend Masters - good seminar about the problematic topics in Javascript.
- What the heck is the event loop anyway? | Philip Roberts | JSConf EU - Interesting video about event loop. Interesting topics to watch before jumping to learn asynchronous programming.
- Learning Functional Programming with JavaScript - Anjana Vakil - JSUnconf - Good seminar about the functional programming.
At this point, now you have mastered the core fundamentals of most Javascript, it's a good time to put this knowledge into practice by learning and specializing in frontend development or backend development.
Frontend Development
Master HMTL and CSS as perfectly as possible. At the end of the day, the web frontend is all about building the web backbone with HTML and styling this backbone with CSS fundamentally, no matter how good a Javascript guru you are. All the fancy JS frameworks depend on HTML and CSS like a human depends on water and air to survive. Most importantly, to start a career or to do a great job as a frontend developer, you don't need to learn all fancy frameworks. Just master one of them the best and have a reasonably solid experience on it.
React
- Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks - though the course builds a very basic app, it covers all the most essential topics in React JS
- Learn React JS - Full Course for Beginners - an introductory course to React, covers the most essential topics.
- Code 15 React Projects - Complete Course
With all the knowledge up until now, you are good to build awesome frontend web pages. If you are still interested in learning more and building more, you can watch other cool application development video tutorials in freeCodeCamp. I particularly find the following ones very interesting in this list:
- React Tutorial: Build an e-commerce site from scratch using React and Netlify
- Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets
- Build a chat application like Slack - React / JavaScript Tutorial
- Getting first React job without experience - Ask Preethi
At this point, what you have learned in React JS will be more than enough to start your career, at least an entry-level job as a front-end developer.
- Full Stack React & Firebase Tutorial - Build a social media app - If you have some experience with Firebase, it's a great video to build a full-fledged React application.
Angular
- Learn Angular - Full Tutorial Course - an introductory course for Angular JS
- Learn Angular Material - Full Tutorial - an introductory course to master angular material.
- Angular Advanced Concepts - a really good collection of advanced Angular concepts.
I think these three video tutorials would be enough to understand the fundamentals of Angular JS, but I did not spend a lot of time researching Angular JS as I found it unnecessary when I was teaching my "brother". He also confirms it's unnecessary to learn all frontend frameworks. He is just content with ReactJS.
There are hundreds, if not thousands, of Javascript frameworks. Every day, it looks like someone is publishing a new Javascript framework. However, ReactJS maintained by Facebook and Angular JS maintained by Google are the mainstream. I have personally developed a component-based front-end framework. Noone used it except for myself and my brother :). He was a great fan of my tiny but functional frameworks and libraries.
Backend Development
Regardless of the frameworks, programming languages, or technologies, backend development is totally a different development experience covering topics as basic as "networking" to scalable systems & solid API development. However, as we are having a discussion in the realm of Javascript, let's get back to its backend frameworks. Javascript has lots of backend frameworks. Among those, the most famous ones are Node JS and Express JS at the moment of writing this post.
- Learn Node.js - Full Tutorial for Beginners - Beginner tutorial to learn the basics of Node JS
- Node.js and Express.js - Full Course - a little more advanced and updated content on Express JS and NodeJS.
- User Authentication in Web Apps (Passport.js, Node, Express) - hands-on experience building real authentication application using NodeJS and Express JS.
I think that those three video tutorials will cover the basics of Javascript backend frameworks NodeJS and ExpressJS. In most cases, in my experience, I was content with those learnings to be able to develop my backend APIs using these frameworks.
Optional
- Learn the MERN Stack - Full Tutorial (MongoDB, Express, React, Node.js) - if you want to try full stack development, but a requirement is that you need to know MongoDB and ExpressJS at a basic level.
In most of the case, backend development is not about just using fancy Javascript frameworks to build the APIs or web services. It's a lot more than that. In addition to knowing solid Javascript and its frameworks, you need to learn and solid experience on the following topics including but not limited to :
- Parallel Programming & Concurrent Programming
- Distributed Programming (distributed computing and storage)
- Databases (SQL, Graph, Document and etc) and systems - I would highly recommend the book "Designing Data-Intensive Application" by Kleppmann.
- Operation Systems - Linux
In addition to these all above, I would also recommend reading the books
My Advice
- A lot of perfectionist beginner engineers & developers spend a lot of their time learning frameworks, their APIs, and new languages. Especially in the community of Javascript where frameworks change extremely frequently. Rather than learning how to use several frameworks, just learn how to build the framework yourself from the scratch. Rather than learning lots of programming languages, learn how to create one from nothing. To do that, you need to have solid computer science knowledge such as mathematics, data structures, algorithms, operating system fundamentals, networking, design patterns, software design, compilers, regex parsers and etc. All I'm trying to say is that you had better spend your time learning fundamentals rather than learning fancy frameworks. Everything you learn at a high level including your fancy frameworks, programming languages, and compilers is and will be built on top of these basic fundamentals. The lifespan of most fancy frameworks is short, but the lifespan of the fundamentals of computer science is almost endless.
- To work as a Javascript developer, you do not need to learn all front-end or backend frameworks and technologies. Or even if you are specialized in only front-end or backend, you do not need to learn all the frameworks in that specialization. Just be an expert on one of the frameworks with strong fundamentals in that one specialization (backend or front-end) before starting your first job.
Thanks,