×Закрыть

Обзор JavaScript-фреймворков

В этой статье я кратко опишу опыт использования трех популярных JavaScript-фреймворков: Dojo, GWT (Google Web Toolkit) и Ext.js.

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

Стал присматриваться.

Первым попался на глаза Dojo.

Из плюсов: — хороший сайт, — куча демонстрашек-примеров; — нужные либы подключаются псевдо-include конструкцией, удобно; — есть действительно стоящие наработки типа подключения Гугл- и Яху-карт; — особых проблем в работе не возникло.

Dojo

Минусы: — многа букаф. Чтобы юзать этот тулкит, пришлось таскать несколько сотен килобайт кода в разных файлах; — некоторые красивые вещи, ради которых было решено юзать этот пакет, сильно тормозят при старте, особенно если юзать не локально. Например, меню в стиле Fish Eye. — некоторые вещи немного бревнят. Например, да, можно использовать встроенную валидацию форм, но сообщения об ошибках выводятся не пойми куда (сбоку) и ломают дизайн.

В общем, юзать можно либо ради каких-то спец. фич, либо просто потому что модно;) Ощущение осталось какое-то липкое.

Затем появился GWT. Два огромных минуса: — дефолтовый дизайн — примитивный, как у всех гугловских проектов; — писать код надо на Java, из которого потом генерится HTML + JavaScript, и в таком виде сайт уже существует дальше.

GWT

Ребята постарались — сделали свой небольшой браузер, в котором можно смотреть прямо по ходу Java-разработки, что получится в итоге (без перекомпиляции проекта в XHTML).

Ещё один плюс: Гугл — контора большая и серьезная, следовательно, ее продукт более оттестированный, зрелый (кажется, они сами его в девелопменте юзают).

В пакет входят примеры, впечатляют.

Имхо такой подход (пишешь на одном языке, получаешь на другом и на третьем) считаю извратом, да и в Java я не силен. Тем не менее, впечатление осталось положительное, надежное какое-то.

Больше всех понравился Ext.js

Во-первых, красивый. В комплекте идут сразу три модных скина (один из них под Висту).

Ext.js

Во-вторых, рабочая либа весит около 100 Кб, да ещё на сайте есть спец. тулза, в котором можно галочками указать, какие именно фичи не будут использоваться — и тогда либа существенно «похудеет».

В-третьих, сделано всё как-то добротно, с объектной моделью. Приятно юзать, всё понятно. Скоро выйдет версия 2.0, обещают кучу всего нового и модного.

Ещё есть документация с примерами, скринкасты и пользовательские наработки. Куча готового функционала: лэйауты, диалоговые окна, таблицы (с редактированием), AJAX и всё такое.

Минусов два: — коммерческое использование стоит немалых денег ($219 за 1 девелоперскую копию), — документация местами хромает.

До коммерческого использования мне пока далеко, а там посмотрим. Имхо, продукт того стоит.

И ещё в их Grid’е не работает копипаст: (Решаемо, но неприятно.

Остановился на Ext.js — уж очень подкупили их таблички с поддержкой редактирования и красивый дизайн.

  • Популярное

55 комментариев

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Очень уж сыровато.А как же другие фреймерки? Да и выражение «Два главных минуса: дефолтовый дизайн — примитивный, как у всех гугловских проектов;...» меня немножко убило...Это не должно и не может быть главным минусом.Я писал на ExtJs пару месяцев назад WebCMF для управления сайтом. Вещь конечно хорошая, но памяти из процессора хавает — мама не горюй... Есть небольшие проблемы с работой в IE. Да и тяжеловата.Сильно много различной мишуры, на которую и «клюнул» рядовой юзер.Prototype сила, Mootools сила!

Если есть интерес к GWT разработке можно посмотреть новые приложения/доработки на http://www.on-map.ru .Все сделано на GWT.Реализованa панель HTML редактора для ввода описания (можно посмотреть ролик http://www.on-map.ru/help/help.htm ).На сервисе GoGo сделал бету поисковика http://www.on-map.ru/search/.

Очень слабый и дилетантский обзор...Подобных фреймворков существует множество, в частности, когда мы выбирали для себя мы вначале выбрали Dojo, но он навороченный и хаотично организованный, рассматривали GWT и т.д., но выбрали Script#. А про него у автора ничего нет, не говоря уже о многих других. Может перед тем как назвать свою статью «Обзор JavaScript-фреймворков», надо хотя бы несколько статей на эту тему почитать?

GWT Довольно удобный фреймворк. На www.on-map.ru можно посмотреть мое работающее GWT приложение (http://www.on-map.ru/more/). Пока довольно простое (по разным причинам). Первое впечатление от GWT положительное...Самая большая проблема- индексирование GWT приложений поисковиками... Похоже проблема пока не решается.Чтобы нормально писать на GWT нужно обязательно хорошо знать спецификацию Java Servlet и опыт разработки на Java. Для клиентской части нужно писать все на jdk 1.4 иначе будут некоторые проблемы...Разработка на GWT не самое простое занятие... Как минимум нужно быть java кодером с не нулевым положительным опытом.

Бомж, пиши еще, понравилось)

Рельсы ваши гавно. Теперь чтобы реализовать проект заебёшься думать — пиейчпи не модно, но стоит везде, руби-хуюби понтово, но не у всех есть, перл в унитазе устарел как жопа, питон мозг ебёт. И т.д. А ещё есть жаба, флексы-говнексы. Так мозг на взорвётся в пи! Даже выберешь ты какую-нибудь шляпу, ну и х с ним, всё равно потом обосрёшься — какиPHP или же игнатера, дьянго-хуянго или зопу? А шаблонизатор? Опять мозг имеем в анус — xsl круто, тока верстальщик пидор тупой. Хамл тока под руби, да ещё сырой сука, маркдавн, велосити. Блиц крут, тока компилировать надо, а хостер чмошник, х даст. Протухший смарти наконец. А бля, забыли, ещё нам js-фрейворк нужен! ExtJS, яхер, jQuery, мутулс, прототип... Он же на апеле самом... Понтовее всего скриптакулус, тока пидарас весит как слон ебаный.Бляяя... Если это мозгоёбство и вытерпишь, то потом заниматься проектом отпадёт всё желание. Лучше пойти сисадмином чай попить в какой-нибудь конторе, чем стать парализованным педофилом, разбирая куски гавна вебдваноль.

Почему о mootools ничего не написали? Очень мощный фреймворк и подходит для разработчиковна разных языках. Тем более скоро выходит в свет новая версия этого фреймворка.

Использовал Yahoo YUI. Слишком много дефектов как для такой серьезной компании. Можете сами «подвигать» контролы на их сайте с примерами. У Ext.js такие явные просчеты сразу не видны.

я разве говорил что не нравиться:)... это моя любимая либа... у просто уточняю про 100 кб, потому что у меня больше... думал мало ли — может я чего упустил...

по крайней мере в моем проекте я смог выкинуть тольк 100 кб

В чём собственно проблема? Не нравиться ext — не используйте.reach-интерфейсы сами по себе подразумевают нескромные объёмы трафика. И несколько «лишних» kb (сотен kb) ни во что не упираются. А если учесть что JS прекрасно кэшируется браузерами, то проблемы вообще нет.Компактор кода + сжатие при отдаче = объём трафика уменьшается в 3−4 раза.

ext можно собрать с необходимо функциональностью и повыбрасывать всё неиспользуемое в конкретном проекте.

ага, можно... только там завязано все друг на друга... по крайней мере в моем проекте я смог выкинуть тольк 100 кб.

даа?, а я чегото смотрел вроде ext-all.js около 400 кб

А её необязательно использовать.ext можно собрать с необходимо функциональностью и повыбрасывать всё неиспользуемое в конкретном проекте.

Во-вторых, рабочая либа весит около 100 Кб

даа?, а я чегото смотрел вроде ext-all.js около 400 кб

да не зря (хотя в любом случаи спасибо за статейку). я и опыта использования не заметил...

Зря утрируете:

В этой статье я кратко опишу опыт использования трех популярных JavaScript-фреймворков

а где собственно обзор? можно было написать что есть еще yahooui, jquery, prototype, mootools... все они прикольные, и чего-то там могут... тоже вроде как обзор полусился:)

ext — прекрасный framework.Если из него убрать не используемые в продукте функции да ещё и применить сжатие при отдаче, получается смешной трафик.По докам также притензий нет, если присутствует понятие ООП и навыки его применения.

кстати вспомнил еще один плюс YUI — яху ее бесплатно хостит: http://developer.yahoo.com/yui.../ну и с евангелистами у YUI тоже гораздо лучше всех остальных: http://developer.yahoo.com/yui.../

Для статистики: пользую prototype, script.aculo.us, prototype windows. Все работает на ура. Да, к сожалению, не хватает модульности — не всегда нужны все «прибамбасы», да, для полноценных рич-интерфейсов надо собирать до кучи либы от разных производителей. Но, все отлично задокументированно, и главное, все работает:) Все остальное, либо дело религии, либо вопрос технологичности процесса разработки.

+1 CountZeroБольше года использую JQuery — рекомендую всем.Личное мнение: по соотношению Возможности/Размер библиотеки — the best! Кстати, автор библиотеки: John Resig сейчас занимает интиресную должность — JavaScript Evangelist at Mozilla Corporation:)

Flex — мекртворожденная технология. В нашей конторе его тоже юзали некоторое время для создания рич веб-интерфейсов, но потом плюнули на него и взяли YUI. Что же касается Ext-a, то раньше он был просто дополнением, только пару месяцев назад стал самостоятельным фреймворком. Мы даже инвестигейшн проводили в конторе, где я работаю, на тему того, какой фреймворк выбрать, сравнивали prototype, dojo, YUI, jquery и gwt. В итоге, так как проект большой и серьезный, то мы остановлись на YUI. Если же у вас проект попроще, то берите JQuery.

Ну flex технология молодая относительно, поэтому у неё всё впереди., а по feature list для RIA очень перспективная. не зря MS её концепцию позаимствовали...

YUI-ext фигня (по многим причинам, хоть и построен на YUI), очень не нравится + платный, всем советую юзать YUI бесплатно и классно.

— Да! — Нет, и точка!

Классная аргументация:)

> Flex будет править миром.Это смешно. Он не правил, и не будет. Точка.Чтобы Точку убрать, пожалуйста, обоснования в судию.

Flex будет править миром

Во-во, недавно в PHP|Architect писали какая это цаца (причем статья была кажется от главреда журнала). Видно скоро и сам журнал переименуют:)

mygwt — тоже интересный вариант. Смотрим здесьhttp://mygwt.net/

Неплохой обзор, но соглашусь с мнением об отсутствии в нем...

Данный обзор не претендует на полноту. Скорее, обмен опытом и мнениями.

Неплохой обзор, но соглашусь с мнением об отсутствии в нем близкого моему сердцу Prototype.js и Scrip.aculo.us.

Сами начинали с YUI потом переползли на ExtJS, сразу могу сказать, что единственно в чем Ext, плох так это в документации, по сравнению с YUI — там ее практически нет, но по красоте кода, ОО модели Ext рулит, написано там очень много и даже за полгода использования все еще находим новые фишки:)

Valentyn Shybanov, а можно будет как нибуть почитать ваш доклад? было бы интересно поподробней узнать про ЖВТ

Я к сожалению ещё не перевёл доклад в формат презентаций docs.google.com, но собираюсь это сделать в ближайшее время.Обращайтесь напрямую через email, или подпишитесь на мой блог dev-crossroads.blogspot.com, где я обязательно запостю ссылку на презентацию.

Valentyn Shybanov, а можно будет как нибуть почитать ваш доклад? было бы интересно поподробней узнать про ЖВТ

Как это для других целей? Это тоже Javascript FrameWork — прочитайте тему данной статьи.

Да, не хватает для полного обзора YUI и jQuery+UI.Prototype/Scriptaculous — замечательная штука, но немного для других целей — там нет наборов навороченных контролов, как во всём перечисленном.

Кстати только что открыл главную страницу http://www.apple.com/ — и там тоже Prototype & Scriptaculous. Врядли бы Епловцы каку юзали...

Да чего далеко ходить — тот же WordPress использует prototype прямо в админке при создании постов и т.д. Там же и JQuery.

Чесно говоря удивлен, что никто не упомянул prototype: (Как же так? Ведь на нем и script.aculo.us базируется и много других библиотек.http://www.prototypejs.org/ — для изучения...Пользуюсь уже давно и пока очень и очень нравится.

2 Денис: заранее спасибо! Блог уже в агрегаторе, так что пеши исчо;)

2 Александр Скакунов: Есть проще, причем можно сделать так чтобы не было необходимости выделять мышкой — что даже удобнее чем в остальных гридах. По двойному клику в ячейке таблицы — поле выделяется, остается только нажать ctrl+c.Код, к сожалению, с лету не напишу, либо в понедельник выйду на работу и выложу кусок кода. Либо за выходные найду где я это видел и напишу статейку на эту тему у себя на блоге:)

Насчет Ext, то некоммерческая license там LGPL, и как этот чувак сам объяснял на сайте, что типа если тот продукт, который вы строите на основе Ext не является library или framework, то исходники можно не открывать. Using an LGPL’d library binds you to releasing any modified code under the same or compatible license, but makes no claims to tangential work. So say your JavaScript code simply used Ext, but you didn’t touch their source, you should be in the clear.Типа того, что если ты меняешь их код, то нужно выкладывать изменения, а код, который просто использует библиотеку может оставаться закрытым.http://jimbojw.com/wiki/index...YUI — рулит.: -) Ext изначально был набором дополнительных фич к YUI.

2 Денис: я нашёл только комбинированное решение: — для IE: createTextRange () — для остальных: на форуме Ext.js нашёл маленький swf-файл, который решает задачу копипаста.Минус (кроме кривизны подхода) — в ФФ при отсутствии Flash работать не будет.Есть способ проще?

Сори, тут лучше описано про лицензию: http://groups.google.com/group...

extjs — это и есть ответвление yui.2 Скакунов Александр: Копипаст с грида — решается просто, но я согласен, что изначально раздражает.И, насколько я знаю. можно и в коммерческих целях использовать по бесплатной лицензии. Т.е. ты можешь разрабатывает части своего сайта, а сайт продавать. Подробнее про лицензию тут: http://groups.google.com/group...#

Никто не в курсе, есть ли русскоязычное комьюнити по YUI?

В данный момент схожу с ума по YUI

Мне показалась слишком грамоздкой extJS в плане изучения и для решения нетривиальных вещей? да и размеры траффика напрягают. Кстати гриды тормозят, говорят, что в 2-ке тоже будут тормозить.Обратил внимание на jQuery. Простая и легкая библиотека, плюс началась разработка гуевых функций

Вопросов нет — для Java-разработчиков это просто супер. Просто я к ним не отношусь, поэтому пришлось отказаться от этого направления.

1. Возможность рефакторинга2. Возможность юниттестинга3. Строгая типизация и проверка на этапе компилирования

Согласен, что это само по себе здорово. Но всё равно делать сайты таким образом — имхо изврат:)

Гм, как-то не заметил этот «минус», который на самом деле скорее плюс.Сходу несколько причин, почему «Ява» в данном случае хорошо (фактически java vs javascript): 1. Возможность рефакторинга2. Возможность юниттестинга3. Строгая типизация и проверка на этапе компилированияЕсть ещё, но эти сходу вспомнились./me просто готовит доклад про GWT:)

То, что в GWT надо писать код на Java, как-то не очень правильно относить к минусам, мне кажется. GWT позиционируется гуглом как «Java framework» для тех, кто не хочет заморачиваться с JavaScript.

Ух! Спасибо за ссылку.

Можно совместить приятное (GWT) с красивым (Ext): http://code.google.com/p/gwt-e.../

Подписаться на комментарии