Обзор JavaScript-фреймворков
Скакунов АлександрОпубликовано 28.09.2007 в Инструменты, Разработка, статьи
В этой статье я кратко опишу опыт использования трех популярных JavaScript-фреймворков: Dojo, GWT (Google Web Toolkit) и Ext.js.
Началось всё как всегда просто: для своего проекта Koodix надо было выбрать фреймворк, коих нынче море, аж глаза разбегаются.
Стал присматриваться.
Первым попался на глаза Dojo.
Из плюсов:
- хороший сайт,
- куча демонстрашек-примеров;
- нужные либы подключаются псевдо-include конструкцией, удобно;
- есть действительно стоящие наработки типа подключения Гугл- и Яху-карт;
- особых проблем в работе не возникло.
Минусы:
- многа букаф. Чтобы юзать этот тулкит, пришлось таскать несколько сотен килобайт кода в разных файлах;
- некоторые красивые вещи, ради которых было решено юзать этот пакет, сильно тормозят при старте, особенно если юзать не локально. Например, меню в стиле Fish Eye.
- некоторые вещи немного бревнят. Например, да, можно использовать встроенную валидацию форм, но сообщения об ошибках выводятся не пойми куда (сбоку) и ломают дизайн.
В общем, юзать можно либо ради каких-то спец. фич, либо просто потому что модно 
Ощущение осталось какое-то липкое.
Затем появился GWT. Два огромных минуса:
- дефолтовый дизайн - примитивный, как у всех гугловских проектов;
- писать код надо на Java, из которого потом генерится HTML + JavaScript, и в таком виде сайт уже существует дальше.
Ребята постарались - сделали свой небольшой браузер, в котором можно смотреть прямо по ходу Java-разработки, что получится в итоге (без перекомпиляции проекта в XHTML).
Ещё один плюс: Гугл - контора большая и серьезная, следовательно, ее продукт более оттестированный, зрелый (кажется, они сами его в девелопменте юзают).
В пакет входят примеры, впечатляют.
Имхо такой подход (пишешь на одном языке, получаешь на другом и на третьем) считаю извратом, да и в Java я не силен. Тем не менее, впечатление осталось положительное, надежное какое-то.
Больше всех понравился Ext.js
Во-первых, красивый. В комплекте идут сразу три модных скина (один из них под Висту).
Во-вторых, рабочая либа весит около 100 Кб, да ещё на сайте есть спец. тулза, в котором можно галочками указать, какие именно фичи не будут использоваться - и тогда либа существенно “похудеет”.
В-третьих, сделано всё как-то добротно, с объектной моделью. Приятно юзать, всё понятно. Скоро выйдет версия 2.0, обещают кучу всего нового и модного.
Ещё есть документация с примерами, скринкасты и пользовательские наработки. Куча готового функционала: лэйауты, диалоговые окна, таблицы (с редактированием), AJAX и всё такое.
Минусов два:
- коммерческое использование стоит немалых денег ($219 за 1 девелоперскую копию),
- документация местами хромает.
До коммерческого использования мне пока далеко, а там посмотрим. Имхо, продукт того стоит.
И ещё в их Grid’е не работает копипаст 
Решаемо, но неприятно.
Остановился на Ext.js - уж очень подкупили их таблички с поддержкой редактирования и красивый дизайн.
AJAX, Dojo, ExtJS, GWT, JavaScript, фреймворк
(5 голосов, средний: 3.6 из 5)
Загрузка ...Понравилась статья? Подпишись на обновления по RSS/E-mail
Можно совместить приятное (GWT) с красивым (Ext): http://code.google.com/p/gwt-ext/
Ух! Спасибо за ссылку.
То, что в GWT надо писать код на Java, как-то не очень правильно относить к минусам, мне кажется. GWT позиционируется гуглом как “Java framework” для тех, кто не хочет заморачиваться с JavaScript.
Гм, как-то не заметил этот “минус”, который на самом деле скорее плюс.
Сходу несколько причин, почему “Ява” в данном случае хорошо (фактически java vs javascript):
1. Возможность рефакторинга
2. Возможность юниттестинга
3. Строгая типизация и проверка на этапе компилирования
Есть ещё, но эти сходу вспомнились.
/me просто готовит доклад про GWT
Вопросов нет - для Java-разработчиков это просто супер. Просто я к ним не отношусь, поэтому пришлось отказаться от этого направления.
Согласен, что это само по себе здорово. Но всё равно делать сайты таким образом - имхо изврат
Мне показалась слишком грамоздкой extJS в плане изучения и для решения нетривиальных вещей? да и размеры траффика напрягают. Кстати гриды тормозят, говорят, что в 2-ке тоже будут тормозить.
Обратил внимание на jQuery. Простая и легкая библиотека, плюс началась разработка гуевых функций
В данный момент схожу с ума по YUI
+1 за YUI! http://developer.yahoo.com/yui
Никто не в курсе, есть ли русскоязычное комьюнити по YUI?
extjs - это и есть ответвление yui.
2 Скакунов Александр:
Копипаст с грида - решается просто, но я согласен, что изначально раздражает.
И, насколько я знаю. можно и в коммерческих целях использовать по бесплатной лицензии. Т.е. ты можешь разрабатывает части своего сайта, а сайт продавать. Подробнее про лицензию тут: http://groups.google.com/group/ru-extjs/browse_thread/thread/9e131df9ba76ea7c/b0da692971ce5345?lnk=gst&q=%D0%BB%D0%B8%D1%86%D0%B5%D0%BD%D0%B7%D0%B8%D1%8F&rnum=1#
Сори, тут лучше описано про лицензию: http://groups.google.com/group/ru-extjs/browse_thread/thread/66d2c7b86e2992aa/476d3d7a193cac5d?lnk=gst&q=%D0%BB%D0%B8%D1%86%D0%B5%D0%BD%D0%B7%D0%B8%D1%8F&rnum=6#476d3d7a193cac5d
2 Денис: я нашёл только комбинированное решение:
- для IE: createTextRange()
- для остальных: на форуме Ext.js нашёл маленький swf-файл, который решает задачу копипаста.
Минус (кроме кривизны подхода) - в ФФ при отсутствии Flash работать не будет.
Есть способ проще?
Насчет 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.php?title=Ext_JS_Licensing_Concerns
YUI - рулит.
Ext изначально был набором дополнительных фич к YUI.
2 Александр Скакунов:
Есть проще, причем можно сделать так чтобы не было необходимости выделять мышкой - что даже удобнее чем в остальных гридах. По двойному клику в ячейке таблицы - поле выделяется, остается только нажать ctrl+c.
Код, к сожалению, с лету не напишу, либо в понедельник выйду на работу и выложу кусок кода. Либо за выходные найду где я это видел и напишу статейку на эту тему у себя на блоге
2 Денис: заранее спасибо! Блог уже в агрегаторе, так что пеши исчо
Чесно говоря удивлен, что никто не упомянул prototype
Как же так? Ведь на нем и script.aculo.us базируется и много других библиотек.
http://www.prototypejs.org/ - для изучения..
Пользуюсь уже давно и пока очень и очень нравится.
Да чего далеко ходить - тот же WordPress использует prototype прямо в админке при создании постов и т.д. Там же и JQuery.
Кстати только что открыл главную страницу http://www.apple.com/ - и там тоже Prototype & Scriptaculous.
Врядли бы Епловцы каку юзали..
Да, не хватает для полного обзора YUI и jQuery+UI.
Prototype/Scriptaculous - замечательная штука, но немного для других целей - там нет наборов навороченных контролов, как во всём перечисленном.
Как это для других целей? Это тоже Javascript FrameWork - прочитайте тему данной статьи.
Спасибо. очень полезно
Valentyn Shybanov а можно будет как нибуть почитать ваш доклад? было бы интересно поподробней узнать про ЖВТ
Я к сожалению ещё не перевёл доклад в формат презентаций docs.google.com, но собираюсь это сделать в ближайшее время.
Обращайтесь напрямую через email, или подпишитесь на мой блог dev-crossroads.blogspot.com, где я обязательно запостю ссылку на презентацию.
Сами начинали с YUI потом переползли на ExtJS, сразу могу сказать, что единственно в чем Ext, плох так это в документации, по сравнению с YUI - там ее практически нет, но по красоте кода, ОО модели Ext рулит, написано там очень много и даже за полгода использования все еще находим новые фишки
Неплохой обзор, но соглашусь с мнением об отсутствии в нем близкого моему сердцу Prototype.js и Scrip.aculo.us.
Данный обзор не претендует на полноту. Скорее, обмен опытом и мнениями.
mygwt - тоже интересный вариант.
Смотрим здесь
http://mygwt.net/
Все это костыли
Flex будет править миром.
Во-во, недавно в PHP|Architect писали какая это цаца (причем статья была кажется от главреда журнала). Видно скоро и сам журнал переименуют
>Flex будет править миром.
Это смешно. Он не правил, и не будет. Точка.
Чтобы Точку убрать, пожалуйста, обоснования в судию.
Классная аргументация
YUI-ext фигня(по многим причинам, хоть и построен на YUI), очень не нравится + платный, всем советую юзать YUI бесплатно и классно.
Ну flex технология молодая относительно, поэтому у неё всё впереди. а по feature list для RIA очень перспективная. не зря MS её концепцию позаимствовали…
Flex - мекртворожденная технология. В нашей конторе его тоже юзали некоторое время для создания рич веб-интерфейсов, но потом плюнули на него и взяли YUI. Что же касается Ext-a, то раньше он был просто дополнением, только пару месяцев назад стал самостоятельным фреймворком. Мы даже инвестигейшн проводили в конторе, где я работаю, на тему того, какой фреймворк выбрать, сравнивали prototype, dojo, YUI, jquery и gwt. В итоге, так как проект большой и серьезный, то мы остановлись на YUI. Если же у вас проект попроще, то берите JQuery.
+1 CountZero
Больше года использую JQuery - рекомендую всем.
Личное мнение: по соотношению Возможности/Размер библиотеки - the best!
Кстати, автор библиотеки: John Resig сейчас занимает интиресную должность - JavaScript Evangelist at Mozilla Corporation
Для статистики: пользую prototype, script.aculo.us, prototype windows. Все работает на ура. Да, к сожалению, не хватает модульности - не всегда нужны все “прибамбасы”, да, для полноценных рич-интерфейсов надо собирать до кучи либы от разных производителей. Но, все отлично задокументированно, и главное, все работает
Все остальное, либо дело религии, либо вопрос технологичности процесса разработки.
кстати вспомнил еще один плюс YUI - яху ее бесплатно хостит:
http://developer.yahoo.com/yui/articles/hosting/
ну и с евангелистами у YUI тоже гораздо лучше всех остальных:
http://developer.yahoo.com/yui/theater/
ext - прекрасный framework.
Если из него убрать не используемые в продукте функции да ещё и применить сжатие при отдаче, получается смешной трафик.
По докам также притензий нет, если присутствует понятие ООП и навыки его применения.
а где собственно обзор?
можно было написать что есть еще yahooui, jquery, prototype, mootools… все они прикольные, и чего-то там могут… тоже вроде как обзор полусился
Зря утрируете:
да не зря (хотя в любом случаи спасибо за статейку). я и опыта использования не заметил…
даа? а я чегото смотрел вроде ext-all.js около 400кб
А её необязательно использовать.
ext можно собрать с необходимо функциональностью и повыбрасывать всё неиспользуемое в конкретном проекте.
ага, можно .. только там завязано все друг на друга .. по крайней мере в моем проекте я смог выкинуть тольк 100кб..
В чём собственно проблема?
Не нравиться ext - не используйте.
reach-интерфейсы сами по себе подразумевают нескромные объёмы трафика. И несколько “лишних” kb (сотен kb) ни во что не упираются. А если учесть что JS прекрасно кэшируется браузерами, то проблемы вообще нет.
Компактор кода + сжатие при отдаче = объём трафика уменьшается в 3-4 раза.
я разве говорил что не нравиться :)… это моя любимая либа … у просто уточняю про 100кб, потому что у меня больше … думал мало ли - может я чего упустил…
Использовал Yahoo YUI. Слишком много дефектов как для такой серьезной компании. Можете сами “подвигать” контролы на их сайте с примерами. У Ext.js такие явные просчеты сразу не видны.
How to choose a JavaScript framework
Почему о mootools ничего не написали? Очень мощный фреймворк и подходит для разработчиков
на разных языках. Тем более скоро выходит в свет новая версия этого фреймворка.
Рельсы ваши гавно. Теперь чтобы реализовать проект заебёшься думать - пиейчпи не модно, но стоит везде, руби-хуюби понтово, но не у всех есть, перл в унитазе устарел как жопа, питон мозг ебёт. И т.д. А ещё есть жаба, флексы-говнексы. Так мозг нахуй взорвётся в пизду! Даже выберешь ты какую-нибудь шляпу, ну и хуй с ним, всё равно потом обосрёшься - какиPHP или же игнатера, дьянго-хуянго или зопу? А шаблонизатор? Опять мозг имеем в анус - xsl круто, тока верстальщик пидор тупой. Хамл тока под руби, да ещё сырой сука, маркдавн, велосити. Блиц крут, тока компилировать надо, а хостер чмошник, хуй даст. Протухший смарти наконец. А бля, забыли, ещё нам js-фрейворк нужен! ExtJS, яхер, jQuery, мутулс, прототип… Он же на апеле самом… Понтовее всего скриптакулус, тока пидарас весит как слон ебаный.
Бляяя…….. Если это мозгоёбство и вытерпишь, то потом заниматься проектом отпадёт всё желание. Лучше пойти сисадмином чай попить в какой-нибудь конторе, чем стать парализованным педофилом, разбирая куски гавна вебдваноль.
Бомж, пиши еще, понравилось )
GWT Довольно удобный фреймворк. На http://www.on-map.ru можно посмотреть мое работающее GWT приложение ( http://www.on-map.ru/more/ ). Пока довольно простое (по разным причинам). Первое впечатление от GWT положительное….
Самая большая проблема- индексирование GWT приложений поисковиками… Похоже проблема пока не решается.
Чтобы нормально писать на GWT нужно обязательно хорошо знать спецификацию Java Servlet и опыт разработки на Java.
Для клиентской части нужно писать все на jdk 1.4 иначе будут некоторые проблемы…
Разработка на GWT не самое простое занятие… Как минимум нужно быть java кодером с не нулевым положительным опытом.
Очень слабый и дилетантский обзор…Подобных фреймворков существует множество, в частности, когда мы выбирали для себя мы вначале выбрали Dojo, но он навороченный и хаотично организованный, рассматривали GWT и т.д., но выбрали Script#. А про него у автора ничего нет, не говоря уже о многих других. Может перед тем как назвать свою статью “Обзор JavaScript-фреймворков”, надо хотя бы несколько статей на эту тему почитать?
Если есть интерес к GWT разработке можно посмотреть новые приложения/доработки на http://www.on-map.ru .
Все сделано на GWT.
Реализованa панель HTML редактора для ввода описания (можно посмотреть ролик http://www.on-map.ru/help/help.htm ).
На сервисе GoGo сделал бету поисковика http://www.on-map.ru/search/ .
Очень уж сыровато.
А как же другие фреймерки?
Да и выражение «Два главных минуса: дефолтовый дизайн - примитивный, как у всех гугловских проектов;…» меня немножко убило…
Это не должно и не может быть главным минусом.
Я писал на ExtJs пару месяцев назад WebCMF для управления сайтом. Вещь конечно хорошая, но памяти из процессора хавает — мама не горюй… Есть небольшие проблемы с работой в IE. Да и тяжеловата.
Сильно много различной мишуры, на которую и «клюнул» рядовой юзер.
Prototype сила, Mootools сила!