lega

youmightnotneedjquery.com - Код на jQuery и аналоги для JS

Пример, ещё так можно.

Вот тоже самое что и у Pavel Demyanenko только без js! и jQuery (но с Angular Light).
Там все просто:
al-click="tab='b'" - при клике присвоить tab='b'
al-show="tab=='b'" - отобразить блок если tab == 'b'

Вам нужно попробовать какой-нибудь MV* фреймворк, с ними проще делать сложные приложения.

Разделяйте проекты на сайты и веб-приложения (с последним думаю все понятно - одна страница, все в ней).

Но смущает, что поисковики не будут ничего видеть. Да и юзеру вроде как не комфортно, открыл страничку а там ничего, пока скрипты не отработали.

Считаю что с поисковиками проблем особо нет (phntomjs/prerenderio), а вот скорость загрузки - это существенно, поэтому я считаю что основной контент должен прилетать сразу с сервера, чтобы пользователь уже мог читать, а доп. функционал, всякие формы, кнопки, др. плюшки уже через клиентские фреймворки. Например VK, большая часть прилетает сразу, а остальное - поиск, подгрузка уже через js (хотя подгружаемые посты ренедрились на сервере).

Тесты замеряют разные действия, где-то добавление, где-то изменения, одни фреймворки быстрее в одном, другие в другом, отсюда и разные результаты.
Ещё сами тесты вызывают сомнения, например в первом тесте у Angular.js приделан setTimeout что-бы не делать перерисовку на каждой итерации + при этом сам тест запускается не асинхронно - это "читерство".
А при выполнении теста с React у меня браузер дергается (видимо из-за особого контента который выводится) - это бъёт по производительности, - возможно это было нарочно сделано. Так же каждый последующий тест работает в поле где есть "мусор" от всех предыдущих тестов - это тоже может снижать цифры.

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

PS: Если вас не затруднит, не могли бы вы сюда добавить mithril или vue для сравнения.

Дополнил про React
Я особо не копал React, у меня такие мысли - они реализовали виртуальным DOM который максимально эффективно превращает один кусок документа в другой, проблема в том что на практике это не нужно - в других фреймворках делают просто сокрытие одного куска и показ другого куска - и это работает быстрее, чем перестройка DOM. Так же я слышал заявления, что React работает быстрее за счет того что они не делают чтения из DOM - видимо они сравнивают с jQuery (и vanilla js), т.к. в других MV* фреймворках, чтения из DOM делаются не часто (или только на стадии инициализации).

Как выше сказали - большой проект разрабатывать на node.js не желательно из-за сложности (сравните 2 псевдо-примера), - будете иметь больше проблем, потратите в разы больше времени.

В большинстве случаев асинхронность нужна для 0-5% от проекта, поэтому не нужно из-за этих 5%, остальные 95% делать асинхронными.
Асинхронность нужна не везде.

Таким образом ей можно было бы подсунуть, допустим хтмл сгенерённый на сервере.

Идея интересная, можно использовать ng-init или сделать аналог, сделал пример на angular light

Likes: <span al-take-value="likeCount" al-text="likeCount">15</span>

До загрузки приложения отображает "Likes: 15", когда приложение загрузится, директива al-take-value возьмет значение элемента, когда с сервера будет прилетать информация, то текст будет обновляться с пом. директивы al-text, хотя для более сложных данных вариант с json + ng-init может быть удобнее.

Или другие библиотеки могли бы менять html, а эта библиотека работала бы с ним так же как если бы изменения сделаны были через неё.

Можно сделать спец. директивы для этого, но я думаю что это плохое решение, тем более оно не будет работать например с jquery компонентами такими как select2, там идет подмена элементов, есть реализации datepicker где нужно работать через js, и т.д.

Вы можете изменить метод после первого вызова, что-бы он отдавал результат, например так:

$scope.myFunc = function(id) {
    var result = 'loading...';
    $scope.myFunc = function() { return result };
    $http.get($scope.url).success(function (data) {
        result = data;
    })
    return result
};

а сам Angular использовать без роутинга в целях построения частей сложных интерфейсов

Можете попробовать Angular Light, он "между" Knockout.js и Angular.js, для построения "частей интерфейса" он может быть удобнее.

Вы поместили classes и get в один объект через this (например выполнив: obj = new Container(); или obj = {}; Container.call(obj);)
Когда вы будете вызывать ф-ию таким образом: obj.get(), этот obj будет передан в ф-ию как this в котором лежат classes и get (потому что вы вызываете get как бы из obj).

Так же вы можете подменить (this) если вызовете метод через call/apply: obj.get.call({}, 'simple'), в таком случае вы получите "this.classes - undefined".

Что такое prototype в javascript?

По простому, это возможность использовать объект (ф-ию/переменную) "родителя" (прототипа) если нет своего объекта.
Например вы пытаетесь вызвать ф-ию form1.echoX(), т.к. её нет будет попытка вызвать form1.__proto__.echoX(), если этой нет то form1.__proto__.__proto__.echoX() и т.д.
Как "заполнять" прототип, можете найти в "любом" учебнике по JS, так же @rock привел пример.

jsfiddle.net/lega911/cX9GR

Сейчас при каждом возврате "назад" список ререндерится.

Зачем? Его можно просто скрывать. Там скорее всего так и сделано.

Любая работа с DOM заворачивается в директивы, так же (в теории) любой jQuery плагин можно завернуть в директиву, на случай если нет готовой директивы. Не рекомендуется работать с jQuery напрямую.
Обратите внимание ещё на Angular Light, возможно он вам больше понравится.

Если не сильно критично, то можете попробовать Angular Light, он удобнее для встраивания в готовое приложение. См. 5-ый способ привязывания, он может вам подойти.

Вам нужно что-то более "высокоуровневое", например на Angular Light ваш пример работает "без js": jsfiddle.net/lega911/S6Pzx

Для Angular, в массиве нужно хранить словари вместо чисел, иначе вместо теста "update" будет "fill", это из-за того, что в простые типы нельзя поместить идентификатор и для ангулара список с числами будет каждый раз как новый, и вместо "update" сначала происходит удаление DOM, а потом "fill".
Поправил тест, для Angular.js улучилось время "updating", так же добавил тест для Angular Light:
jsfiddle.net/lega911/ZUne7