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

Современные кроссплатформенные фреймворки и библиотеки разбаловали фронтэндеров. Теперь можно писать код, не ориентируясь на целевую платформу. Настольный компьютер, смартфон, планшет, телевизор со Smart TV — фреймворк всё оптимизирует, обеспечит полную совместимость и работоспособность. Такие приложения можно очень легко и быстро преобразовать из веб-версии в полноценную мобильную версию. Дошло до того, что фронтэнд-инструментарий позволяет создавать одностраничные веб-приложения (SPA – Single-Page Application), чей user experience неотличим от полноценных десктопных программ.

Чтобы не оставлять столь громкие заявления без пруфов, мы расскажем о наиболее интересных и эффективных библиотеках и фреймворках для создания SPA-приложений. Построенные на HTML5, CSS3 и JavaScript, эти фреймворки забирают на себя всю высокотехнологичную рутину и обеспечивают максимальную кроссплатформенную совместимость SPA.

Эта статья – полезный справочник по библиотекам и фреймворкам, а не подробный пошаговый how-to, поэтому ее чтение не займет много времени, но почерпнутая информация поможет на начальном этапе разработки веб-приложений.

Ищем удобные инструменты

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

SPA-приложения взаимодействуют с бэкэндом при помощи технологии AJAX (Asynchronous Javascript and XML). Именно благодаря Аяксу можно избежать перезагрузок HTML-страницы при каждом действии пользователя. Обычно SPA-приложение состоит из нескольких вкладок (слоев), каждая из которых построена по принципу MVC (Model-View-Controller, «Модель-Представление-Контроллер»).

Современные фреймворки и библиотеки для фронтэнда традиционно оптимизированы именно под структуру SPA+MVC. Также они разработаны на чистом JS, поэтому обеспечивают высокую автономную интерактивность приложений без постоянного взаимодействия с бэкэндом и необходимости в дополнительных расширениях (привет, Adobe Flash). Вот несколько наиболее распространенных библиотек и фреймворков:

• jQuery – весьма известная JS-библиотека. Быстрая, легковесная, многофункциональная. Обеспечивает простые механизмы для взаимодействия с DOM-элементами и обработки браузерных событий. Представляет собой расширяемую библиотеку, которую разработчики-энтузиасты постоянно дополняют новыми плагинами.
  
• Bootstrap – один из самых популярных фреймворков для разработки адаптивных веб-приложений. Создан командой разработчиков Twitter, что как бы намекает, и представляет собой открытую библиотеку, состоящую из большого количества компонентов пользовательского интерфейса. Все компоненты построены отвечают принципам адаптивного веб-дизайна, поэтому они автоматически подстраиваются под любое разрешение экрана.
  
• React – еще один открытый фреймворк от команды разработчиков Facebook (про тормознутность Facebook пошутите сами, у нас лапки). С помощью React создают пользовательский интерфейс. Этот фреймворк весьма либеральный, он может без конфликтов использоваться в сочетании с любыми другими фреймворками и библиотеками. React создает свой собственный виртуальный DOM, сводя к минимуму взаимодействие с браузерным DOM’ом, что в итоге дает очень хорошую производительность. При работе с React’ желательно использовать JSX — расширенную версию JavaScript, программы на которой напоминают по виду XML.
  
• Node.js – это не только JS-фреймворк, но еще и runtime-среда, которая компилирует JS в машинный код, превращая JavaScript из веб-ориентированного языка в язык общего назначения. С помощью Node.js можно разрабатывать JavaScript-программы, которые могут работать вне браузера. Node.js преимущественно используется в бэкэнде. Фреймворк, в числе прочего, включает в себя API для работы с файловой системой, для взаимодействия с базами данных и для «прослушивания» HTTP-запросов.
  
• Jasmine – открытый фреймворк для тестирования JS-кода. Помогает протестировать на корректную работу компоненты веб-приложения. Jasmine часто используется в паре с модульным тестером Karma (создан командой разработчиков Google), который автоматически прогоняет тестируемый JS-код разом через несколько браузеров.
  

В эпоху HTML5 и CSS3 еще одним орудием фронтэндера стали библиотеки и фреймворки для интерактивной визуализации и анимации. Эти фреймворки работают, опираясь на стандартные SVG-библиотеки (Scalable Vector Graphics, масштабируемая векторная графика), которые поддерживают все современные браузеры в настольных и мобильных операционных системах. Вот некоторые из наиболее полезных:

• D3.js — библиотека предназначена для наглядной и понятной визуализации больших объемов данных и построения интерактивных диаграмм и графиков. Она представляет собой надстройку поверх jQuery. На сайте D3.js представлено порядка 100 графических решений для визуализации данных.
  
• GoJS – пригодится для интерактивной работы с блок-схемами и деревьями. Включает в себя богатый набор функций на все случаи – всё, о чем только можно мечтать при работе с блок-схемами. При этом GoJS не зависит от сторонних фреймворков и JS-библиотек, поэтому хорошо стыкуется с любым фронтэнд-инструментарием. На сайте GoJS представлено больше 100 интерактивных решений для работы с блок-схемами.
  
• HighChart – библиотека для отрисовки графиков и диаграмм с возможностью интерактивного взаимодействия. Поддерживается мультитач-масштабирование и подсказки для сенсорных экранов. На сайте HighChart представлено порядка 100 разнообразных графических решений для работы с графиками и диаграммами.
  
  
  
  Также HighChart отлично подходит для визуализации аналитических и статистических данных. Среди всей функциональности библиотеки нужно выделить возможность сохранения построенных графиков в форматах JPEG, PNG, SVG и PDF. HighChart является основой для двух других продуктов: HighStockJS (графики для финансовых данных) и HighMapsJS (диаграммы для гео-пространственных данных).
  

Зачем это всё

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

Сейчас от фронтэнд-разработчика не требуется глубокого понимания HTML5 и сопутствующих технологий, чтобы сделать быстрое и эффективное веб-приложение. Современные фреймворки взяли на себя однообразную и сложную работу по оптимизации. Но если в вас проснется энтузиазм узнать, что же происходит под капотом современных фреймворков, рекомендуем ознакомиться с книгой «The Modern Web: Multi-Device Web Development with HTML5, CSS3 and JavaScript», которая является лучшей своем роде.

---

Сколь бы шикарными ни были все представленные в подборке продукты, применить их правильно без навыков владения HTML, CSS, Javascript, PHP и MySQL вряд ли получится. Освоить все вышеперечисленное и стать профессиональным разработчиком можно на нашем курсе по web-разработке.