Записки самоучки

Февраль 22, 2007

Firebug не одинок. Инструменты отладки веб-программиста

Filed under: AJAX,CSS,DOM,Броузеры,Ссылки,HTML,JavaScript — 4matic @ 12:10 дп

Последнее время очень много приходится заниматься отладкой скриптов на клиенте. До недавнего времени в этом мне помогал только Firefox с расширением Firebug.

Мне очень нравится работать с Firebug`ом. Что-то лучшее сложно придумать. DOM с полной раскладкой всех атрибутов элементов страницы: можно проследить наследование атрибутов стилей и родственные связи, возможно просматривать информацию, которой обменивается клиент север при работе с AJAX. Так же есть возможность пошаговой отладки JS. Мне очень нравится возможность редактирования страницы прямо в броузере. Да еще много чего — нужно просто установить и получать удовольствие от пользования.

Не так давно «проснулась» Opera. В очередной недельной сборке, а точнее, начиная с версии 9.2 в броузере появился инструмент Developer Console. Аналог FireBug, но только для Opera, но функционал скуднее. Этим инструментом еще толком не пользовался, поэтому что-то внятно-сравнительное не могу сказать.

Немного погугилив нашел похожий инструмент и для IE. Называется этот инструмент Internet Explorer Developer Toolbar. Фукнционал крайне аскетичен и проигрует Opera, но это лучше, чем конь в ваккууме.

Что еще полезно и чем пользуюсь:

  • ieHTTPHeaders — надстройки для IE. Позволяет просматривать заголовки, которыми обменивается клиент с сервером при получении страницы или XMLHttpRequest.
  • LiveHTTPHeaders — расширение для Mozilla, аналогичное по функционалу ieHTTPHeaders.
  • Web Developer Extension — расширение для Mozilla, которое помогает получить детальное представление о странице.
  • Font Finder — расширение для Mozilla, с помощью которого можно получить список атрибутов CSS выделенного фрагмента.
  • HTML VALIDATOR (based on Tidy and OpenSP) — расширение для Mozilla, которое позволяет проверять валидность сверстанных страниц.
  • FirePHP — пока что для меня темная лошадка. Буквально на днях нашел и повода познакомиться ближе не было. Привык работать связкой <pre> + var_dump() + exit().

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

Ноябрь 9, 2006

Какой JS-фреймворк выбрать?

Filed under: AJAX — 4matic @ 5:52 пп

В продолжение предыдущей темы возник вопрос. Какой фреймворк мне подойдет? Выбираю из двух jQuery и Prototype. По каким критериям мне его выбирать, при том, что я не знаю четко, по каким критериям выбирать, то что собираюсь изучать. Классический вопрос о курице и яйце. Как я уже заметил в своих комментариях — нет сравнительной таблицы по свйоствам и функционалу основных фреймворках. Чего хочу от js-фреймворка для своего проекта:

  1. Кроссброузерность. Ориентируюсь на новые распространенные броузеры. Хоть броузеры и новые, но объектные модели — старые разные.
  2. Легковесность. Чем меньше обмен трафиком, тем лучше всем: начиная от нагрузки на мой сервер и канал и заканчивая клиентом. Мой проект подразумевает достаточно большое количество кликов запросов страниц.
  3. Поддержка разработчиков. Должна вестись постоянная работа по оптимизации и доработке.
  4. Документируемость.
  5. Распространенность. Чем распрострененней, тем больше шансов найти заметки о проблеме, с которой столнешься при работе. Не решение будет качественным, другой вопрос, что решение может подтолкнуть к правильному пониманию и корректному решению.

Думаю, что я перечислил основные критерии, по которым выбираю. Я не озвучивал моменты типа «удобство использования», «корректность реализации», «функциональность и расширяемость» и т.д., потому что этими вопросами может задаваться тот человек, который уже в достаточной мере владеет вопросом.

Вот все таки правильно, что бы ответить на вопрос, нужно разложить все по полочкам. Список я построил в порядке важности для меня. Проанализируем.

  1. Кроссброузерность у обоих фреймворков одинаковая.
  2. Легковесность. Не могу сказать что массы фреймворков сильно отличаются. JQuery может как-то упаковывается, и ранние версии в базе не имели возможность работать с объектом XmlHttpRequest — нужен был плагин. Кстати в Prototype уже есть в базе то, что в jQuery идет в качестве плагина. Последняя версия JQuery 1.0.3 вроде бы уже работает с объектом XmlHttpRequest и весит неупакованная под 65к. Ясное дело, что есть комментарии, ненужные символы. JQuery можно скачать упакованным (около 15к) и не упакованным около (65к). Упаковка происходит с помощью какой-то утилиты, которая, как говорит мой знакомый есть на сайте. Еще раз повторюсь вопрос веса вопрос немного специфический: можно попробовать упаковать и Prototype и посмотреть на вес, но пока что утлиты по упаковке не нашел.
  3. Поддержка. Думаю, что одинаковая.
  4. У Prototype благодаря его поклонникам неплохая Википедия, а JQuery мне не понравилась реализация документации: вроде бы все есть и в тоже время все как-то запутанно и неудобно. С выходом последней версии JQuery, как я понял, объектная модель не актуальна, кстати подобная визуализация есть у Prtotype.
  5. Prototype распространенней: часто вижу объявления от работодателей, где одним из требований указывается «знание Prototype». Тот же WP использует Prototype. И не нужно рассказывать про 1Г леммингов, которые ничего не понимают. Да, я не понимаю, но я хочу понять, что есть, что бы потом понимать, как правильно и неправильно.

Что дал анализ. То, что выбор из двух вариантов будет основываться на субъективных факторах и на мнениях окружающих. Пока что я усышал два мнения окружающих в пользу jQuery и прочитал на некоторых форумах положительные отзывы о Prototype. Т.е. нет качественного повода, что бы выбрать один или другой фреймворк. А, может, проблема в том что фреймворки одинаковые и все дело в привычках и вкусах программиста? Очередной холивар из области что лучше: PHP vs Perl, Linux vs Windows.

Интересно, а с какими js-фреймворками вы работаете, и почему вы выбрали именно этот js-фреймворк?

Update: Чем больше читаю заметки, общаюсь и анализирую, тем больше склоняюсь к jQuery, потому что чаще слышу слова «легче», «функциональней», «собрал лучшее из существущего». Мешает тот факт, что с Prototype уже начал разбираться на примере WP, даже страницу тестовую оживил.;) Нужно попробовать с jQuery.

Ноябрь 8, 2006

Начинаю изучать Ajax

Filed under: AJAX — 4matic @ 12:47 пп

Не прошло и 10 лет, как я начал изучать Ajax. Действительно начал изучать. До этого я читал только обзорные статьи и имел поверхностное представление о технологии. Думаю, что это было связано с тем, что объект XMLHttpRequest, который является ключевым при работе с помощью Ajax, был не достаточно хорошо распространен на клиентах. Сейчас, анализируя, статистику посещаемости некоторых ресурсов я заметил, что практически у всех посетителей броузеры достаточно свежих версий и со включенной поддержкой JavaScript. Плюс проект, над которым я работаю станет намного привлекателней в плане функционала и юзабилити, когда я начну использовать данную технологию.

Я читал статью Котерова по его фреймворку. Статья достаточно поучительная и наглядная. Но от использования решения Котерова я отказался в пользу другого фреймворка — Prototype. Скорее всего потому что этот фреймворк достаточно фукнциональный при относительно малом весе. Так же функционал фреймворка расширяется с помощью script.aculo.us. На базе этого фреймворка постараюсь лучше понять завороты программирования на JavaScript. Минус фреймворка в том, что он не документируется разработчиками. Вместо разработчиков его документируют сами пользователи фреймворка. Документации достаточно для понимания основных моментов — остальное будем понимать из кода.

Кстати еще одним вариантом фреймворка, на который я обратил внимание был jquery. Он легче Prototype, но чуть менее функционален и не так распространен.

Рыская по сети в поисках информации о технологии Ajax набрел на сайт IBM. Там, специально для таких как я — плохо понимающих английский язык есть раздел сайта developerWorks Россия. В этом разделе достаточно много статей по Ajax, XML и др. на русском. Рекомендую посетить.

Offtop: Пока писал заметку в блог FF сообщил об обновлении до 1.5.0.8. Т.е. ветка Лисы 1.5 жива. Интересно, как долго будет поддержка ветки 1.5?

Создайте бесплатный сайт или блог на WordPress.com.