Javascript-решения для приложений

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

Стандартный web

Изначально слово «фреймворк» ассоциировалось только с сервер-сайд. Но затем тенденции стали меняться. Фреймворки стали появляться и для Javascript, когда язык стал достаточно мощным и сфера его применения стала намного шире.

Существует несколько фреймворков, которые достаточно популярны в веб-разработке и применяются чаще остальных. Это обусловлено, конечно же, «мощностью» фреймворков, т.е. простотой использования, скоростью, объемом занимаемой памяти, количеством полезных функций и т.д. Рассмотрим те, которые действительно заслуживают внимания.

jQuery

Этот фреймворк был на слуху у каждого веб-разработчика, факт. На сегодняшний день это самый известный и самый популярный фреймворк. И действительно, если посмотреть список всех доступных функций и их описание, то можно понять насколько мощный этот фреймворк, с его помощью разве что ракету на Луну не отправишь. Он позволяет решать достаточно сложные задачи, создавать динамичные эффекты, и все это даже без базовых знаний Javascript. Поэтому многие молодые разработчики ассоциируют Javascript с jQuery.

Из особенностей jQuery можно выделить следующее:

• Кроссбраузерность
• Кроссплатформенность
• Последовательность вызова функций для одного объекта. Для примера:

$(e)
                .css(‘margin-left’, ‘30px’)

                .show()

                .parent().animate({‘margin-top’, ‘20px’}, 100);

Данный код означает следующее:

Объект  сдвинется на 30 пикселей вправо, затем ему присвоится style=”display: block”, и после всего этого родитель данного объекта плавно сдвинется на 20 пикселей вниз.

• Множество различных эффектов: анимация, несколько эффектов появления объектов из скрытого состояния
• Доступ к CSS объекта
• Легкое обращение к объектам, по идентификатору или классу
• Легкий поиск по DOM
• Легкое расширение функционала.
• Удобная обертка над AJAX
• И многое другое…

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

Примечание: при помощи jQuery очень удобно и легко писать свои собственные фреймворки, так как он уже предоставляет очень много хороших функций, которые не нужно писать самому, тем самым экономя свои время и силы.

Более детальная информация: jquery.com

Prototype

Данная библиотека в свое время была очень популярна и остается таковой по сей день, с одним только но: фреймворк более не поддерживается разработчиками. Последнее обновление датируется 16 ноября 2010 года. Но! Разработчик Prototype до сих пор трудится над новыми библиотеками и фреймворками. Отметим, что вместе с Prototype стоит рассмотреть еще один достаточно интересный фреймворк – scripty2, который является надстройкой над Prototype.

Prototype чем то схож с jQuery в своих обращениях к объектам, схожи манипуляции над ними; также есть обертка над Ajax, которая, если приглядеться повнимательней, достаточно мощна и не уступает jQuery, а где-то и превосходит.

Особенности Prototype:

• Можно указать интервал, с которым будут производится Ajax-обращения на сервер.
• Если ваш запрос должен вернуть HTML, то можно воспользоваться очень удобным средством: Ajax.Updater(‘id_контейнера’, ‘some_url’, {method: ‘get’}). В таком случае при ответе с сервера контейнер будет заполнен HTML, пришедшем с сервера. Также можно указать, будет ли уже существующая информация в контейнере перетерта, или новые данные буду вписаны в начало/в конец контейнера. Минимум действий, максимальное удовольствие!
• Множество визуальных эффектов (анимация, затухание, и пр.)

Mootools

Mootools — небольшая, быстрая библиотека с отличной документацией. По своему синтаксису и функционалу схожа с jQuery (в большей степени, чем с Prototype). Благодаря набору особых методов, позволяет создавать сложные визуальные эффекты, манипулируя CSS-свойствами объектов.

Особенности:

• Модульность, т.е. возможность собрать библиотеку для конкретной цели без лишних килобайтов.
• Большое количество «тонких» настроек и методов для манипуляций и взаимодействия с элементами
• Плагин MooTools.More.js, расширяющий возможности библиотеки, и большое количество аддонов от сторонних разработчиков на любой вкус.

Dojo

Dojo — это самый многофункциональный из фреймворк в веб-разработке. Он позволяет делать практически все, начиная от элементарных манипуляций с DOM и заканчивая интеграцией с различными серверными решениями, поэтому лучше всего подходит для серьезных проектов. В связи с этим Dojo обладает рядом отличительных особенностей:

• Модульная архитектура и динамический загрузчик, подгружающий указанные компоненты и разрешающий зависимости;
• Трёхкомпонентная архитектура

1. Dojo включает в себя все базовые функции, необходимые в подавляющем большинстве приложений. Для работы с данными (вообще) сделан целый унифицированный API, чтобы отвлечься от нюансов получения и хранения (dojo.data.api.*) , отдельно в утилиты вынесены методы обработки вроде сортировок или фильтров (dojo.data.util.*).
2. Dijit. Сюда вошли все компоненты для построения интерфейсной части веб-приложения: это и собственный WYSIWYG-редактор, и тулбары, и динамические всплывающие подсказки, и индикатор прогресса, и дерево, расширенное разными моделями хранения и получения данных.
3. DojoX — это пакет экспериментальных решений. Например, в Dojox есть собственный порт библиотеки Google Analytics, большое количество компонент отведено работе с RSS, Atom и Gdata, и они обладают широкой функциональностью. Сюда же включен мощнейший компонент двух и трехмерных графиков, а также отдельно компоненты рисования, спецэффектов и 3D. В зависимости от возможностей среды используется или рендеринг через SVG, VML или MS Silverlight. Также DojoX расширяет и виджеты, добавляя множество элементов к формам, реализует очень мощный и, вероятно, главный «аяксовый» компонент — таблицу для отображения данных и множество встроенного функционала для их обработки (таймеры, дополнительные объекты вроде очереди или связанных списков, оффлайн хранилища и т. д.)

Изначально команда Dojo пыталась реализовать все, что только возможно было сделать с помощью Ajax и JavаScript. По сути во многих областях Dojo является первопроходцем, продвинувшим теперь обычные технологии в массы. Это касается реализации идеи локального хранилища данных с использованием всех доступных вариантов хранения, начиная от cookie и заканчивая Flash-модулем и Google Gears, различных вариантов доступа к данным, встроенного дебаггера, позже научившегося работать с Firebug-ом, рисования графики, в том числе и 3D, реализации RPC и многого другого.

Мобильные устройства

Теперь можно поговорить и о фреймворках, написанных специально для мобильных устройств. Чтобы правильно выбрать фреймворк для написания мобильного веб-приложения, нужно для начала понять, какие особенности в нем есть: если это обычное приложение, не использующее специальных функций мобильных устройств, то это одна задача; если же необходимо, чтобы наше приложение могло и фотографировать, и посылать смс, и делать звонки, и предоставлять доступ к телефонной книге  — то это уже задача другая. Для начала обратимся к привычному уже для нас примеру – разработке мобильного веб-приложения. И первым на рассмотрении у нас будет фреймворк под названием jQuery Mobile  — надстройка над уже знакомым нам jQuery + jQuery UI.

jQuery Mobile

Наверное, в силу популярности jQuery, его мобильная версия jQuery Mobile стала столь же популярной. Что кажется вполне логичным  — если синтаксис у нас не меняется, функционала не меньше, а даже больше, то почему бы не продолжать работать с любимым фреймворком?

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

В jQuery Mobile такие особенности:

• Встроенные стили элементов
• Online-редактор тем
• Кроссплатформенность/кроссбраузерность
• Адаптивная верстка (отлично выглядит для любого девайса, будь это телефон или планшет)
• Обработка ошибок при Ajax-запросах
• Работа с историей просмотров по страницам
• Полная совместимость с jQuery (!)

Sencha Touch

Следующий фреймворк, который стоило бы рассмотреть  — это SenchaTouch. Это дочерний проект разработчиков ExtJS, актуальная свежая сборка SenchaTouch 2 строится на ExtJS 4.

Основное его достоинство — это легкость в освоении, написать элементарное приложение на Sencha сможет даже неспециалист или новичок в веб-разработке. Этому способствует не только обширная и подробная документация с множеством примеров, видеороликов и уроков, но и сама структура фреймворка. Приложение составляется как будто из кубиков — функциональных блоков, код выглядит как «полотно» функций и методов, поэтому нуждается в частом комментировании и четкой логической системе размещения этих самых блоков.

Помимо этого Sencha

• Поддерживает схему Model-view-controller,
• Работает не только с BlackBerry, Android 2.3+ и iOS, но и с Windows, то есть разработчики имеют возможность написать и протестировать приложение под iOS, даже не имея Apple устройства,
• Дает возможность взаимодействовать с нативными возможностями платформ (камера, ориентация, диалоги, подключение к сети),
• Является удобным средством реализации адаптивного дизайна.
• Содержит набор готовых шаблонов для элементов

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