Чем frontend отличается от backend’а? объясняем на мемах

Горизонтальное развитие

Дизайнер

Мне нередко встречались дизайнеры, которые до этого занимались фронтендом. Такие специалисты очень ценятся, потому что они понимают, как будет реализовываться их дизайн, и могут лучше работать с фронтенд-разработчиками, когда продумывают свои решения. Они понимают, что не все, что они придумали, может быть легко реализовано. 

Также фронтендер, ставший дизайнером, зачастую имеет хороший опыт разработки интерфейсов, поэтому его UX-решения могут быть лучше, чем у дизайнера, который разработкой никогда не занимался. 

В любом случае это все зависит от опыта, но, по моему мнению, дизайнер-бывший фронтенд-разработчик имеет преимущество перед тем, кто не имел дела с разработкой.

FullStack/Backend developer

Достаточно часто можно встретить фронтендеров, которые стали FullStack разработчиками. Зачастую это связано с тем, что они пишут бэкенд, в том числе на JavaScript — согласитесь, ведь легко начать писать бэкенд на знакомом языке? 

Но и FullStack разработчики, знающие другой язык разработки бэкенда, — тоже не редкость. Это достаточно простой вариант развития, так как параллельно с разработкой и фронтендом можно начать осваивать бэкенд. Так, понемногу и постепенно вы можете стать FullStack-разработчиком или полностью перейти в бэкенд.

Надо сказать, что людей, которые уходят полностью в бэкенд, я встречал нечасто, но такое тоже бывает.

Mobile developer

На JavaScript можно писать практически под любую платформу. Мобильные операционные системы тут не стали исключением. Благодаря этому фронтенд-разработчики часто начинают реализовывать приложения с помощью таких фреймворков как React Native. 

Они продолжают писать на привычном React, но с небольшими отличиями, при этом разрабатывая мобильные приложения. Несмотря на это, так как платформа не совершенна, все равно приходится лезть в нативные куски кода, где разработчики сталкиваются со Swift и Kotlin. 

Развивая свои знания в этих языках, можно пробовать писать приложения на них. Разработка приложений — это по сути та же разработка интерфейсов, просто на другой платформе и со своей спецификой, поэтому это достаточно близкое для фронтенд-разработчика направление.

Очистка кэша

Каждый запрос проходит через несколько кэшей на пути к бэкэнду. Если вы посещаете сайт в первый раз, подождите, пока он загрузится, а затем перезагрузите страницу.
Веб-приложение загружается быстрее чем в первый раз, поскольку браузер кэширует ресурсы, такие как .

Что если вы хотите внести изменения в ? Вы меняете имя файла. Допустим, вы меняете на , на который ссылается .
Закэшированный становится неактуальным, поскольку к нему никогда не будет другого запроса (если сам index.html не будет закэширован! Запрос к должен быть инвалидирован на бэкэнде).

Современные конвейерные сборки включают в себя очистку кэша для каждой сборки, поэтому большинство javascript файлов выглядят как . Обычно это применяется только к css стилям и скриптам, но вы также можете применить их к изображениям и другим ресурсам.

Однако подобные ресурсы меняются очень редко, и по соображениям производительности стоит их исключить из автоматического кэширования и просто обновлять вручную при необходимости.

*Примечание переводчика:

В оригинале было так:

Я мог неправильно понять то что хотел сказать автор, поэтому добавляю сноску.

За что отвечает фронт-энд разработчик

Среди основного набора инструментов, которыми должен свободно владеть специалист, можно отметить JavaScript, HTML и CSS. С их помощью он должен создавать элементы, которые будут доступны для прочтения всем браузерам на ПК и смартфонах. Если предоставленный ему макет не отвечает всем потребностям и идеям проекта, он должен самостоятельно доработать недочеты, учитывая нюансы не только в сфере дизайна, но и технические детали. Помимо этого, он должен уметь пользоваться дополнительными инструментами, такими как библиотека, написанная на языке JavaScript, динамический язык стилей LESS, Backbone и т. д.Все это позволит ему, во-первых, в автоматическом режиме выполнять сложную и в то же время повторяющуюся часть работы, во-вторых, значительно увеличить производительность труда, добиваясь больших результатов за короткое время.

Фронт-энд специалист несет ответственность за то, чтобы веб-страницы проекта одинаково корректно отображались во всех видах браузеров и полностью соответствовали макету, который ему предоставил web-дизайнер. Наличие универсальных инструментов и средств разработки заметно упрощают данный процесс, однако повышение требований к современным интерфейсам сайтов, многообразие смартфонов и прочих видов электронных устройств, с помощью которых пользователи посещают интернет, заставляют фронт-энд разработчика следить за тенденциями, быть в курсе актуальных новостей и постоянно повышать уровень знаний и навыков.

Чтобы посмотреть написанный им код, пользователь может вызвать контекстное меню на страницах веб-ресурса, выбрав комбинацию клавиш Ctrl+Shift+L, либо нажав правой кнопкой мыши на свободном месте и перейдя в раздел «Посмотреть код».

Время простоя (downtime)

Вы должны ожидать и быть готовыми к тому что каждый запрос может в какой-то момент упасть для некоторых пользователей. Это неизбежно, бэкенд может в какой-то момент падать целиком либо же на каком то конкретном эндпоинте пока все остальные продолжают работать.

Вы должны различать какие запросы в вашем приложении являются критичными, когда нужно показать полноэкранную ошибку с сообщением «Попробуйте позже», а когда ошибку можно обработать с помощью постепенной деградации (например серая кнопка для какой либо функции, с сообщением при наведении о том, что функция на текущий момент недоступна)

Если ваш бэкэнд разделен на несколько микросервисов, вероятность сбоя подмножества эндпойнтов выше. В другом случае, eсли ваш бэкэнд представляет собой только один сервер, один сбой может разрушить все эндпойнты.

В любом случае, хороший фронтэнд должен всегда отлавливать ошибки в запросах с помощью try catch и иметь заготовленные ошибки для пользователя. В javascript нет встроенной функции(recovery panic), которая позволяет продолжить выполнение кода после ошибки, поэтому при её возникновении ваше приложение упадет.

Web Design for Everybody: Basics of Web Development & Coding Specialization

This is a free resource from Coursera to learn the basics of Web development and Coding. This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript.

Created by @Colleen Van Let, this is a great collection to learn the essential skills. This is offered by the University of Michigan and you will get a certificate if you complete the course btw, the course is free to learn but you need to pay for certification.

There are 5 Courses in this Specialization

1. Introduction to HTML 5
2. Introduction to CSS3
3. Interactivity with JavaScript
4. Advanced Styling with Responsive Design
5. Web Design for Everybody Capstone

As part of this Coursera specialization, you will also build a professional-quality web portfolio demonstrating your growth as a web developer and your knowledge of accessible web design.

Here is the link to join this course for FREE — Web Design for Everybody: Basics of Web Development & Coding Specialization

And, if you find Coursera courses useful, which they are because they are created by reputed companies like Google, IBM, Amazon, and best universities around the world, I suggest you join the Coursera Plus, a subscription plan from Coursera

This single subscription gives you unlimited access to their most popular courses, specialization, professional certificate, and guided projects. It cost around $399/year but its complete worth of your money as you get unlimited certificates.

That’s all about some of the best courses to learn web development using HTML and CSS with free of cost. Even if you know HTML and CSS, these free resources are a great way to refresh your knowledge and fill your gaps. Web Development is an important skill, and in the age of startup, I think every programmer should know how to create a website or mobile app himself. Other Free Programming and Web Development Courses

1. The Complete Web Developer RoadMap
2. 15 Docker, Kubernetes, and AWS courses for Web Developers
3. 10 JavaScript Frameworks Web Developers Can Learn
4. Top 5 Courses to learn Web Development
5. My favorite free Courses to learn HTML and CSS
6. 10 Free Courses to learn TypeScript in 2021
7. 12 Free Courses to learn JavaScript in 2021
8. The Complete React.js Developer RoadMap
9. 10 Books and Courses to learn Angular in 2021
10. 7 Free Courses to learn Bootstrap for Web Designers

Thanks for reading this article. If you like these free web development courses, then please share it with your friends and colleagues. If you have any questions or feedback, then please drop a note.P. S. — If you can spend a few bucks for an excellent course, then I suggest you just take a look at the Web Developer Bootcamp by Colt_Steele. One of the best courses to learn Web Development from scratch.

О профессии

Фронтенд разработчик – это специалист, который занимается клиентской частью сайта:

• Разрабатывает функционал;

• Программирует оформление;

• Собирает сайт;

Стоит отметить, что это одна из самых востребованных профессий в IT. Такая популярность связана с тем, что эти специалисты, по факту являются многопрофильными. Они работают с:

• Программированием визуальной части сайта (HTML, CSS);

• Программированием функционала сайта (JS и фреймворки);

• Сборкой сайтов на CMS;

Бэкенд и фронтенд: различия

Предлагаем разобраться, что такое фронтенд и бэкенд, чтобы вы могли понять, ту ли профессию выбрали.

Фронтенд – это визуальная составляющая и то, как сайт должен взаимодействовать с клиентом. То есть кнопки, ссылки и оформление контента. Специалист работает с HTML/CSS/JS и препроцессорами и фреймворками для них.

Бэкенд – «внутренняя часть сайта», его сервер. Главные процессы – хранение информации в базе данных (логины и пароли) при помощи MySQL, а также вывод контента и взаимодействие с ним при помощи PHP. Специалисты работают с любым универсальным языком программирования + SQL-инструментами.

Базовые требования к профессионалу

• Знание хотя бы одного «серверного» языка программирования: PHP, Go, ASP.NET, C/C++, Python, Ruby, Java. В некоторых случаях достаточно знания JavaScript для бэкенда (Node.js), но это скорее как плюс, чем как пункт.
• Знание API (REST, SOAP — всё реже).
• Понимание принципов работы серверов Apache, NGINX, IIS и проч.
• Навыки написания юнит-тестов и покрытия кода тестами.
• Основы сетевой безопасности и знание инструментов её обеспечения.
• Знание популярных веб-фрейморков, которые способны решать задачи разработки конкретного приложения.
• Навыки написания запросов к БД и проектирования баз данных.
• Знание основ фронтенда — и это не плюс, а обязательный пункт, иначе вам придётся крайне непросто проектировать и писать приложение.

• Администрирование UNIX или знание Linux (можно любого одного дистрибутива).
• Знание принципов работы HTTP (кэширование, авторизация, структура сообщений, заголовки, коды ответов и проч.)
• Модель OSI. 
• Навыки составления и оценки технического задания (ТЗ) — очень важный навык, который необходим для сбора самой точной информации о требованиях к ПО. 

Топ-5 востребованных технологий у специалистов по данным «Хабр Карьера», 2 полугодие 2019 года, нижняя строка — «дополнительные» скиллы.Принцип формирования списка: пользователи, внося данные о заработной плате, указывают скиллы, которые у них в приоритете (что они умеют делать!). То есть это не требования работодателя, а навыки специалистов каждой категории.роадмап, но уже для бэкенд разработчика

Learn Responsive Web Development from Scratch

If I have to suggest one thing to all the programmers, web developers, and computer science graduates who want to go into web design or front-end development to learn that that must be the responsive theme and pages. In today’s world, responsive design is just because people are using different devices to access web pages, like mobile phones, smartphones, tablets, desktop, laptops, and even TVs. A responsive web page can adjust automatically depending on the screen size and looks useful to the user, and that’s why it’s crucial. This course will teach you all the things you need to know to learn responsive like frameworks, libraries, techniques, best practices, etc.

Here is the link to join this course for FREE — Learn Responsive Web Development from Scratch

Инструменты

Для того, чтобы войти в профессию, необходимо освоить три инструмента:

1. HTML — язык разметки документов. С его помощью создается структура страницы: заголовки, подзаголовки, абзацы, списки и т.д.
2. CSS — язык описания внешнего вида страницы. Благодаря ему структура обретает конкретный дизайн: цвета, шрифты, расположение элементов.
3. JavaScript — самый популярный язык программирования (по данным Stack Overflow). Позволяет реагировать на действия пользователей, то есть делает страницы интерактивными. Например, если вы навели курсор на иконку, и она подсветилась, это произошло благодаря JavaScript. Также способствует отправке данных на сервер (например, когда вы ввели логин и пароль, чтобы авторизоваться на сайте).

Знание трех языков станет базой для будущего фронтендера. Но это, конечно, еще не все. Понадобится освоить другие инструменты. Какие именно, будет зависеть от проекта.

Например, метаязыки SASS и LESS ускоряют процесс создания CSS-кода, он получается быстрым, валидным. PUG делает то же самое для HTML-кода.

Flexbox (один из модулей CSS) позволяет управлять размером, расположением элементов, выравнивать их по нескольким осям, распределять свободное место между элементами и т.д.

JavaScript-библиотеки, например JQuery, сокращают коды, могут сделать из длинного однострочный. На JQuery разработано множество популярных динамических эффектов, которые удобно подключать к проекту. Также популярна библиотека Redux.

Могут пригодиться фреймворки — наборы из нескольких библиотек, также призванные ускорять разработку сайтов. Angular и Vue.js — JavaScript-фреймворки, которые применяют чаще других.

Владение системой контроля версий Git дает возможность отслеживать изменения в файлах и вести один проект совместно с коллегами.

Node.js — программная платформа, которая позволяет работать с JavaScript вне браузера. Владение Node.js приближает фронтендера к бэкенд-разработчикам. А знакомство с языками PHP и Python не только облегчит работу в команде, но и поспособствует становлению фулстэком.

Какие еще скилы помогут погрузиться в профессию и чувствовать себя в ней комфортно?

• Математические знания: структуры данных, алгоритмы, переменные и функции + развитое абстрактное мышление.

• Английский язык, чтобы не переводить спецификацию в Google Translate, общаться с коллегами и заказчиками (если попадете в иностранную компанию), заниматься самообразованием.

• Коммуникабельность и умение работать в команде. Фронтенд-разработчик — это не соло-специальность, ему необходимо регулярно контактировать с бэкендерами, дизайнерами, тестировщиками. Желательно, чтобы общение было конструктивным и приятным. 🙂

В целом фронтендер — конечно, технарь, но не без тяги к прекрасному, ведь его работа не только про функциональность, но и про дизайн.

What is a Full Stack Developer?

There’s often not a black-and-white distinction between front-end and back-end development. “Front-end developers often need to learn those additional back-end skills, and vice versa, especially in the current economy where marketing is thinly resourced,” said Matranga. “Developers need some of that cross-discipline. Oftentimes, you have to be a generalist.”

Full stack developers are jacks-of-all-trades.

Enter: the full stack developer. The role was popularized by Facebook’s engineering department. The idea is that a full stack developer can work cross-functionally on the full “stack” of technology, i.e. both the front end and back end. Full stack developers offer the full package.

“Working on both the server side and client side professionally opens more opportunities,” said Federico Ulfo, Full Stack Developer at Grovo. But, of course, full- stack development isn’t without its challenges. “To make an analogy with food, you can be good at cooking or good at baking, but mastering both takes time and experience. And I’m not talking about following a recipe, anyone can do that. I’m talking about having the ingredients to prepare something truly good.”

Skills and Tools Required for Full Stack Developers

Full stack developers work, like back-end devs, on the server side of web programming, but they can also fluently speak the front-end languages that control how content looks on a site’s user-facing side. They’re jacks-of-all-trades.

To illustrate the increasing complexity of full stack development, here’s an example of what a full stack might have looked like in recent years, compared to the current moment:

Regardless of the specific tools, dependent on the project or client at hand, full stack developers should be knowledgeable in every level of how the web works: setting up and configuring Linux servers, writing server-side APIs, diving into the client-side JavaScript powering an application, and turning a “design eye” to the CSS.

Using these tools, full stack developers need to be able to immediately identify the client- and server-side responsibilities of a solution and articulate the pros and cons of various solutions.

How it Translates

A full stack developer would be responsible for the entire flow of your experience with this blog post, from its load time and layout to its interactiveness and structural underpinnings.

Front-end разработчик: кто это и чем он занимается

1. Верстка дизайна. На данном этапе происходит создание структуры html-кода, который вмещает в себя элементы, располагающиеся на страницах сайта (картинки, текст, кнопки и т. д.) и отображающегося в пользовательском окне браузера. Главная цель здесь – добиться того, чтобы каждый элемент дизайна был абсолютно идентичен макету. Помимо HTML здесь используется формальный язык программирования CSS.
2. Настройка функционирования кнопок, форм регистрации и обратной связи, галерей и прочего необходимого на сайте функционала. Для достижения высоких результатов Front-end должен применять готовый скрипт из библиотеки, либо создавать собственный.
3. После того как основная часть работы выполнена, он приступает к тестированию работы.
4. В дальнейшем он может давать рекомендации разработчикам касательно оптимального способа реализации той или иной функции на веб-ресурсе.

Как уже отмечалось, фронт-энд разработчик вбирает в себя несколько профессий: верстальщика и программиста. В отличие от обычного специалиста по верстке, который обладает навыками работы в HTML+CSS, в сферу его деятельности входит программирование интерактивных элементов, с которыми в дальнейшем контактирует посетитель сайта.

Как стать front-end разработчиком

Карьерный путь специалиста, как правило, начинается с обычного верстальщика. Далее, в дополнении к имеющимся знаниям рабочей связки HTML+CSS, приобретаются знания и навыки в JavaScript и сопутствующих инструментах, включая графические редакторы. Если человек изначально знает, кем он хочет быть, он может пройти обучение в соответствующих учебных заведениях, что позволит ему узнать основу профессии сразу, а не частями.

Когда базовые знания получены, необходимо приступить к самосовершенствованию. Чтобы стать профессиональным front-end разработчиком, человек может воспользоваться одним из нескольких путей развития:

1. Совершенствовать свои навыки как специалиста, занимаясь различными проектами в роли фрилансера – это горизонтальный путь развития.
2. Устроиться в компанию и расти по карьерной лестнице – это вертикальный путь развития.

Основное правило в процессе обучения и совершенствования – ставить реальные цели и постоянно заниматься практикой

Важно изучать не только необходимый набор инструментов, но и хорошо разбираться в смежных профессиях

Чем занимаются бэкенд-разработчики

Бэкенд-разработчик формирует и создаёт модели хранения и управления данными в базах данных. Также он разрабатывает функциональность, с помощью которой другие системы могут взаимодействовать с данными приложения: получать, изменять, добавлять и удалять их. Он обеспечивает устойчивую работу этих систем в разных ситуациях, например, при нагрузках или непредвиденном поведении сторонних приложений. 

Сформировать единые требования к знаниям бэкендера сложнее, ведь бэкенд может быть написан на разных языках. Самые распространённые — Python, Java, Go, Rust, C++, Ruby, PHP, JavaScript и TypeScript (технология NodeJS).

Для каждого из языков есть свои фреймворки: в Python это Django, в Java — Spring, в Ruby — Ruby on Rails, а в JavaScript — Express. Их тоже нужно знать. Кроме того, специалисту нужен опыт работы как минимум с одной реляционной (Postgress, MySQL) и с одной нереляционной базой данных (MongoDB, Redis). 

Базы данных (БД) — это специальные программы, предназначенные для организации, хранения и управления информацией. В реляционных БД данные хранятся в форме таблиц, а в нереляционных — нет.

Для написания запросов к реляционным базам данных используют язык SQL. Ядро SQL описывает ключевые операции, которые не зависят от конкретной БД, что делает SQL универсальным. Для нереляционных БД нет универсального языка запросов. 

На практике для работы с базами данных используют специальные инструменты: ORM для реляционных БД и ODM — для нереляционных. Они позволяют обрабатывать  информацию в формате привычных для разработчиков объектов — например, списков. Кроме того, у таких инструментов есть удобный интерфейс для базовых операций: создания, чтения, обновления и удаления данных.

Типичная задача младшего бэкенд-разработчика выглядит так. Предположим, что бэкенд проекта написан на Python и фреймворке Django. На сайте, который поддерживает компания, решили создать блог со статьями. Там уже есть другие разделы, а блог — новый. В нём должно быть несколько категорий статей: новости компании, обновления продуктов и спецпроекты. Когда администратор сайта создает статью, он должен выбрать для нее одну из категорий: то есть каждый материал должен быть привязан к своей категории. В базе данных должны храниться сами статьи, возможные категории и связи между ними. А ещё всё должно управляться из админ-панели сайта. 

 from django.db import models

# Категории статей 

class ArticleCategory(models.Model): 
  category = models.CharField(max_length=255, verbose_name='Категория') 
  class Meta: 
    verbose_name = 'Категория статей' 
    verbose_name_plural = 'Категории статей' 
 
  def __str__(self): 
    return self.category 

# Сама статья 

class Article(models.Model): 
  link_category = models.ForeignKey('ArticleCategory', on_delete=models.CASCADE,   verbose_name='Категория') 
  title = models.CharField(max_length=255, blank=True, verbose_name='Заголовок') 
  text = models.TextField(blank=True, verbose_name='Текст') 
  date = models.DateField(blank=True, null=True, verbose_name='Дата публикации') 
  authors = models.CharField(max_length=500, blank=True, null=True, verbose_name='Авторы') 

  class Meta: 
    verbose_name = 'Статья' 
    verbose_name_plural = 'Статьи' 

  def __str__(self): 
    return self.title 

Чтобы решить эту задачу, в файле models.ру мы создаём модели данных для категорий статей и самих материалов. Сначала описываем встроенными инструментам Django, какие поля будут в каждой модели. Затем через ForeignKey выстраиваем связь между статьями и категориями. Также задаем вспомогательные настройки: максимальную длину строк, обязательность или необязательность полей, описываем, как эта конструкция будет отображаться на русском языке в админке.

Каковы наилучшие практики, принятые в микро-фронтенде

Различные практики, при помощи которых реализуется микро-фронтендовая архитектура:

1. Единый мета-фреймворк для SPA (одностраничных приложений) комбинирует на одной странице сразу несколько приложений без необходимости обновлять страницу; таковы, в частности, React, Vue, Angular, т.д.

2. Множество одностраничных приложений находятся по разным URL. Для приложений с разделяемой функциональностью нужно использовать компоненты NPM или Bower.

3. Обособление микро-приложений в Iframes при помощи Windows. API для отправки сообщений и библиотеки нужны для координации. IFrames разделяют API, предоставляемые их родительским окном.

4. Различные модули должны обмениваться информацией через разделяемую шину событий. Каждый модуль работает с собственным фреймворком, когда обрабатывает входящие и исходящие события.

Библиотеки компонентов, зависящие от стека главного приложения, различные компоненты и разделы приложения разрабатываются как библиотеки, после чего их «требует» главное приложение. Следовательно, главное приложение состоит из разнородных компонентов.

Что делает frontend-разработчик и что для этого нужно знать

В зоне ответственности frontend разработка “клиентской” части с нуля, доработка существующих проектов, создание функциональных API, проектирование интерфейсов, разработка системы для поддержки продукта, кроссбраузерная и адаптивная верстка CSS3\HTML5.

Основные инструменты разработчика в веб — HTML, JavaScript, CSS. На уровне junior frontend-разработчику нужно хотя бы поверхностно владеть инструментами разработчика и уметь адаптивно верстать интерфейсы. Специалист уровня middle должен уверенно решать задачи на чистом JavaScript и хорошо знать английский. Senior или тимлид должен знать типизации, backend на любом из языков, уметь проводить code review, иметь практический опыт (включая опыт управления) и понимание, как построить масштабное приложение.

Знать нужно много, но экспертом в каждой области быть не требуется. Высокооплачиваемый специалист может хорошо разбираться только в своем профиле и самостоятельно показывать результат.

Схема развития frontend-разработчика

Необходимый минимум того, что нужно знать frontend-разработчику включает:

1. JavaScript. Полезные книги: “Красноречивый JavaScript”, “10 вещей, которым я научился из исходного кода Query”.
2. Git (система управления файлами) и профиль на GitHub.
3. Тестовые сборки, управление зависимостями, модульный принцип организации (нужно знать инструменты Closure Compiler, UglifyJS).
4. Инструменты, встроенные в браузер.
5. Командная строка — уверенное использование.
6. Тестирование (с инструментами вроде Mocha, Grunt, Jasmine).
7. Автоматизация процессов (для действий, которые приходится повторять от трех раз и более).
8. Качество кода. Проверять можно через  JSHint и подобный софт.

Кроме того, нужно хорошее руководство. Если нет ментора, с этой задачей справится ресурс MDN.

Почему микро-фронтенды так важны?

В наше время, когда появляются все новые веб-приложения, клиентская часть все укрупняется, а важность серверной части снижается. Большая часть кода относится к микро-фронтендовой архитектуре

А монолитный подход с большими веб-приложениями не работает. Должен быть инструмент для разбиения такого монолита на сравнительно мелкие модули, действующие независимо друг от друга. Решение для этой проблемы – микросервисное устройство фронтенда. Код клиентской части пишется исключительно на чистом JavaScript и с применением любых javascript-фреймворков, с которых или на которые осуществлялась миграция.

Как стать frontend-разработчиком?

Чему учиться?

Программисты со стажем немного лукавят, когда говорят о низком пороге входа в профессию frontend-разработчика. Под этим обычно подразумевается легкость изучения базовых технологий, связанных с версткой (HTML и CSS), и начальных навыков оживления веб-страниц с помощью плагинов и библиотек. Но в 2021 году это лишь малая часть того, что должен знать и уметь фронтендер.

«В 2017 году я устроился на свою первую работу, зная лишь HTML, CSS, немного JavaScript и JQuery, — рассказывает Алексей Видякин. — Сегодня, в 2021 году, требования очень выросли, поскольку выросла конкуренция. Базовыми знаниями верстки уже никого не удивишь».

Вот примерный список требований к джуниор-специалисту в 2021 году:

Знать HTML и CSS. Под этим подразумеваются навыки кроссбраузерной и адаптивной верстки, знание популярных CSS-фреймворков, препроцессоров и HTML-шаблонизаторов.

Знать JavaScript, в частности стандарт Ecmascript 6 — спецификацию 2015 года, принесшую языку новые элементы синтаксиса и новый уровень производительности.

Иметь базовые навыки работы в консоли и пользования пакетным менеджером NPM, позволяющим быстро и удобно загружать JavaScript-библиотеки и приложения.

Уметь пользоваться системой контроля версий, например Git. Навыки работы с Git лучше всего развиваются в процессе командной работы, поэтому от новичка никто не ждет совершенства в работе с платформой. Достаточно понимать, о чем вообще речь, и знать несколько базовых команд.

Уметь работать со сборщиком проектов (это небольшой код, определяющий последовательность действий при автоматическом запуске приложения из командной строки)

Тут важно понимание самой идеи инструмента и базовые навыки пользования. Сборщиков несколько, но самый популярный из них — gulp.js.

Базово знать один из современных фреймворков: React, Angular или Vue.js

С их помощью разработчик может минимизировать количество обращений к DOM (Document Object Model — объектная модель документа) и организовать мгновенный обмен данными с сервером через API. Вместо того чтобы по каждому клику перезагружать страницу целиком, фреймворк управляет состоянием ее отдельных компонентов, обеспечивая пользователю мгновенный отклик приложения. Подразумевается, что если человек сумел освоить один из них, то сможет достаточно быстро разобраться с другим, если возникнет необходимость. Есть довольно много вакансий, где требуется какой-то конкретный фреймворк.

Знать английский. Не факт, что от соискателя сразу потребуется обсуждать что-то со штаб-квартирой Facebook, но реакции «Тут нет документации на русском, поэтому я не смогу разобраться» тоже уже не принимаются.

Где начать работать?

Существует три основных варианта трудоустройства: фриланс, студия веб-разработки и работа на стороне заказчика.

В качестве оптимального места первой работы Алексей Видякин называет студию веб-разработки, поскольку именно среди узких специалистов и разнообразных задач проще всего расти от простого к сложному. Но при этом поначалу нужно быть готовым к большому количеству рутины.

«На позиции trainee (стажера) я выполнял ту работу, за которую не хотели браться более опытные сотрудники, — вспоминает Алексей. — В основном это были правки от заказчика, то есть дополнения на сайте, которые нужно просто внести по определенному шаблону, ничего не поломав при этом. Дополнительная ценность такой работы в том, что ты начинаешь понимать, как устроены реальные проекты именно в вашей студии».

Начиная работать с нуля на фрилансе, легко застрять на выполнении низкооплачиваемых примитивных задач. При этом рядом с вами не будет руководителя, заинтересованного в вашем профессиональном росте. А вот для опытного frontend-разработчика фриланс, особенно на международных биржах, может открыть много возможностей.

Работа на стороне заказчика может стать отличным стартом, но стоит искать компанию, которая будет расти вместе со специалистами. IT-отделы в крупных компаниях часто создают для быстрого решения сложных задач и нанимают для этого дорогих и эффективных специалистов.

Траектории того, как приходят во frontend, разные. Читайте историю Марка Соболева, который служил в полиции, а теперь разрабатывает образовательные сервисы.

Похожие записи:

Как разыграть друга в вк Как добавить обложку к песне в вк: пошаговая инструкция Как удалить подписчиков в контакте без внесения в черный список Что такое tf-карта памяти Делаем простого бота в telegram на python. интеграция с excel Лучшие seo сервисы 2021: топ-15