LitElement - это следующая версия Polymer 3.0. Я собирался сказать «следующая эволюция», но это было бы неправильно. А? Технически это «деэволюция». На мой взгляд, команда Polymer взяла все, что они узнали о Polymer, и разделила это до лучших частей, добавила столь необходимую выразительность в шаблонную модель и выбросила все остальное в пользу более простого и быстрого.

Когда мне следует использовать LitElement по сравнению с другим фреймворком JavaScript?

LitElement легкий, простой и поставляется с библиотекой готовых компонентов. Это позволяет вам использовать другие фреймворки поверх него. С технической точки зрения, с LitElement сложно ошибиться.

А как насчет Angular? Да, Angular великолепен. Он зрелый и проверенный. Но Angular и Polymer находятся на двух концах спектра. Работа в Angular напоминает мне J2EE, где все эти довольно сложные конструкции встроены в платформу. Что хорошего в этих конструкциях, так это то, что в среде крупного предприятия они могут значительно помочь продвижению проектов.

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

Для нашего интерфейса мы выбрали LitElement, потому что хотели, чтобы наши цели интерфейса были полностью противоположны нашим целям промежуточного программного обеспечения: высокая итерация кода, быстрое продвижение и просто быстрое.

Хватит этого - давайте перейдем к десяти основным причинам, по которым вам следует использовать LitElement в своем следующем проекте.

Причина №1: все просто и понятно

LitElement максимально приближен к стандартному JavaScript и HTML. Со стороны HTML есть минимальные проприетарные атрибуты, теги и т. Д., Поэтому готовый HTML-код выглядит… ну, нормально. Что касается JavaScript, компоненты, которые вы создаете, соответствуют синтаксису и формату стандартных модулей ES6. Это ничем не отличается от модулей, которые вы могли бы написать на Node.JS.

В качестве примера предположим, что нам нужно перебрать массив для списка.

Angular2 способ:

<ul>
 <li *ngFor=”let ticket of tickets”>
 {{ticket.Type}} ({{ticket.Status}}): {{ticket.Subject}}
 </li>
</ul>

Полимер 3 способа:

<ul>
  <template is=”dom-repeat” items=”[[tickets]]”>
    <li>
      [[item.Type]] ([[item.Status]]): [[item.Subject]]
    </li>
  </template>
</ul>

LitElement способ:

<ul>
${this.tickets.map(
  (ticket) => {
    html`
    <li>
      ${ticket.Type} (${ticket.Status}): ${ticket.Subject}
    </li>`
})};
</ul>

На первый взгляд Angular и Polymer содержат меньше строк кода и «кажутся» проще. Но так ли это на самом деле? В Angular вам нужно знать, что такое «* ngFor» и что он делает. Я буду первым, кто признает, что до сих пор не совсем понимаю, что на самом деле * ngFor делает в различных ситуациях!

То же самое и с Polymer - что такое: is = ”dom-repeat” и что он делает? Действительно, поведение dom-repeat непонятно при различных обстоятельствах. За эти удобства часто приходится дорого обходиться, когда ваше приложение выходит за рамки просто офигительно простого.

Хотя в методе LitElement больше строк кода, обратите внимание, что кроме $ {} другого проприетарного синтаксиса нет. Весь HTML - это простой HTML, а весь JavaScript - это простой JavaScript. Не требуется никаких дополнительных знаний и ничего (иногда гнусного) скрытого не происходит.

Любой, кто умеет читать HTML и JavaScript, может понять фрагмент LitElement без каких-либо знаний об Angular или Polymer.

Причина №2: выразительность

На мой взгляд, именно выразительность LitElement действительно делает кодирование во фреймворке увлекательным. Поскольку LitElement в основном использует стандартный JavaScript, встроенный в шаблон, он дает кодеру большую свободу действий, чтобы просто

«Сделай это прямо сейчас».

И, к тому же, он делает это прозрачным и читаемым способом.

Рассмотрим предыдущий пример: предположим, что ticket.Subject - это массив. Угу - что будет * ng для рендеринга? Что-то вроде [объект Object]. Так будет Полимер. Решение? В Angular вы можете использовать класс PipeTransform. Отдельный класс в отдельном файле. Начинаете напоминать вам о J2EE? В Polymer можно хотя бы вызвать функцию:

[[item.Type]] ([[item.Status]]): [[doSomething(item.Subject)]]

Это неплохой подход, но если doSomething довольно тривиален и у вас было несколько таких случаев, вы получите множество вспомогательных функций, что приведет к большой потере прозрачности.

С LitElement это простой и выразительный однострочник.

${this.tickets.map(
  (ticket) => {
    var txtSubject = ticket.Subject.join(',');
    var disp = html`
    <li>
      ${ticket.Type} (${ticket.Status}): ${txtSubject}
    </li>
    return disp;
})};

И это намного более читабельно и прозрачно, чем doSomething.

Я знаю, о чем вы думаете - это отличный рецепт спагетти-кода? Может быть, но, на мой взгляд, никакой фреймворк не помешает программисту спагетти делать спагетти!

Кстати, я провел много времени в мире J2EE со строгими методологиями и шаблонами, анти-шаблонами, четко определенными жизненными циклами bean-компонентов и т. Д., И это никогда не останавливало спагетти.

Если логика doSomething существенна и ее нужно использовать повторно, LitElement не остановит вас:

${this.doSomething(ticket.Subject}

Причина №3: ​​это быстро. Действительно, очень быстро

Я перейду к делу - разница в скорости рендеринга заметна. Разница между Polymer 3.0 и LitElement сродни разнице между сервлетом Java и статической html-страницей десять лет назад.

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

Добродетель лени: использование инкрементальности для более быстрого веб-интерфейса »

Причина №4: совместимость

LitElement прекрасно сочетается с другими фреймворками, потому что это стандартный веб-компонент es6 - ничем не отличается от любого другого веб-компонента, который вы импортируете через NPM. Вы можете использовать React и LitElement, Vue и LitElement. Redux отлично работает в LitElement.

Компоненты LitElement - это просто стандартные веб-компоненты ES6

Причина №5. Готовые готовые компоненты веб-интерфейса

Существует обширная библиотека предварительно созданных веб-компонентов, которые вы можете сразу использовать через NPM. Вы можете получить доступ ко многим из них на www.webcomponents.org.

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

Причина № 6: весь репозиторий NPM в вашем распоряжении

И Polymer 3.0, и LitElement теперь используют NPM. Различные встроенные утилиты и библиотеки, написанные на ES6, теперь можно использовать внутри LitElement.

Причина № 7: это * фреймворк завтрашнего браузера

Веб-компоненты уже здесь. Браузеры Evergreen быстро реализуют любые недостающие функции спецификаций. Пробел заполняет библиотека LitElement. LitElement - это самое близкое к написанию в стандарте веб-компонентов. Первоначальным девизом компании «Полимер» было «используйте платформу». Как в использовании стандарта веб-компонентов, который внедряется в браузеры. Тем временем, Polymer заполнил бы «пробел» полифиллами. По мере того, как поддержка веб-компонентов в современных браузерах расширяется, «разрыв» сокращается.

Написание кода в LitElement означает, что вы, по сути, пишете будущий стандарт универсально поддерживаемых веб-компонентов.

Кто не хочет, чтобы их код был ориентирован на будущее?

Причина № 8: продумайте компоненты

Компоненты обеспечивают повторное использование и ремонтопригодность. Любой компонент, который вы пишете, можно импортировать в другие компоненты - и даже в другие фреймворки, например, в React. Поскольку компонент инкапсулирует определенный набор кода, его легче поддерживать. После того, как компонент написан, его можно использовать декларативно как

<my-ticket-list status=”important”></my-ticket-list>

Это делает вещи более удобочитаемыми и интуитивно понятными. Кроме того, существует shadowDOM, который ограничивает компонент, поэтому такие вещи, как стили, не попадают в остальную часть приложения. Компоненты выгодны как в корпоративных, так и в небольших проектах.

Короче говоря, компоненты намного производительнее.

Причина № 9: односторонняя привязка данных

Если вы использовали React, не думаю, что мне нужно вдаваться в подробности? Работа с двусторонней привязкой данных в Polymer 3.0 временами просто сбивала с толку. И я был не один, мой браузер казался таким же сбитым с толку! Однонаправленный поток данных в LitElement сделал поток данных более предсказуемым и более эффективным. Двусторонний поток данных очень удобен, когда сценарий использования прост. На ум приходит простой компонент CRUD. Но как только приложение достигает определенного уровня сложности, все преимущества двусторонней привязки данных теряются из-за улавливания бесконечных граничных условий асинхронной системы.

Причина №10: вы в хорошей компании

Некоторые из крупнейших мировых компаний приняли на вооружение Polymer.

Youtube, Google, Coca-Cola, McDonald’s, USA Today, EA.com, Bloomberg, Comcast, Dominos Pizza, Victoria’s Secret, Salesforce и многие другие.

Что ж, вот и все - моя первая десятка как разработчика / архитектора о том, почему вам следует серьезно рассмотреть LitElement в своем следующем проекте.

В ближайшие недели я напишу «Git It Done!» серия практических занятий по кодированию общих шаблонов в LitElement.