Я думаю много можно хвалить тот или иной фреймворк. Важно понимать что все относительно, и каждый инструмент нужно рассматривать в том или ином контексте. Я думаю самое частое применение javascript - это контентые вебсайты (frontend), где основные необходимости - это манипуляции с DOM, анимация css-свойств, асинхронные запросы и тп. Причем нередко (но все реже) применяется ненавязчивый js. Такие сайты работают при включенном расширении NoScript.
Приведу одну конкретную задачу, которая нарисовалась мне недавно.
Имеется набор таблиц. В каждой таблице есть основные строки, и дополнительные, с расширенной информацией. В целях удобства пользования необходимо скрыть расширенные строки и сделать их раскрытие/сворачивание по клику по основной строке.
Структура таблицы проста - идет основная строка, две три расширенных, далее основная, снова расширенные и тд.
Предлагаю каждому стороннику той или иной либы решить задачу своими методами. Посмотрим у кого выйдет короткий и читаемый код (вопрос производительности тут не стоит, таблиц не тысячи, а меньше десятка).
Разметка уже есть и менять ее нельзя. Таблицы помечены классом collapsible. Вот разметка:
<table class="collapsible">
<thead>
<tr>
<th></th>
<th>Тип</th>
<th>Количество пассажирских мест</th>
<th>Дальность полета (км)</th>
<th>Вместительность багажника (м³)</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
<tbody>
<tr>
<td><img src="images/planes/ececuliners.png" alt="Execuliners" /></td>
<td><span>Execuliners</span></td>
<td><span>50</span></td>
<td><span>11520</span></td>
<td><span>18.1</span></td>
</tr>
<tr>
<td colspan="2">Airbus Corporate Jetliner (ACJ)</td>
<td>43</td>
<td>11297</td>
<td>9.6</td>
</tr>
<tr>
<td colspan="2">Boeing Business Jet (BBJ)</td>
<td>50</td>
<td>11519</td>
<td>17.5</td>
</tr>
<tr>
<td colspan="2">Embraer Lineage 1000</td>
<td>19</td>
<td>7800</td>
<td>18.1</td>
</tr>
</tbody>
</table>
Первый tr внутри каждого tbody - основная строка, последующие - дополнительные, их нужно скрыть.