Относительно неплохой список технологий и практик современного фронтенда
https://roadmap.sh/frontend

Роадмап по Vue.js у них не очень

#frontend #roadmap

Если попытаться использовать vue-router в js/ts модуле или composable функции,

import { useRouter } from "vue-router";

function foo() {
    const router = useRouter();
}

то выходит ошибка:

[Vue warn]: inject() can only be used inside setup() or functional components.

Это потому, что vue-router, Pinia, PrimeVue.Toast и многие другие библиотеки используют provide/inject для глобального внедрения своих элементов в ваше приложение.

// vuejs/packages/router/src/useApi.ts

export function useRouter(){
    return inject(routerKey)
}

В то же время, provide/inject во Vue работает только в контексте приложения.

Чтобы использовать vue-router в js модулях приходится создавать отдельный синглтон для router, инициализировать его через createRouter() и затем использовать обычный ES импорт где надо. Почему вместо стандартного ES экспорта/импорта сделано такое усложнение через provide/inject не совсем понятно.

Тем не менее, текст вышеуказанной ошибки не совсем корректен, потому что доступ к inject() можно получить явно выполнив код в контексте приложения:

// plugins/debug.ts
import { useRouter } from "vue-router"

export default {
    install(app) {
        app.runWithContext(() => {
            const router = useRouter();
            router.addRoute({ "/debug", () => import('@/views/DebugView.vue') });
        })
    }
}

Это удобно при создании, например, плагинов, когда доступа к своему синглтону router еще нет.

Кстати, на Хабре недавно была большая статья про контексты Vue и Nuxt

#tip #provide #router

Эван выбрался из своего Сингапура на Accel Open Source конференцию и гуляет по Сан-Франциско перед отъездом домой.

Сильно понравился нижний коммент.

#evanyou #vercel

Эта картинка на Реддите в r/vuejs за три дня набрала столько лайков, что вошла в топ 2 материалов за весь год и уже подбиралась к первому месту, как её забанили...

#meme #reddit #react #vuejs

На этих выходных Vue Mastery опять устраивает бесплатный показ своего кено.

#vuemastery #learning #video

Добавьте две фигурные скобки, чтобы сделать логирование более информативным

#tip #js

Для меня Hoppscotch вне конкуренции, но, всё-таки, сравнительная таблица инструментов для работы с web API.

#api #hoppscotch #postman

JavaScript по популярному рейтингу Tiobe обогнал Visual Basic в этом году

Tiobe просто подсчитывается количество результатов поисковых движков по каждому языку программирования.

Более объективный StackOverflow Annual Survey показывает совсем другие результаты

#lang #js

Новости искусственного интеллекта

CEO компании Bumble (онлайн приложение для знакомств типа Тиндера) рассказывает о планах по использованию в этой сфере AI.

Твой AI помощник по свиданиям будет встречаться вместо тебя с AI помощником по свиданиям другого человека и давать оценку успешности возможных реальных отношений. Как бы решая проблему 600 откликов на твою фотку.

Забавно, жутко, но не лишено смысла.

#ai #offtop

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