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

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное учреждение

высшего профессионального образования

КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

(ФГБОУ ВПО "КубГУ")

Физико-технический факультет

Кафедра физики и информационных систем

Специальность 200402 - Информационные системы и технологии

КУРСОВАЯ РАБОТА

СРАВНИТЕЛЬНЫЙ АНАЛИЗ БИБЛИОТЕК JAVASCRIPT

Работу выполнила

Лебедева Мария Олеговна

Научный руководитель

канд. биолог. наук Куликова Н.Н.

Краснодар 2013

Реферат

ОБЩИЙ И сравнительный АНАЛИЗ используемых библиотек javascript, их показателей производительности и друих характеристик, классификация библиотек.

Целью работы является сравнительный анализ библиотек JavaScript, выявление их основных преимуществ и недостатков.

Объекты исследования: библиотеки JavaScript.

ВВЕДЕНИЕ

Человечество всё больше зависит от информации. Тем важнее качественно предоставить её, актуальную, в нужном объёме и по возможности максимально быстро. В этом и заключается смысл всех современных приложений. К описанным выше задачам можно добавить интеграцию продуктов с сетью интернет, которая уже давно стала неотъемлемой частью жизни каждого человека. Одним из самых популярных и эффективных языков программирования для таких целей является JavaScript, который позволяет создавать интерактивные, удобные и качественные приложения.

Основные проблемы, возникающие при разработке таких продуктов, связаны с громоздкостью кода, адаптированностью под разные платформы и временем, затраченным на его написание, отладку и тестирование. В значительной степени решить эти вопросы позволяет использование библиотек JavaScript. Которые превращают данный язык программирования в универсальный инструмент, затачиваемый под выполнение определённых задач.

Выбрать необходимую библиотеку и эффективно её использовать значит решить поставленную задачу максимально быстро и качественно, при минимуме затраченных средств. Что доказывает актуальность данного вопроса.

Целью этой работы является сравнительный анализ библиотек JavaScript и их классификация.

библиотеки javascript программирование мобильные

1. ОБЩие сведение о языке программирования javascript

1.1 JavaScript

Гипертекстовая информационная система состоит из множества информационных узлов, множества гипертекстовых связей, определенных на этих узлах и инструментах манипулирования узлами и связями. Технология World Wide Web - это технология ведения гипертекстовых распределенных систем в Internet, и, следовательно, она должна соответствовать общему определению таких систем. Это означает, что все перечисленные выше компоненты гипертекстовой системы должны быть и в Web.

Web как гипертекстовую систему можно рассматривать, как множество элементарных информационных объектов, составляющих отображаемые страницы (текст, графика, код и т.п.). Тогда гипертекстовая сеть определяется на множестве элементарных информационных объектов самими HTML-страницами, которые и играют роль гипертекстовых связей.

При генерации страниц в Web возникает дилемма, связанная с архитектурой "клиент-сервер". Страницы можно генерировать как на стороне клиента, так и на стороне сервера. В 1995 году специалисты компании Netscape создали механизм управления страницами на клиентской стороне, разработав язык программирования JavaScript.

Таким образом, JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScript обеспечило программирование на стороне клиента.

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

Название "JavaScript" является зарегистрированным товарным знаком компании Sun Microsystems. Реализация языка, осуществленная разработчиками Microsoft, официально называется JScript . Версии JScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JScript. В данный момент JavaScript полностью занимает нишу браузерных языков. На синтаксис JavaScript оказал влияние язык Java, откуда и произошло название JavaScript; как и Java, язык JavaScript является объектным. Однако на этом их связь заканчивается: Java и JavaScript - это разные языки, ни один не является подмножеством другого.

Стандартизация языка была инициирована компанией Netscape и осуществляется ассоциацией ECMA (European Computer Manufacturers Association - Ассоциация европейских производителей компьютеров). Стандартизированная версия имеет название ECMAScript и описывается стандартом ECMA-262 (доступна в сети: на английском, на русском).

1.2 Библиотеки

При написании программ, особенно больших, состоящих из нескольких тысяч строк кода, возникает ситуация, когда появляются повторяющиеся участки кода. Что существенно увеличивает объём готовой программы и уменьшает скорость её работы. Исправить подобные проблемы помог метод, который сейчас используется практически всеми языками программирования, в том числе и JavaScript, когда часто используемые участки кода выносятся в отдельные модули, выполняющие строго определённые функции, объединяемые в библиотеки, содержащие в себе несколько таких модулей. По мере необходимости программист обращается к библиотеке, вызывая для работы отдельные модули. Такой подход также существенно сокращает время работы над кодом программы. Сейчас в общем доступе можно найти очень большое количество уже готовых библиотек, которые поддерживаются огромным количеством программистов по всему миру.

Библиотеки принято делить на статические и динамические.

Динамические библиотеки обычно расположены в самой операционной системе или устанавливаются пользователем для дальнейшего использования их другими программами. Если какой-то из запускаемых программ требуется задействовать отдельные модули из этой библиотеки, она вызывает их по мере необходимости или при своём запуске.

Статические уже включены в сам код программы, что увеличивает скорость её работы, однако увеличивает объём самой программы по сравнению с ситуацией, когда используются динамические библиотеки.

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

2. характеристики библиотек javascript

2.1 Библиотеки JavaScript

Для удобства программистов существует несколько ресурсов, где уже можно найти самые популярные и полезные библиотеки [3],[4].

Вот некоторые из них:

1. Bootstrap;

2. Dojo;

3. Ext Core;

4. Highlight.js;

5. json2.js;

6. jQuery;

7. jQuery UI;

8. Mochikit;

9. Modernizr;

10. MooTools;

11. Prototype;

12. Pure;

13. Raphaёl;

14. RightJS;

15. script.aculo.us;

16. SWFObject;

17. Yahoo! User Interface Library (YUI);

18. Ember.js;

19. Backbone.js;

20. AngularJS;

21. KnockoutJS;

22. Maria;

23. JavascriptMVC;

24. Cujo.js;

25. Batman.

2.2 jQuery

Явным лидером среди всех библиотек является jQuery. Очень популярная библиотека. Отличающаяся своим удобством при работе с Dom и AJAX. В jQuery присутствует ряд фундаментальных концепций, направленных на быстроту и удобство при написании кода. Они лежат в основе библиотеки и выделяют её на фоне остальных. Важным элементом данной библиотеки является возможность расширять функциональность за счет включения дополнительных плагинов (количество которых сейчас зашкаливает уже за 1000). Таким образом на выходе мы получаем по-настоящему очень универсальный, гибкий и быстрый продукт. Закончить список достоинств этой библиотеки можно тем, что на данный момент существует огромное количество литературы, статей, проектов посвященной этому продукту. Тем самым решается проблема многих других продуктов, когда нет подробных руководств и примеров по работе с библиотекой. В целом, jQuery очень выгоден для малых и средних проектов, но при разработке крупных проектов может быть проблематичен, так как приводит к дефициту проектирования, хотя весьма производителен благодаря простому содержанию и коду. Существует также расширение стандартной библиотеки, существенно увеличивающее возможности jQuery при работе с визуальными эффектами.

2.3 jQuery UI

jQuery UI - библиотека на основе jQuery, направленная на создание интерфейсов, оформлений сайтов, реализующая более 20 плагинов, среди которых плагины организующие различное поведение (например, перетаскивание или растягивание элементов), восемь видов виджетов (такие как календарь, диалоговые окна, систему вкладок и т.д.) и анимационные эффекты. Кроме этого, UI обладает несколькими темами оформления, с помощью которых оформляются виджеты и которые содержат набор полезных иконок (173 штуки). Любая из тем оформления может быть подкорректирована прямо на сайте jQuery UI, непосредственно перед загрузкой.

2.4 Yahoo! UI Library (YUI)

Yahoo! UI Library (YUI) - библиотека JavaScript для создания богатых интерактивными возможностями приложений или/и пользовательского интерфейса. Содержит мощное ядро из утилит и вспомогательных функций, и превосходный набор виджетов и компонентов. В этом фреймворке доступны два типа компонентов: утилиты и контролы. Утилиты упрощают браузерную разработку, связанную с DOM, DHTML и Ajax. Контролы - это набор уже готовых, высоко-интерактивных визуальных элементов для проектирования веб-страниц. Все эти элементы создаются и работают только на клиентской стороне и не требуют обновление страницы для их изменения. Вся библиотека распространяется под BSD-лицензией и бесплатна для всех пользователей. YUI создана совместными усилиями ведущих инженеров Yahoo, а также разработчиками со всего мира. Сейчас это один из ведущих js-фреймворков, полностью готовый для промышленного использования, где очень продвинутые UI- и UX-составляющие интегрированы в одно целое в рамках одной поставки, образуя полностью завершенный, независимый и универсальный продукт.

Как уже говорилось выше, некоторые из библиотек основаны на продуктах выпущенных ранее. Одним из таких фреймворков является ExtJS. Проект начинался, как попытка расширить вышерассмотренный фреймворк Yahoo! User Interface, но на данном этапе - это уже полностью самобытный, практически никак не связанный с YUI проект. Движущей силой, основателем и бессменным лидером проекта остается Джэк Слоцум, - известный специалист в среде JavaScript-программистов.

2.5 ExtJS

ExtJS ? библиотека, расширяющая возможности чистого JavaScript. Как и jQuery, может использоваться для облегчения работы с DOM, но больше используется для построения мощных клиент-серверных приложений. Выполняющая немало задач, для решения которых jQuery будет недостаточно. Главная отличительная черта в том, что он предоставляет собой наиболее приближенную среду к классическому программированию, реализуя очень развитые графические средства отображения и взаимодействия с пользователем в среде Web 2.0. Начиная с версии Ext JS 3.0 библиотека логически разбивается на две части: Ext Core (набор JavaScript-функций, позволяющий создавать динамические веб-страницы с унификацией обработки в различных браузерах и распространяемый по MIT-лицензии) и Ext JS (набор виджетов для создания пользовательских интерфейсов с двойным лицензированием по GPL v3 или по коммерческой лицензии). ExtJS действительно, вообще не показывает, что вы имеете дело с HTML. Библиотека компонентов достаточно богата, чтобы долго работать, не касаясь HTML при построении приложения. Однако ExtJS не самый производительный из существующих фреймворков. А также довольно сложен в плане тестирования уже готовых приложений. Для решения многих задач ExtJS может оказаться излишним, например создание динамического меню. Но если необходимо разработать специализированную админ-панель, многооконный интерфейс с таблицами, графиками, централизованными хранилищами и т.п., ExtJS позволяет существенно упростить написание кода.

2.6 Prototype

Prototype - JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. По многим выполняемым функциям похож на jQuery. Однако в сравнении с ним значительно уступает в функционале из-за отсутствия системы плагинов. Prototype присутствуют самые разные способы упрощения создания JavaScript приложений, от сокращённого вызова некоторых функций языка до сложных методов обращения к XMLHttpRequest. Что существенно облегчает работу с библиотекой. Эти и некоторые другие особенности фреймворка делают работу с ним интуитивно понятной. Несмотря на его доступность в виде отдельной библиотеки, он обычно используется программистами вместе с Ruby on Rails, Tapestry, script.aculo.us и Rico. Чем отчасти и обязан своей популярности. Обладает не очень стабильной производительностью, т.е. на некоторых операциях он может быть быстрым, на других - производительность заметно падает. Prototype один из немногих популярных фреймворков, который не включает в себя UI-компоненты или UX-улучшения, - для использования подобных эффектов рекомендуется использовать его дочернюю библиотеку - script.aculo.us (или Scripty2), которая добавляет огромное количество графических эффектов, поддержку drag-and-drop, слайдеры, Ajax-редакторы и т.д.

Есть ещё одна очень похожая в своём подходе к дизайну ядра на описанные выше фреймворки библиотека - MooTools.

2.7 MooTools

MooTools - очень компактный, модульный, объектно-ориентированный JavaScript фреймворк, позволяет писать яркий, гибкий, кроссбраузерный код для разработки веб-приложений и веб-сервисов. Облегчает работу с CSS, обработкой событий в JavaScript. Он не включает в себя UI-контролы и виджеты, ограничиваясь минимальным набором эффектов и возможностей. MooTools представляет собой быструю, небольшую, разбитую на множество маленьких модулей, отлично документированную библиотеку. Код здесь более понятен и лучше организован по сравнению с jQuery. Модульность позволяет скомпилировать нужную для конкретной цели библиотеку. Кроме того, этот фреймворк содержит очень интересный плагин MooTools.More.js, который позволяет сильно наращивать возможности сторонними библиотеками, и имеет при этом очень интересные дополнения, для манипуляций с массивами, датами, хэшеми, строками и т.д. Отличительной особенностью библиотеки является возможность локализовать англоязычный синтаксис языка самого MooTools на любой национальный язык, что позволяет программировать на нем максимально комфортно, например, на русском языке.

2.8 Dojo

Ещё один пример из списка популярных фреймворков, который кроме того что во многом повторяет плюсы своих аналогов, имеет и свои особенности. Среди самых важных хотелось бы упомянуть очень серьёзную попытку добиться полной независимости от каждого конкретного js-интерпретатора, для чего разработчиками проводится работа по тестированию и поиску максимально универсальных и простых решений. Поэтому как следствие - сфера применения этого фреймворка максимально широка: это не только обычные решения на стороне клиента, но также и на стороне сервера и десктопных компьютеров, - везде, где имеется возможность запуска JavaScript. Вторая важная техническая особенность Dojo, это поддержка дизайна множественности точек входа (Multiple Points Of Entry), что дает ему множество очевидных технических преимуществ. Также хочется упомянуть Dojo Extensions for Adobe AIR, призванный помочь разработчикам применять весь потенциал платформы AIR в приложениях с использованием Dojo Toolkit. Dojo очень простой. Хорошо подходит для динамических и устойчивых сборок, с начальным файлом подгрузчика, обычно размером 6 КБ. AMD-совместимый (допускающий постзагрузку), что делает его очень компактным, и приходит «из коробки» с тонной расширений, от базовой работы с DOM до сложного SVG, VML и canvas. Система виджетов Dijit проста в использовании и обладает богатыми способностями к расширению. В целом хорошо подобранный и полный набор инструментов. К недостаткам можно отнести довольно бедный набор инструментов для работы с HTML5.

2.9 Узкоспециализированные библиотеки

Mochikit

Mochikit, очень быстро растущий в популярности легковесный фреймворк, у которого много объективных преимуществ. Во-первых, очень качественная и обширная документация, которая делает его изучение чрезвычайно комфортным. Во-вторых, сотни тестов и очень современная, строго реализованная методология разработки и контроля позволяет быстро и легко находить возможные ошибки. Фреймворк находится под очень сильным влиянием Python - имеется много характерных именно для него трюков, которые делают здешнюю разработку очень понятной для программистов работающих с этим языком программирования (многое взято интересных идей от Twisted). Его инновационная гибкость архитектуры позволяет запросто адаптировать библиотеку под любую задачу.

Кроме того существует ряд узкоспециализированных библиотек, рассмотрим подробнее некоторые из них.

Highlight.js

Highlight.js - узкоспециализированная библиотека для подсветки синтаксиса на любых веб-страницах. Очень простая в использовании, работает автоматически: находит блоки кода, определяет язык, подсвечивает.

Modernizr

Modernizr - ещё одна узкоспециализированная библиотека. Позволяет определить, что из HTML5 и CSS3 умеет браузер пользователя. Что намного эффективнее, чем просто определить браузер, его версию и ОС клиента.

Raphaлl

Raphaлl - небольшая библиотека JavaScript, упрощает работу с векторной графикой. Raphaлl использует SVG и VML в качестве основы для создания графики. Поскольку все создаваемые объекты являются элементами DOM, можно добавлять к ним обработчики событий JavaScript или модифицировать, как и любой другой элемент DOM. Цель библиотеки в том, чтобы предоставить адаптер, который позволит легко и кроссбраузерно создавать графику.

Script.aculo.us

Script.aculo.us - JavaScript библиотека, которая предоставляет широкие возможности для создания эффектов, элементов управления и т.п. Для своей работы Script.aculo.us использует библиотеку более низкого уровня - Prototype, которая значительно упрощает взаимодействие с элементами страницы, выполнение Ajax запросов, работу с массивами и многое другое.

Node.js

Node.js - самый необычный из всех, событийно-ориентированный I/O фреймворк на JavaScript-движке V8. Он предназначен для создания масштабируемых сетевых приложений, таких как, веб-сервер. Node.js по целям использования полностью аналогичен с фреймворками Twisted на языке Python и EventMachine на Ruby. В отличие от большинства программ JavaScript, этот фреймворк исполняется не в браузере клиента, а на стороне сервера.

SWFObject

Предоставляет два оптимизированных метода внедрения Flash, основанных на разметке и использующих JavaScript.

 Библиотеки для мобильных вебсайтов и приложений

Многие разработчики выпустили альтернативные (более легкие) варианты библиотек специально для мобильных устройств. Есть также полноценные фреймворки (в основном для iPhone) для разработки мобильных веб-приложений, такие как jQTouch, iUI, iWebKit и Webapp.Net . Эти фреймворки применяются для обеспечения визуализации, событий и взаимодействия на вебсайтах.

baseJS

baseJS - легкая библиотека (8 KB), совместима с Safari и другими WebKit-браузерами [5]. Была полностью протестирована на Safari, начиная с версии iOS 1.0 до 3.0. В baseJS есть похожий на jQuery селектор, $(selector) и еще некоторые похожие методы: each, addClass, hasClass, removeClass, toggleClass, getXY, fire и несколько методов Ajax.

XUI

XUI - простой JavaScript-фреймворк для создания мобильных веб-сайтов, в сжатом виде весит всего 6.7 KB. Проверен в браузерах WebKit и Opera Mobile. Разработчики работают над поддержкой IE Mobile и BlackBerry. XUI также похож на jQuery, но более мощный, чем библиотека baseJS.

Для облегчения мобильной разработки появилось много UI библиотек. К сожалению, большинство из них разработаны для конкретных платформ, но, в принципе, с незначительными изменениями или несовместимостями они должны работать на всех устройствах. Браузер с наиболее специфической платформой - мобильный Safari и многие библиотеки позволяют нам создавать многофункциональные веб-приложения, которые эмулируют нативные элементы управление поведением для iOS. UI библиотеки для iPhone: iUI, jQTouch, Sencha Touch, iWebKit, WebApp.Net (также официально совместима с Android), ciUI (с C-NET альтернативой iUI), универсальная iPhone UI Kit, Magic Framework, Safire.

Для Android официально есть только две бибилиотеки: WebApp.Net и Sencha Touch. Остальные тоже должны работать с Android, но с некоторыми ошибками в анимации и эффектах (из-за расширений Apple в Safari).

Для Symbian устройств есть новая, оптимизированная под виджеты библиотека. Но она также работает и c браузерными документами для некоторых из доступных элементов управления. Называется эта библиотека Guarana UI и по сути это jQuery UI библиотека для браузера Symbian WRT.

3. сравнительный анализ библиотек javascript

Первоначально библиотеки создавались, как дополнения к JavaScript, и выполняли строго определённые функции. Развиваясь и обрастая всё новыми возможностями, они уже давно заняли место лидера, сместив с этой позиции сам JavaScript. Чистым JavaScript сейчас пользуется около 12% программистов, остальные предпочитают использовать наборы из различных библиотек. В таком разнообразии фреймворков довольно сложно сориентироваться. Сравнить их и сделать нужный выбор. Тем более что некоторые из них базируются на библиотеках, которые были выпущены ранее. Одни заточены под выполнение какой-либо определённой функции, другие уже являются универсальным инструментом. Попробуем выделить несколько критериев. Ввести определённую классификацию этих библиотек.

По физическим параметрам:

1. производительность;

2. объём библиотеки;

3. поддерживаемые операционные системы;

4. поддерживаемые платформы;

5. скорость загрузки библиотек;

Для работы:

1. на стороне сервера;

2. на стороне клиента;

3. в клиент-серверных приложениях;

По области применения:

1. формы;

2. вкладки;

3. интерфейсы;

4. визуальные эффекты;

5. работа с текстом;

6. работа в социальных сетях;

7. работы в мобильных приложениях;

8. для взаимодействия с другими языками программирования;

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

Одной из самых критичных характеристик является производительность готового продукта. Существенно повлиять на этот показатель может выбор библиотеки. Нет общепринятой методики для тестирования производительности. Этот показатель сильно зависит от используемой платформы, конфигурации компьютера, а также типа используемого браузера, если речь идёт о клиентском приложении. Один из таких обзоров производительности популярных фреймворков [6] рассмотрим подробнее.

В качестве инструмента для тестирования использовался SlickSpeed. В качестве тестируемых были выбраны следующие библиотеки:

1. Dojo 1.4.3;

2. JQuery 1.4.2;

3. MooTools 1.2.4;

4. Prototype 1.6.1 и 1.7.2;

5. ExtJS Core 3.1;

6. YUI 3.1.1;

Их производительность одновременно тестировалась в пяти браузерах:

1. Mozilla Firefox;

2. Opera;

3. Google Chrome;

4. Safari;

5. Internet Explorer 8.0;

Тест проводился 5 раз с учётом того что алгоритм работы тестирующей программы для получения среднего результата подразумевает 30 запусков. Для чистоты эксперимента все расширения в браузерах были отключены. Результаты теста приведены в таблице (Таблица 1). Значения указаны в миллисекундах.

Таблица 1 - Производительность библиотек JavaScript.

Браузер\Библиотека	Dojo 1.4.3	jQuery 1.4.2	MooTools 1.2.4	Prototype 1.6.1	Prototype 1.7.2
Firefox	62,6	52,6	89,4	68,4	42,8
Opera	37,2	33,2	61,6	45,2	34,2
Google Chrome	18,2	13,6	59,4	24,6	13,6
Safari	19	14,8	56,4	20,2	13
Internet Explorer	106,4	97	371,8	559,4	135,8
Среднее значение	48,68	42,24	127,72	143,56	47,88

Для наглядности представим эти значения в виде графика на рисунке 3.1.

Рисунок 3.1 - Сводный график производительности JavaScript библиотек

Если отбросить результаты по браузеру Internet Explorer, то можно увидеть, что результаты практически по всем библиотекам довольно близки, рисунок 3.2.

Рисунок 3.2 - Сводный график производительности JavaScript библиотек без учёта показателей в браузере Internet Explorer.

В среднем мы получили следующий результат.

jQuery 1.4.2 - 42,24 мс

Prototype 1.7.2 - 47,88 мс

Dojo 1.4.3 - 48,68 мс

ExtJs Core 3.1.0 - 113,16 мс

MooTools 1.2.4 - 127,72 мс

YUI 3.1.1 - 129,32 мс

Prototype 1.6.1 - 143,56 мс

Однако даже эти результаты нельзя использовать для полноценного сравнения библиотек. Хотя бы по той причине, что в этом эксперименте учитывалась только скорость выборки библиотекой по селекторам. Что не является показателем производительности всего фреймворка.

Ещё одним важным показателем является скорость загрузки библиотеки. Которая, в конечном счете, влияет на скорость загрузки страницы. Значимость его со временем уменьшается, так как увеличивается производительность компьютеров, и пропускная способность каналов связи. Однако, это всё ещё один из показателей, выиграв в котором, можно завоевать симпатии конечного пользователя. Рассмотрим этот вопрос более подробно.

Командой PBWiki был проведен весьма впечатляющий анализ производи-тельности JavaScript. Они собирались разобраться, насколько быстро грузятся JavaScript-библиотеки. Они развернули тестовое окружение для получения информации от различных браузеров, затем собрали все результаты в итоговом отчете. В нем достаточно много информации, которая может быть полезна как разработчикам веб-приложений, так и браузеров: структурированная таким образом информация достаточно обширна.

При загрузке JavaScript-кода обычно предполагается, что чем меньше загружаемый файл, тем быстрее он загрузится. Что это несколько далеко от истины, прекрасно подтверждает дальнейшее исследование. Рассматривается скорость загрузки библиотеки jQuery в трех формах: обычной, уменьшенной (при помощи Yahoo Compressor) и упакованной (используется Packer). Если упорядочить их по размерам, то будет примерно так: самый маленький вариант, естественно, упакованный, затем уменьшенный, затем нормальный. Однако, упакованная версия добавляет некоторые накладные расходы: ее нужно сначала распаковать (выполнять достаточно тяжелый eval и replace) с помощью того же JavaScript на стороне клиента. Эта распаковка может занять достаточно продолжительное время при загрузке страницы. Это означает, что использование уменьшенной версии, в конце концов, будет значительно быстрее, чем упакованной - даже при достаточно большом размере файла (Таблица 2).

Таблица 2 - Сравнение упаковки JavaScript (при загрузке jQuery, все варианты).

Вариант	Среднее время	Число примеров
Уменьшенный	519.7214	12611
Упакованный	591.6636	12606
Нормальный	645.4818	12589

Из этого исследования можно еще получить данные по влиянию производительности различных JavaScript-библиотек на загрузку страницы. Таким образом, более простая и меньшая по размеру библиотека будет загружаться быстрее аналогов. По результатам видно, что jQuery загружается достаточно быстро относительно других библиотек (200-400мс - существенный выигрыш в скорости) (Таблица 3).

Таблица 3 - Среднее время загрузки инструментария (не кешированная, не архивированная, не уменьшенная версия).

Инструментарий	Среднее время	Число примеров
jquery-1.2.1	732.1935	3152
dojo-1.0.1	911.3255	3143
prototype-1.6.0	923.7074	3144
yahoo-utilities-2.4.0	927.4604	3141
protoculous-1.0.2	1136.5497	3136

Согласно исследованиям Yahoo по кешированию, всего примерно 50% посетителей не будут иметь возможности кешировать содержание страницы. Поэтому также важно убедиться, что не только первоначальная, но и кешированная версия страницы также загружается максимально быстро (Таблица 4).

Таблица 4 - Среднее время загрузки инструментария (кешированная, архивированная и уменьшенная версия).

Инструментарий	Среднее время	Число примеров
yahoo-utilities-2.4.0	122.7867	3042
jquery-1.2.1	131.1841	3161
prototype-1.6.0	142.7332	3040
dojo-1.0.1	171.2600	3161
protoculous-1.0.2	276.1929	3157

Если брать во внимание кешированную версию, то разница становится уже не столь очевидна (всего 10-30мс - за исключением Dojo/Scriptaculous). Так как результаты получены полностью с помощью кешированных локальных копий скриптов, мы можем измерить отношения времени загрузки скриптов ко времени их исполнения (инициализации).

Ещё одной немаловажной характеристикой любой библиотеки явяется её удобство для конечного пользователя. В это понятие входит и наличие подробного руководства, примеров использования, поддержки со стороны создателя библиотеки, лаконичности и структурированности самой библиотеки. Во многом это субъективный фактор и измерит его практически невозможно. Однако именно этот показатель как никакой другой отражается на популярности библиотеки. Исходя из этого предположения, оценим популярность этих фреймворков. На сайте http://trends.builtwith.com/javascript опубликована статистика использования библиотек JavaScript на исследуемом ими одном миллионе веб ресурсов, рисунок 3.3.

Рисунок 3.3 - Статистика использования библиотек JavaScript

Как видно из общей статистики, лидером среди всех библиотек является jQuery. И если посмотреть график, в котором показано как изменялся этот показатель, то видно, что его популярность уже долгое время остаётся на высоком уровне, рисунок 3.4.

Рисунок 3.4 -Изменение популярности библиотеки jQuery

С другой стороны мы видим растущую популярность библиотек от различных сетей, таких как Facebook, Twitter и т.д., позволяющие интегрировать социальные сервисы в сторонние сайты. Некоторое время назад эти библиотеки использовались только на единичных ресурсах, в то время как сейчас они достаточно популярны, что хорошо заметно на графике, рисунок 3.5.

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



Рисунок 3.5 - Изменение популярности библиотеки Facebook for Website

Если речь идёт о программисте с малым опытом работы, о малом или среднем проекте, продукте в котором нужно реализовать достаточно большое количество функций, задействовав только одну библиотеку лучше сделать выбор в пользу каких-либо популярных библиотек, в частности jQuery. Это хорошо документированный фреймворк, один из немногих, по которому помимо официального руководства можно найти огромное количество литературы и разнообразных статей. Поддержка многочисленного сообщества поможет, если возникнут какие-то проблемы при работе с библиотекой. А система плагинов, позволит реализовать большинство необходимых функций максимально просто и быстро. К числу таких фреймворков, помимо jQuery, можно также отнести: Prototype, MooTools, Dojo.

Когда речь идёт о создании визуальных интерфейсов, лучше воспользоваться фреймворками, заточенными под выполнение этой задачи. Они обладают набором готовых шаблонов и визуальных эффектов, которые позволят выполнить эту задачу с наименьшими затратами времени и максимально эффективно. Для таких задач, больше подходят библиотеки jQuery UI, Yahoo! UI Library (YUI), SWFObject.

В тоже время существует огромное количество специализированных библиотек, которые могут помочь, если требуется выполнить какую-то строго определённую функцию. В этом случае нет необходимости задействовать какие-то тяжёлые фреймворки. Например, для работы с текстом есть небольшая библиотека Highlight.js, для определения информации о клиенте - Modernizr, для работы с векторной графикой - Raphaёl, а для написания серверных приложений - Node.js.

Всё больше набирает обороты интеграция различных социальных сервисов с другими веб-ресурсами. Для этого уже появилось большое количество библиотек, такие как: Facebook for Website, Facebook SDK, Twitter Platform. Вполне логично, что для выполнения этой задачи данные библиотеки наиболее предпочтительны.

Другой большой сегмент рынка, который становится всё популярнее - это мобильные приложения и сайты. Дело в том, что платформы, на которых приходится работать веб-ресурсам, довольно специфичны, обладают своими особенностями характерными только для данного типа оборудования и приложений. Чтобы сделать продукт максимально адаптированным под эти задачи придётся воспользоваться заточенными под эти функции библиотеками. Более подробно каждая из них описана в работе ранее.

Таким образом, классификация по выполняемым задачам даёт наиболее полную картину и позволяет более точно определиться с выбором библиотеки. Тем не менее, даже при таком способе остаётся возможность выбрать из нескольких фреймворков. Как видно из статистики приведённой выше производительность всех фреймворков значительно не отличается друг от друга и зависит больше от выбора приложения (браузера) на клиентской стороне. Тем более эти параметры всё больше нивелируются вследствие роста производительности компьютеров и пропускной способности каналов. Что ещё больше доказывает, что выбор библиотеки больше зависит от субъективных факторов, на которых как раз и сделали упор самые популярные библиотеки. Именно это позволяет им выгодно отличаться среди множества подобных. Яркий пример, библиотека Mochikit, во многом похожая на Python, чем и завоевал популярность среди программистов, работающих с этим языком программирования. Таким образом, выбор актуальной библиотеки сводится к выбору задачи выполняемой проектируемым продуктом. Дальше это дело предпочтений каждого программиста.

Заключение

Проведённый сравнительный анализ затрагивает важный и актуальный в настоящее время вопрос выбора оптимальной библиотеки для решения конкретных задач. Решение данной проблемы позволит значительно упростить создание готового продукта, сократив время от стадии чистой идеи до законченного приложения. Уменьшив тем самым и материальные затраты. В качестве результата данной работы можно выделить следующее:

1) Проведённый сравнительный анализ библиотек JavaScript позволяет составить целостную картину об общих характеристиках современных фреймворков: их основных преимуществах и недостатках, месте на рынке и т.д.

2) Была предложена классификация современных библиотек по нескольким параметрам, характеризующим существующие фреймворки, использование которой позволит систематизировать выбор необходимых решений.

3) Приведённые материалы исследований доказывают сложность анализа отдельных параметров библиотек без учёта поставленных задач и выполняемых приложениями функций, а также неоднозначность проводимых отдельными исследователями тестирований.

Список использованных источников

1 Флэнаган Д. JavaScript Подробное руководство / Д. Флэнаган - 5-е изд., исправ. - СПб.: Символ-Плюс, 2008. - 992с.

2 Макфарланд Д. JavaScript и jQuey Исчерпывающее руководство / Л. А. Данилова - 5-е изд., исправ. - М.: Эксмо, 2012. - 688с.

3 GitHub 2011 // (Engl.). - URL: https://github.com/bebraw/jswiki/wiki

4 Яндекс 2012 // - URL: http://api.yandex.ru/jslibs/

5 Paul Armstrong. MN Web Design and Development. 2012 // (Engl.). - URL: http://paularmstrongdesigns.com/projects/basejs

6 Шевчук А. Сравниваем производительность JavaScript фреймворков. 31 мая, 2010 // - URL:http://anton.shevchuk.name/javascript/compare-perfomance-javascript-frameworks/

Размещено на Allbest.ru

...