Сравнительный анализ JavaScript- фреймворков

В условиях быстроразвивающихся технологий одной из важных целей при создании программного обеспечения является уменьшение трудозатрат на его разработку. Достичь этой цели помогают так называемые паттерны -(англ. design pattern) — повторимая архитектурная конструкция, представляющая собой решение проблемы проектирования в рамках некоторого часто возникающего контекста. (@Cydoor, 2014)1

Фундаментальным паттерном, который нашел применение во многих технологиях, является MVC (Model-View-Controller). Именно он дал развитие новым технологиям и существенно облегчает жизнь разработчикам.

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

Общие направления развития и функциональность для всех JS-фреймворков:

• 1.    Работа с селекторами

• 2.    Сквозной проход и поиск в DOM

• 3.    Другие манипуляции с DOM

• 4.    Различные вспомогательные функции

• 5.    Обработчики событий и их создание

• 6.    Ajax (в том числе работа с XML, JSON, HTML, callback-функции)

• 7.    Распространенность и популярность

• 8.    Качественность сопутствующей документации

• 9.    Показатель производительности

• 10.    Легкость освоения, логичность и простота интеграции

Самые популярные JS-фреймворки отобраны по 4 критериям:

Общая доля использования js-фреймворков в мире показана на рисунке 1.

Рисунок 1 Общая доля использования фреймворков.

Как видно из статистики сайтов, которые используют JavaScript, лидирующие позиции в мире занимают следующие фреймворки2:

• •    jQuery

• •    Prototype JS

• •    Mootools

• •    Yahoo! UI Library (YUI)

• •    Ext JS

• •    Dojo Toolkit

Как видно из графика, 1 место занимает jQuery. Далее подробно рассматриваются фреймворки. На рисунке 2 представлены статистические показатели фрейморков по вышеуказанным критериям.

Рисунок 2 Статистические показатели фрейморков.

• 1.    jQuery – помогает создавать простые приложения и веб-сайты. Легко обрабатывает события, взаимодействует с удаленными сервисами, имеет огромный набор плагинов. Библиотека jQuery содержит функциональность, полезную для максимально широкого круга задач. Примеры известных сайтов на базе этого фреймворка: Digg, BBC, Dell, IsoHunt, Break.com, TinyPic, eMusic, Box.net, Яндекс Карты

• 2.    Prototype JS - фреймворк очень удобен для средних проектов. Производительность бывает нестабильна. Является одним из Prototype немногих фреймворков, который не включает в себя UI-компоненты или UX-улучшения, — для использования подобных эффектов рекомендуется использовать его дочернюю библиотеку — script.aculo.us (или Scripty2), которая добавляет огромное количество графических эффектов, поддержку drag-and-drop, слайдеры. Примеры известных сайтов на базе этого фреймворка: CNN, The New York Times, Apple, Fox News Channel, Last.fm, Twitter, Hakia.

• 3.    MooTools - модульный, объектно-ориентированный фреймворк. Очень похож в своем подходе к дизайну ядра на jQuery и Prototype тем, что не включает в себя UI-контролы и виджеты, ограничивается минимальным набором эффектов и возможностей. Примеры известных сайтов на базе этого фреймворка: MooTools используется в CMS Joomla, поэтому таких сайтов много.

• 4.    Yahoo! UI Library (YUI) – это набор утилит и контролов, написанных на JavaScript и CSS, для создания интерактивных web-приложений, использующих техники DOM-скриптинга, DHTML и Ajax. В этом фреймворке доступны два типа компонентов: утилиты и контролы. Утилиты упрощают браузерную разработку, связанную с DOM, DHTML и Ajax. Контролы – это набор уже готовых, высоко-интерактивных визуальных элементов для проектирования веб-страниц. Все эти элементы создаются и работают только на клиентской стороне и не требуют обновление страницы для их изменения. Примеры известных сайтов на базе этого фреймворка:Yahoo!, LinkedIn.

• 5.    Ext JS - не самый производительный из существующих фреймворков, его главная отличительная черта в том, что он предоставляет собой наиболее приближенную среду к классическому программированию, реализуя очень развитые графические средства отображения и взаимодействия с пользователем в среде Web 2.0. У этого фреймворка действительно большие графические возможности.

• 6.    Dojo Toolkit - кроме того, что во многом повторяет плюсы своих аналогов, имеет и свои особенности. Среди самых важных - серьёзная попытка добиться полной независимости от каждого конкретного js-интерпретатора. Сфера применения этого фреймворка максимально широка: это не только обычные решения на стороне клиента, но также и на стороне сервера. Примеры известных сайтов на базе этого фреймворка: Dogo Toolkit активно используется в знаменитом расширении PHP — Zend Framework,

поэтому таких сайтов очень много.