Компонент

• Функциональная единица приложения
• Инкапсулирует логику работы
• Может быть переиспользован
• Может включать в себя другие компоненты
• Работает с "узлом" DOM дерева ^*

• Календарь
• Форма
• Меню
• Контрол формы
• Кнопка

• .render
• Конструктор принимающий зависимости и опции
• Служебные методы

var BtnComponent = function(el, num, allowIncrement) {
  this.el = el;
  this.num = num;
  this.render();
  if (allowIncrement) {
    this.subscribeToClicks();
  }
}
BtnComponent.prototype.render = function() {
  this.el.innerHTML = '' + this.num + '';
}

BtnComponent.prototype.subscribeToClicks = function() {
  this.el.addEventListener('click', function() {
    this.num = this.num + 1;
    this.render();
  }.bind(this));
}

                        

• Вспомогательные фукнции и методы
• Обертка и абстракция
• StateFull / StateLess

var LsStore = function(prefix) {
  this.prefix = prefix;
} 
LsStore.prototype = {
  getItem: function(key) {
    return Promise.resolve(localStorage.getItem(this.prefix + '_' + key));
  },
  setItem: function(key, val) {
    return Promise.resolve(localStorage.setItem(this.prefix + '_' + key, JSON.stringify(val)));
  }
};
  

/* Page1Component , Page2Component , eventBus, Router, service1, service2 */
var router = new Router([
{ url: '/page1', onEnter: () => new Page1Component('.content', eventBus, service1) },
{ url: '/page2', onEnter: () => new Page2Component('.content', service2) }
], {
  eventBus: eventBus
});
                

• Выборка элементов ( расширенные селекторы ) / манипуляция DOM
• Работа с атрибутами / значениями / CSS / размерами элементов
• AJAX
• Работа с событиями / Promises
• Работа с событиями ( подписа / отписка / тригеринг )
• Анимации ^*

• Расширяемость ( много плагинов )
• Решение проблем кроссбраузерности
• Большое число примеров кода / решения
• Не изменяет стандартные объекты
• Null-object паттерн

• Работа с коллекциями/массивами
• Работа с функциями (изменение контекста/работа с аргументами ...)
• Работа с объектами ( выборка свойств, расширение и тп)
• Дополнения для строк и чисел
• Шаблонизатор и утилиты

• Визуализация данных (построение графиков/чартов)
• Анимация

• Роутинг
• MVC составляющие
• Обертка для синхронизации данных
• Событийная модель
• Работа с коллекциями

• Виджеты (календарь/ табы/ меню/ диалоговые окна / слайдеры )
• Эффекты (расширение эффектов jquery)
• Реализация drag-n-drop, resize, сортировки

• ExtJs
• Webix
• Kendo UI
• qooxdoo

• Внешний вид "под десктоп"
• Своя объектная/компонентная модель
• Не рады работе с DOM
• Задают структуру приложения