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

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

Альбина Токарчук Сентябрь 14, 2012

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

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

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

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

jQuery

Этот фреймворк был на слуху у каждого web-разработчика, факт. На сегодняшний день это самый известный и самый популярный фреймворк. И действительно, если посмотреть список всех доступных функций и их описание, то можно понять насколько мощный этот фреймворк, с его помощью разве что ракету на Луну не отправишь. Он позволяет решать достаточно сложные задачи, создавать динамичные эффекты, и все это даже без базовых знаний 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 и многого другого.

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

Теперь можно поговорить и о фреймворках, написанных специально для мобильных устройств. Чтобы правильно выбрать фреймворк для написания мобильного web-приложения, нужно для начала понять, какие особенности в нем есть: если это обычное приложение, не использующее специальных функций мобильных устройств, то это одна задача; если же необходимо, чтобы наше приложение могло и фотографировать, и посылать смс, и делать звонки, и предоставлять доступ к телефонной книге  — то это уже задача другая. Для начала обратимся к привычному уже для нас примеру – разработке мобильного web-приложения. И первым на рассмотрении у нас будет фреймворк под названием 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. Но все же перед тем как выбрать из множества предлагаемых решений, нужно подумать, какой именно из фреймворков выбрать? Здесь все зависит от функциональности приложения, поставленных задач, а не только от громкого названия и популярности. Поэтому в первую очередь именно ваш аргументированный выбор может максимально повлиять на успех разработки приложения.

Комментарии

комментарии



Content created by Albina Tokarchuk