Николай Воронин

Подскажите, пожалуйста, почему их всё время сравнивают в скорости?

Потому что людям нравится что-нибудь сравнивать.
Ну не могут они без этого.
Некоторые люди сравнивают тупое с острым, но некоторые на этом не останавливаются, и начинают сравнивать теплое с мягким, синее с высоким, и.т.п.

Например, напишу одну страницу с 2-3 функциями на angular и тоже самое на ember, как мне увидеть/измерить скорость?

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

Меньше DOM элементов.
Меньше вложенности DOM элементов.
Меньше ивентов
Минус jQuery
Меньше скриптов и библиотек
Меньше CSS
Минус Bootstrap и прочие тяжелые либы
Меньше repaint'ов
Меньше манипуляций с DOM
Больше оптимизации картинок
Меньше кастомных шрифтов
Если шрифты кастомные - использовать ровно необходимый charset и вырезать лишнее
...

PS: SVG на PNG не меняйте. Сомнительная экономия на спичках, а качество сильно хуже, возможностей меньше. Да и вообще "фу, прошлый век"

Ту же сеть не сбрасывайте со счетов - тот же HTTP/2 с его потоком (прощай, конкатенация) одновременно доставит в браузер все нужное, что ускорит прорисовку. А с новым server push все самое нужное вообще прилетает вместе с html. В общем, тут все связано.

Для начала select'у присвоить какое-то имя а в value каждого option'а прописать класс необходимого div'а:

<select name="doctors">
    <option disabled selected>Все специальности</option>
    <option value="pediatric-dentist">Детский стамотолог</option>
    <option value="surgeon">Хирург</option>
</select>

Не забудьте и div'ам его прописать.

<div class="item">
    <div class="doctor surgeon">
        <!-- Дальнейший код карточки -->
    </div>
</div>

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

$('[name="doctor"]').on('change', function() { 
    var selector = '.' + $(this).val();
    var chosenItems = $(selector).closest('.item');

    // Сокрытие всех блоков
    $('.item').hide();

    // Показ выбранных блоков
    chosenItems.show();
});

Не заметил, что в тэгах нет JQuery. На всякий случай продублирую на чистом JS

var toggle = document.querySelector('[name="doctors"]');

toggle.addEventListener('change', function() { 
    var chosenClass = this[this.selectedIndex].value;
    var items = document.querySelectorAll('.item');

    Array.prototype.forEach.call(items, function(item) {
        var child = item.children[0];
        var childClasses = child.className.split(' ');

        if (childClasses.indexOf(chosenClass) === -1) {
            item.style.display='none';
        } else {
            item.style.display='block';
        }
    });
});

Пример: https://jsfiddle.net/t3hy7mjr/2/

Очевидно надо было ещё задержаться на es5, чтобы подтянуть базовые вещи типа контекста :)

Отличный вопрос, а большинство ответов дурацкие. Да, до "однозначно идеальной" архитектуры коммьюнити пока не доросло, но это не значит, что не надо интересоваться тем, как можно сделать лучше и опираться на чей-то опыт.

Как раз за последнее время с появлением es2015 и webpack дела стали куда лучше, чем когда-либо.
Однако в сводобном доступе больших полноценных проектов я встречал мало, хотя может быть не так хорошо искал. Но известные примеры есть, посмотри вот —

https://github.com/andrewngu/sound-redux
https://github.com/vslinko/ripster

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

Посмотри на react-starter-kit. Там собрано очень много полезного. Хотя я и не советую вслепую брать бойлерплейты и разворачивать на них свой проект, но очень советую на них посмотреть "изнутри" и узнать много интересного или просто нового.

Посмотри на examples в react-router'е. Конкретно в примере huge-apps показывается, как можно бить вебпаком код на куски и подгружать только необходимое на лету.

Может смутить то, что во всех приведённых ссылках используется react, но для твоей цели (узнать о хорошей архитектуре приложений) это большого значения не имеет. Хотя реакт и сыграл большую роль в "компонентном" мышлении и представлении и повлиял — в хорошем, на мой взгляд, смысле — на то, какими сейчас видятся клиентские js приложения. Из большинства упомянутых проектов реакт убирается довольно легко и заменяется другой понравившейся библиотекой, а именно такая лёгкость смены технологий и является одним из критериев хорошей архитектуры.

Выразительный JavaScript. На хабре вся книга переведена