Оригинальная заметка Матиаса Питера Йохансона, переведена с разрешения автора.
Меня часто спрашивают, что я думаю о Vue.
Не буду оценивать Vue, так как я недостаточно хорошо знаком с ней, но я очень хорошо знаком с шаблонизаторами. Собственная система шаблонов Vue вместо JSX во многих статьях преподносится как причина, по которой вы должны выбрать Vue. Из-за этого я на стену лезу от негодования, потому что негативные стороны этого подхода даже не удостаиваются упоминания или обсуждения. JSX существует по достаточно веским причинам. Для меня JSX — большой шаг к упрощению и улучшению шаблонов.
Языки шаблонов часто продаются за счёт поверхностной элегантности. Недавно я наткнулся на очередную статью, восхваляющую Vue (и особенно её шаблоны). В ней был следующий пример JSX:
render() {
let { items } = this.props
let children
if (items.length > 0) {
children = (
<ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className="list-container">
{children}
</div>
)
}
В статье этот пример осуждается за многословность, а затем приводится его реализация на Vue:
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{item.name}}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
Это выглядит как лукавство со стороны автора, потому что первый пример действительно написан слишком многословно. В более лаконичном виде он выглядел бы так:
let ListContainer = ({ items }) => {
<div className="list-container">
{items.length === 0
? <p>No items found</p>
: <ul>
{items.map(item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
}
</div>
}
Я не знаю, специально ли автор вводит читателей в заблуждение, или он просто взял пример из какого-то руководства по React. Буду считать, что он взял пример из какой-то статьи. Если это действительно так, есть вероятность, что пример JSX был специально написан многословно для большей наглядности и очевидности происходящего: при изучении новых инструментов вам не нужна краткость, вам нужно простое и понятное объяснение того, как инструмент работает, без лишней магии.
Пример с Vue, однако, не особо даёт понять, КАК на самом деле он, чёрт возьми, РАБОТАЕТ. Я знаю, как работает Array.map
, но что такое v-for
и что за синтаксис используется внутри этого атрибута? Да, довольно легко понять ЧТО конкретно этот шаблон делает, потому что он читается почти как обычная речь на английском. Но когда вы на практике столкнётесь с подобными языками шаблонов, ваша продуктивность ощутимо упадёт, потому что вам придётся тратить время на изучение (и часто расширение) языка. Да, это небольшой язык, но это всё ещё язык, который придётся изучить. В случае с JSX вещей для изучения гораздо меньше, и в нём можно применять уже существующие знания и инструменты JavaScript.
Предположим для примера, что я хочу отфильтровать все элементы, которые неактивны. JSX — это просто JavaScript, поэтому я спокойно использую filter
:
let ListContainer = ({ items }) => {
<div className="list-container">
{items.length === 0
? <p>No items found</p>
: <ul>
{items
.filter(item => item.active) // <-- ДОБАВЛЕННАЯ СТРОКА
.map(item =>
<li key={item.id}>{item.name}</li>
)
}
</ul>
}
</div>
}
Как это сделать в шаблоне Vue? Честно, без понятия. Я хотел привести здесь пример, но спустя десять минут гуглинга я всё ещё не мог найти, как это делается. Конечно, можно найти, как это делается, но суть в том, что у меня УЖЕ ЕСТЬ Array.filter
! И проблема возникла ТОЛЬКО из-за того, что мы изобрели новый язык вместо использования уже существующего.
PHP-сообщество поняло это 10 лет назад, когда большинство вменяемых PHP-программистов перестали использовать Smarty, поняв, что PHP — сам по себе замечательный язык шаблонов.
Нет никакой разницы и в случае с JavaScript — он замечательно подходит на роль языка шаблонов, так что не изобретайте ещё один узкоспециализированный язык.
Многострочные тернарные условия — плохое решение, много где и кем критикуется.
Да, вёрстка в JS — совсем не магия, что вы. Всё очевидно.
А КАК на самом деле, чёрт возьми, РАБОТАЕТ
Array.filter
? Илиnew Date()
? Это часто имеет значение?А, то есть речь не про то, КАК что-то РАБОТАЕТ, а как с этим взаимодействовать! Разные вещи.
Ну, коль изучили
Array.filter
— при желании можно найти иv-for
, там не 10 страниц документации для него.И это преимущество, которое обсуждается.
Если меня посадить за ассемблер, или C#, или даже TypeScript, или JSX — моя продуктивность тоже ощутимо упадёт, потому что далее по тексту. Вывод: не беритесь на работе за то, чего не знаете, или предварительно это изучите.
Ну я не думаю, что это можно назвать "языком", скорее "синтаксис", "API".
"Меньше вещей для изучения" — не всегда лучше. Иногда изучение стоит того. Тут нужен баланс, компромисс.
Две ссылки для двух разных версий. Здесь проблема явно не в Vue и не в Google.
Конечно, если тыкнуть в первую или вторую ссылку выдачи, в зависимости от версии.
Нет, JavaScript не особо имеет отношение к шаблонам, и в данном случае вы сравниваете с JSX, что всё же "немного" другая вещь.