15 отличий Vue.js от React от Дениса Чернова

1) вью более предсказуемый. Он ближе к стандартам на порядок
2) vue обладает глубокой мутабельной реактивностью что в разы облегчает вход для начинающих
3) реактивность основанная на полях а не методах, что тоже более интуитивно и просто для вката
4) шаблоны имеют строгие ограничения что заставляет писать более предсказуемый флоу
5) vue это фреймворк с богатой ОФИЦИАЛЬНОЙ обвязкой, что позволяет сосредоточиться на меньшем спектре библиотек и понимать код почти любого vue проекта
6) глубокая мутабельная реактивность на основе свойств
7) слоты
8) директивы гораздо лучше решают задачи управлением флоу чем методы JS
9) HTML-совместимость (да v-for нет в самом HTML но он парсится парсером HTML и поддается обработке)
10) SFC без необходимости CSS-in-JS
11) JS-in-CSS
12) большая официальная экосистема
13) DX-ориентированность. Те если есть апишки, то они пытаются быть удобными для разработчиков
14) Экосистема растущая во вне, а не вовнутрь (мы помогаем всем - все помогают нам)
15) Хорошая расширяемость API

#vuejs #react

Ссылка на код из видео

На первом курсе университета у нас одной из задач для зачета по программированию была следующая:

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

Самое элегантное решение занимало около 5 строк. Интересно, на JavaScript такое можно?

#js #chalenge

Vite при сборке использует ES modules и ряд других относительно современных технологий. Если вам нужна поддержка старых браузеров, включая IE 11, то для этого у Vite есть плагин plugin-legacy

#vite #legacy

Codeium, всё-таки, мощь

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

Комбинация для вызова инлайн чатбота - CTRL+SHIFT+I

#codeium

Google Firebase сдался и добавил в свои сервисы SQL базу данных (облачную PostgreSQL) в форме Firebase Data Connect.

Пока в виде preview сервис можно попробовать бесплатно. Потом собираются брать плату и за саму базу, и за API доступа к ней.
Вряд ли Google с такими политиками сможет конкурировать с Supabase.

На данный момент это две основные площадки, с которыми фронтендер или мобильный разработчик может без излишних усилий сделать удобный облачный бэкенд, как без логики (с простым CRUD доступом), так и с ней (Functions, Auth), и оставаясь в рамках стандартов (не сильно привязываясь к проприетарным решениям провайдеров сервисов).

#firebase #supabase

Устоявшийся в DDD (domain-driven design) паттерн CQRS (Command and Query Responsibility Segregation) или CQS (Command and Query Segregation) - разделение команд и запросов - может сделать программу более понятной и поддерживаемой.

Смысл его в разделении логики работы с данными на часть, которая просто запрашивает данные (query), и часть, которая их изменяет (command).

Query:
- Не изменяет состояние системы. Никаких сайд эффектов
- Контекст запроса хранит нужные для её выполнения данные (пейджинг, фильтры и т.п.)
- Возвращает результат

Command:
- Изменяет состояние системы
- Ничего не возвращает
- Хорошо описывает предметную область, как действия пользователей над системой
- Контекст команды хранит нужные для её выполнения данные

Например, пользователь при регистрации вводит email, его надо валидировать и сохранить. В случае следования CQS необходимо разделить логику на две части (сделать две функции) - валидация (проверка корректности и наличия такого email уже в базе данных) и сохранение.

В аспекте Vue.js computed работает как реактивный query, watch - реактивный command

#architecture #ddd

С добрем утром, компутерщики

Vuejs Amsterdam 2019

#evanyou #video

Во Vue-FAQ добавилась статья, описывающая используемые структуры для Vue 3 проекта - Flat, Atomic, Модульная, FSD, микрофронтенды, с небольшим сравнительным анализом.

#architecture #vuefaq

#meme #js

Сегодня последний день трехдневной конференции vueconf.us в Новом Орлеане, США

Билеты на нее начинались от $900

#event

Во Vue 3 есть важная и нередко используемая конструкция, у которой нет имени. Это то, что обычно называют "композабл с глобальными рефами".

Но:
1. Это не композабл по определению
2. Там не обязательно рефы
3. Они не "глобальны"

В общем случае структура данного объекта - экспортируемые из ES модуля реактивные данные и функции для работы с ними.

Функционально они заменяют "сторы" Pinia. Называть их тоже stores двусмысленно и нелогично. Вообще, молиться на "глобальный стейт" после появления идеи JavaScript signals и их всевозможных реализаций, включая Vue Reactivity API, архаично.

Мне кажется, самое подходящее название для данной конструкции - [реактивный] бизнес объект (РБО). В них инкапсулируется логика предметной области и приложения, они не привязаны к конкретным компонентам, и по аналогии с другими языками и фреймворками, этот паттерн - Business Object - выглядит вполне подходящим.

Кроме того, позиционирование именно как "бизнес объект" будет требовать явного отделения от него инфраструктурного слоя - работы с Backend API, например. То есть, стимулировать использование лучших практик и наработок из других сфер разработки ПО, еще более переводя Vue.js из фреймворка для небольших проектов в разряд enterprise level решений.

#architecture #vuejs #reactivity #rbo #composables

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

Есть варианты на Vue 2, Vanilla JS и Web components. Может кто-то захочет проапгрейдить до Vue 3.

#pet #animation

Реакт выкатил новую экспериментальную штуку - React Compiler, которая позволяет оптимизировать React приложения.

Попробовать можно в песочнице.

#react

——-

23 мая 2024 года состоится MSK Vue.js встреча, на которой приглашенным заморским гостем выступит Денис Чернов с новыми секретами системного Vue программирования

Регистрация на митап

#event

На днях Google подарил всем Speculation API.

Позволяет предварительно загрузить и даже зарендерить любой ресурс:

<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>

Разработчик может указывать браузеру загрузить в фоне страницу, на которую пользователь с большой вероятностью перейдет. В результате она затем открывается почти мгновенно (VitePress так делает сам по умолчанию, кстати, для следующей статьи)

Наиболее эффективно для SSR (во всех смыслах) и MPA сайтов. SPA от этого сильно пользы не получат, потому как и так быстрые при переходах по сайту.

Работает в Chrome и MS Edge

Пользователи с медленным или платным интернетом аплодируют стоя.

#google #chrome #speculationapi

Сарказм в прошлом посту: "Пользователи с медленным или платным интернетом аплодируют стоя" оказался не понят.

Представим пользователя на 3G или на спутниковом интернете с раздачей через WiFi с тарифом $80 за 1Gb, который зашел на страницу, а владелец сайта сразу же не спрашивая начинает ему грузить половину своего сайта, забивая полностью канал и CPU (рендеринг же).

В презентации сотрудник Google говорит, что они посотрудничали с представителями WordPress, на котором крутится "30% всех сайтов" (его слова), и сделали плагин, который легко позволяет админам WP на первой же странице загрузить и зарендерить хоть все страницы его сайта.

По поводу перформанса он походя тоже выразился: "Ну на сайтах же обычно несколько iframe-ов есть, будет еще один"

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

Теперь такой преграды нет.

#google

Немного занимательной физики в понедельник утром, как математика помогала открывать планеты и антимиры

При наблюдениях за Ураном были замечены его отклонения от "расчетной" траектории, как будто на него оказывали воздействие другие силы, кроме известных (Солнце и остальные планеты). Через 70 лет после первого обнаружения этого математик Леверье смог сделать расчеты, по которым в нужной точке визуально и обнаружили новую планету - Нептун.

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

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

Примерно 13.7 миллиардов лет тому назад произошла глобальная аннигиляция вещества и антивещества с большой вспышкой, которая получила название Большого взрыва. Родившиеся тогда фотоны летят в пространстве до сих пор, и они называются реликтовым излучением.

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

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

#math #physics #offtop

CSS свойства width и max-width можно объединить через функцию min()

.container {
  width: 100%;
  max-width: 50em;
}

.container {
  width: min(100%, 50em);
}

#tip #css

Прошла большая конференция Google I/O
Обзор JavaScript фремворков от команды Chrome

По Vue немного прошлиcь, но упомянули, что множество реализаций JS сигналов черпают вдохновение во Vue Reactivity API

07:37 - Angular
12:20 - React
20:23 - Next.js
23:20 - Remix
27:35 - Vue.js
29:58 - Nuxt.js
32:37 - Astro
39:16 - Svelte
40:36 - SvelteKit

#event #video #google

Аспект проектирования при основных типах методологий разработки программных систем:

Каскад (waterfall) - заказчик дает четкие требования, по ним строится архитектура системы, программисты делают по ней код.

Гибкая (agile, XP, итеративная) - заказчик дает общие требования, по ним строится прототип архитектуры системы, программисты делают по ней код, систему показывают заказчику, вносятся корректировки, выпускается следующая версия и.т.д по кругу.

DDD (domain-driven design, предметно-ориентированная проектирование) - заказчик и программисты постоянно тесно работают над выработкой четкой модели предметной области, которая затем практически один в один становится скелетом архитектуры программной системы.

Каскад применяется для более-менее типовых задач и когда есть четкие требования (SRS, техзадание).
DDD увеличивает вероятность успеха при решении сложных задач, с нечеткими и меняющимися требованиями и необходимостью исследования предметной области.

#architecture

После 20 лет мучений с раскрытием "аккордеона" чистым CSS браузеры (пока только Chrome) скоро подарят нам еще один, самый естественный способ:

height: calc-size(auto);

Песочница

Функция работает аналогично calc(), но может принимать в качестве аргумента auto, min-height и аналогичные параметры.

Раньше мы уже писали о другом pure CSS варианте для аккордеона - через grid-template-row

#tip #css #accordion