Coding with Max Belushkin: yui

Показ дописів із міткою yui. Показати всі дописи

понеділок, квітня 27, 2009

YUI 3 революция...

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

Мотивация:
Теперь когда YUI 3 анонсировано, возникло много дискуссий вокруг дальнейшего направления библиотеки. Я как разработчик программного обеспечения был одновременно взволнован и взбешен. Взволнован, потому что вижу массу возможностей, взбешен потому что не принимаю участия в разработке библиотеки.

Хотя Yahoo позиционирует YUI 3 как основную библиотеку, все таки стабл версия остается YUI 2. Но. Многие разработчики уже начали наслаждаться теми преимуществами, которые таит в себе новая библиотека. Я слышал, что некоторые разработчики ругают YUI 3 в том, что она настолько отличается от второй версии и называют это направление ошибочным. Но я считаю, что это дает огромный стимул разработчикам совершить революцию в мире програмного обеспечения. Добиться верного результата и сделать YUI еще лучше.

В последнее время, а именно где-то 4 года, веб разработка развивается скачками. Был момент когда все встало, пока не появился новый термин - "Ajax". Это заставило разработчиков переосмыслить разработку, переписать то, что было, повысить свои требования к программному обеспечению.

Как и другие библиотеки, YUI в своей разработке руководствуется только требованиями разработчиков. Требования изменились, а почему не измениться библиотеке? Программисты YUI взяли все преимущества второй версии, соединили их с наработками и идеями, которые они желают увидеть в следующей версии ядра и начали. Результат - это лучшие моменты YUI 2 + некоторые хорошие идеи из других библиотек (из jQuery например).

Переход со второй версии на третью:
Будет ли больно перейти со второй версии YUI на третью? Да! Многие шаги при переходе будут болезненными, но революция никогда не бывает простой и мирной. Вопрос не в том, как больно перейти на YUI 3, а в том, что вы в итоге получите?

Решение разработчиков YUI было принципиальным. Ведь переписывание/дописывание старой библиотеки ведет только к разбуханию кода, поэтому было принято решение написать все заново (lol =) ). Вот в этом и есть отличие Эволюции от Революции.

Тем кто занимается разработкой на YUI 2, можно не беспокоиться, эта ветка будет также доступна на GitHub для скачивания и даже будет совершенствоваться. Так что выбор между второй и третьей веткой лежит полностью на разработчике.

Все!
Источник: NCZOnline

Связанные статьи:

четвер, квітня 23, 2009

YUI карусель за 10 минут.

Быстрое howto или как запустить javascript карусель у себя на сайте за 10 минут.

Компонент карусель был добавлен в YUI билиотеку для быстрого скролла контента на сайте в привлекательном и удобном интерфейсе. Последние тенденции показывают, что карусели все чаще становятся необходимым атрибутом каждого сайта. Конкретно В данном туториале мы расмотрим стандартную имплементацию yui библиотеки для реализации поставленной задачи.

Посмотрим?
В вашем текстовом редакторе создайте следующую html-страничку:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/carousel/assets/skins/sam/carousel.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>YUI Carousel Example 1</title>

</head>

<body class="yui-skin-sam">

<div id="scientists">

<ol>

<li><img src="img/scientists/bohr_thumb.jpg" alt="Niels Bohr"></li>

<li><img src="img/scientists/darwin_thumb.jpg" alt="Charles Darwin"></li>

<li><img src="img/scientists/einstein_thumb.jpg" alt="Albert Einstein"></li>

<li><img src="img/scientists/galileo_thumb.jpg" alt="Galileo Galilei"></li>

<li><img src="img/scientists/newton_thumb.jpg" alt="Isaac Newton"></li>

<li><img src="img/scientists/maxwell_thumb.jpg" alt="James Clerk Maxwell"></li>

</ol>

</div>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>

<script type="text/javascript"
src="http://yui.yahooapis.com/2.6.0/build/carousel/carousel-beta-min.js"></script>

<script type="text/javascript">


//create carousel control

var carousel = new YAHOO.widget.Carousel("scientists");


//render to page

carousel.render();


//display

carousel.show();


</script>

</body>

</html>

Все! Сохраните ее, только картинки сами добавьте. Карусель готова. Результат можно наблюдать на изображении.

YUI карусель

Обратите внимание на очень оригинальную YUI карусель.
Такую не везде встретишь и кто бы мог подумать, что в карусели можно сделать целый мини видео ролик!

http://public.resource.org/ntis.gov/

середу, квітня 22, 2009

Бенчмарк JavaScript Frameworks.

Привет!
Есть интересный и наглядный бенчмарк javascript фрэймворков.

Немножко перевода с источника:
Несколько месяцев назад, создатель Dojo Toolkit адаптировал SlickSpeed тест к проверке javascript фреймов, или как они справляются с наиболее типовыми DHTML задачами.

Немного о TaskSpeed.
В то время как космические корабли бороздят просторы вселенной ТаскСпид старается оценить большее количество функционала библиотек.

Цель данного меседжа: Предсказать, от какой библиотеки стоит ожидать большего перформанса когда что-то разрабатываешь в той либо иной области.

В нагрузку к каждой участвующей библиотеке добавлена колонка "PureDom" с обычным старым добрым JavaScriptом. Это для того, что бы можно было посмотреть как с задачей справляется библиотека и как обычный JS. Помоему замечательная идея.

Результаты
Вот чарт результатов с последнего браузера Microsoft IE-8:

P.S. Чем меньше тем круче.

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

Немного о том, как работает данный бенчмарк:

Каждый фреймворк запускается в отдельном iFrame, значит конфликтов между ними не возникнет;
Тест выполняется последовательно с некоторым интервалом, что бы не подвесить бравзер;
Также в каждом iFrame, где проходят тесты, кроме библиотеки, которая тестируется ничего больше нету (никакого дополнительного js);
Сss-селекторы выбраны согласно учебника.

Источник: YuiBlog