04.07.2018
HTML

Создание адаптивных веб-приложений для любых устройств

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

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

Какой есть инструментарий

Если вы пока не определились с инструментарием, а только начинаете со своего первого проекта SPA (приложение из одной странички), или вы только изучаете вопрос, то стоит напомнить, что SPA-приложение подгружает на устройство пользователя всего одну страницу. А вот потом внутри этой страницы контент динамически меняется, причём без перезагрузки основной страницы. Такая структура динамического обновления контента у пользователя создаёт впечатление, что это не веб-страничка, но полноценное приложение.

Полезный инструментарий: библиотеки, а также фреймворки

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

jQuery. Наверное, одна из самых известных скриптовых библиотек. Огромный функционал, небольшой вес и скорость работы – за это она и полюбилась большинству разработчиков. В ней имеются все механизмы для работы с DOM, инструменты для обработки событий браузеров. Библиотека расширяемая, сообщество постоянно пополняет её различными плагинами, которые создают энтузиасты.
Bootstrap. Весьма популярный фреймворк среди разработчиков, создающих адаптивные сайты, веб-приложения. Разработан фреймворк создателями сервиса Twitter, что является неким знаком качества. Библиотека открытая, имеет множество компонентов, отвечающих принципам полного адаптивного дизайна. Приложения, созданные на Bootstrap, автоматом подстраиваются под конкретное устройство и экран, на котором открываются пользователями.
React – детище команды создателей Facebook. Это открытый фреймворк для создания пользовательского интерфейса. Инструментарий довольно гибкий и толерантный, уживается с большинством других фреймворков, а также библиотек. Фреймворк React имеет интересную особенность – он создаёт собственный DOM, как бы в своей виртуальной среде, сводя работу с пользовательским DOM к нулевому значению. Это даёт неплохую производительность.
Node.js – уже посложнее, поскольку является runtime-средой, а также фреймворком одновременно. Все скрипты компилируются в стандартный машинный код, то есть JavaScript превращается в язык стандартного общего назначения из веба. JS-приложения, созданные Node.js, способны работать даже вне браузера

Сейчас на дворе эпоха HTML5, а также CSS3, поэтому в наборе инструментов у современных фронтэндеров имеются фреймворки для анимации или интерактивной визуализации. Все современные браузеры имеют поддержку SVG-библиотек.