Javascript фреймворки

Сегодня большинство современных сайтов не могут обходится без использование фреймворков. Фреймворки везде - и на серверной части и на клиентской.
Фреймворк - является каркасом который сам по себе ничего не делает, но дает множество инструментов для реализации конечных целей. Если не вникать в абстрактную модель, то его можно представить на примере заготовки, которую нужно допилить для ее использования на практике. На примере автомобиля можно представить так - имеется кузов с колесами и всей необходимой начинкой,  по сути автомобиль, который даже возможно движется. Но на нем отсутствует  крышка капота, руль, шильдики и еще много мелочей без которых этот автомобиль нельзя назвать автомобилем, а только заготовкой. Вот к примеру все ниже изображенные автомобили были сделаны с одной заготовки, что очень бросается в глаза. Разница лишь в том, кто как и что доделал.

В данном случае это - Fiat Croma, Lancia Thema, Saab 9000 и Alfa-Romeo 164.
Все они не только просто похожи, а даже сделаны по одинаковых проектах. Это не только упростило процесс создания, но и значительно ускорило.
Точно такая же ситуация и с созданием сайтов. С увеличением функциональности и добавлением возможностей, не у всех имеется не только нужные человеческие ресурсы но и время на создание нужного функционала. Учитывая, что технологическое развитие создает условия для усиления  функционала и многие пользуются онлайн технологиями, в некоторых случаях полностью переходя на браузерные реализации некоторых программ, таких как почтовые клиенты, видео и музыкальные проигрыватели, которые уже давно вытеснили программы с локальным воспроизведением файлов.
Многие фреймворки уже стали стандартом де-факто.

JQuery

Фреймворк известный с 2006-го года. С помощью jquery сильно упрощается работа с активными элементами страницы. Доступ к html-элементам упрощен был на столько, что практически вылился в новый стиль программирования. В место сложноперевариваемого

document.getElementById('element').style.width

теперь можно описать проще

$('#element').css('width');

Такие же полезные изменения позволили добавлять анимацию и обрабатывать события на порядок проще, к тому же и при использовании XMLHTTPRequest-ов и AJAX-а - стало проще создавать многофункциональные приложения. А дальнешее  развитие с использованием плагинов и библиотек клиентского интерфейса дало возможность фреймворку занять устойчивые позиции на многие года вперед.

JQueryUI

С помощью набора jqueryUI (user interface) - с легкостью можно использовать такие элементы как:
Accordion - позволяет создать легко раскрывающиеся блоки, чтобы сэкономить место на странице
Autocomplete - используется для создания блоков с автозаполнением
Button - позволяет создавать кнопки на странице просто
Datepicker - календари для управления датами и временем
Dialog - диалоговые окна
Menu - многоуровневые меню
Progressbar - элемент демонстрации прогресса при исполнении чего-нибудь
Slider - элемент для передвижения положения регулятора
Spinner - цифровой регулятор
Tabs - Закладки

Tooltip - простые подсказки которые можно подключить к любому элементу

GoogleWebToolkit (GWT)

Первый релиз был в 2006-м году. В основной массе дает возможность писать на Java и транслировать код на javascript. Большинство элементов представлены в java-исполнении.

Mootools

Данный фреймворк является набором объектно-ориентированных модулей.  Они позволяют управлять динамическим html-ом. Помимо множественных реализованных классов фреймворк дополнен графическими эффектами.

Modernizr

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

Prototype

 

В некоторых случаях являясь самостоятельным фреймворком, но иногда поставляется в составе script.aculo.us и Rico. Prototype.js - является инструментом управления классами и расширением DOM-модели документа.  В некоторых случаях он действительно помогает упростить код. Основная среда использования - AJAX, JSON и события элементов. В частных случаях имеет заметное сходство с кодированием с jquery.

YUI

 

Yahoo user interface - будучи очень мощным инструментом, обеспечивает как и управление классами, DOM, DHTML, событиями, так и имеет множество готовых элементов интерфейса - AutoComplete, Button, Calendar, Charts, Color, Picker, Container, DataTable, ImageCropper, Layout Manager, Menu, Rich Text Editor, Slider, TabView, TreeView, Uploader.
Помимо этого YUI обеспечивает управление на уровне CSS, что позволяет использовать и коробки многие решения и от единого издателя с уверенностью что все будет взаимодействовать. 
Пример использования AJAX - для смены содержимого элемента:

YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});

RequireJS

При использовании многих плагинов и подключенных javascript-скриптов, возникает потребность контролировать что подгружено, а что нет. И чтобы в этом навести порядок поможет данный фреймворк. Ключевая его задача подгружать только нужные javascript-ы в виде модулей. Он может использоваться с многими другими фреймворками.

Dojo

Библиотека состоит из модулей - dojo, dijit, dojox, util. Dojo - набор функций и классов уровня ядра библиотеки. Dijit - библиотека для работы с виджетами и пользовательским интерфейсом - например - меню, закладки, таблицы, 2D-рисование и анимация. Dojox - все остальное что не согласовывается с предыдущими. Util - набор инструментов для работы с документацией, оптимизацией и тестированием. В общем

require(["dojo/dom", "dojo/fx", "dojo/domReady!"], function(dom, fx){

    // The piece we had before...

    var greeting = dom.byId("greeting");

    greeting.innerHTML += " from Dojo!";

    // ...but now, with an animation!

    fx.slideTo({

        top: 100,

        left: 200,

        node: greeting

    }).play();

});

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

Backbone.js

Данный фреймворк ориентирован на работу с модулями и коллекциями.
Ключевой ценностью является его соответствие схеме программирования MVC. Богатое API - позволяет реализовать одностраничные модули без перегрузки страниц при использовании backbone.js.

ExtJS

В начале библиотека была расширением для YUI как интерфейс пользователя, но потом организовалась в отдельный проект. До недавнего времени использовала jquery, prototype и на данный момент является самостоятельной. Имеет множество заготовок для визуальных элементов как у YUI, поддерживает схему работы MVC. Одним словом многое из функционала сравнимо с YUI.
Создание графического чарта на Ext.js

var chart = Ext.create('Ext.chart.Chart', {
            style: 'background:#fff',
            animate: true,
            store: store1,
            legend: {
                position: 'bottom'
            },
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                title: 'Number of Hits',
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 1
                    }
                },
                minimum: 0,
                adjustMinimumByMajorUnit: 0
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year',
                grid: true,
                label: {
                    rotate: {
                        degrees: 315
                    }
                }
            }],
            series: [{
                type: 'area',
                highlight: false,
                axis: 'left',
                xField: 'name',
                yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
                style: {
                    opacity: 0.93
                }
            }]
        });

Enyo

 

Заключительным фреймворком, который заслуживает рассмотрения является - Enyo. Только из-за того что его использует LG - на своих Smart TV.  Являясь очень  мощным набором инструментом, он обеспечивает  управление пользовательскими элементами с использованием layout-ов, что обеспечивает результат "раз сделал - работает везде".

Не рассмотренные пока:
Reveal.js
Underscore.js
basket.js