Editor's note: Many people want to learn programming. But suffer from the lack of specific steps and guidance. For example, I want to find a job in front-end development, but I don’t know what to learn first and then what to learn, and I don’t know what tools to choose. Because similar questions are often asked, Kamran Ahmed, a full-stack developer, simply formulated a roadmap for modern front-end development on github , and used an article to explain the entire learning process of front-end development in detail. Not to be missed for interested beginners.
Before entering the topic, let me explain the background of me and this roadmap. I've been doing full stack development for the past 5 years and am currently the lead engineer at tajawal (I have to have a lot of titles). Following trends and getting other developers trained properly is not only my hobby but also my job. I've found a lot of newbies (and some experienced) confused about how to keep up. In 2017 I had a lot of friends who emailed me for guidance, and they wanted to know what to learn to do this. So in order to save myself the trouble of running into this all the time and also to help others, I decided to prepare these diagrams once and for all so that whenever anyone asks me, I can send them the link to the diagrams. So that's how these charts were born.
At first they just wanted some tool recommendations, but yesterday I decided to give them something a little more structured, adding details and designing in steps so you can better understand what to choose and what to follow order.
At the same time I'm still working on the roadmap for the backend and DevOps parts , but the frontend is already done, you can take a look below.
Before I go into detail about the different parts of this roadmap, let me take a moment with my disclaimer:
The purpose of this roadmap is to give you an overview and to provide guidance if you are confused about what to learn next. But you are not encouraged to learn things with a hipster mentality. You should have a basic understanding of why a tool is better in some situations, and remember that what's trendy is never meant to be the best for the job you're dealing with.
Well, let's get started - that's the roadmap below, but the purpose of this article is to explain each step of the roadmap in turn.
The first thing you want to do first is to learn some basics, including learning a little basic knowledge of HTML, CSS, and familiarizing yourself with the syntax of JavaScript.
Learn HTML Basics
HTML gives structure to your web pages. It keeps you standing like a human skeleton. First you need to learn the syntax and everything it has to offer. Your studies should focus on the following things:
-
Learn HTML basics and learn how to write semantic HTML
-
Understand how to divide web pages into sections (paragraphs) and how to properly organize the DOM (Document Object Model)
Task--
Once you learn HTML basics, make at least 5 HTML pages. I suggest you find any site, like the Github profile page or the Twitter login page. Then focus on organizing the content properly. What comes out may be ugly, but don't worry for now and focus your attention on the proper structure.
Learn some CSS
Now that we have learned how to prepare a skeleton for a web page, the next step is to add some skins to make it look better. CSS - Cascading Style Sheets are used to beautify your HTML pages.
-
The first thing to do is learn the syntax and become familiar with common CSS properties.
-
Understand the box model and learn how to prepare layouts with Grid and Flexbox
-
Once you've learned the above, then learn the following to make a website responsive through media queries.
Task--
Once you've got the basics, it's time to design the HTML page you made in the previous step. For example, if you wrote an HTML page for the Github archive, now is the time to apply CSS to make it look like the actual Github archive page. The first 5 pages have to be tried.
Learn JavaScript Basics
JavaScript can make your HTML pages more interactive. Let's say all those slideshows, popups, and broadcast notifications you see on a website, and reloading specific parts of a page without reloading the page, are all done in JavaScript. In this step, you will learn the basics of JavaScript to prepare you for the journey that follows -
-
Learn the grammar and basic mechanisms of the language.
-
Learn how to manipulate the DOM with JavaScript, such as how to remove some elements from the page, how to add some elements, add and remove classes, apply CSS styles through JavaScript, etc.
-
Learn and understand topics such as scope, closures, variable hoisting, and event bubbling when you're done.
-
Learn how to generate HTTP calls with XHR or Ajax. Ajax allows you to perform certain actions without reloading the web page.
-
After finishing the study, the next step is to understand all the new features of ES6+. ES6 is just a version of JavaScript that introduces a lot of interesting updates to the language, such as classes, multiple ways to define variables, new methods for arrays, string concatenation, and more. Most of the articles you find online will use Babel to parse ES6, which is actually a transpiler that converts this new JavaScript to old JavaScript, because there are some old browsers that don't support newer versions of JS. But don't worry about Babel for now, just understand the relevant concepts and practice it with any of the latest versions of browsers that support ES6. We will continue to talk about ES6 later.
You should have felt something like that by now. It should be encouraged if you follow the steps above. These are some of the most important things you just learned.
Should I learn jQuery?
There was a time when everyone was crazy about jQuery, and for good reason; it's a powerful library that provides a wrapper on top of JavaScript that lets you execute anything in a browser-compatible way. Those days are long gone though, and it's not used much for new projects now, but there are still people using it. You don't have to learn it, but it's really easy, and it's good if you want to see it.
practice time
I've said it many times but I'll say it again, you won't learn anything without practice. You may feel like you understand it at any time, but if you don't practice it will soon be forgotten. As you follow this roadmap, make sure to get as much hands-on as possible.
Go ahead and make some responsive websites and add interactivity with JavaScript. You can add any existing pages of interest to it, but remember to take advantage of everything you've learned so far.
Once you've made some websites, it's time to start making the real stuff. You can find some projects on github and open pull requests for some open source projects. Here are some pull requests to try:
Enhance the UI, make any demo page responsive or improve the design
See what open issues you can resolve
Refactor any code you think you can improve
Like this repo , tell them you're learning and let them provide feedback on your PR and how it can be improved.
Although I'd love to recommend this Github repository, it requires a little knowledge of git, so it's optional. You don't have to do this but if you do, you'll find it really useful - if you speak up you'll be surprised how many people are willing to help you. Then you can also find a lot of free resources about git, like try this one.
encourage yourself
Now you have learned the necessary basics. If you learn everything well, you can get a freelance job or maybe try to get a full-time job. However, if you want to have a better career, you can't stop now because there is still a long way to go.
package manager
Before that, if you were going to use some external libraries like plugins or any external desktop widgets, you had to manually download the JavaScript and CSS files and put them in the project, and then when those libraries or plugins released new versions, You have to download the updated files and put them in your project, which is extremely troublesome. Package managers can take care of this hassle. They help you put external libraries and plugins into your project so you don't have to worry about manually duplicating libraries or bothering to update files when they release a new version. There are yarn and npm now. These two are almost the same, both are just implementations, you can choose one, once you learn to use one, the other will naturally not be a problem.
Apply what you learn now
After you have a basic understanding of the package manager, you can install some external libraries to some of the web pages you made earlier, such as installing some prompt plugins, showing prompt information when the user clicks a button, or creating a login Forms use some form validation library for form validation, or try different options to see how to install different versions.
Remember to take a look at Semantic Versioning
CSS preprocessor
The preprocessor enriches the latter with features that CSS does not support by default. There are many options, including Sass, Less, Stylus, and more. If I had to choose, I would choose Sass. However, PostCSS has been gaining momentum lately, and it's a icing on the cake, a bit like the "Babel" of CSS. You can use it standalone or stack on top of Sass. For now, I suggest you learn Sass first, and then look at PostCSS when you have time.
CSS framework
You no longer need to learn CSS frameworks, however if you want to learn one. I would recommend choosing among Bootstrap, Materialize and Bulma. But if you want to consider their market demand, I would choose Bootstrap.
CSS Organization
As your app grows, CSS starts to get messy and unmaintainable. There are various ways to organize your CSS to better handle scalability, such as OOCSS, SMACSS, SUITCSS, Atomic, and BEM. You should understand the difference between them, but I prefer BEM.
build tools
Tools to help you build/package and develop JavaScript applications. This category includes linter (code inspection), task runner (automatic build), and bundler (packaging tool).
For automated builds, this would have been a lot of options, including npm scripts, gulp, grun, and more. But this time, since webpack can handle most of what gulp can do, only the npm scripts in the automated build can be used to automate tasks that webpack can do. You don't need to learn Gulp, but later if you have some time, you can go and see if it helps your application.
As for the linter, again, there are many options, including ESLint, JSLint, JSHint, and JSCS. But currently ESLint is mostly used.
For module bundlers, different options include Parcel, Webpack, Rollup, Browserify, etc. If you had to choose one, for now you can choose Webpack with your eyes closed. Rollup is also very commonly used, but it is mainly recommended to use it on the library. As for the app, it is still mainly based on webpack. So for now, learn webpack first, and rollup later if you want.
Practice time - do something
congratulations! You can now call yourself 75% of modern JavaScript developers. Now go ahead and do something with what you've learned. Maybe make a library for Sass and JavaScript in the future. Then convert Sass to CSS with Webpack and ES6 code with babel. Once you're done publish it on Github and npm.
pick a frame
In the old roadmap, this part was often right next to the base part, but this time I moved it behind Sass, build tools, and package managers, because in the framework you're all going to use those things, if Not having the appropriate knowledge will scare you.
Frames also have several options. However, the more commonly used ones are React, Vue and Angular. There has been a growing demand for React.js recently. However, you can't go wrong with any of the ones listed above. Personally I would choose React or Angular. But as a special note, as a beginner you may find Angular easier, perhaps because it supports almost everything out of the box, such as powerful routers that support lazy loading, HTTP clients that support interceptors, and dependency injection. , component CSS encapsulation, etc. without having to care about choosing an external library. But React definitely has the edge when it comes to community, and Facebook is always working hard to improve it. What you need to make sure is that you don't choose anything just because it's popular, go google it, compare and see which one suits you best.
The comparison of these two and my personal experience I will leave it to the next article, but since this article is about learning, I will talk about how to find the learning curve of Angular and React.
The learning curve in the image below takes into account that you already have the knowledge of TypeScript and also understand some basics of Rx.JS. The reason for this assumption will be explained in a future article, but mainly because of some of the standard and key features that Angular provides out of the box. But that doesn't mean React is bad, they each have their place, which I'll talk more about later.
You can look at the learning curves of each to see which one suits you better.
Once you've chosen your own framework, of course there are other things you need to learn. For example, if you decide to learn React, you may also have to learn Redux or Mobx to learn about state management, depending on the size of the application you want to learn. Mobx is suitable for small and medium-scale applications, while Redux is more suitable for large-scale applications. You probably don't even need to learn it, just rely on React's native state management, if your app allows it.
If you choose Angular, you will have to use TypeScript (you can develop Angular applications without it, but we still recommend it) and Rx.js, which can be used in other places than Angular applications. These are all very powerful libraries that are also suitable for functional programming development.
If you choose Vue.js, you may have to learn Vuex, which is similar to Redux but for Vue.
It should be noted that Redux, Mobx and Rx.js are not tied to these frameworks, and you can also use them in various JavaScript applications. Also, if you choose Angular, make sure you are using Angular 2+ and not Angular 1+.
practice time
Now you know everything you need to develop modern JavaScript applications. Now make something out of the framework of your choice. You'll find some ideas in the ideas directory of the library; pick one and get started!
When you're done, it's time to see how to measure and improve performance. For example, take a look at Interactivity Time, Page Speed Index, and Lighthouse Score.
Progressive Web Apps
Once you've done all the above steps, let's learn about service workers and how to make progressive web apps.
Test your app
There are many tools for application testing, each with a different purpose. I myself often use a combination of Jest, Mocha, Karma and Enzyme. However, before you start choosing a tool, it's best to first understand what the different test types are, look at all the options, and choose the one that best suits your needs.
Here's a good overview that you can check out.
static type checker
Static type checkers help add type checking to JavaScript. You don't need to learn these things, but these things give you super powers, and they're quick to learn, just a few hours. There are mainly TypeScript and Flow in this regard. I love TypeScript, but you can look at both and pick the one you like.
server rendering
The skills you've learned so far should be enough for you to land a "front-end engineering" position. But wait, you can take it to the next level.
You can also relearn server-side rendering in any framework you choose. There are different options to choose from, depending on what framework you are using. For example, if you decide to use React, the most interesting options are Next.js and After.js. If it's Angular, you can choose Universal. For Vue.js we have Nuxt.js.
This roadmap may still have omissions, but it is sufficient for any "front-end engineering" role. Also remember that the key is to practice as much as possible. You may feel intimidated at first and feel like you don't have a grasp, but that's normal, and you'll feel better and better over time. Also, don't forget to ask for help when you get stuck, you'll be surprised how many people are willing to help you, or at least I am.
Reprinted from: http://www.iteye.com/news/32985
Share a vue.js 2 family bucket tutorial:
1. vue.js 2 entry and improvement: http://xc.hubwiz.com/course/vue.js
2. Getting started and improving vuex 2: http://xc.hubwiz.com/course/vuex
3. Getting started and improving vue-router 2: http://xc.hubwiz.com/course/vuerouter
4. vue.js 2 + webpack engineering practice: http://xc.hubwiz.com/course/vuegch