Petite-vue / forpes.ru

Главная
Petite-vue

Petite-vue +6

07.12.2021 12:56

notTGY 6 2900 Источник

Привет, эта статья - "перевод документации и часто используемых примеров" для petite-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).

Зачем нужен petite-vue?

Petite-vue это 6-ти килобайтное подмножество Vue, основной задачей которого, по словам Эвана, является Progressive Enchancement (как на пикче).

Petite-vue сильно похож на обычный Vue, в нём позаимствованы часто используемые директивы и есть возможность создавать кастомные. Синтаксис тоже напоминает стандартный вьюшный, но в силу легковесности фреймворка, довольно урезанный.

Очевидно, что petite-vue отлично получится использовать в местах, где бэкенд сам отдаёт htmlник, сгенерированный в ответ на запрос (хороший первый шаг для миграции фронта с php на что-то джаваскриптовое-SPAшное). Понять это можно из того, что фреймворк надо подключать с CDNа, и он не поставляется как сбилженный npm пакет, взаимодействие планируется через инлайн-скрипты.

Простые примеры

Пока мы ещё не начали спорить что же лучше, производительнее и выгоднее для архитектуры (ну ты же уже вроде научился не спорить о языках программирования :) ), давай посмотрим что тут можно поделать:

<script src="https://unpkg.com/petite-vue" defer init></script>
<title>Petite Vue button</title>

<body v-scope="{num: 0}">
  <button @click="num++">
    +
  </button>
  {{ num }}
</body>

Удивительно, да? Этого кода (8 sloc) вполне достаточно чтобы что-то работало.

Смотри, первая строчка

<script src="https://unpkg.com/petite-vue" defer init></script>

просто подгружает на страницу библиотеку (атрибут defer позволяет сделать это после полной загрузки htmlя, а init сообщает petite-vue, что он может начинать парсить DOM и аккуратно его менять).

Вторая строчка - просто тайтл, думаю можно скипать ;).

А вот дальше начинаются приколы: в тег body я зачем-то добавил v-scope и присвоил ему какое-то странное значение.

<body v-scope="{num: 0}">
  ...
</body>

V-scope это атририбут, который указывает Vue на этапе инициализации (да-да как раз тот init), что именно нужно инициализировать как новое приложение. Таких v-scopeов может быть много на странице и все они будут работать независимо друг от друга (ну или почти - расскажу через одну главу). Параметр, который мы передаём такой директивой - начальный стейт (состояние) приложения. Тут видно, что стейт содержит только поле num и по дефолту его значение равно 0. В стейт можно класть что угодно: функции, массивы и объекты произвольной вложенности - как обычно. Если v-scope не присвоить значение - это тоже самое, что написать:

<body v-scope="undefined">
  ...
</body>

Окей, с v-scopeом вроде разобрались, посмотрим, что там дальше:

<button @click="num++">
  +
</button>

Смотри, button это известно что, давай поймём что же это за @click. Если ты уже знаком с Vue, можешь смело скипать следующий абзац :) .

Во Vue eventы добавляются к элементам вот так: @<название eventа>. Для кнопки нам тут очевидно нужен @click. Основной прикол этих директив - возможность тут же сделать допустим @click.prevent чтобы сделать preventDefault eventу или @keyup.enter, чтобы событие срабатывало только для клавиши "enter". В качестве значения передаётся тело функции, которая будет исполнена, когда произойдёт необходимое событие, или название функции-хендлера как в обычном джаваскрипте (тоже принимает Event).

Здесь мы в качестве тела функции указали "num++", благодаря вью, в тело функции пробросится наш стейт и она вызовется с with($data){} (так, кстати этот стейт называется внутри либы, и если ты когда-то писал на полноценном вью - ловишь сейчас флешбеки). В общем да, значение num увеличится на единицу :) .

Теперь давай посмотрим на оставшуюся строку

{{ num }}

Эта строка подставляет в текущее место htmlя рассчитанное значение от того, что находится в скобках. Туда тоже пробрасывается $data, так что мы можем спокойно вывести num.

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

Todo приложение

Обычно, изучая джаваскрипт фреймворк ты создашь очередной туду-лист. Не хочу нарушать традиции :) . Приложение такого минимального скейла позволяет понять, как писать код модульно так, чтобы его потом можно было поддерживать.

Закину сразу бойлерплейт на котором всё будет держаться:

<script src="https://unpkg.com/petite-vue" defer init></script>
<title>Petite Vue todo</title>

<body v-scope="/* сейчас допишу */">
  <input v-model="model.input"/>
  <button @click="addTodo">Add Todo</button>
  <template v-for="(todo, i) of todos" :key="i">
    <div>
      {{ todo }}
    </div>
  </template>
</body>

Тут сразу же появилось очень много всего, хотя v-scope я пока по-честному так и не написал.

Из нового привлекает внимание строка

<input v-model="model.input"/>

Она рендерит input-элемент, который использует 2 way data binding с полем "model.input" в стейте. Простым языком, эта директива синхронизирует значение переменной $data.model.input со значением, написанным внутри inputа. (Тут я использовал "model.input", а не просто "input" только ради культуры кода, так как когда ты будешь делать сложную форму, моделей будет много и хорошо бы их хранить отдельным объектом).

Для кнопки я пока беру в долг завести функцию addTodo.

Дальше идёт рендер списка с помощью v-for. Тут нужно обязательно прочитать документацию по v-for во Vue самостоятельно, этот момент совпадает с оригинальным фреймворком, и сомневаюсь, что смогу объяснить это лучше.

Ну а теперь давай я допишу какой же будет v-scope и ты поймёшь, почему есть другие способы его инициализировать:

<body v-scope="{todos: [], model: { input: '' }, addTodo(){ this.todos.push(this.model.input); this.model.input = ''}}">
  ...
</body>

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

Поэтому я провёл рефакторинг и теперь файл выглядит вот так:

<script src="https://unpkg.com/petite-vue" defer init></script>
<title>Petite Vue todo</title>
<script>
  function generateConfig() {
    return {
      todos: [],
      model: { input: '' },
      addTodo() {
        this.todos.push(this.model.input)
        this.model.input = ''
      },
    }
  }
</script>
<body v-scope="generateConfig()">
  <input v-model="model.input"/>
  <button @click="addTodo">Add Todo</button>
  <template v-for="todo of todos">
    <div>
      {{ todo }}
    </div>
  </template>
</body>

Мысль очень проста - делаем глобальную функцию по генерации конфига и вызываем её там, где от нас требуют предъявить стейт для инициализации.

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

<script src="https://unpkg.com/petite-vue" defer init></script>
<title>Petite Vue todo</title>

<body>
  <div v-scope="App()"></div>

  <template id="TodoTemplate">
      <input v-model="checked" type="checkbox"></input>
      <span
        :style="checked && `text-decoration: line-through`"
      >{{ text }}</span>
  </template>
  <script>
    function Todo(props) {
      return {
        $template: "#TodoTemplate",
        text: props,
        checked: false,
      }
    }
  </script>
  <style></style>

  <template id="AppTemplate">
    <input v-model="model.input"/>
    <button @click="addTodo">Add Todo</button>
    <template v-for="todo of todos">
      <div v-scope="Todo(todo)"></div>
    </template>
  </template>
  <script>
    function App() {
      return {
        $template: "#AppTemplate",
        todos: [],
        model: { input: '' },
        addTodo() {
          this.todos.push(this.model.input)
          this.model.input = ''
        },
      }
    }
  </script>
  <style></style>

</body>

Да, тут много чего произошло...

Во-первых, теперь я инициализирую petite-vue не на body, а на "рутовом" divе с конфигом App.

Во-вторых добавились какие-то templateы и сама структура поменялась (если вдруг знаешь как выглядят .vue файлы - наверное обо всём догадался).

В-третьих, как и обещал, компоненты усложнились внутри. Теперь компонент App рисует в цикле несколько самостоятельных компонентов Todo, которые имеют свой стейт, свои обработчики событий и даже входные параметры (т.н. пропсы props).

К сожалению, для достижения такой абстракции понадобилось добавить templateы и ссылки на них из стейта в виде

$template: "#AppTemplate"

Petite-vue использует этот селектор для поиска подходящего темплейта и использует его в качестве контента элемента, на который монтируется App.

Вместо указания айдишника, можно было бы передать внутрь строку типа

$template: "<div> <h1> Hi </h1>  </div>"

Но это будет негативно сказываться на производительности (а это один из основных goalов petite-vue), потому что парсинг строки займёт больше времени, чем копирование существующих нод уже распарсенного DOMа (ну это уже из области очевидного).

Такой способ организации кода (как в "большом" Vue), мне кажется наиболее натуральным, разве что можно опустить рутовый темплейт, из-за того что он обычно используется только один раз. Не столько с целью оптимизации, сколько для более прозрачной структуры. Ну нормально.

ES modules подход

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

Это продолжение всё того же проекта с тудушками:

<title>Petite Vue todo</title>

<body>
  <script type="module">
    import { createApp, nextTick, reactive } from "https://unpkg.com/petite-vue?module"

    const store = reactive({
      allTodos: [],
    })

    function Todo(props) {
      return {
        $template: "#TodoTemplate",
        text: props.todo.text,
        id: 'todo-' + props.i,
        checked: false,
        onCheck(e) {
          const globalTodo = store.allTodos
            .find(item => item.id === props.i)

          globalTodo.checked = e.target.checked
        },
      }
    }

    function App() {
      return {
        $template: "#AppTemplate",
        model: { input: '' },
        addTodo() {
          const newTodo = this.model.input
          if (!newTodo) return
          this.store.allTodos.push({
            text: newTodo,
            id: this.store.allTodos.length,
            checked: 0,
          })
          this.model.input = ''
        },
      }
    }

    createApp({ Todo, App, store }).mount()
  </script>

  <template id="TodoTemplate">
      <input
        v-model="checked"
        type="checkbox"
        @input="onCheck"
        :id="id"
      ></input>
      <label
        :for="id"
        :style="checked && `text-decoration: line-through`"
      >{{ text }}</label>
  </template>

  <template id="AppTemplate">
    <input v-model="model.input"/>
    <button @click="addTodo">Add Todo</button>
    <template v-for="(todo, i) of store.allTodos" :key="i">
      <div v-scope="Todo({ todo, i })"></div>
    </template>
    <div v-if="store.allTodos.reduce((a, b) => a + b.checked, 0) === store.allTodos.length">
      All Completed!
    </div>

  </template>

  <div v-scope="App()"></div>
</body>

Смотри, тут большинство концептов я уже объяснил - давай разберём только новое. Как видно, мы больше не подключаем petite-vue скрипт-тегом, теперь мы делаем это в стиле ES6 import (script type="module"). Так мы импортируем функции: createApp, nextTick и reactive. Так как мы не initим скрипт, теперь это нужно делать вручную. Это делает строка

createApp({ Todo, App, store }).mount()

Внутрь этой функции мы передаём то, что я бы назвал VueGlobalObject (в исходном коде оно называется initialData, так что тут кажется норм отойти от канона ;) ). Так как ты знаешь, что снаружи script type="module" все Referenceы к переменным будут ReferenceErrorами, VueGlobalObject это объект, with с которым выполняется в аргументе v-scope. Это как $data, но влияет на весь petite-vue контекст, позволяя уйти от глобальных переменных.

Ещё, как ты мог заметить, вызывается метод .mount(). Ему можно передать параметр, чтобы ограничить контекст только на потомство какого-то элемента (без аргумента = без ограничений) например createApp().mount('#navigation').

Второе значимое изменение - store. Он создаётся как

const store = reactive({
  allTodos: [],
})

Если не слишком вдаваться - это просто глобальная переменная, обёрнутая в reactive(), которая нормально работает с petite-vue.

Если вдаваться: попробуй создать вместо этого обычную глобальную переменную и передать её также в VueGlobalObject. После этого попробуй её обновить. Её отображаемое значение не изменится. Другими словами, reactive заставляет petite-vue перерисовывать все компоненты в которых есть вхождение данной глобальной переменной. Плюс там под капотом десятки оптимизаций, которые позволяют достигать "скорость!!! я скорость!!!".

Итоги

Очевидно, что эта либа позволяет очень круто проектировать небольшие проекты/что-то с упором на progressive enchancement. Из явных конкурентов есть разве что preact, но не знаю насколько имеет смысл их сравнивать. Это как сравнивать старших братьев - Vue и React. Могу точно сказать, что petite-vue как первый фреймворк, как переезд с php на "норм фронт" и в целом как машина для адской оптимизации ttl - офигенно крутое, интересное, новое решение. Зная поддержку экосистемы Vue и особенность данного проекта, можно предсказать, что какое-то развитие там будет.

Для меня ещё остаётся открытым выбор между двумя разными подходами (ES6 modules vs original Vue), их плюсы и минусы довольно неочевидны в рамках одного index.html. Так что было бы круто узнать мнение кого-то покруче меня про это ;)

Мои примеры можно посмотреть тут.

Комментарии (6)

eshimischi
07.12.2021 14:34
#23794713
+1
Petite Vue - это не "очередной фреймворк", я бы назвал его просто Vue 3 Lite версия. Готовый Boilerplate. Из документации так же важно отметить следующее - Petite Vue Features
1. notTGY Автор
  07.12.2021 15:42
  #23794973
  Да, утверждение про фреймворк довольно расплывчатое) Так или иначе, если внедрять petite vue в какой-то проект, эта либа или останется до конца и будет определять выбор других библиотек, или быстро выпилится. Мне кажется, очень похоже на фреймворк) Boilerplate прямо офигенный ????, знал что Йохан любит Vue и tailwind, но не подозревал, что у него и для Petite что-то есть. Про фичи: к сожалению, не дописал чтобы не растягивать статью - всё это изобилие не получится уместить в одну????
  1. eshimischi
    07.12.2021 15:57
    #23795055
    Vue 3 - фреймворк, Petite Vue - его лайтовая форма, то есть он не является чем то независимым - это просто урезанная версия (до каких возможностей и какие ограничения описано как раз в разделе Features). Не путайте понятия либа/фреймворк - это важно!