Аннотация
Рассмотрены возможности изучения современных средств разработки, использующихся при создании пользовательского интерфейса, разработке архитектуры web-сайтов, выделение преимуществ и недостатков представленных средств.
Общая постановка проблемы
В современном веб-разработке фронтенд-разработчики отвечают за создание внешней стороны (англ. front end) веб-сайтов. Это клиентская часть сайта, с которой пользователь непосредственно взаимодействует на своем компьютере или телефоне (клиенте).
Многим известно, что сайты включают в себя разметку и стили, которые необходимы, чтобы обеспечить понятную структуру страницы и дизайн, однако фронтенд-разработка этим не ограничивается. Большинство сайтов, которыми мы постоянно пользуемся, это полноценные веб-приложения: почта, онлайн-банк, онлайн-кинотеатры, редакторы фото, заметки. Чтобы такие приложения работали, фронтенд-разработчики добавляют программный код, который выполняется в браузере, реализует нужную функциональность и, при необходимости, взаимодействует с сервером, динамически получая нужную информацию.
Постановка задачи
Целью данной работы является изучение современных средств разработки, использующихся при создании пользовательского интерфейса, разработке архитектуры web-сайтов, выделение преимуществ и недостатков представленных средств. В данной статье сделан обзор современных средств обработки.
Современные средства разработки
jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше». Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.
Преимущества
- Компактность кода. Позволяет писать код более компактно чем на чистом JavaScript.
- Простой и понятный синтаксис.
- Кроссбраузерность. Код написанный на jQuery будет гарантированно работать во всех основных браузерах.
- Открытый код. Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.
Недостатки
- Может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ).
- Снижает производительность выполнения кода по сравнению с чистым JavaScript.
React - это декларативная, эффективная и гибкая библиотека JavaScript для создания пользовательских интерфейсов (UI). Она позволяет создавать сложные пользовательские интерфейсы из небольших и изолированных частей кода, называемых «компонентами». React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.
Преимущества
- Легко изучить благодаря простому дизайну, использованию JSX и очень подробной документации.
- Очень быстрая, благодаря реализации React Virtual DOM и различным оптимизациям рендеринга.
- Отличная поддержка рендеринга на стороне сервера.
- Первоклассная поддержка Progressive Web App (PWA).
- Привязка данных является односторонней, что означает меньше нежелательных побочных эффектов.
Недостатки
- React не однозначен и оставляет разработчикам возможность выбирать лучший способ развития.
- Сообщество делится по способам написания CSS в React.
- React отходит от компонентов на основе классов, что может стать препятствием для разработчиков, которым более комфортно работать с объектно-ориентированным программированием (ООП).
- Смешивание шаблонов с логикой (JSX) может сбить с толку некоторых разработчиков при первых знакомствах с React.
Webpack — один из самых популярных сборщиков модулей. Это помощник разработчиков, несмотря на то, что по началу он может показаться достаточно сложным. Его гибкость позволяет настроить сборку с использованием огромного множества плагинов и загрузчиков, оптимизировать ресурсы, быстро подгружать изменения в процессе разработки с помощью hot module replacement, и многое другое.
Преимущества
- Отлично подходит для работы с одностраничными приложениями.
- Может осуществлять продвинутое разделение кода.
- Является одним из наиболее популярных инструментов JS-разработки.
Недостатки
- Сложно разобраться в его работе.
- Часть документации устарела из-за большого количества изменений в обновлениях.
AJAX (Asynchronous Javascript and XML) — это технология, позволяющая обновлять только конкретную часть страницы, а не всю страницу целиком. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом.
Преимущества
- Возможность создания удобного Web-интерфейса.
- Активное взаимодействие с пользователем.
- Частичная перезагрузка страницы, вместо полной.
- Удобство использования.
- Экономичность трафика.
- Снижение серверной нагрузки.
- Ускорение загрузки страницы.
Недостатки
- Страницы сайта могут плохо индексироваться поисковыми системами.
- Искажение данных статистики.
Выводы
В данной статье рассмотрены одни из наиболее популярных средств разработки web-приложений, подчеркнуты их достоинства и выделены недостатки. Фреймворки JavaScript постоянно развиваются. И для веб-приложений, и для мобильных. Все они предоставляют различные библиотеки, функции и расширения. Некоторые подходят для одностраничных веб-приложений, другие лучше работают с более крупными проектами.
Окончательное решение по-прежнему остается за разработчиком, независимо от того, для чего планируется использовать фреймворки. Не стоит полагаться только на популярность веб-фреймворка. Наиболее правильным решением будет выбирать фреймворки, которые удовлетворят конкретные потребности проекта.
Литература
- Тузовский, А. Ф. Проектирование и разработка web-приложений : учебное пособие / А. Ф. Тузовский. — Томск : Томский политехнический университет, 2014. — 219 с.
- Лучанинов, Д. В. Основы разработки web-сайтов образовательного назначения : учебное пособие / Д. В. Лучанинов. — Саратов : Ай Пи Эр Медиа, 2018. — 105 с.
- Сычев, А. В. Web-технологии / А. В. Сычев. — Москва : Интернет-Университет Информационных Технологий (ИНТУИТ), 2016. — 184 с.