Профессия фронтенд

Где сталкиваются креативность и инновации: frontend разработка

Frontend разработка подразумевает создание механизма взаимодействия пользователей со сценариями, встроенными в HTML-код сайта. Все, что посетитель сайта видит, щелкает или использует для ввода или получения информации, — итог frontend разработки. Разработчик пользовательского интерфейса создает клиентское программное обеспечение, которое воплощает в жизнь дизайн сайта. Скрипты загружаются браузером, обрабатываются, а затем запускаются отдельно от сервера. Таким образом frontend разработка — взаимодействие технологий и видения web-разработчика в равных частях.

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

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

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

Будущее фронтендера

1. Внутри фронтенд-стека. Первый уровень — заточенность на задачу и кодинг; второй уровень — расширенная работа с интерфейсами и концепциями, освоение нескольких фреймворков, TDD, новые библиотеки; третий уровень — архитектура и проектирование интерфейсов, производительность; четвёртый уровень — техническая экспертиза и управление группой разработчиков. 
2. Переход на полный стек (фуллстек-разработчик) — путь к бОльшим деньгам, крупным корпорациям, нетривиальным задачам. Вы соединяете в себе способность разрабатывать веб-приложения сразу со всех сторон и не зависеть от чужого кривого кода (в идеале, а так-то — ха-ха).
3. Переход на менеджерские позиции, управление проектами, управление всем коллективом разработчиков, общение с клиентами, презентации. Исключительно для тех, кто это любит.

Любопытные ожидания других людей, с которыми пришлось сталкиваться

— Хочу кодить

— Но ты же фронтендер

Реальность: современный фронт это далеко не только вёрстка или кусочки кода для анимации. Это полноценная разработка и программирование, причём иногда не только на JS.

Ожидание: браузер один или они все одинаковые

Реальность: браузеров много и они все разные

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

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

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

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

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

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

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

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

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

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

Frontend frameworks

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

• AngularJS: эта структура и несколько других инфраструктур JS, таких как Backbone.js, которые используют возможности JavaScript.
• JQuery: Быстрая, маленькая, объектная библиотека JS, упрощает управление JavaScript в разных браузерах.
• Bootstrap: эта лидирующая платформа для мобильных устройств; объединяет HTML, CSS и JavaScript, чтобы упростить развивающуюся разработку приложений. С Bootstrap ваш сайт совместим со всеми современными браузерами и отлично смотрится на экране любого размера: от телефонов до планшетов и ноутбуков.
• Foundation: Созданный ZURB, эта ориентированная на бизнес, отзывчивая внешняя инфраструктура. На данный момент она используется такими сайтами, как Facebook, Yahoo !, и eBay.
• Семантический UI (интерфейс): эта интерфейсная среда пользователя ориентирована на читаемость кода, чистую логику и структуру и имеет множество функций.
• Pure.css: Созданный Yahoo !, эта легкая, небольшая структура представляет собой набор гибких модулей CSS, которые помогут упростить разработку мобильных сайтов. Когда вам не нужна тонна функций, расположенных в вашей структуре, Pure предлагает только основы.
• Skeleton.css: Еще одна отзывчивая структура CSS, которая быстро распространяется. Skeleton — это базовый, без излишеств фундамент — скелет — для сайта.

@ivashkevich

22.08.2017 в 17:51

8887

+55

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

Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).

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

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

Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):

• JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
• На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
• Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).

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

Из этого выходит, что профессия фронтенд-разработчика требует постоянного обучения и нахождения в курсе событий в индустрии.

Отличие frontend от backend

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

За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.

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

Достоинства и недостатки

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

Перечень плюсов:

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

Список минусов:

• Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
• Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
• Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.

Уровень зарплат

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

Согласно приведённому графику, разброс зарплат в обоих направлениях веба отличается незначительно, и что важнее — он точно не меньше зарплат фулстек-разработчиков. Если оперировать фактическими цифрами – вход на профессиональный уровень (уверенный junior или начинающий middle) лежит в районе 60-70 тысяч, и далее уходит к средней в 110-120 тысяч рублей. Что ещё важнее, согласно данным Хабр Карьеры, зарплата в разработке выросла в среднем на 6% по сравнению со вторым полугодием.

Для сравнения возьмём ещё статистику с портала
trud.com. Вот данные на конец 2019 года по фронтенду:

Для сравнения — заработок среднего PHP-разработчика за тот же период:

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

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

Мы постарались собрать в этой статье всё, чтобы вы смогли сделать выбор в мире веб-разработки. Теперь дело за вами — решиться и
попробовать. Удачи!

Что такое тестирование?

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

Прим. перев. О том, зачем нужна TDD, читайте в нашей статье.

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

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

Интенсив «Профессия Data Scientist: учимся обработке и анализу данных за 3 дня»

26–28 апреля, Онлайн, Беcплатно

tproger.ru

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

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

Интересные материалы

Список интересных источников по теме:

• Stackoverflow — самый популярный русскоязычный IT-портал по вопросам и ответам от опытных пользователей;
• Довольно активное сообщество веб-разработчиков Web-Shake;
• История фронтенд-специалиста Сика Худеиба, переведенная на русский язык;
• История Вениамина Шитикова о становлении фронтенд-разработчиком и устройстве в Mail.ru;
• История о том, как графический дизайнер переквалифицировался в frontend-разработчика (переведена на русский язык с китайского);
• Небольшая история о вхождении во фронтенд.

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

Как в вакансии

Фронтенд-разработчик дела­ет следующее:

• соби­ра­ет сайт по маке­ту дизайнера;
• исполь­зу­ет для это­го HTML, CSS, JavaScript и несколь­ко дру­гих языков;
• пони­ма­ет про­цес­сы, кото­рые про­ис­хо­дят во вре­мя созда­ния сайта;
• зна­ет, как опуб­ли­ко­вать сайт в Сети так, что­бы он выгля­дел оди­на­ко­во на всех устройствах;
• уме­ет рабо­тать с Git или дру­гим инстру­мен­том кон­тро­ля версий;
• исполь­зу­ет Webpack для сбор­ки про­ек­та и вооб­ще опе­ри­ру­ет препроцессорами.

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

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

Соглашение об именах в CSS

Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

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

Интересные люди

• Mathias Bynens — разработчик V8, высокопроизводительного JavaScript- и WebAssembly движка от Google с открытым исходным кодом.
• Jake Archibald — веб-евангелист и представитель браузера Google Chrome, один из лучших экспертов компании, автор множества докладов на уникальные темы.
• Phil Walton — инженер в Google, работающий над браузером Chrome, имеет опыт разработки с 1998 года и ведет персональный блог.
• Monica Dinculescu — “emojineer”, работает в Google над проектом Magenta, создавая музыку и изобразительное искусство с помощью машинного обучения.
• Tim Kadlec — технический консультант по производительности, делающий веб более быстрым, автор нескольких книг и участник конференций.
• Léonie — специалист по доступности и сооснователь W3C Web Platform WG.
• Eric Meyer — эксперт в области HTML и CSS, автор множества статей и книг, создатель нескольких полезных инструментов и ресурсов. Более подробно — на его личном сайте.
• Una — веб-евангелист и директор по дизайну продуктов в Bustle Digital Group.
• Harry Roberts — независимый веб-консультант по производительности, работающий с крупнейшими международными корпорациями. Приглашенный эксперт Google, отмеченный наградами разработчик, международный докладчик и посол по вопросам эффективности в SHIFT Commerce.
• Alex Russell — техлид по стандартам команды Chrome, участник группы технической архитектуры W3C и разработчик ECMA TC39 (стандарт JavaScript).
• Surma — веб-евангелист в Google.
• Manuel Matuzović — профессиональный веб-разработчик с 2008 года и фрилансер с 2010 года, специалист в HTML, доступности, CSS-верстке и архитектуре.
• HJ Chen — веб-евангелист в Nexmo.
• Jen Simmons — дизайнер-евангелист в Mozilla, член рабочей группы CSS, который знает, как CSS Grid меняет веб-дизайн.
• Martin Splitt — евангелист OSS1 и разработчик в Google.
• Maximiliano Firtman — независимый разработчик мобильных и веб-приложений, ментор и докладчик, занимающийся прогрессивными веб-приложениями, производительностью, мобильностью и веб-платформой. Автор множества технических статей и книг о программировании.
• Rachel Andrew — веб-разработчик, член рабочей группы CSS и главный редактор Smashing Magazine.
• Roma Komarov — frontend-разработчик, специализирующийся на CSS, создатель Hayaku, bemto-компонентов, bemto для Pug.js и так далее.
• Addy Osmani — руководитель команды Speed Team в Google Chrome, которая делает веб быстрее. Также Addy работает над несколькими проектами с открытым исходным кодом — более подробно на персональном сайте.

Какие трудности могут быть? Ошибки в начале пути

Изучение фреймворков вместо базовых знаний

Иногда будет казаться, что лучше сразу изучать какой-нибудь популярный фреймворк или библиотеку. Это достаточно частая ошибка, особенно во фронтенде: люди начинают изучать React или верстают с помощью Bootstrap и Material UI, не разобравшись в основах и не получив достаточных знаний по HTML, CSS и JavaScript. Можно использовать такой подход, если вы «бежите на короткую дистанцию» и вам нужно быстро сделать какой-нибудь проект. Но если вы планируете стать разработчиком, это не принесет нужного результата.

Нет необходимости знать наизусть абсолютно все CSS-свойства или методы в JS, вы сможете поискать их, если забудете

Важно понимание основных концепций и тонкостей: это то, что будет вашим крепким фундаментом во фронтенд-разработке

Обучение — это труд, самодисциплина и много практики

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

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

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

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

Копирование чужого кода

Если вы столкнетесь с проблемами и ошибками, которые не сможете решить, то не стесняйтесь искать помощи в Google. Учитесь пользоваться поиском и находить причину возникшей проблемы, но не копируйте чужой код вслепую.

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

Не доверяйте на 100% коду, который вы находите

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

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

Выходим за пределы серверной части

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

Мир серверной MVC, генерирующей HTML + JavaScript. Код JS разбросан по страницам. JavaScript в основном используется для улучшения UX за счет сокращения циклов просмотра сервера (Server View Cycles). Такие вещи, как отправка формы, проверка ввода и т.д. обрабатываются клиентским кодом.

Это самая распространенная архитектура в истории веб-приложений. Большинство приложений B2C, SEO-дружественных веб-сайтов, особенно созданных с помощью CMS — Content Management Systems, используют его. Количество клиентского кода зависит от потребностей приложения.

Эта архитектура как таковая никогда не была действительно стандартизирована и поэтому не имеет названия. Она развивалась инкрементном стиле и до сих пор считается расширением Web MVC. ASP.NET MVC, Java Struts, Python Django, Ruby ROR, PHP CodeIgniter — некоторые из широко используемых сред, широко использующих серверную MVC или Web MVC.

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

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

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

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

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

1. Frontend Frameworks;

2. HTML и CSS;

3. JavaScript;

4. JQuery

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

6. Дизайн;

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

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

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

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

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

Важные личные качества

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

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

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

В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ

Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы

ShiftBrain Studio

Для начала прочитайте статью от Adham Dannaway Мой (простой) процесс дизайна и разработки сайта-портфолио (англ.).

Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.)

В первую очередь важно использовать при разработке все ваши навыки

Будьте в курсе

До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда. Мир фронтенда все время изменяется

Мир фронтенда все время изменяется

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

Заработок во frontend

Зарплата фронтенд-разработчика высокая даже для IT. Средний заработок, по данным сайта по поиску работы Trud.com (версия для России), составляет 90 тысяч рублей в месяц. Больше всего вакансий с оплатой 70 тысяч рублей в месяц. Подробную статистику можно посмотреть в графике ниже (количество вакансий — по оси X, сумма оплаты — по оси Y):

Сколько зарабатывает фронтенд-разработчик, зависит от его опыта и квалификации. Новички с небольшим опытом работы получают примерно 35—40 тысяч рублей, работники среднего уровня — 55 тысяч рублей. Самые востребованные кадры зарабатывают до 185 тысяч рублей.

Заработная плата разная в зависимости от города проживания. Больше всего получают в Москве, Питере и Краснодаре.

Зарплата в Америке больше, чем в России. В среднем разработчики получают 60—70 тысяч долларов США, по данным ресурса Indeed. В Америке большинство вакансий указаны без заработной платы, но примерно 1 из 10 вакансий имеет эти данные, поэтому несложно посчитать среднее арифметическое.

Общий монорепозиторий. Hold

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

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

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

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

PM — Project manager

менеджера проектовPMPM

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

• английский Upper Intermediate и выше, так как ПМ коммуницирует со стороной заказчика от лица команды;
• широкие технические знания, но не сильно глубокие, чтобы можно было понимать, кто чем занимается, как происходит работа в целом, не сильно углубляясь;
• навыки управления проектами и участвующими в них командами;
• сильнейшие коммуникационные навыки, так как работа PM в основном состоит из коммуникаций с членами команды, руководством;
• развитые навыки ведения переписки. К примеру, часто нужно посылать письма на email заказчика от лица команды, компании, и письмо неправильно составленное или с ошибками никто не оценит;
• аналитический склад ума, который будет полезен при решении проблем, возникающих во время работы над проектом;
• навыки тайм-менеджмента, использование которых позволит держать проекты в рамках графика и бюджета (ведь время=деньги);
• навыки планирования ресурсов и задач.

700$1200-4500$В кого можно вырасти:

• delivery manager (DM) — прямое продолжение PM-a, стоит сразу над группой PM-ов и координирует их проекты на более высоком уровне;
• program manager — координирует несколько взаимосвязанных проектов, но я сам не сильно понимаю различие с DM-ом;
• chief technical officer (CTO) — технический директор, несущий ответственность за разработку продуктов и улучшение их процессов создания;
• chief executive officer (CEO) — главный исполнительный директор;
• account manager (AM) — менеджер по работе с клиентами;
• переучиться и перейти в другую специальность ))

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

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

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

В этом случае 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.