Как стать Front-end разработчиком? #8 Фреймворки

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

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

Основные идеи фронтенд фреймворков

Из статьи о JavaScript мы узнали, что хорошей практикой будет разбивать наш код на различные модули (файлы) и потом собирать их воедино. Одна из основных идей фронтенд фреймворков заключается в том чтобы создавать различные инкапсулированные “компоненты” вашего приложения и собирать их в сложные пользовательские интерфейсы.

Еще один важный момент - создавая приложения на фронтенд фреймворке (исключая те случаи когда вы частично внедряете компоненты фреймворка в существующий проект, не меняя кардинально его структуры) - вы создаете SPA (single page application), то есть в вашем браузере всегда отображается один, собранный сборщиком проектов, html файл. При таком подходе переход со страницы на страницу будет практически незаметен, так как никакой перезагрузки страницы не требуется.

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

Наиболее актуальные фреймворки

• React
• Angular
• Vue

React

• Создан компанией Facebook
• Принято считать что это библиотека для построения пользовательского интерфейса, а не полноценный фремворк, так как он не обладает своей стандартизированной экосистемой
• Много свободы и гибкости в выборе сторонних библиотек и способов реализации того или иного функционала. Есть наиболее используемые библиотеки, но все же определенного стандарта нет
• Использует JSX вместо привычного html для создания шаблона. По своему синтаксису практически идентичен с html с небольшими отличиями. Больше о JSX вы можете прочитать на сайте Реакта
• Порог вхождения - адекватный. Все что пишете в Реакте это JS и JSX, вы сможете применить все полученные ранее знания в полной мере (также при желании можно использовать TS или другие языки программирования в комбинации с React)
• Если в будущем вы захотите создавать нативные мобильные приложения, то сможете это сделать с помощью React Native. Он очень схож с React для web и вам будет гораздо легче изучить RN

Полезные ресурсы

• Awesome React - огромный набор информации и ресурсов для React
• React документация, написана очень хорошо и подробно, также переведена на разные языки
• create-react-app - официальный шаблон для быстрого старта проекта (с настроенным вебпаком и структурой файлов)
• Курс на Udemy

Мой выбор пал на React, я работаю с ним на коммерческой основе. Он обладает рядом преимуществ и недостатков по отношению с другими фреймворками.

Angular

• Фреймворк разработан и поддерживается компанией Google
• В отличии от React, Angular использует TypeScript в обязательном порядке, потребуется изучить этот язык программирования и поэтому порог вхождения в фреймворк выше
• Является полноценным фреймворком
• Обладает меньшей гибкостью в плане выбора библиотек
• Обладает своей экосистемой (набором стандартных библиотек), поэтому не будет сложностей с выбором для решения той или иной задачи
• Наличие CLI, который позволит вам генерировать компоненты, контроллеры и другие элементы фреймворка с помощью команд в консоле
• Хорошая система модульности - в модуль входят различные элементы (контроллеры, компоненты и тд), которые отвечают за конкретный функционал

Полезные ресурсы

• Awesome Angular - огромный набор полезных ресурсов для Angular
• Angular документация
• Немного подробнее об Angular

Vue

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

Полезные ресурсы

• Awesome Vue - огромный набор полезных ресурсов и библиотек на тему Vuejs
• Vue официальный сайт
• Курс на Udemy
• GitHub страница

Как действовать

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

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

Итог

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

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

Фреймворки очень востребованы на рынке труда и станут очень серьезным козырем в вашем арсенале фроненд разработчика независимо от вашего выбора.

Послесловие

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

Продолжайте работать, совершенствоваться и идти к своей цели!