понедельник, 3 сентября 2012 г.

Vanilla JS framework

Vanilla JSVanillin

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

Introduction

The Vanilla JS team maintains every byte of code in the framework and works hard each day to make it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few:
  • Facebook
  • Google
  • YouTube
  • Yahoo
  • Wikipedia
  • Windows Live
  • Twitter
  • Amazon
  • LinkedIn
  • MSN
  • eBay
  • Microsoft
  • Tumblr
  • Apple
  • Pinterest
  • PayPal
  • Reddit
  • Netflix
  • Stack Overflow
In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined.

Download

Ready to try Vanilla JS? Choose exactly what you need!

Options

Final size: 0 bytes uncompressed, 25 bytes gzipped.

Testimonials

Vanilla JS makes everything an object, which is very convenient for OO JS applications.

Getting Started

The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS loaded into memory before it even requests your site.
To use Vanilla JS, just put the following code anywhere in your application's HTML:
  1. <script src="path/to/vanilla.js"></script>
When you're ready to move your application to a production deployment, switch to the much faster method:
  1.  
That's right - no code at all. Vanilla JS is so popular that browsers have been automatically loading it for over a decade.

Speed Comparison

Here are a few examples of just how fast Vanilla JS really is:

Retrieve DOM element by ID


Codeops / sec
Vanilla JSdocument.getElementById('test-table');
12,137,211
 
Dojodojo.byId('test-table');
5,443,343
 
Prototype JS$('test-table')
2,940,734
 
Ext JSdelete Ext.elCache['test-table']; Ext.get('test-table');
997,562
 
jQuery$jq('#test-table');
350,557
 
YUIYAHOO.util.Dom.get('test-table');
326,534
 
MooToolsdocument.id('test-table');
78,802
 

Retrieve DOM elements by tag name


Codeops / sec
Vanilla JSdocument.getElementsByTagName("span");
8,280,893
 
Prototype JSPrototype.Selector.select('span', document);
62,872
 
YUIYAHOO.util.Dom.getElementsBy(function(){return true;},'span');
48,545
 
Ext JSExt.query('span');
46,915
 
jQuery$jq('span');
19,449
 
Dojodojo.query('span');
10,335
 
MooToolsSlick.search(document, 'span', new Elements);
5,457
 

Code Examples

Here are some examples of common tasks in Vanilla JS and other frameworks:

Fade an element out and then remove it

Vanilla JSvar s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none":setTimeout(arguments.callee,40)})();
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script>

Make an AJAX call

Vanilla JSvar r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>

Further Reading

For more information about Vanilla JS:
When powering your applications with Vanilla JS, feel free to use this handy button!
Автор: на Комментариев нет:

Vanilla JS

Vanilla JS — очень мощный javascript-фреймворк.

Кто использует Vanilla JS?

Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow. Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.

На сайте вы можете скачать фреймворк, выбрав нужную вам функциональность:
- DOM (Манипуляции / Селекторы)
- Прототипная система объектов
- AJAX
- Анимации
- Система событий
- Регулярные выражения
- Функции как объекты
- Замыкания
- Библиотеку математических методов
- Библиотеку для работы с массивами
- Библиотеку для работы со строками

Плюс можете настроить вашу сборку:
- Сжать исходники
- В кодировке UTF8
- Использовать «CRLF» переносы строк (Windows)

При максимальной комплектации фреймворк будет весить:
- несжатый: 0 байт
- сжатый: 25 байт

Установка Vanilla JS

Команда Vanilla JS гордится тем фактом, что это самый лёгкий фреймворк всех времён; используйте нашу стратегию выкладки на продакшн, и браузеры ваших пользователей загрузят Vanilla JS в память ещё даже до того, как начнут загружать ваш сайт.

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

<script src="path/to/vanilla.js"></script>


Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:

Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.

Сравнение скорости работы VanillaJS с другими фреймворками

Поиск DOM-элемента по ID


Фреймворк Код Оп.\сек
Vanilla JS 
document.getElementById('test-table');
 12,137,211
Dojo 
dojo.byId('test-table');
 5,443,343
Prototype JS 
$('test-table')
 2,940,734
Ext JS 
delete Ext.elCache['test-table']; Ext.get('test-table');
 997,562
jQuery 
$jq('#test-table');
 350,557
YUI 
YAHOO.util.Dom.get('test-table');
 326,534
MooTools 
document.id('test-table');
 78,802

Поиск элементов по названию тэга

Фреймворк Код Оп.\сек
Vanilla JS 
document.getElementsByTagName("span");
 8,280,893
Prototype JS 
Prototype.Selector.select('span', document);
 62,872
YUI 
YAHOO.util.Dom.getElementsBy(function(){return true;},'span');
 48,545
Ext JS 
Ext.query('span');
 46,915
jQuery 
$jq('span');
 19,449
Dojo 
dojo.query('span');
 10,335
MooTools 
Slick.search(document, 'span', new Elements);
 5,457

Примеры кода

Плавно скрыть элемент

Vanilla JS 
var s = document.getElementById('thing').style;
s.opacity = 1;
(function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();
jQuery 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script> $('#thing').fadeOut();</script>

AJAX-вызов

Vanilla JS 
var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");
jQuery 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $.ajax({
    type: 'POST',
    url: "path/to/api",
    data: "banana=yellow",
    success: function (data) {
      alert("Success: " + data);
    },
  });
</script>


Автор: на Комментариев нет:
Подписаться на: Сообщения (Atom)