Что такое фреймворк
Списывали домашку в школе? Задачки по алгебре или геометрии? Отлично.
Умники решали задачки с нуля. Тратили кучу времени, подбирали формулы и искали альтернативные решения (были и такие). Аналогично и программист пишет код на JS с нуля.
Кто хотел погулять с друзьями, посидеть лишний часик за компьютером или не успевал из-за танцев и художки, иногда (или чаще) «брал идею» у одноклассника, который уже решил задачу. Смотрели ответ и делали по-своему.
Для фреймворков схема та же. Это набор библиотек и шаблонов для программирования. Разработчик складывает их в продукт (сайт, мобильное приложение, элемент UI), как Lego.
Почему используют фреймворки — аналогично с решением задачек. Это быстро, схема проверена и безопасна. Отличник же не накосячит, правда?
Использовать только библиотеку вместо фреймворка — как читать только одного автора. Интересно, но для общения с окружающими маловато. Поэтому на библиотеках пишут другие фреймворки, добавляют функции и макеты. А вот их уже комбинируют и используют в практических задачах.
Vue
Vue.js — это бесплатная Javascript-платформа с открытым исходным кодом для адаптивных приложений.
Суть открытого кода в пользе для сообщества. Вместо закрытой площадки, где над продуктом трудятся только разработчики, присоединяется сообщество: находят баги, ошибки, улучшают код. Продукт развивается быстрее.
Вью состоит из главной библиотеки для слоя представления и вспомогательных библиотек для оптимизации одностраничных сайтов.
Пример кода для формы заказа на Вью.
Vue используют для Landing Page. Скорость и гибкость приложения сохранена, несмотря на маленькие размеры фреймворка — не более 20 КБ. Размеры для Angular — минимум 55 КБ, а для React — от 100 КБ. За счет этого Vue выигрывает по производительности.
Vue.js проще с точки зрения API и дизайна. Веб-разработчик работает быстрее — простой одностраничник без переходов и анимаций создается за день.
React
React.js — JavaScript-библиотека разработчиков Facebook. Тоже с открытым кодом.
О Реакте часто говорят, как о фреймворке. Хотя это не так. И вот почему.
В работе React использует компоненты и состояния, а не базу из библиотек (как у фреймворка). Компонент — элемент конструктора. Каждый из них наделен своей логикой и структурой, и добавляется в код несколько раз (если копируют элементы). А состояние — место, где хранятся переменные приложения. Например, информация с запроса «Как похудеть» на сайте фитнес-тренера.
С компонентами (блоками) и состояниями (хранилищем) разработчик строит элементы программного интерфейса. Например, форму обратной связи или окно заказа товара в интернет-магазине.
Facebook частично разработан на React.
Блоки не работают сами, как на фреймворке. Их переносят на вспомогательный инструмент: Typescript, Redux или Jest.
Angular
В одной публикации обнаружили, что Angular — это фреймворк с фреймворками. Масло масляное! У фреймворков не может быть своих подсистем. Если пишется новая программа на библиотеках JS — это новый фреймворк.
Angular работает по принципу form-based. Форма — структура, в которую пользователь вводит информацию, а потом отправляет в базу данных (Back-end). Например, форма заказа звонка на сайте строительной компании.
Пример архитектуры Angular для приложений To-do List. Если приложения разрабатывается с нуля, то к Angular добавляют решения full-stack, как Mean.io (node.js, Angular, MongoDB, Express).
Angular дает разработчику набор шаблонов для таких форм. Остается адаптировать под задачи.
Также, Angular часто используют вместе с Bootstrap (библиотекой HTML и CSS шаблонов) для UI — пользовательского интерфейса. На фреймворке создается макет а Bootstrap упаковывает в цвета и формы.
Документация фреймворкасодержит не только рекомендации по разработке, но и гайд по стилизации.
Angular material
Список компонентов mobile Angular User Interface (UI).
Ангуляр популярен среди разработчиков. Сообщество дополняет фреймворк новыми библиотеками, вроде Material. Это шаблоны для веб-сайтов и приложений. Особенность компонентов в том, что они дополняют главную библиотеку Angular. А приложения одинаково смотрятся на разрешениях экрана ПК и мобильных устройств.
Ionic
Для мобильного приложения вместо Ангуляра и material попробуйте Ionic. Это фреймворк со встроенной библиотекой, вроде Bootstrap: карточки, кнопки, поля ввода и другие элементы. Элементы как адаптируются для iOS и Android, так и настраиваются под задачу разработчика.
Пример кода и готового решения для календаря на ионике.
Главный плюс, который отметили разработчики — скорость производства продуктов. Программист пишет код в браузере ПК, версии адаптируются под все телефоны, доступны готовые UI-компоненты и плагины. Попробуйте сами.
Protractor
Этот фреймворк разработан для тестирования продуктов до презентации пользователю. Комплексное тестирование проверяет, чтобы приложение соответствовало ожиданиям юзера: работал скролл, открывались вкладки или появлялось меню, кликнув на иконку.
Инструменты в протрактор не влияют на код, а имитируют взаимодействие с продуктом в Google Chrome, Mozilla и других браузерах.
В Компьютерной Академии IT STEP студенты тратят на базовые языки 15-20 процентов курса. Остальное — углубление в Angular, React и другие инструменты Javascript.
С таким подходом Веб-разработчик понимает слабые места продукта, какой фреймворк использовать и как облегчить жизнь клиенту, не используя сухой Javascript. А знания обменять на денежные единицы.
Переходи на страницу курса «Front-end разработка» и познакомься с программой обучения!