What a front-end developer should be able to do. Modern tools for Front End development. Git and version control systems
So, friends, have you decided to take the path of programming? I shake your hand, this decision will change your life. This is always interesting and in demand work at the intersection of intelligence and creativity, work on how to benefit people and make the world a little better. The possibilities for its implementation are endless.
There is a lot in programming different areas: web development, mobile, desktop applications, OS development, hardware drivers. Web development is one of the most interesting and in-demand areas. Its advantages include the fact that your product is on the Internet, and to see it, you just need to type the address in the browser of any device; you don’t need to download or install anything. In addition, with the help of modern tools, and knowing the web, you can develop both mobile and desktop applications at once. The web consists of a frontend (what the client sees in the browser) and a backend (the server part that stores, processes and displays data). I suggest starting to get acquainted with the web from the front end.
Oh, by the way, my name is Roman Latkin, I’ve been working in web development for almost 10 years. When I started, everything was simple and difficult at the same time. Simple, because you didn’t need to know much to build the application: here’s HTML, a little CSS, a little JavaScript - and you’re done. It’s difficult because the development was carried out through pain. Nowadays, a lot of this pain has been cured with the help of a huge ecosystem of tools, but it is very scary for beginners; they don’t know how to approach the frontend, which side to approach it from. I was lucky, I watched the development of the frontend almost from the beginning, and everything fit well in my head. And I want to convey this understanding to help novice developers. I hope that after reading this article, you will clearly know which way to go, where to dig and according to what plan to develop.
Three components of the frontend
The entire frontend consists of three components: HTML (content and markup), JavaScript (logic) and CSS ( appearance, positioning). HTML describes the content of the page and looks something like this:
If you have to somehow manually use these tools to make a more or less complex project, then you are going to experience a lot of pain. Fortunately, the world is developing, complex things are being simplified, people are coming up with more and more new tools and technologies that make this creative process more enjoyable and faster.
Any process of cognition can be represented in the form of the letter “T”, where the horizontal line is a broad understanding, the vertical line is a deep one. U ideal specialist the letter T is large and beautiful, uniform. If it is stretched to one side, it is ugly, ugly; such a specialist is of little use in combat. He can either have a deep understanding of one thing, but take a little step to the side and he is unsuitable; or understand everything superficially, but at the same time be unable to do anything. First of all, it is necessary to develop the broad component as much as possible, which is what we will do now - we will try to cover all aspects of the frontend as broadly as possible, without going deeper. And then you will work on the deepening, which will be left for you to work on independently.
To have a good idea of the reasons for the current state of affairs, you need to know at least a little about the history of the development path of the frontend, and indeed web applications in general. There are so many tools now that not only a beginner will break his leg. Therefore, in order to have a good understanding of all this, let’s start with history, with a short excursion of how it all began, and then smoothly move on to modern approaches.
First sites
At first people wrote to pure HTML, drew the appearance in pure CSS, did the logic in pure JavaScript. A typical old-fashioned application is where server-side logic generates HTML (in response to a visitor's request, the server takes data from the database and inserts it into HTML) and serves it along with static files of styles and client-side logic in JavaScript, which at the time (about 10 years old) ago) there was not much. When making a transition to another page, this entire process was repeated. That is, previously there was no division into front-end and back-end; there was one complete application that simultaneously worked with the database and generated HTML.
jQuery
I got tired of writing in pure JavaScript and a good tool appeared - jQuery, which, using a convenient syntax, made it possible to access page elements and perform some actions with them. Various plugins and ready-made solutions appeared, it became easier and more interesting.
But applications developed, the volume of client logic grew, and gradually all this turned into a big noodle. To unravel it, some form, architecture was needed.
MVC
Smart Guys tried to move it to the frontend architectural template from the server side - MVC (model-view-controller). This pattern dictates that there is a model that describes the data. For example, user model, movie model, review model. There is a controller that processes requests, for example, “show a page with a list of movies at such and such an address.” And there is a view that is responsible for displaying data in HTML, to which the controller passes ready-made data received from the database/API.
This is where the history of single page applications began, SPA - applications that are downloaded once, and then, when moving through the pages, they contact the server for data via the API. This approach is called AJAX. Instead of generating HTML on the server side, the server serves the client application logic once. By going to another page, for example from home page to the hotel search page, the application requests data from the server in pure form(for example, information about hotels), without HTML tags(usually in JSON format), and generates the representation itself.
The front-end MVC pattern was good, worked great, but was unnecessarily complex. Angular, Backbone are representatives of this milestone in history. By the way, they still live today, but I didn’t understand them deeply.
Processors and assemblers
Applications began to grow in size, and now it's time to talk about builders, preprocessors and package managers. I will try to briefly go over them, despite the fact that they deserve a separate article.
Speed is important on the web, so you can’t just give it to your visitor. large files, they will take too long to travel through the network. Therefore, all resources are compressed using different minifiers. JavaScript most often using uglify (it removes spaces, makes variable names shorter and much more interesting things). CSS removes whitespace and can still merge some properties. And all this is collected into one or several files instead of 10-20; downloading one file is much faster, and the load on the server is less.
CSS
Regarding CSS, so-called preprocessors appeared. They are expanding CSS syntax, they add a bunch of different features there - nested blocks, variables, loops. Even just the absence of semicolons helps a lot and speeds up writing code?
A preprocessor is a program that runs and compiles this sugar syntax into pure CSS. Using preprocessors avoids reuse code, builds an architecture, and essentially turns the style description language into a programming language. Learn any instrument and you will understand. I have now chosen Stylus for myself; there are a few more, for example - LESS, SASS.
React, although it has gained great popularity and a developed ecosystem, in practice it turned out to be too bare, complex, and verbose. In order to make a simple form, you need to write a lot of extra code and install a bunch of add-ons. In order to create a simple application, you still need to install a lot of things, and there are a lot of options for simple things, you can easily get lost - although the ecosystem is huge, it is difficult to navigate; Outwardly identical applications can be designed completely differently inside. But the concept of JSX - the interweaving of code and markup, does not look so good, it is difficult to then understand what the author of the code wanted to say, and it is difficult to change the markup.
Vue.js
Here comes Vue.js - a flexible, efficient and easy-to-learn web framework that carries all the same concepts, but they look much better in it. It combines the best of Angular and React and more clearly answers the question “what is what.” Out of the box Vue already contains a large number of tools and capabilities that allow you to write voluminous logic in a few lines. Development has been greatly simplified.
Vue brought a few more interesting concepts, such as single-file components - files that contain logic, markup and styles at once, and they are not intertwined, as is the case with React and JSX. Vue out of the box allows you to use any preprocessors that fit very seamlessly into single-file components. And it has many ready-made built-in solutions, even its own Flux implementation. Vue has excellent documentation in Russian that will teach you best practice in the frontend, from application assembly to autotests.
Isomorphic applications, SSR
While talking about single page applications, we missed one important detail: when a crawler accesses a single page application, it sees nothing - only a blank page with body tags no content. In old-fashioned applications, the server would go to the database, generate a view, and serve up the finished HTML with the page text. In the case of a single-page application, the server returns a blank page, which only after initialization pulls up the data and shows the view, which of course the search robot will not do. Thus, using Single Page Applications for content driven SEO websites is not acceptable.
This avoidance was overcome with many hacks and crutches until the concept of SSR - Server-Side Rendering appeared. The Smart Guys taught all the JavaScript that ran in the browser to run on the server using NodeJS (a technology for creating server-side applications using browser-based JavaScript). This, of course, introduced its limitations, but life became easier. Now it was possible to write the logic once in one language, and it immediately worked both on the server (at the first visit of the visitor/robot, HTML was generated with the page content) and in the browser (subsequent transitions of the visitor). This is called an isomorphic, universal application.
The scheme is simple: on the first visit, the visitor sends a request to the NodeJS server, which contacts the API server, takes the data in the form of JSON and renders it in HTML, returning it to the visitor. Then the application lives in the browser; during subsequent page transitions, it directly accesses the API server for data and renders the view directly in the browser.
In React, implementation of this scheme is done in different and complex ways. There are ready-made solutions for this, for example, the Next.js framework. The Vue documentation has an entire section dedicated to SSR. The Nuxt framework is listed there - Vue + SSR. With its help, you can write such universal applications quite easily.
CSS frameworks, adaptability
Now we will change the topic to a simpler one and talk about layout.
Historically, to create a page grid, its frame, in the early days, layout designers used tables. Then they started using blocks, or containers, and container layout appeared. The position of the blocks was set using the positioning property float: right/left .
Nowadays, everything is simplified; almost all browsers already support Flexbox and CSS Grid - modern, convenient ways to layout a page grid. Their skillful combination allows, using several properties, to achieve positions of containers that would have required a lot of sweat with old methods, allowing you to easily perform almost any design delights.
This is the ability of a page to look equally good on all devices, be it a laptop, tablet or mobile phone. Adaptability is achieved using media queries - blocks of conditions in CSS, at which screen resolutions which CSS properties should work. It can also be achieved through the skillful use of flexbox containers.
All web applications are basically typical, consisting of rows, columns, tables, buttons and other UI elements. In order not to write them every time, CSS frameworks were created to help site builders, where all the markup was already thought out - just apply the desired class. They contain many ready-made UI elements. The most popular is, of course, Bootstrap, now in its 4th version. There is also Bulma, which is also quite good. And many more less popular ones. Typically, in CSS frameworks, adaptability comes out of the box; it is only important to use the offered tools correctly. CSS frameworks will be an excellent basis for almost any of your web applications and a good start in mastering the skills of proper layout. They should be used when you need typical user interface elements and adaptability, and this is 99% of cases on the web.
Cross-browser compatibility
This word refers to the ability of a website to display the same in different browsers. Typically, CSS frameworks take care of this, but I'll briefly explain how this is achieved. First you need to reset all the properties of standard elements ( different browsers display standard elements- lists, tables, etc. in different ways). In CSS frameworks you can often see a special file for this -
Sooner or later, any developer is faced with the question of which tools are best suited for his work. Choosing good tools will significantly increase development productivity and improve code quality. In this article we will look at the tools we use when developing the frontend part of our projects, as well as organizing the process itself.
Tools.
A professional in his field is distinguished not only by the quality of his work, but also by the choice of tools he uses.
Text editor
It's worth starting with a text editor. Most people don't use it to 50% of its potential. Chances are, if you're using something better than Notepad, you might have access to features like:
- Zen Coding
Allows you to quickly create HTML markup. Saves time and allows you to experience a special zen. (You can read about what it is on this page).
- Live Templates
We often have to type in the same constructions: declarations of functions, objects, language constructs. Live Templates will allow you to automate the routine set of template pieces of code and concentrate attention on more important parts of the application. In addition, you can easily expand the set of templates by creating them for the frameworks you use most often.
- File Templates
File templates allow you to quickly deploy new project modules. And just as in the case of Live Templates, you can usually expand the set of templates as necessary.
- Live Edit
The presence of such a function in the editor will allow you not to refresh the browser when laying out the layout after each edit - this action is automated!
Great text editor, which can be recommended - Sublime Text 2. Support for plugins for all occasions, code highlighting, cross-platform - all this makes it an excellent editor to use. Plus it's free.
But for really large projects we use PHPStorm/WebStorm from JetBrains. These products provide the developer with all the necessary functionality, the features described above, as well as highlighting the code and dependencies between all project files.
Both SublimeText and PHPStorm support many keyboard shortcuts, which you can use to speed up and simplify text editing. You can study combinations using the Shortcut Foo service. Training takes place in game form, so what is it great way mix business with pleasure.
Technologies
Use technologies that allow you to write less code to achieve the same result. However, remember that maintaining the resulting code should be as cheap as possible.
For example, a good practice is to use sass/less, which extend the usual CSS by adding such convenient mechanisms as variables. Once your style files are ready, all you need to do is run a processor program that will convert sass/less to regular css.
The use of BEM methodology will help large projects not to get bogged down in layout code. Clearly separating styles into separate files and structuring them within directories will allow you to spend less time maintaining code. The basic principles of BEM can be read. There is also a set of tools called bem-tools that allow you to quickly deploy style files.
Workflow
A streamlined code development process increases the speed of work and its quality.
To ensure parallel work between development teams, it is worth using standard means, such as git (you can read about successful git workfow). To coordinate the execution of tasks, a bug tracking system is used, for example Jira and Redmine.
Project deployment
To unfold ready-made application On production we use Jenkins. Its task is to take from the repository current version, and after finishing the build process and preparing the files, it should pour the results onto the servers. Phing is used to support these processes.
The question of preparing the project for pouring remains open. For frontend in a local development environment this is usually:
- Translating sass/less to css
- Dependency Control
- File concatenation
- Carrying out autotests
For the production version, preparation also includes:
- Minification of files
- Code obfuscation
- Image optimization
Automation of all these actions is a primary task that must be solved to organize an optimal development process.
To perform these tasks we use the Yeoman project. This tool allows you to build on its basis the entire frontend development workflow process. It implements all the points mentioned above.
Development with Yeoman
Yeoman also allows you to build the entire frontend development process on its basis. With its help, you can quickly expand the folder structure for typical projects. To do this, just enter the command in the project folder:
yeoman init
A dialogue will start, after answering the questions, service folders and files will be deployed in the directory.
In addition, Yeoman allows you to specify the project type. In this case, it will prepare a tree of folders and files for the specified framework.
Above it was mentioned about such a convenient tool as Live Edit. So, Yeoman launches a web server for your applications with Live Edit implementation. To do this you need to call the command:
yeoman server
After a couple of seconds, a browser window will open with the application running. Now any changes in html, css or js files will be immediately displayed in the browser. Your sass files will also be compiled into css every time you save them.
The fundamental technologies are HTML (for creating page structure), CSS (for styling), and JavaScript (for interactivity). For this reason, basic knowledge in the above-mentioned areas is a must. However, in 2019 you need to know what frameworks are, version control systems and many other things that make life easier to the modern developer. Let's take a closer look at each of them.
HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the basis of web development. Without these two technologies, you will not be able to create a web design and the output will be simple text on the screen. You can't even add an image to a page without HTML!
Before you start your web development career, you must become an expert in HTML and CSS. Good news, confident knowledge of these technologies can be obtained in just a few weeks of study. You can come through with us!
JavaScript allows you to add a huge amount of functionality to your web page. You can create quite functional web applications using just HTML, CSS and JavaScript (JS for short). At the most basic level, JS allows you to add interactivity. You can use it to create a map that updates in real time, interactive elements and online games. Sites like Pinterest make full use of JavaScript to create a friendly user interface.
Plus, it's the most popular programming language in the world, so even with your career plans, it's a super useful language to learn.
JQuery is a JavaScript library: a set of plugins and extensions that make development with using JavaScript faster and easier. Instead of having to write everything from scratch, JQuery allows you to add pre-built elements to your project, which you can then modify to suit your needs (one of the reasons why knowing JavaScript is so important). JQuery is used when a page needs to add a countdown timer, an autocomplete search form, or even a table that automatically rearranges and resizes to fit the content.
JavaScript frameworks
JS frameworks (including AngularJS, Backbone, Ember and ReactJS) provide a ready-made structure for your JavaScript code. There are different types of frameworks for different needs, but the above four are the most popular requirements for hiring in 2019. Frameworks really speed up the development process, giving you a jump start, and can be used in conjunction with libraries like JQuery to minimize the time spent writing standard blocks.
Frontend frameworks
CSS and Frontend frameworks (the most popular is Bootstrap) do for CSS what JS frameworks do for JavaScript: they speed up development by providing a starting point with a ready-made starting project structure. Since the basic CSS blocks are repeated from project to project, a framework that defines everything for you is very useful. Most employers require knowledge of what frontend frameworks are and how to work with them.
RESTful services and APIs
Without going into technical details, REST stands for Representational State Transfer, which means “representation state transfer”. IN general outline, is a technology that makes it easier for components to communicate in a network. Both RESTful services and APIs are REST architecture services. You can read more about this here.
Let's say you decide to write an application that will sort all your friends on a social network by date added. You can make a request to the VKontakte RESTful API to get a list of your friends. The same is possible with Twitter and Facebook, which also use RESTful APIs.
Content management systems and E-commerce platforms
Almost every website is built on a content management system (CMS). E-commerce platforms are one of the types of CMS. The world's most popular CMS is WordPress, which is behind the curtain of millions of sites, almost 60% of all sites using a CMS are built on WordPress. Other popular CMS these are Joomla, Drupal and Magento. Even a superficial knowledge of these systems will give you an advantage when applying for a job.
Testing and Debugging
Mistakes happen - this is a universally accepted fact. Being familiar with testing and debugging processes is vital.
Unit tests are the process of testing individual blocks of source code, and specialized frameworks for this kind of testing provide quite convenient functionality. There are different frameworks for different programming languages.
Another type of testing is UI tests, also known as functional tests. Checked here general behavior website when a user interacts with it.
Debugging is the process of eliminating all errors (bugs) found during testing. Different companies take different approaches to testing and debugging, but if you've ever done it before, you won't have a hard time adjusting.
Git and version control systems
Version control systems allow you to track changes made to your code over time. They also make it easy to return to previous versions code if you mess anything up. Git is the most common version control system. Knowledge of Git for a developer is necessary requirement in almost every company. You can study here.
What a professional front-end developer should know today
In the last few years, React, one of the JavaScript libraries, is becoming a frontend development standard - and this benefits cross-platform developers, with such advantages of React Native as:
- a simple and intuitive philosophy for declaring views and states, making the code clean, readable and easy to debug;
- Smart and efficient rendering that redraws components only when necessary when state changes.
In simple terms, React binds HTML and JavaScript together.
When it comes to CSS, no one writes pure CSS anymore these days, so knowing pre-processor languages like Sass or Less is a must-have for a front-end developer in 2019, so to speak.
Given the ubiquity of multiple form factors various devices(mobile phones, tablets, desktop PCs), we would also recommend studying ways to build adaptive web pages. There are a wide variety of JavaScript and CSS libraries that do this job well. Many of them are based on Google's Material Design guidelines.
There are many related topics and libraries worthy of your time and attention. For example:
- Webpack for modular builds (though the Webpack experience is pretty terrible and the community's build choices change every 1-2 years);
- JSON Web Token for authorization (a kind of replacement for cookies that were previously standard);
- Relay/GraphQL or Redux or Flux, depending on how deep you want to dive into data streams and samples;
As well as a wide variety of libraries for debugging, performance optimization, testing, project management, etc.
Thus, these days, to be a sought-after developer, you need to know not only fundamentals, but also be able to use the existing work of colleagues in the form of various libraries and frameworks that significantly speed up development processes.
Our advice: if you are just getting started with frontend development, go through ours.
Netology editor Svetlana Shapovalova understands who a front-end developer is, what he should be able to do (or should not), and why he is paid an excellent salary (or not so much).
Who is a front-end developer
According to the annual StackOverflow study, the most popular profession among service users in 2017 is Web developer. This is the category that all front-end developers fall into.
StackOverflow data
If you go to the first job search site you come across, for example, hh.ru, you will get the impression that this is a chameleon specialist.
It all starts with confusion in job titles: you can find “front-end developer”, and “front-end developer”, and “front-end developer”, and “front-end developer”, and “web developer”, and “front-end developer”. Sometimes you can even see some “web designer” with requirements for a full-stack developer. There is only one reaction to this: WTF?!
The trouble is that some employers do not distinguish (or do not want to distinguish) a layout designer from a front-end developer - this is clear from the job descriptions. Let's figure out what skills separate a front-end developer from a “workbench” (layout designers, don’t be offended, you’re good too).
A layout designer is a fighter on a narrow front. His task is to layout the layout received from the designer using HTML+CSS. He may know a little JavaScript, but more often he is limited to the ability to install some jQuery plugin.
A front-end developer doesn’t just create layouts. He knows JavaScript well, understands frameworks and libraries (and actively uses some of them), understands what is “under the hood” on the server side. He is not afraid of preprocessors and assemblers LESS, SASS, GRUNT, GULP, he can work with DOM, API, SVG objects, AJAX and CORS, he can write SQL queries and dig into data. It turns out to be a hodgepodge of skills, to which is added an understanding of the principles of UI/UX design, adaptive and responsive layout, cross-browser and cross-platform, and sometimes mobile development skills.
Front end worker in mandatory knows how to work with version control (Git, GitHub, CVS, etc.), use graphic editors, and “play” with various CMS templates.
It is also highly desirable to know English so as not to translate the specification in Google Translator, be able to work in a team, sometimes multilingual, understand web fonts, and understand testers and the testing process itself.
So, what technologies should a front-end developer master:
- HTML and CSS (including grids and CSS frameworks, W3C and WHATWG specifications, HTML5/CSS3 Polyfills)
- CSS preprocessors (Sass, Less, Stylus, etc.)
- JavaScript
- Popular frameworks and libraries: jQuery, Angular.JS, React.JS, Backbone.js, etc.)
- OOCSS/BEM/SMACSS
- HTML5 API
- ECMAScript 6
- Popular CMS (WordPress, Drupal, Joomla, etc.)
- Understand and understand server technologies (Node.js, PHP, Ruby, .NET, etc.)
- Debugging tools (Chrome Dev Tools, Firebug and others)
- JavaScript transpilers (Babel)
- Version control tools (Git, GitHub, CVS, etc.)
- Databases and query languages (SQL, MySql, NoSQL, MongoDB, etc.)
- Graphic editors (Photoshop, Illustrator, etc.)
- cross-browser and cross-platform development;
- progressive improvement and graceful degradation;
- mobile development;
- adaptive and responsive layout;
- web fonts;
- principles of SEO optimization.
What the statistics say
What technologies and tools do front-end developers most often use? Firstly, it’s hard to imagine a front-end developer who doesn’t know JavaScript. Surveys confirm this:- According to StackOverflow, JavaScript leads the list of front-end tools by a huge margin (90.5%)
- A study by O"Reilly, conducted among European programmers at the end of 2016, also puts JavaScript in first place.
StackOverflow data
If we group the most popular tools into stacks, we get the following situation:
StackOverflow data
And the set of the most popular frameworks and libraries of all developers looks like this (see illustration). It's nice to see front-end tools among this list:
StackOverflow data
Career path and salary of a front-end developer
The career path of a front-end developer usually begins with a layout designer - this is the most logical and generally accepted option. First, a bundle is studied, then knowledge, libraries and frameworks are “layered” on it. The future specialist also studies the key concepts of building a server part and adds the tools necessary for the chosen specialization. Then all this is polished by the ability to work with version control, graphic editors and understanding of the principles.There are other options. If a novice programmer initially knows in which area he plans to develop, nothing prevents him from learning a key technology stack at once, and not in parts. It all depends on the goals and time available to the future front-end developer. Any option is acceptable, as long as the end result is an intelligent specialist.
A ready-made front-end developer generally has three main development options:
- horizontal (to improve as a specialist, thereby constantly increasing your value in the labor market);
- vertical (grow up the career ladder);
- diversification (development related specialties, turning into a full stack and retraining).
Which one to choose depends only on the specialist himself and his wishes/skills.
Regarding the salaries of front-end developers: here, as in the entire IT industry, there are no uniform standard payment. It all depends on the skills and ability to present yourself. Well, sometimes from luck :)
Average salary of a front-end specialist in Russia, rubles/month
Average salary of a front-end specialist in Moscow, rubles/month
According to My Circle
Traditionally, the annual salary of front-end developers in the USA is slightly higher than in Russia. However, if you work in a branch of a foreign company, you are most likely not afraid of such a gap. 
According to PayScale
How to become a front-end developer
First, take off your rose-colored glasses. Learning is hard work and self-discipline. Most beginning IT specialists drop out at the stage “I want to become a programmer and get paid in dollars, but I didn’t think I’d have to study so much.” The uniqueness of programming and any IT specialty in general lies in constant self-learning. This is both the complexity and the beauty of the IT sector. If this doesn't scare you, cool! You have every chance to become an excellent specialist.The main rule of a future specialist is to set realistic goals during the learning process. Planning will help with this. Make a list of the tools you plan to learn and keep it in front of you.
Those who start from scratch need to start with and master them at the level of ideal layout of PSD layouts. At this stage, you also need to learn how to work with text and graphic editors and know the basic principles of design (as a plus). Then take on JavaScript: syntax, architecture and language capabilities. Master popular frameworks and libraries, and at the same time fall in love with version control systems and one of the popular taskrunners. Add preprocessors and CSS frameworks, understand server technologies. And then you can drink smoothies in Bali and polish your acquired knowledge ad infinitum.
An approximate path for a beginning front-end developer.
You will have one of your own.
You can walk this path either alone or with mentors (universities, courses). Here are the most popular developer training formats according to StackOverflow: 
StackOverflow data
Online courses are in first place, voted for by 64.7% of surveyed developers, followed by self-study from books, offline courses, open source development and programming camps. I wonder what higher education(Master’s degree) is almost in last place.
Conclusion
is a universal soldier. He will complete the layout, build the web application, and, if necessary, master the server part. You need to know a lot: HTML, CSS, JavaScript, JS libraries and frameworks, CSS preprocessors and frameworks, version control systems and taskrunners, backend technologies, unit testing and much more.In addition, soft skills will be useful: interaction with people and team work, the ability to establish effective workflow and solve assigned tasks in the most efficient way. in the best possible way. You cannot do without a strong knowledge of the English language.
The salary of a front-end specialist is quite decent, and the more skills, the higher the chances of getting a “fat” salary.
Anyone who doesn’t give in to self-study can become a front-end developer: as we found out, relying on a university education is difficult. The ideal option is various online and offline courses + literature on the topic, practice and the great Google.
Netology is launching a full-fledged training program for front-end specialists - . This is a 6-month course covering basic front-end development technologies: HTML and CSS, JavaScript, Web API, AJAX, websockets, React library.
At the end of the course, students will create their own single-page web application. The training is conducted by 10 practicing front-end specialists - this allows you to gain a comprehensive understanding of the tools and tasks of front-end development. During the entire training, students will receive at least 100 practical tasks, as close as possible to “combat” ones, and will implement 3 medium-sized projects and 1 full-fledged project as thesis.
All students who successfully complete the course receive a certificate of advanced training of the established form and a branded diploma of “Netology”.
P.S. In your opinion, what knowledge is vital for a front-end developer, and what knowledge can be mastered as needed?
Web Developers Front End’a are responsible for ensuring that the page exactly matches the designer’s layout and displays the same in all browsers. This has become easier over time with the advent of more advanced browsers and more development tools.
While everyone knows about HTML and CSS, fewer people know about Sass and Haml. Frontend development continues to advance every year. One of the main tasks of a developer is to always be aware of the latest innovations.
If you've been feeling a little unsure of your front-end skills or just want to learn about newer techniques, I recommend reading this short article for you. I offer you several popular tools and resources that every Front End developer should use or at least know about their existence.
CSS preprocessors
Perhaps the most famous CSS preprocessor is SASS, also somewhat similar to LESS. Thanks to these two libraries, you can create more dynamic code.
The term “SASS” can be applied to both technology and syntax. SASS files can also be SCSS files, there are no special differences between them, in some places SCSS is just more similar to regular CSS. LESS is the same thing just with a different syntax.
SASS and LESS are not languages per se, but they are small extensions for CSS. SASS/LESS code compiles to plain CSS.
The biggest difference between SASS and LESS, other than the syntax, is how they work. SASS is compiled using Ruby, while LESS is compiled using JavaScript (or Node.js).
Note that CSS pre-processing does require a little knowledge of Terminal/CLI commands. You don't have to be an expert, but you should have at least basic knowledge of the command line. For example, the fastest way to build SASS files is to use something like this in the terminal:
sass input.scss output.css
But once you get some practice, it becomes your second way to write CSS.
Here are some resources to learn more about CSS preprocessors:
GIT (Distributed Version Control System)
Control for project and version control is necessary for large web projects. A community like GitHub has made “GIT” a common part of technology.
But how does it work, and why should you use it?
GIT is a version control system that allows developers to write code without rewriting previous work. This is possible through transition, where different parts of the project can be saved as an archive. With GIT it is possible to fork your current project, try to add new option and save if you like it, or delete the branch that doesn't work.
GIT installation is very lenient for everyone operating systems. Easy, fairly detailed training, during which you will learn how everything is transmitted, branched and controlled.
But with an introductory guide and plenty of practice, GIT will slowly become part of your Front End workflow.
One of the biggest obstacles that can happen is using GIT via the command line. This is the preferred method of most programmers who already use the CLI on a daily basis. However, if you still haven’t been able to learn how to use it, then an application from GitHub comes to your aid and is currently free.
My advice if you decide to start learning GIT is that you learn it not in a hurry, but in stages. It's easy to get discouraged when version control is a completely unfamiliar concept. So learn at your own pace and don't give up!
Here are some excellent websites for learning the basic features of GIT:
JavaScript libraries
Front End development has undoubtedly moved towards full support JavaScript. From dynamic page elements to animation, JavaScript is one of the main tools of every web project.
But recently, it seems like more and more developers are turning to JavaScript libraries that make writing code quite easy. This is great because libraries sometimes contain simplified concepts that can make it easier to interact with methods such as AJAX. Negative side this phenomenon - with so many different libraries, it can be hard to know where to start.
A good rule of thumb is to learn only what you need and when you need it. If you are someone who just likes to write code for fun, it is better to master only a few libraries. jQuery is perhaps the best choice to start with, as it is one of the top five most used JavaScript libraries.
But you should also consider more modern tools such as Backbone.js or Angular.js. They are both publicly available libraries that were written to structure core JS web applications. They are incredibly powerful, but can serve as a small addition to a simple WordPress blog.
Developers, looking for a problem, might consider learning one of the tools a pre-processing language such as CoffeeScript, TypeScript or LiveScript. All three languages are compiled into JavaScript, but offer slight differences to the original syntax.
The true power of JavaScript is only now being discovered. With a tool like Node.js, it becomes possible to install it on the server. It's worth noting that raw JavaScript can be executed in the browser console, giving even more power to Front End developers.
Are you complete newbie or a seasoned developer, there is always something that can be learned with JavaScript if you are passionate about web development. The following resources may be extremely helpful:
HTML preprocessors
Popularity CSS preprocessors, also enabled the emergence of preprocessors for HTML Front End. This works exactly like SASS/LESS, where you write the code and compile it to get regular HTML.
HTML preprocessors can save you from repetition identical lines code, closing tags. While this is obviously useful, it does require some adjustment sometimes.
Haml and Jade are the two most popular preprocessors with very different styles syntax. Slim is the third option. All three are in open access and are improving all the time, thanks to public support.
Haml and Slim run on Ruby, Haml is an alternative to ERB templates. Haml is now a great tool for Rails developers. For Front Enders, it can be just as useful whether you write Back End code or not.
Jade is a template engine that runs on Node.js. It is better used for Node applications or can also be used as a standalone solution for Front End developers who like Jade's syntax.
There is no prohibition or wrong choice, since they are both quite similar. The general consensus among Ruby enthusiasts is to stick with Haml development. But many Front End developers are leaning towards Jade because Node.js has become a hot trend in web development.
True, few developers find preliminary HTML processing. You may prefer to write static HTML, but some developers prefer Haml/Slim/Jade. So if you can at least understand the syntax, it will give you a big advantage.
I encourage you to check out these detailed learning resources to dig deeper:
JS task manager
Automated task managers – latest tools Front End. The concept is often confusing at first, but task managers can greatly improve your technological process and give great potential.
Two large task managers are Gulp and Grunt. You'll notice that they both run JavaScript, but they also require a terminal. So how does it all work?
Gulp and Grunt are installed via Node Package Manager (NPM) on the command line. The libraries themselves can be controlled by JS commands from separate files, gulpfile.js and gruntfile.js respectively.
These files can be very small or very large depending on how many tasks you want to automate. Take a look at this standard Gulpfile.js to see what this might look like.
If you've never done anything like this before, you're probably a little confused. Don't worry about the syntax for now, instead you can focus on the concepts and features provided by these .js files.
You can add JS code that automates some tasks such as processing SASS files, Haml, even JS languages, one of which is CoffeeScript. You'll notice that each of those links points to an NPM package pre-written for Gulp. This means that you don't have to write the same thing as your own SASS autocompilers, because it's all already written!
Learning to use the task manager requires step-by-step work. The concepts may seem unfamiliar and, like learning SASS, can be difficult to understand for beginners. However, once you understand the basics and see how it affects your development as a whole, you won't even think about going back to the old ways.
To get started, just choose Gulp or Grunt and force yourself to practice.
Here are some ways to get started:
Finally
All of these tools are fairly new or have grown a lot over the past few years. The world of Front End development offers so many impressive tools to make coding easier, and I hope this article gives you a starting point.
