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

TypeScript. Adopt

Недавно мы провели внутренний опрос фронтенд-разработчиков (как State of Frontend, только по Тинькофф), который прошли 159 фронтенд-разработчиков. В опросе была секция про TypeScript, ответы на которые дали нам уверенность, что TypeScript стал стандартом разработки фронтенда, по крайней мере в Тинькофф.

TypeScript, как язык со статической типизацией, повышает надежность и расширяемость кода. Мы получаем самодокументированный код, интерфейсы, безопасный рефакторинг, короткий цикл обратной связи (узнаем об ошибке в IDE, а не в браузере).

Если у вас небольшой проект, который в будущем не будет развиваться, «сделал и забыл», то использование TypeScript может принести накладные расходы. На дальней перспективе, когда проект будут развивать несколько поколений разработчиков, — используйте и не сомневайтесь.

В нашем блоге вы можете найти пару полезных статей про TypeScript:

• Простые TypeScript-хитрости, которые позволят масштабировать ваши приложения бесконечно
• 12 советов по внедрению TypeScript в React-приложениях

Три составляющих фронтенда

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

Конкурс Russian Drupal Awards 2021

26 апреля – 30 августа, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

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

Любой процесс познания можно представить в виде буквы «Т», где горизонтальная линия — широкое понимание, вертикальная — глубокое. У идеального специалиста буква Т большая и красивая, равномерная. Если она вытянута в одну сторону, она некрасива, уродлива; такой специалист мало полезен в боевых делах. Он может либо глубоко разбираться в чём-то одном, но чуть шаг в сторону, и он непригоден; либо поверхностно разбираться во всём, но при этом ничего не уметь. В первую очередь необходимо максимально развить широкую составляющую, чем мы сейчас и займёмся — постараемся максимально широко охватить все аспекты фронтенда, не углубляясь. А потом вы займётесь углублением, которое останется вам на самостоятельную работу.

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

Что должен знать хороший frontend-разработчик?

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

На самом деле это то же самое, что забивать гвозди микроскопом. Верстальщик сможет сверстать готовый макет от дизайнера, пользуясь html и CSS. В отдельных случаях он «прикрутит», куда требуется, в плагин или библиотеку JavaScript.

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

1. Frontend Frameworks;

2. HTML и CSS;

3. JavaScript;

4. JQuery

5. Работа с препроцессорами CSS;

6. Дизайн;

7. Кросс-браузерная разработка;

8. Системы управления контентом и платформы для электронной коммерции;

9. Тестирование и отладка;

10. Системы контроля версий Git и Version.

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

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

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

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

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

JavaScript. Шаблоны – Стоян Стефанов

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

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Accessibility for everyone – Laura Kalbag

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

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

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

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

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

Trunk based development (TBD). Assess

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

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

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

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

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

Мифы о UI/UX-дизайнерах

Вначале я хотел бы обратить внимание на предвзятое отношение и недоверие фронтендщиков к UI/UX-дизайнерам. Далее по тексту я опущу приставку UI/UX и буду писать просто «дизайнер», подразумевая именно дизайнеров интерфейсов.  Выделим несколько мифов, которые мешают в коммуникации

Мой дизайнер ни за что не изменит свой макет. Это один из самых распространённых мифов. Многие разработчики думают, что макет для дизайнера — это как картина для художника, он закончил её и больше ни за что не изменит. В реальности всё не так. Как программисты продолжают работать над кодом, устраняя технический долг и совершенствуя код, так и дизайнеры продолжают работу над макетами. Если команда большая, макет вообще может начать жить своей жизнью. В моей практике почти все дизайнеры шли мне навстречу, если я просил что-то изменить. Даже в самом глубоком энтерпрайзе, где макеты проходили несколько этапов согласований, мы всё равно находили возможность что-то подкорректировать. В любом случае изменения в макетах неизбежны, ведь не все из гипотез дизайнера проходят проверку на реальных пользователях. Если вы можете доходчиво объяснить причину предлагаемого изменения (например, ваш вариант позволяет сэкономить на времени разработки вдвое или есть готовая библиотека с нужным поведением, но немного отличается внешне), вы найдёте компромисс со своим коллегой. Он либо поправит макет по вашим предложениям, либо объяснит, почему его вариант важен для проекта.

Мой дизайнер самый ленивый. Этот миф возникает, когда приходишь несколько раз с одной и той же просьбой к своему дизайнеру, но он её упорно игнорирует. Зачастую дизайнеров меньше на проекте, и они всегда завалены работой и техдолгом (как я уже упоминал выше, техдолг есть не только у разработчиков). Если работа простаивает без помощи дизайнера, лучше сходить к тимлиду — возможно, есть задачи, которыми можно заняться в ожидании макета. Например, настроить инфраструктуру, среду для тестирования или что-нибудь ещё. Если тимлида нет, можно спросить дизайнера, чем он занимается, и помочь ему с расстановкой приоритетов. Объясните, какие экраны нужны в первую очередь, а какие могут подождать. Возможно, ваш дизайнер готовит дизайн-систему для проекта, тогда его лучше вообще не отвлекать, ведь как и у программистов, у них всегда есть важные задачи, при работе над которыми лучше не отвлекаться. Если вам действительно что-то очень нужно, объясните почему, спросите, когда у коллеги будет возможность заняться вашим вопросом, и до этого времени постарайтесь его не беспокоить.

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

Мой дизайнер самый упёртый. Наверняка каждый фронтенд-разработчик слышал «нет» от дизайнера, отсюда и возникает этот миф. Опираясь на предыдущие мифы, первый совет — поверьте ему на слово. Если не удаётся, попробуйте получить у него больше информации, почему он говорит «нет», или обратиться к его менее загруженному коллеге за разъяснением (правда, таким образом можно обидеть своего дизайнера, будьте к этому готовы).

По правде говоря, мифов гораздо больше, но основная мысль, которую я хотел донести, звучит так: все дизайнеры — тоже люди, с которыми лучше общаться и задавать вопросы. Многие, с кем я общался, научили меня некоторым тонкостям своего ремесла, которые пригодились мне в вёрстке.

Работа фронтенд-разработчиком

Фронтенд-специалист может работать:

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

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

Востребованность специалиста

Frontend-разработчики востребованы в России, так как существует множество студий, которые реализуют веб-проекты (приложения или сайты). Конкретно оценить востребованность данного специалиста можно по статистическим показателям.

Мы зашли на самый популярный сайт по поиску работы в России — HeadHunter и посмотрели количество вакансий по запросу «фронтенд-разработчик». Вышло 2 300 вакансий по всей стране, что довольно много. Больше всего работы в Москве, Санкт-Петербурге и Новосибирской области.

Требования работодателей

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

Основные требования и обязанности специалиста:

• Знание JavaScript;
• Углубленные знания HTML, CSS, адаптивного дизайна;
• Понимание кросс-браузерной совместимости;
• Владение React.JS и соответствующей экосистемой;
• Тестирование интерфейсов на разных платформах;
• Работа с системой контроля версий Git;
• Понимание фронтальной оптимизации UI;
• Четкое понимание работы сетевых протоколов (HTTP, TCP/IP, UDP);
• Навыки работы с CMS-системами;
• Постоянное взаимодействие с бэкендом.

Также в обязанности фронтенд-специалиста может входить верстка (на SCSS, JSX, SVG), работа с интерфейсами (REST: JSON RPC, JSONP), а также с документоориентированными базами данных (PostgreSQL, MongoDB, Redis). Но эти требования встречаются лишь в некоторых вакансиях и только при опыте работы от трех лет и больше (для разработчиков минимум среднего уровня).

Поиск работы

Легче всего найти работу на самых популярных платформах по поиску вакансий — HeadHunter и Trud. Также рекомендуется посмотреть актуальные вакансии в подразделах крупнейшего русскоязычного IT-сайта Habr в ветке вакансий.

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

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

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

Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: , , , и . Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

• Меню приложения
• Виджет Twitter
• Простое плоское меню

Не стоит расстраиваться если ваша копия будет отличатся от оригинала. Продолжайте практиковаться с разными дизайнами и со временем вы заметите существенные улучшения.

Если у вас нет за плечами опыта в дизайне, вероятнее всего, ваш дизайнерский глазомер не настроен. Фронтенд-разработчик с хорошим дизайнерским чутьем будет в состоянии отличить хороший дизайн и сверстать его идеально. Я написал статью несколько недель назад о том, как (рус.).

Что следует знать дизайнерам о фронтенде

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

  • box-sizing — определяет, как вычисляется общая ширина и высота элемента;

  • margin — определяет внешний отступ;

  • padding — определяет внутренний отступ;

  • border — отвечает за все персональные свойства границ;

  • overflow — работает с переполнением;

  • flex/grid — наиболее популярные типы отображения элементов.

• Одна из основных методологий в CSS — БЭМ. Дизайнеру она нужна, чтобы понять образ мыслей фронтендщика, который будет собирать страницу, и позволит хранить элементы проекта аналогично тому, как это будет делать фронтенд-разработчик.

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

• Браузерные инструменты разработчика упростят процесс проведения авторского надзора и помогут проверить некоторые гипотезы непосредственно в рабочей среде.

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

Шаблоны GUI сложны?

Если вы подробно изучили предыдущие шаблоны (Patterns), то поймете, что шаблоны GUI отличаются от других шаблонов разработки программного обеспечения. Возьмем, например, элементы многоразового объектно-ориентированного программного обеспечения (Elements of Reusable Object-Oriented Software). Большинство шаблонов не зависят от технологии или языка программирования. Однако то же самое не относится к шаблонам GUI.

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

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

Большинство шаблонов веб-интерфейса можно разделить на три этапа: эволюционный, революционный и современный.

Эволюционные шаблоны являются просто расширением серверной MVC. Они действительно не пытаются изобрести что-то новое. Они дополняют существующие приложения, улучшая свой UX шаг за шагом.

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

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

Конец первой частиЧасть 2

Что говорит статистика

Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:

• по данным StackOverflow, JavaScript в списке инструментов фронтенда лидирует с огромным отрывом (90,5%);
• исследование компании O’Reilly, проведенное среди европейских программистов в конце 2016 года, тоже ставит JavaScript на первое месте.

Далее идут различного рода фреймворки и библиотеки, самые популярные из которых Angular, Node.js, React. Кроме обязательного JavaScript, фронтенд-разработчики также используют и другие языки, хоть и не так часто. Лидируют PHP, SQL, Java и С#. И, конечно же, не обойтись фронтендщику без навыков работы с CMS. Самый популярный выбор — WordPress.

Данные StackOverflow

Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:

Данные StackOverflow

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

Инструменты

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

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, общаться с коллегами и заказчиками (если попадете в иностранную компанию), заниматься самообразованием.

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

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