How to become a frontend developer in 2018
Kamran Ahmed , the author of the material, the translation of which we are publishing today, says that he has been working full-development for 5 years and is currently working as a leading engineer in tajawal . There he has to do many things. He, on duty, must be aware of what is happening in the world of web development, in addition, one of his tasks is to maintain the knowledge and skills of other developers in good condition. According to him, monitoring technology development is not only his job, but also a hobby. He had to see the difficulties that novice programmers face (and experienced ones, too) when it comes to the operational development of innovations. Kamran, last year, often had to answer questions about what needs to be guided in order to remain a modern and sought-after programmer. As a result, in order to help himself and others, he decided to prepare charts , links to which would answer most of the questions that he would normally be asked.
Initially, these schemes were something like a list of recommendations on tools, but recently Kamran decided to put them in order: to structure, add details, and put them in the form of a step-by-step action plan that would give everyone the opportunity to understand what and in what order in order to become a modern and popular web programmer. Work on backend development and DevOps is still ongoing, but a step-by-step action plan for front-end developers is ready. Kamran will talk about him in this article.
Before I talk about the different parts of the proposed action plan here, I would like to make a reservation. The purpose of this plan is to give you a general idea of ​​what is happening in the modern world of front-end development, and to tell you about the order of mastering technologies in case you need it. The purpose of my scheme is not to encourage you to learn something that is going through a peak of popularity, perhaps short-lived. You need to develop an understanding of why in some cases a particular tool is preferable to all the others, and remember that if something is said about literally at every corner, this is not necessarily the best way to solve a problem.
')
Now let's get down to business. As a matter of fact, here is the development plan of the front-end developer, which I mentioned above.
Frontend Developer Development Plan
Now we will talk about this scheme, consider the main steps that need to be taken by a programmer who wants to develop a frontend in modern conditions. The first thing you need to master such a programmer is the basics of HTML, CSS and JavaScript.
HTML is what makes it possible to structure a web page. It is something like a human skeleton that forms the basis of our body. The first step that should be taken by anyone who wants to become a frontend programmer is to study the syntax of HTML and its capabilities. During the study, special attention should be paid to the following:
After you have mastered the basics of HTML, create at least 5 HTML pages. I would recommend to choose any website - for example, a profile page on GitHub, or a Twitter login page, and recreate it, paying particular attention to the structuring of the page elements. What happens will not be so beautiful, but for now you should not worry about it. The most important thing now is structure.
Now, after you have learned the rules for creating skeletons of pages, it is time to cover these skeletons with leather and decorate them. CSS, or cascading style sheets, is used to make pages look attractive. Here's what you should pay attention to when getting acquainted with CSS:
Once you have mastered the basics of CSS, engage in styling previously created pages. For example, if you wrote HTML-code that recreates the structure of a profile page on GitHub - make using CSS so that your design looks exactly like a real profile page. Stylize all five pages created in the previous step.
JavaScript is a technology that makes HTML pages interactive. For example, all those sliders, pop-up windows, notifications that you see on websites are created using JavaScript. JS makes it possible to reload parts of pages without the need to reload pages entirely. In this step, you need to learn the basics of JavaScript and get ready for the most interesting. Studying JS, pay attention to the following:
At this stage of the development of web technologies, you should already feel that you know something and start to feel the taste of the modern frontend. In addition, here you can congratulate yourself, since HTML, CSS and JavaScript are very important, this is the base on which everything else is built, and you have mastered this base and are ready to move on.
In the old days, the word "jQuery" was on everyone's lips, and this state of affairs had good reasons. This is a powerful library that is based on JavaScript and allows you to solve many problems without worrying about the features of various browsers. All these features are taken into account when developing the library. But now the days of jQuery’s wild popularity have passed, this library is not so actively used for new projects, however, some people still use it. It is not necessary to study jQuery, but it is easy to master this library, and by doing this, you will acquire skills that may well be useful to you.
I often said this and I will say it again: you cannot study anything without practice. Without practicing, you may think that you know something, that you understand something, but such sensations do not last long, “understanding” and “knowledge” without practice disappear quickly. Try, in the course of mastering all that we are talking about here, to practice as much as possible.
For example, you can make a responsive website and equip it with interactive features using JavaScript. Say, copy any page you like and at the same time try to use all that you have already learned.
After you have practiced enough, it’s time to do some real work. Take a look at github.com , find a suitable open source project and try to make a feasible contribution to it by creating several pull requests. Here are a few ideas regarding open source contributions:
Having done something useful and sending a request to incorporate changes into the project, add a link to this repository there, let us know that you are learning, ask for feedback about your work and recommendations on how to make it better.
Although I recommend novice developers to try their hand at GitHub, all this requires, in addition to knowledge of web technologies, also the ability to work with git. In addition, this step is not necessary, although if you decide to carry it out, you will understand that it will bring you a lot of useful things, but also you will be surprised at how many people are willing to help you if you ask them. There are many git tutorials, for example, you can take a look at this .
After you have mastered all the above, you have every right to celebrate. If you have approached the study of HTML, CSS and JavaScript responsibly, you can already find some work for yourself, maybe - it will be freelancing, and maybe even a real job. However, if you want professional growth, this is not worth it. Ahead is a big and interesting way.
Up to this point, if you used any external libraries, for example, plug-ins or widgets, you had to load JS and CSS files yourself and add them to the project. When a new version came out of what you used, you, again, independently, had to download this new version. This is a rather boring and tedious task. Package managers can save you from this. They help incorporate external libraries and plug-ins into projects, making it so that the developer doesn’t have to worry about manually copying the necessary files into the project and keeping track of the release of their new versions. In particular, we are talking about package managers yarn and npm. In fact, both are practically the same, the differences between them are not so great, and you can study any of them, after which the other will seem very familiar to you.
Now that you have mastered the basics of working with package managers, connect some external libraries to the pages you developed when you mastered HTML, CSS, and JavaScript. For example, it could be some kind of plugin for displaying pop-up notifications when you click on a button. You can use the library to validate the data entered in the form. Experiment with the settings, sort out how to install different versions of the libraries. While doing this, read about semantic versioning .
Preprocessors extend the capabilities of CSS by giving styles a functionality that is not available with their standard use. There are many preprocessors: Sass, Less, Stylus, PostCSS, and others. If I had to choose one of them, I would stop at Sass. Recently, however, PostCSS preprocessor looks quite interesting, the ability to handle it will definitely not hurt you, it's something like Babel for CSS. It can be used offline or on top of Sass. At this stage of your training, I would recommend learning Sass, and later, when you have time, deal with PostCSS.
In principle, you don’t need to learn CSS frameworks, however, if you decide to master any of them, you should know that there are a lot of them. From what I tried, I liked the most Bootstrap, Materialize and Bulma. If you choose a framework based on its market demand, pay attention to Bootstrap. I would definitely choose it if I thought about mastering the CSS framework now.
As your web application grows, the amount of CSS grows, confusion gets into style descriptions, and it becomes hard to manage them. There are many ways to structure CSS, based on the need for scaling. Here you can note OOCSS, SMACSS, SUITCSS, Atomic, BEM. You should get an idea about them, understand the differences between them. I would in a similar situation, for a deeper study, choose BEM .
Tools for building projects help in the development of JS-applications, in particular, allowing you to pack application resources into packages. This category includes linters, tools for performing tasks, and tools for creating packages.
There are many options in the area of ​​tools for performing tasks, including npm scripts, gulp, grunt and others. But nowadays, when most of the tasks that were usually solved using gulp, can be solved using a Webpack, in this category, perhaps, you should pay attention only to npm-scripts, using them to automate tasks that Webpack cannot perform. You do not need to study gulp, however, if you find time, take a look at it - perhaps it will be useful in your project.
In the field of linters, again, there are a lot of options: ESLint, JSLint, JSHint, JSCS. However, now the most popular ESLint, so you can quite stay on it.
In the issue of tools for creating packages, you can observe the same situation. There is Parcel, Webpack, Rollup, Browserify, and so on. If you want to choose one, you can stop at the Webpack without any hesitation. Rollup is also quite common, but it is recommended to use it mainly for libraries. If we are talking about web applications, then you need a Webpack. So get to the Webpack, and later, if you want, deal with the Rollup.
Once you have mastered all of what was discussed above, you will have another occasion for a holiday. In fact, you have now become a modern JS developer by about 75%. Remember that practice is very important, so create a project using everything you've already learned. Maybe - it will be some kind of library in which the features of Sass and JavaScript will be applied. After completing the work, use the Webpack to convert Sass to CSS, use babel to transpose ES6 code. And when everything is ready - publish your development on GitHub and put it in npm.
In the old version of the scheme we are considering, the framework selection step immediately followed the development of the basics, but now I put it after Sass, project building tools and package managers, since you will use all this when working with frameworks.
There are several options for choosing a framework, but the most common ones are React, Vue and Angular. And nowadays the market demand for React.js is growing and growing. However, you can choose any of the listed frameworks. I, for example, would choose React or Angular. It is worth noting that to you, as a novice developer, Angular may seem simpler in comparison with React, possibly due to the fact that Angular supports almost everything that is needed to work, as they say, out of the box. This is a powerful lazy-load router, an HTTP client that supports interceptors, dependency injection tools, encapsulating CSS components, and so on. Using Angular, you will be spared from the care of the selection of external libraries. However, React is more popular, there is a wonderful community around it, Facebook is actively engaged in its development. Here I would like to note that choosing a framework based only on its “popularity” is not worth it. The best thing is to evaluate alternative options, compare them, “try on” them to the needs of your project and make a choice.
Here I will not talk about how I worked with Angular and React, I will not compare them. Perhaps this is a topic for a separate article. However, since we are talking about mastering technology, consider the learning curve for Angular and React.
The learning curves presented below are based on the fact that the developer is already familiar with TypeScript and RxJS. Description of the features of these curves worthy of independent material, here I just note that they look that way thanks to the standardization and capabilities that are present in Angular by default. This does not mean that React is somehow bad. Each of these frameworks has its own scope. So, here are these curves.
Learning Curves for React and Angular
After choosing a framework for development, you will have to choose something else. For example, if your choice fell on React, you may need to study Redux or Mobx for purposes of managing the state of the application. What exactly to choose depends on the size of the application on which you will work. Mobx is suitable for small and medium applications. Redux is better suited for large projects. In addition, it is possible that neither Redux nor Mobx may be necessary for you, and your application may well be able to do with the standard state management tools present in React.
If you choose Angular, you will need to learn TypeScript. It is possible to develop Angular-projects without TypeScript, but, nevertheless, it is recommended to use this language. In addition, you will need to master and RxJS - it is very useful for you when developing Angular-applications. This is a truly powerful library that is also suitable for functional programming.
If you choose Vue.js, then you may need to explore Vuex. This library is very similar to Redux, but designed for Vue.
Here it should be understood that Redux, Mobx and Rx.js are not tied to their respective frameworks. These libraries can also be used in applications written in pure JavaScript. And, if you chose Angular - note that this should be Angular 2+, not Angular 1+.
Now you know almost everything you need to develop modern web applications. Not forgetting the practice, create something based on the chosen framework. If you need ideas, look in the
After you do what you decide to do - read the materials on measuring and improving performance. For example, look at things like Interactivity Time, Page Speed ​​Index, Lighthouse Score, and so on.
Having mastered everything that we have talked about so far, deal with service workers and how to create progressive web applications.
In the field of testing there are a lot of tools focused on different goals. I mostly use a combination of Jest, Mocha, Karma and Enzyme. However, before you choose your library for testing, it will be helpful to understand the different types of tests, analyze the available tools, and choose the ones that best suit you. Here is some good stuff about modern JS testing tools.
Static type checking tools help control data types in JavaScript applications. It cannot be said that it is necessary to study them, but they certainly can bring enormous benefits, and master them, take them to the level of practical use, in just a few hours. I basically mean TypeScript and Flow. Personally, I prefer TypeScript, but I advise you to try both, and then decide what you like best.
If you have studied all that we talked about, your knowledge will be enough to get the position of a front-end developer. However, this is not a reason to stop.
Explore server rendering capabilities in your chosen framework. How it will look like depends on the framework. For example, in the React sphere, special attention should be paid to Next.js and After.js . In the case of Angular, this is Universal . If we are talking about Vue, then this is Nuxt.js.
I don’t presume to say that absolutely everything is provided in the scheme presented here. However, it contains everything that is needed by anyone who claims to be a front-end developer. The main thing - do not forget that the success of your training is based on practice. More practice - better result. At first, the amount of information you need to master may be frightening, it may seem to you that you do not understand something, you do not grasp the essence, but this is normal, and over time you will notice that you are getting better and better in your business.
Dear readers! If you work in the field of front-end development, we ask you to tell about how you have learned what you know and how you keep your knowledge and skills up to date.
Initially, these schemes were something like a list of recommendations on tools, but recently Kamran decided to put them in order: to structure, add details, and put them in the form of a step-by-step action plan that would give everyone the opportunity to understand what and in what order in order to become a modern and popular web programmer. Work on backend development and DevOps is still ongoing, but a step-by-step action plan for front-end developers is ready. Kamran will talk about him in this article.
Overview
Before I talk about the different parts of the proposed action plan here, I would like to make a reservation. The purpose of this plan is to give you a general idea of ​​what is happening in the modern world of front-end development, and to tell you about the order of mastering technologies in case you need it. The purpose of my scheme is not to encourage you to learn something that is going through a peak of popularity, perhaps short-lived. You need to develop an understanding of why in some cases a particular tool is preferable to all the others, and remember that if something is said about literally at every corner, this is not necessarily the best way to solve a problem.
')
Now let's get down to business. As a matter of fact, here is the development plan of the front-end developer, which I mentioned above.
Frontend Developer Development Plan
Now we will talk about this scheme, consider the main steps that need to be taken by a programmer who wants to develop a frontend in modern conditions. The first thing you need to master such a programmer is the basics of HTML, CSS and JavaScript.
Learn the basics of HTML
HTML is what makes it possible to structure a web page. It is something like a human skeleton that forms the basis of our body. The first step that should be taken by anyone who wants to become a frontend programmer is to study the syntax of HTML and its capabilities. During the study, special attention should be paid to the following:
- The basics of HTML and the rules for writing HTML code.
- Ways of dividing pages into sections and properly structuring the DOM.
â–ŤJob
After you have mastered the basics of HTML, create at least 5 HTML pages. I would recommend to choose any website - for example, a profile page on GitHub, or a Twitter login page, and recreate it, paying particular attention to the structuring of the page elements. What happens will not be so beautiful, but for now you should not worry about it. The most important thing now is structure.
Learning the basics of CSS
Now, after you have learned the rules for creating skeletons of pages, it is time to cover these skeletons with leather and decorate them. CSS, or cascading style sheets, is used to make pages look attractive. Here's what you should pay attention to when getting acquainted with CSS:
- CSS syntax and properties.
- Block model, developing layouts using Grid and Flexbox technologies.
- Responsive website development using media queries.
â–ŤJob
Once you have mastered the basics of CSS, engage in styling previously created pages. For example, if you wrote HTML-code that recreates the structure of a profile page on GitHub - make using CSS so that your design looks exactly like a real profile page. Stylize all five pages created in the previous step.
Learn the basics of javascript
JavaScript is a technology that makes HTML pages interactive. For example, all those sliders, pop-up windows, notifications that you see on websites are created using JavaScript. JS makes it possible to reload parts of pages without the need to reload pages entirely. In this step, you need to learn the basics of JavaScript and get ready for the most interesting. Studying JS, pay attention to the following:
- Learn the syntax and basic language constructs.
- Learn how to work with DOM using JS, that is, for example, understand how to add elements to the page and remove them from it, how to work with classes of elements, how to apply CSS styles.
- After mastering the basics, deal with more advanced things, such as scopes, closures, elevation of functions, ascent of events, and so on.
- Understand how to execute HTTP requests from JS code using XHR or Ajax technologies. It is Ajax that allows you to perform any actions that usually require reloading pages without reloading them entirely.
- Next, take time to explore the new features of the language, what appeared in ES6 +. ES6 is a version of JavaScript, in which there are many interesting updates, such as classes, various ways of declaring variables. Here new methods of arrays, means for string concatenation, and so on appeared. Most of the materials on ES6 that you come across will use Babel in the process of explaining the features of the new language features. Babel is a transpiler, it converts, relatively speaking, the “new” JavaScript code into the “old” one. It is necessary for the new code to work in older browsers. For now, however, ignore Babel. Your task is to understand the basics of JS and learn how to use this language in modern browsers. Below we will talk more about ES6.
At this stage of the development of web technologies, you should already feel that you know something and start to feel the taste of the modern frontend. In addition, here you can congratulate yourself, since HTML, CSS and JavaScript are very important, this is the base on which everything else is built, and you have mastered this base and are ready to move on.
Should I learn jQuery?
In the old days, the word "jQuery" was on everyone's lips, and this state of affairs had good reasons. This is a powerful library that is based on JavaScript and allows you to solve many problems without worrying about the features of various browsers. All these features are taken into account when developing the library. But now the days of jQuery’s wild popularity have passed, this library is not so actively used for new projects, however, some people still use it. It is not necessary to study jQuery, but it is easy to master this library, and by doing this, you will acquire skills that may well be useful to you.
Practice
I often said this and I will say it again: you cannot study anything without practice. Without practicing, you may think that you know something, that you understand something, but such sensations do not last long, “understanding” and “knowledge” without practice disappear quickly. Try, in the course of mastering all that we are talking about here, to practice as much as possible.
For example, you can make a responsive website and equip it with interactive features using JavaScript. Say, copy any page you like and at the same time try to use all that you have already learned.
After you have practiced enough, it’s time to do some real work. Take a look at github.com , find a suitable open source project and try to make a feasible contribution to it by creating several pull requests. Here are a few ideas regarding open source contributions:
- Improve the interface, design, add some page interactivity.
- Take a look at the lists of errors and problems, and think about whether you can help with fixing them and solving them.
- Find code that can be improved and refactor it.
Having done something useful and sending a request to incorporate changes into the project, add a link to this repository there, let us know that you are learning, ask for feedback about your work and recommendations on how to make it better.
Although I recommend novice developers to try their hand at GitHub, all this requires, in addition to knowledge of web technologies, also the ability to work with git. In addition, this step is not necessary, although if you decide to carry it out, you will understand that it will bring you a lot of useful things, but also you will be surprised at how many people are willing to help you if you ask them. There are many git tutorials, for example, you can take a look at this .
After you have mastered all the above, you have every right to celebrate. If you have approached the study of HTML, CSS and JavaScript responsibly, you can already find some work for yourself, maybe - it will be freelancing, and maybe even a real job. However, if you want professional growth, this is not worth it. Ahead is a big and interesting way.
Package Managers
Up to this point, if you used any external libraries, for example, plug-ins or widgets, you had to load JS and CSS files yourself and add them to the project. When a new version came out of what you used, you, again, independently, had to download this new version. This is a rather boring and tedious task. Package managers can save you from this. They help incorporate external libraries and plug-ins into projects, making it so that the developer doesn’t have to worry about manually copying the necessary files into the project and keeping track of the release of their new versions. In particular, we are talking about package managers yarn and npm. In fact, both are practically the same, the differences between them are not so great, and you can study any of them, after which the other will seem very familiar to you.
Practice
Now that you have mastered the basics of working with package managers, connect some external libraries to the pages you developed when you mastered HTML, CSS, and JavaScript. For example, it could be some kind of plugin for displaying pop-up notifications when you click on a button. You can use the library to validate the data entered in the form. Experiment with the settings, sort out how to install different versions of the libraries. While doing this, read about semantic versioning .
CSS Preprocessors
Preprocessors extend the capabilities of CSS by giving styles a functionality that is not available with their standard use. There are many preprocessors: Sass, Less, Stylus, PostCSS, and others. If I had to choose one of them, I would stop at Sass. Recently, however, PostCSS preprocessor looks quite interesting, the ability to handle it will definitely not hurt you, it's something like Babel for CSS. It can be used offline or on top of Sass. At this stage of your training, I would recommend learning Sass, and later, when you have time, deal with PostCSS.
CSS frameworks
In principle, you don’t need to learn CSS frameworks, however, if you decide to master any of them, you should know that there are a lot of them. From what I tried, I liked the most Bootstrap, Materialize and Bulma. If you choose a framework based on its market demand, pay attention to Bootstrap. I would definitely choose it if I thought about mastering the CSS framework now.
CSS organization
As your web application grows, the amount of CSS grows, confusion gets into style descriptions, and it becomes hard to manage them. There are many ways to structure CSS, based on the need for scaling. Here you can note OOCSS, SMACSS, SUITCSS, Atomic, BEM. You should get an idea about them, understand the differences between them. I would in a similar situation, for a deeper study, choose BEM .
Tools for building projects
Tools for building projects help in the development of JS-applications, in particular, allowing you to pack application resources into packages. This category includes linters, tools for performing tasks, and tools for creating packages.
There are many options in the area of ​​tools for performing tasks, including npm scripts, gulp, grunt and others. But nowadays, when most of the tasks that were usually solved using gulp, can be solved using a Webpack, in this category, perhaps, you should pay attention only to npm-scripts, using them to automate tasks that Webpack cannot perform. You do not need to study gulp, however, if you find time, take a look at it - perhaps it will be useful in your project.
In the field of linters, again, there are a lot of options: ESLint, JSLint, JSHint, JSCS. However, now the most popular ESLint, so you can quite stay on it.
In the issue of tools for creating packages, you can observe the same situation. There is Parcel, Webpack, Rollup, Browserify, and so on. If you want to choose one, you can stop at the Webpack without any hesitation. Rollup is also quite common, but it is recommended to use it mainly for libraries. If we are talking about web applications, then you need a Webpack. So get to the Webpack, and later, if you want, deal with the Rollup.
Practice
Once you have mastered all of what was discussed above, you will have another occasion for a holiday. In fact, you have now become a modern JS developer by about 75%. Remember that practice is very important, so create a project using everything you've already learned. Maybe - it will be some kind of library in which the features of Sass and JavaScript will be applied. After completing the work, use the Webpack to convert Sass to CSS, use babel to transpose ES6 code. And when everything is ready - publish your development on GitHub and put it in npm.
Choosing a framework
In the old version of the scheme we are considering, the framework selection step immediately followed the development of the basics, but now I put it after Sass, project building tools and package managers, since you will use all this when working with frameworks.
There are several options for choosing a framework, but the most common ones are React, Vue and Angular. And nowadays the market demand for React.js is growing and growing. However, you can choose any of the listed frameworks. I, for example, would choose React or Angular. It is worth noting that to you, as a novice developer, Angular may seem simpler in comparison with React, possibly due to the fact that Angular supports almost everything that is needed to work, as they say, out of the box. This is a powerful lazy-load router, an HTTP client that supports interceptors, dependency injection tools, encapsulating CSS components, and so on. Using Angular, you will be spared from the care of the selection of external libraries. However, React is more popular, there is a wonderful community around it, Facebook is actively engaged in its development. Here I would like to note that choosing a framework based only on its “popularity” is not worth it. The best thing is to evaluate alternative options, compare them, “try on” them to the needs of your project and make a choice.
Here I will not talk about how I worked with Angular and React, I will not compare them. Perhaps this is a topic for a separate article. However, since we are talking about mastering technology, consider the learning curve for Angular and React.
The learning curves presented below are based on the fact that the developer is already familiar with TypeScript and RxJS. Description of the features of these curves worthy of independent material, here I just note that they look that way thanks to the standardization and capabilities that are present in Angular by default. This does not mean that React is somehow bad. Each of these frameworks has its own scope. So, here are these curves.
Learning Curves for React and Angular
After choosing a framework for development, you will have to choose something else. For example, if your choice fell on React, you may need to study Redux or Mobx for purposes of managing the state of the application. What exactly to choose depends on the size of the application on which you will work. Mobx is suitable for small and medium applications. Redux is better suited for large projects. In addition, it is possible that neither Redux nor Mobx may be necessary for you, and your application may well be able to do with the standard state management tools present in React.
If you choose Angular, you will need to learn TypeScript. It is possible to develop Angular-projects without TypeScript, but, nevertheless, it is recommended to use this language. In addition, you will need to master and RxJS - it is very useful for you when developing Angular-applications. This is a truly powerful library that is also suitable for functional programming.
If you choose Vue.js, then you may need to explore Vuex. This library is very similar to Redux, but designed for Vue.
Here it should be understood that Redux, Mobx and Rx.js are not tied to their respective frameworks. These libraries can also be used in applications written in pure JavaScript. And, if you chose Angular - note that this should be Angular 2+, not Angular 1+.
Practice
Now you know almost everything you need to develop modern web applications. Not forgetting the practice, create something based on the chosen framework. If you need ideas, look in the
ideas folder GitHub repositories that you are interested in, choose what you like and get started.After you do what you decide to do - read the materials on measuring and improving performance. For example, look at things like Interactivity Time, Page Speed ​​Index, Lighthouse Score, and so on.
Progressive web applications
Having mastered everything that we have talked about so far, deal with service workers and how to create progressive web applications.
Application Testing
In the field of testing there are a lot of tools focused on different goals. I mostly use a combination of Jest, Mocha, Karma and Enzyme. However, before you choose your library for testing, it will be helpful to understand the different types of tests, analyze the available tools, and choose the ones that best suit you. Here is some good stuff about modern JS testing tools.
Static type checking
Static type checking tools help control data types in JavaScript applications. It cannot be said that it is necessary to study them, but they certainly can bring enormous benefits, and master them, take them to the level of practical use, in just a few hours. I basically mean TypeScript and Flow. Personally, I prefer TypeScript, but I advise you to try both, and then decide what you like best.
Server rendering
If you have studied all that we talked about, your knowledge will be enough to get the position of a front-end developer. However, this is not a reason to stop.
Explore server rendering capabilities in your chosen framework. How it will look like depends on the framework. For example, in the React sphere, special attention should be paid to Next.js and After.js . In the case of Angular, this is Universal . If we are talking about Vue, then this is Nuxt.js.
Results
I don’t presume to say that absolutely everything is provided in the scheme presented here. However, it contains everything that is needed by anyone who claims to be a front-end developer. The main thing - do not forget that the success of your training is based on practice. More practice - better result. At first, the amount of information you need to master may be frightening, it may seem to you that you do not understand something, you do not grasp the essence, but this is normal, and over time you will notice that you are getting better and better in your business.
Dear readers! If you work in the field of front-end development, we ask you to tell about how you have learned what you know and how you keep your knowledge and skills up to date.
Source: https://habr.com/ru/post/352452/
All Articles