Front end разработка: Что должен уметь фронтенд-разработчик / Нетология corporate blog / Habr – Фронтенд и бэкенд — Википедия

Содержание

практическое руководство для роста начинающего разработчика / Habr

Во фронтенд разработке за последние несколько лет наблюдается огромный скачок развития. JavaScript продолжает увеличивать отрыв от остальных языков как наиболее популярный на Github, а вакансия фронтенд разработчика с каждым годом набирает популярность. И это не удивительно, что c ростом популярности языка мы наблюдаем значительное увеличение числа многообещающих программ изучения фронтенд технологий, учебников, ускоренных курсов и прочего. Такой цикл естественен для любой бурно развивающейся отрасли, и это происходит следующим образом:

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

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

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

Хорошо, а что теперь?


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

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

Читайте книги


Чтобы получить глубокое понимание фронтенд языков (JavaScript, CSS и HTML), не достаточно читать обучающие материалы — вы должны читать книги. Еще в самом начале моей обучения, я помню, как читал Javascript Шаблоны без малейшего понятия — зачем они требуются. Но, в процессе обучения, термины в книге начали обретать смысл. Я использовал описанные приемы в качестве эталона, который гарантировал, что я писал код грамотно. Через некоторое время, я был в состоянии полностью понять книгу, и даже мог сформулировать своё мнение по некоторым позициям автора книги.

Для закрепления навыков я бы советовал прочитать еще Красноречивый Javascript, SMACSS и HTML и CSS: Создание и проектирование веб-приложений; но не останавливаться на этом.

Посещайте митапы


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

Открытый исходный код


Это может быть сложной задачей для всех уровней разработчиков, но если вы разрабатываете для веба, я могу почти гарантировать, что вы используете программное обеспечение с открытым исходным кодом. Открытое программное обеспечение — это ПО, которым можно свободно пользоваться, делиться и вносить изменения кем угодно. Так, с чего начать? Подумайте об инструменте, который вы используете — скажем… JQuery или Bootstrap, и начните с поиска задач на Github. Есть что-то, что вы думаете, может быть улучшено? Создайте задачу, или, еще лучше, отправьте свои изменения. Худшее, что может случиться, только то, что ваши изменения могут быть отклонены. Но куда важнее является то, что вы получаете реальные отзывы.

Работа для начинающих разработчиков, стажировка, гибридная роль


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

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

Начните свой проект


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

Первые строки кода, который я написал были результатом участия в конкурсе Startup Weekend с другом, у которого была идея создать приложение employee suggestion box app. Этот процесс был ужасен, но оба мы имели четкое представление о том, что должно делать наше приложение. Поэтому я хардкодил и спешил, до тех пор, пока он не заработал как мы хотели. Это был грязный процесс и, чтобы быть откровенным, исходный код был ужасен, но я узнал очень много нового за короткий отрезок времени. Работа с реальными клиентами была тоже тяжелой, мы должны были управлять их ожиданиями, а с другой стороны, сторонний проект без клиентов, где время безотказной работы не имеет значения. После запуска этого бизнеса через 8 месяцев, я был готов оставить мою первую работу с полным рабочим днем.

Никогда не прекращайте учиться


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

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

В заключение


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

Почему вы никогда не научитесь фронтэнд-разработке

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

Спойлер: разработке невозможно научиться раз и навсегда. Учиться придется всю жизнь.

«Петя Пяточкин прошел два курса на FreeCodeCamp, после которых устроился на должность фронтэнд-разработчика». Подобные объявления на YouTube, в соцсетях и в «Яндексе» появляются регулярно.

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

Многие считают, что благодаря онлайн-курсам любой человек может стать разработчиком. Благодаря объявлениям они видят прямую дорогу: оплатил курсы, послушал вебинары, сделал несколько заданий, – стал фронтэндером. Автор заметки тоже попал в эту ловушку.

Реальность отличается от красивых картинок из объявлений.

Автор посвятил около года обучению фронтэнд-разработке. И вот какие выводы он сделал.

Время – самый ценный ресурс

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

Здесь вот какая проблема: в рекламе и в соцсетях есть много историй о людях, которые выучили HTML, CSS и JavaScript за пару недель или за пару месяцев. Любой человек в такой ситуации задается вопросом: «Я что-то делаю не так или просто тупой?»

Это провокация, вы не тупой.

Есть такая байка: чтобы стать если не мастером, то хотя бы крепким ремесленником, нужно посвятить выбранному делу 10 000 часов. Вряд ли кто-то проверял точность этой легенды. Но суть ее верна: чтобы освоить дело, нужно практиковаться, работать, пахать. Фронтэнд-разработка ничем не отличается от гончарного дела: чтобы освоить профессию и стать мастером, нужно работать головой и руками.

Изучение разработки – путь длиною в жизнь

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

Ошибки – это нормально

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

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

Ошибки – часть пути разработчика. Каждая ошибка – урок, который делает разработчика лучше. Принимайте ошибки с благодарностью.

Нельзя раз и навсегда выучить разработку

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

Чтобы работать, нужно знать препроцессоры, фреймворки, библиотеки. Вы не сделаете и шага без Sass, jQuery, Bootstrap. Новые фреймворки появляются без преувеличения каждый день. И это только вершина айсберга.

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

Например, если вы освоили Sass, вряд ли захотите работать на чистом CSS. Это как с личным авто и общественным транспортом: стоит раз сесть за руль, чтобы ни за что на свете не согласиться ездить на троллейбусе.

Практика решает

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

Практика делает веб-разработчика лучше. Отсутствие практики ведет к деградации.

Гоша и Яша – лучшие друзья разработчика

Это о Google и «Яндекс». В них можно найти ответы на 99 % вопросов, связанных с разработкой.

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

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

Планируйте обучение под свои предпочтения

Чтобы изучить азы, достаточно пройти курсы или прослушать бесплатные вебинары на YouTube. Но не ограничивайтесь одним ресурсом. Более того, не ограничивайтесь только онлайн-курсами.

Автор прошел два интенсива по JavaScript на FreeCodeCamp, но не освоил материал. Это не значит, что FreeCodeCamp – плохой ресурс. Просто автору не подошел использованный там подход. Зато он легко обучился фронтэнд-разработке, в том числе изучил основы JavaScript, по бесплатным урокам на YouTube.

Так же может получиться у вас: если не подходит курс JS от FreeCodeCamp, смотрите уроки на YouTube или учитесь самостоятельно по Learn JavaScript. В интернете полно платных и бесплатных образовательных ресурсов. Какие-то из них точно подойдут вам.

Вместо заключения: обучение фронтэнд-разработке – это навсегда

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

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

Источник

Читайте также:

8 задач для практики Frontend-разработчика

Хотите написать приложение на JavaScript, но не знаете, какое? Ловите 8 идей проектов для прокачки навыков фронтенд-программиста.

1. Пересоздайте Giphy с собственным API

Задача: написать веб-приложение, которое показывает гифки на странице, с использованием пользовательского ввода для поиска и API Giphy.

Когда освоите манипулирование с объектной моделью документа и возьмётесь за работу с обыкновенными JavaScript или jQuery, рекомендуем начать изучение шаблонов данных и показывать их в дереве DOM.

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

Ужасно разработанное Giphy-приложение. Сделайте лучше или используйте CSS-фреймворк ?

С использованием API вы напишите небольшое веб-приложение, которое выполняет такие функции:

  • при запуске отображает актуальные GIF-файлы в колонке или сетке;
  • принимает ввод пользователя для поиска конкретных картинок;
  • в нижней части после результатов отображается кнопка «Загрузить ещё», которая получает дополнительную порцию гифок по тому же ключевому слову.

Во время разработки вы столкнётесь с массой новых задач, например, со способами работы с асинхронными запросами. Выбирайте обычный JavaScript для этой задачи или, если предпочитаете jQuery, используйте метод ajax. Цель заключается в том, чтобы начать работать с асинхронным кодом.

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

2. Создайте форму кредитной карты

Посмотрите на фантастическую форму кредитной карты с гладкими и приятными микровзаимодействиями. Поддерживается форматирование чисел, валидация и автоматическое определение типа карты. Этот пример написан с помощью Vue.js, а также полностью отзывчивый – убедитесь сами.

Что вы узнаете, решив задачу:

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

3. Сделайте элемент mouseover

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

Элемент mouseover «Весёлые прыгающие мячики» Роджера Ван Хаута на CodePen отображает поле с шариками, похожее на автомат с жевательными резинками из детства. Наведите указатель мыши на любой круг и наблюдайте его расширение.

Прыгающие мячики при наведении мыши

4. Напишите чат в стиле Reddit

Чаты – распространённый способ общения из-за простоты и удобства использования. А что же в действительности приводит в действие современные чаты? Вебсокеты!

Что вы узнаете, решив задачу:

  • Как использовать вебсокеты, связь в режиме реального времени и обновление информации.
  • Как функционируют пользовательские права доступа (к примеру, владелец канала чата выступает администратором, в то время как остальные – юзеры).
  • Валидация формы и обработка: помните, окно чата для отправки сообщения – элемент ввода.
  • Как создавать и вступать во всевозможные чаты.
  • Прямые сообщения и как они работают. Люди могут контактировать с другими пользователями в частном порядке. По сути, вы будете устанавливать WebSocket соединение между двумя пользователями.
Приложение-чат

5. Реализуйте часы JavaScript

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

Чтобы получить представление о том, с чего начать воплощение этой идеи, посмотрите на часы Lolcats Clock – главный элемент JavaScript курса Skillcrush. Код JavaScript координирует изображения смешных котов с установленным пользователем временем или нажатием кнопки «Party Time!». Я могу ставить на карту время? Да, вы можете.

Часы с котами на JavaScript

6. Сделайте репозитории GitHub с функцией поиска

Здесь нет ничего сверхъестественного: репозиторий GitHub по существу всего лишь приукрашенный список.

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

Что вы узнаете, решив задачу:

  • Как получить данные из API.
  • Как отобразить данные из API.
  • Как отфильтровать и показать релевантные данные для каждого поиска.
  • Необязательно: если вы готовы принять вызов, используйте API v4, созданный с использованием GraphQL, который придётся изучить.
Страница профиля GitHub

7. Разработайте веб-приложение Punk Beer

Задача: создать уникальный проект с использованием Punk Beer API и отображением информации на странице с помощью шаблонизации. Если вы амбициозны, попрактикуйтесь с фреймворком, допустим, с React.

Наконец, ваш проект будет продолжать работать с Punk API, который без ключа выдаёт информативные ответы.

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

Пивное веб-приложение с добавлением в избранное

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

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

  • сделайте шаблоны данных на странице из API запроса;
  • прикрутите панель поиска, которая отправляет отдельный запрос к базе данных по требованию;
  • добавьте функцию «в избранное», чтобы отмечать любимые позиции;
  • создайте отдельный роут (используя React Router), чтобы увидеть все виды пива, которые вы добавили в избранное во время сеанса.

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

8. Создайте карту JavaScript

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

Не стремитесь к воссозданию Карт Google в первый раз, экспериментируйте с простыми JavaScript проектами, такими как интерактивная карта от Sara B. на Codepen.

Интерактивная карта

Карту создавали с использованием фреймворка jQuery – коллекции JavaScript библиотек с предварительно написанным, повторно используемым кодом. Для новичков это надёжный способ ознакомиться с возможностями создания карт в JavaScript.

Какой проект будете реализовывать?

Курс Frontend-разработчик. Обучение на Frontend-разработчика онлайн

  • React JavaScript-библиотека для создания пользовательских интерфейсов

  • Webpack Модульный компилятор для приложений на JavaScript.

  • Grunt Инструмент для сборки JavaScript-проектов из командной строки и планировщик задач.

  • Gulp Инструмент для автоматического выполнения задач frontend-разработки.

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

  • Git Распределённая система контроля версий и платформа для совместной разработки.

  • Bootstrap Шаблонный набор инструментов HTML и CSS для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса.

  • JavaScript Клиентский язык программирования для создания интерактивных элементов на веб-страницах.

  • HTML5 Новая версия языка HTML и набор технологий для создания сайтов и веб-приложений.

  • CSS3 Язык разметки и каскадные таблицы стилей третьего поколения.

  • jQuery Фреймворк JavaScript для взаимодействия JavaScript, HTML и CSS.

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *