Frontend-разработчик

Карьерный путь и зарплата фронтенд-разработчика

Карьерный пусть фронтендера обычно начинается с верстальщика — это самый логичный и общепринятый вариант. Сначала изучается связка HTML+CSS, затем на неё наслаиваются знания JavaScript, библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем всё это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов UI/UX-дизайна.

Бывают и иные варианты. Если начинающий программист изначально знает, в какой сфере планирует развиваться, ничто не мешает ему изучать ключевой стек технологий сразу, а не по частям. Всё зависит от целей и времени, которыми располагает будущий фронтендщик. Любой вариант приемлем, лишь бы на выходе получился толковый специалист.

У готового фронтенд-разработчика в целом есть три основных варианта развития:

горизонтальный ― совершенствоваться как специалист, тем самым постоянно повышая свою стоимость на рынке труда;

вертикальный ― расти по карьерной лестнице;

диверсификационный ― освоение смежных специальностей, превращение в фулстака и переквалификация.

Сервис PayScale наглядно проиллюстрировал все возможные пути карьерного развития фронтенд-разработчика:

Какой из них выбрать — зависит лишь от самого специалиста и его пожеланий или навыков.

Касаемо зарплат фронтенд-разработчиков, здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Всё зависит от навыков и умения подать себя. Ну и от везения иногда

Средняя зарплата фронтенд-специалиста по России, рублей/месяц:

По данным «Моего круга»

Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц:

По данным «Моего круга»

Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании, вам такой разрыв, скорее всего, не страшен.

Эксперимент 2

Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

• Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
• AirBnB: Попробуйте повторить их футер
• PayPal: Попробуйте повторить их навигацию
• Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
• Stripe: Попробуйте повторить секцию оплаты

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

Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

React-разработчик

Делает веб-приложения на React.js (это такая библиотека для усиления JavaScript). В них используются интерфейсы, которые похожи на привычные в компьютерных программах — сложные, из многих окон, с переходами и всем, что мы любим.

React-разработчик должен хорошо понимать и уметь всё, что умеет верстальщик, но часто ему не обязательно верстать самому. Такие разработчики чаще пишут код приложений на React, но для этого им нужно отлично знать «ванильный» JavaScript — просто чистый язык без примесей, на котором тоже можно много всего сделать.

Учить React без знания JavaScript можно, но это как строить пятый этаж дома, не построив первые четыре. Скорее всего, придётся ставить подпорки, а потом всё развалится.

Что нужно уметь React-разработчику

Или как отличить библиотеку от фреймворка.

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

Рефакторинг кода на Javascript. Мартин Фаулер

Мы поняли как работают события, что такое замыкания, как использовать генераторы, как убежать от адской пирамиды вызовов и самое главное — с помощью чего. Теперь время писать код. Вот только мы не знаем самого главного в любом коде — способов его организации. На просторах интернета и в книгах, о которых я напишу ниже вы сможете увидеть такие понятия как DRY, SOLID, KISS, YAGNI — это все общие положения, немного размытые, о построении архитектуры кода, приложения.

В Книге Фаулера идет полное описание каждого действия в момент рефакторинга кода. И да, Мартин Фаулер описал все способы — поверьте, Фаулер докопался и описал даже способ рефакторинга «Вынос в функцию». По факту — книга полноценный справочник или очень хорошая настольная энциклопедия, которая служит на благо архитектуры вашего кода.

Где обучиться всему этому?

Ответ на этот вопрос довольно прост. Конечно же в интернете. Можно начать с видеоуроков на youtube, благо сегодня их очень много.

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

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

Самое главное применять изученные материалы на практике.

Web performance. Adopt

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

Важно, чтобы скорость интерфейсов была в культуре разработки

Если вы раньше не думали о таком нефункциональном требовании, как скорость работы интерфейса, то начните с определения бюджета скорости: задайте те ограничения на performance-метрики, за пределы которых нельзя выходить

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

Для контроля бюджета нужно иметь мониторинг скорости работы приложения на основе данных от настоящих пользователей (RUM), желательно с автоматическими уведомлениями при достижении критических значений. Также нужно иметь синтетические тесты, которые исполняются в тестовом окружении. Желательно, чтобы такие тесты были интегрированы в процесс CI/CD: это позволит на раннем этапе замечать потенциальные проблемы и решать их до того, как они попадут к пользователям.

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

В нашем блоге мы подробно раскрывали тему производительности, рекомендуем ознакомиться:

• Клиентский мониторинг производительности
• Синтетический мониторинг производительности

Делегирование бизнес логики

Если какая-то бизнес логика вашего функционала может быть реализована и на бэкенде и на фронтенде, где лучше её реализовать?

В основном лучше делать это на бекенде. Причины:

1. Бэкенд может быть изменен намного быстрее — один деплой на все сервера и обновленная логика будет доступна. Фронтенд же, на руках у пользователей и деплой не будет означать что старая логика в которой возможно присутствуют ошибки, не будет запущена на продакшене.
2. Если бизнес логика требует вычислительной мощности, её тяжело протестировать на различном спектре устройств с которых пользователи могут заходить на ваше приложение. Если вы заходите на него с топового macbook, то не сможете представить насколько медленными будут вычисления на chromebook за 100 долларов.
3. Более безопасно блокировать бизнес логику на бэкенде. Предположим у вас есть функционал только для pro пользователей. Если ограничение будет сделано на фронтенде, то кто-либо потенциально может провести реверс-инжиниринг и получить доступ к функционалу.

Особенности профессии frontend-разработки

• JavaScript, HTML, CSS используются во фронтенд-разработке, с ними создаются приложения, которые исполняются в браузере на стороне клиента.
• Фронтенд-разработчики используют фреймоворки, предоставляющие готовые решения для типичных задач веб-разработки, например маршрутизацию, интеграцию с хранилищем, шаблонизацию и многое другое.
• Библиотеки Angular, Node.js, React. Некоторые из них исполняют приложения как на сервере, так и в клиенте.

Актуальность frontend

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

Растет популярность прогрессивных веб-приложений — гибридов сайтов и мобильных приложений. Это еще один плюс в пользу актуальности frontend-разработки в ближайшей перспективе.

Средняя зарплата в России и в мире

Заработок фронтенд-прогаммиста зависит от уровня квалификации, региона проживания, режима трудоустройства. Средняя зарплата JavaScript-разработчика в России составляет 114 808 рублей, по данным сайта Труд.

Вакансии программиста востребованы в Германии, Дании или Малайзии, но лучшим вариантом работники ИТ-сферы считают трудоустройство в Америке из-за нахождения крупных интернет-компаний Apple, Google, Facebook. 80% разработчиков в США получают 37-87 тысяч долларов без учета налогов.

Где работать

Количество разработчиков, которые производят wow-эффект на клиентов, увеличивается. Специалисты по front-end трудятся в веб-студиях, ИТ-компаниях, стартапах, агентствах аутсорсинга и на фрилансе.

Frontend developer – кто это

Фронтенд разработчик, в отличие от бэкенд разработчика, не занимается прописыванием внутреннего кода, специализируется на верстке и видимом функционале. Специалист имеет основную задачу – верстка сайта и создание адаптивного, дружелюбного интерфейса для пользователей.

В работе необходимо использовать:

• JavaScript (Джава или Ява);
• HTML;
• CSS.

Разобравшись с особенностями frontend разработчика, кто это, чем занимается и за что отвечает, можно рассмотреть и общие положения. Так специалист несет ответственность за оптимизацию и адаптивность страниц, единое отображение во всех браузерах и на разных устройствах.

Разработчик frontend это тот, кто находится «на передовой» разработки. Участвует в оформлении и стабилизации внешнего вида и функционала.

Встречаются вакансии frontend junior, middle и senior. Чем больше знаний и опыта, тем выше level и заработная плата. Чаще компании ищут junior frontend developer, специалиста с базовыми знаниями обучают под себя, дают навыки создания дизайна. Нередко джуны, получив основы в компании, уходят в «свободное плавание».

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

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

Это происходит потому, что специалисты по поиску персонала и сами не понимают, для чего требуется сотрудник, поэтому обязанности от вакансии к вакансии плавающие. Чем на самом деле занимается фронтенд программист:

1. Разработка HTML-страницы сайта. Проводится с использованием как готовых макетов, так и по лично разработанным дизайн-макетам.
2. Верстка как самих сайтов разной сложности и вложенности, так и работа с шаблонами. Необходимо знание популярных CMS.
3. Разработка и установка скриптов для интерфейса. Настройка и визуализация анимации страниц, переходов, баннеров.
4. Создание пользовательского интерфейса для положительного опыта взаимодействия юзеров с сайтом.

Образец вакансии нередко включает обязанности engineers или designers. Но на практике фронтендер должен уметь взаимодействовать и работать над коллективным проектом с бэкенд разработчиками, дизайнерами, тестировщиками, аналитиками.

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

Ретроспектива

Мой путь в веб начался с закатом интернета по минутам. Как раз то время, когда все мы просиживали в локалках, делились фильмами, музыкой и т.п. Тогда у меня и возник вопрос: а можно ли сделать локально что-то типа того, что я вижу в «большом» интернете? Несколько ночей спустя, появился первый сайт на PHP 4.1 c табличной вёрсткой. И затем было ещё много интересного, связанного с вебом, например, локальная радиостанция.

Ожидание: быть на пике прогресса

Реальность: ожидания оправдались

Пример оказался заразительным и локалку стали наполнять похожие сайты, но ставшие результатом коробочных решений. Я же предпочёл остаться верным custom dev’у =)

Ожидание: контролировать процесс и результат

Реальность: зависит от задач и проектов, но в целом ожидания оправдались

Затем пришло понимание того, что я хочу заниматься вебом чаще, больше, а ещё неплохо бы деньги получать. А чтобы себя продать, нужна красивая картинка. А где её взять, если ты кодер? Пришлось немного стать дизайнером. Сейчас большинство профессионалов разбежались по личным ютуб-каналам, инстаграммам и прочим личным ресурсам, но тогда я застал рассвет множества крутых сообществ типа makepizdato, техдизайнер, различных профессиональных сообществ на фрилансе и тому подобное. В общем, база по работе с  графическими пакетами, цветом, шрифтом, типографикой, сеткой, и так далее была получена.

Ожидание: надменно говорить людям: это минус, а не тире Делать красиво и удобно

Реальность: ожидания оправдались

Затем был огромный рост популярности flash-сайтов и отдельных решений на flash, первые реальные попытки привнести кроссплатформенность в мир веба. Тогда получилось пощупать ActionScript 2.0 и ActionScript 3.0. И в итоге пришло понимание, что фронт может решать огромный спектр самых разных задач. Сайты? Да. Игры? Да. Какой-нибудь инструмент для проектирования мебели? Запросто.

Ожидания: свобода в выборе задач

Реальность: ожидания оправдались

Плюсы и минусы профессии

Для завершения образа специалиста по фронтенд-разработке предлагаю оценить существующие достоинства и недостатки в его работе:

Широкий выбор сфер деятельности, где можно попробовать свои силы
Большая востребованность в грамотных специалистах
Высокий уровень дохода
Можно работать удаленно или на фрилансе
Перспективы карьерного роста и развития в профессии

Нужно многое знать (инструменты разработчика, языки программирования, английский и другое)
Необходимо постоянно держать руку на пульсе – быть в курсе всех новшеств в профессии и IT-сфере
Трудности с поиском хороших заказов в начале карьеры, когда нет практического опыта
Есть рутинные процессы в работе

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

Сеть и производительность

▍Размер бандла приложения

Использование интернета в мире (источник — broadbandsearch.net)

• Angular. Бандлы Angular-приложений легко и удобно исследовать с помощью webpack-bundle-analyzer. Более того, CLI Angular даёт в наше распоряжение опцию , которая позволяет сформировать отчёт после сборки бандла.
• React. В документации к Create React App есть страница, посвящённая анализу размеров бандлов.
• Vue. Во Vue, как и в Angular, есть опция , которая позволяет формировать отчёты по бандлам.

▍Сервис-воркеры и прогрессивные веб-приложения

• Angular. В Angular предусмотрены механизмы для использования сервис-воркеров.
• React. Вот руководство по разработке PWA с помощью Create React App.
• Vue. Возможность создания PWA во Vue поддерживается на уровне CLI.

▍Серверный рендеринг

• Улучшение SEO сайтов.
• Ускорение вывода сайтов в браузере.

• Angular. Тут используется Angular Universal.
• React. Для серверного рендеринга React-приложений применяется Next.js.
• Vue. Серверный рендеринг Vue-приложений выполняют с помощью фреймворка NuxtJS.

▍Генераторы статических сайтов

Jamstack

• Скорость: генераторы статических сайтов создают страницы сайтов во время сборки проекта, а не тогда, когда эти страницы запрашиваются клиентом.
• Безопасность: применение SSG позволяет отказаться от систем управления контентом (CMS, Content Management System), которые часто оказываются целями хакерских атак.
• Упрощение масштабирования: веб-проект при применении SSG представляет собой набор файлов, который можно передать клиенту откуда угодно. Это значительно упрощает хранение подобных файлов в CDN. В результате оказывается, что статические сайты очень хорошо масштабируются.
• Упрощение процесса разработки: SSG-проектам не нужна серверная часть и база данных. Это облегчает труд разработчиков.

• Angular. Scully.
• React. Gatsby (React + GraphQL), Next.js.
• Vue. Gridsome, Nuxt.

11tyHugoJekyll

Аналитика

▍Наблюдение за поведением пользователей и A/B-тестирование

• Google Analytics (GA). Существуют руководства по использованию GA в Angular, React и Vue.
• Kameleoon. Это — основанный на технологиях искусственного интеллекта фреймворк для персонализации и A/B-тестирования веб-проектов.

▍SEO

• Angular. Вот интересная статья по поисковой оптимизации, которая применима к Angular- и к Angular Universal-проектам.
• React. Вот материал об общих проблемах SEO в React-проектах. Вот — статья об улучшении поисковой оптимизации React-приложений.
• Vue. Вот подробная статья о поисковой оптимизации Vue-приложений.

CSS-фреймворки, адаптивность

Теперь мы сменим тему на попроще и поговорим о вёрстке.

Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования .

В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid — современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.

Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.

Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных

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

Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.

Кроссбраузерность

Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — , . Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.

Методологии

Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.

Структура взаимодействия бэкенда и фронтенда

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

Серверные приложения

В этом случае HTTP-запросы отправляются напрямую на сервер приложения, а сервер отвечает HTML-страницей.

Между получением запроса и ответом сервер обычно ищет по запросу информацию в базе данных и встраивает ее в шаблон (ERB, Blade, EJS, Handlebars).

Когда страница загружена в браузере, HTML определяет, что будет показано, CSS — как это будет выглядеть, а JS — всякие особые взаимодействия.

Связь с использованием AJAX

Другой тип архитектуры использует для связи AJAX (Asynchronous JavaScript and XML). Это означает, что JavaScript, загруженный в браузере, отправляет HTTP-запрос (XHR, XML HTTP Request) изнутри страницы и (так сложилось исторически) получает XML-ответ. Сейчас для ответов также можно использовать формат JSON.

Это значит, что у вашего сервера должна быть конечная точка, которая отвечает на запросы JSON- или XML-кодом. Два примера протоколов, используемых для этого — REST и SOAP.

Клиентские (одностраничные) приложения

AJAX позволяет вам загружать данные без обновления страницы. Больше всего это используется в таких фреймворках, как Angular и Ember. После сборки такие приложения отправляются в браузер, и любой последующий рендеринг выполняется на стороне клиента (в браузере).

Такой фронтенд общается с бэкендом через HTTP, используя JSON- или XML-ответы.

Универсальные/изоморфные приложения

Некоторые библиотеки и фреймворки, например, React и Ember, позволяют вам исполнять приложения как на сервере, так и в клиенте.

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

Профессиональные навыки

Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript.

HTML

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

Материалы для изучения HTML:

• Основы HTML
• Книга Марка Пилгрима «Погружение в HTML5»
• Порядок выполнения скриптов в HTML
• Видеокурс «HTML5 для начинающих»

CSS

Также важно научиться стилизовать элементы с помощью CSS и делать это правильно, например повторно используя стили для одинаковых элементов. Сперва освойте блочную модель и позиционирование содержимого — компоновку, выравнивание и центрирование элементов, а также их видимость

Почитайте об адаптивном и отзывчивом дизайне. Далее переходите к медиа-запросам, чтобы учитывать технические параметры различных устройств. Неплохим бонусом станет навык работы с CSS Grid и Flexbox. После углубляйте знания, изучая архитектуру и препроцессоры.

Материалы для изучения CSS:

• Основы CSS
• Функциональный CSS: упрощаем работу со стилями
• О CSS Grid и Flexbox простыми словами
• и CSS Diner
• 18 советов по CSS, которые сделают жизнь разработчика проще

Чтобы получить первые практические навыки в работе с HTML и CSS, следует сверстать несколько страниц: это можно сделать как по шаблонам из приведённых статей, так и написать полностью самостоятельный проект.

JavaScript

Ну и как же стать фронтенд-разработчиком, не зная в 2021 году JavaScript? На «плечи» этого языка ложится функциональность сайта: действия по нажатию кнопок, заполнение форм, прослушивание событий, запуск триггеров и многое другое. Не стоит пренебрегать основами и сразу переходить к изучению «модного» фреймворка — изучайте язык постепенно.

Так, вам потребуется освоить синтаксис и базовые конструкции

Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде и не получить никакой ошибки

Напротив, результат будет строкой — . Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.

Ну а мы вернёмся к дорожной карте по фронтенд-разработке

Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM

Материалы для изучения JavaScript:

• Основы JavaScript + jQuery
• Современный учебник JavaScript
• Подборка книг для начинающего веб-разработчика
• 12 концепций, которые прокачают ваш JavaScript
• Топ-5 JavaScript-библиотек для бизнес приложений в 2020-2021

Частота запросов

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

Как мы можем измерить насколько запрос затратный?

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

Давайте рассмотрим пример того когда это становится критичным: предположим мы разрабатываем google docs.

Мы хотим чтобы пользователь не потерял написанное если он вдруг покинет приложение, поэтому мы чаще сохраняем данные. Можем ли мы сохранять каждый новый символ или его удаление?

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

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

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

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

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

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

Vue.js. Hold

Vue.js — это мощный и современный фреймворк. Если вы находитесь на этапе выбора фреймворка, то обязательно должны рассмотреть все решения из большой тройки фреймворков (Angular, React, Vue.js) и подобрать оптимальный для ваших условий.

В нашем случае в компании развита компетенция по Angular и React. Каждый фреймворк появился для решения определенных задач. Сейчас эти два фреймворка покрывают 100% наших требований к разработке веб-интерфейсов. Vue.js не принесет ощутимых изменений, нам потребуются дополнительные затраты на обучение, на адаптацию инструментов. Если взвесить все «за» и «против» внедрения нового фреймворка — «против» больше.

В этой статье обойдем стороной сравнение особенностей фреймворков.