Всем привет! Меня зовут Иван Кузнецов, я Head of Frontend в Uzum Market. Расскажу о сложностях, с которыми мы столкнулись на пути к реализации микрофронтендовой архитектуры, и поделюсь результатами, которые мы получили в процессе пакетирования наших решений с помощью Lerna. Надеюсь, тебе, дорогой читатель, будет очень интересно :)
Привет, Хабр!
Хочу поделиться своим личным проектом (pet-project) для публикации контента с возможностью монетизации. Да-да, что-то вроде личного Boosty, Patreon или даже OnlyFans.
Главное отличие от всех подобных сервисов - он работает у вас на сервере, он Open Source и вы можете менять его по своему желанию.
Привет, Хабр! Я Женя Кучерявый, директор по фронтенду в Rentu. В этой статье расскажу как мы переезжали с Vue2 на Vue3, какие шишки набили и чему научились. Статья не хардовая.
В процессе нашей миграции на Nuxt CAPI, а потом и Nuxt 3, я очень много переосмыслял работу с контекстом как в Vue, так и в Nuxt. Как он сохраняется, на что влияет, и как можем повлиять мы.
В какой-то момент я понял, что по данной тематике крайне мало публикаций, а большинство разработчиков даже не знают, что этот контекст существует - и поэтому сами не замечают, как его теряют.
Что? Какой контекст? В setup нет this. Как его можно потерять? На что это влияет? Давайте про это поговорим.
Меня зовут Александр, я активно исследую экономические данные, строю регрессии, ML-модели. Данные использую разные: перекрёстные, панельные, временные.
По специфике своей работы часто пользуюсь ЕМИСС. ЕМИСС — это кладезь социально-экономических данных, но и одновременно платформа, которая может довести до головных болей и дергающегося глаза, а то и двух сразу.
Поставим себе, например, задачу выяснить, как влияет Х на У. Возьмём в качестве объектов наблюдения — регионы РФ. И тут нас будут ждать сюрпризы. Как быстро, не вырывая волосы из головы, получить две колонки данных за последний год по субъектам? Мы, конечно, можем использовать VLOOKUP/XLOOKUP в экселе и всё такое. Но нам встретятся обязательно двойняшки (тройняшки): «г. Москва» и «Город Москва столица Российской Федерации город федерального значения»; «Кемеровская область - Кузбасс» и «Кемеровская область — Кузбасс». Да, мелочи, но неприятно бороться с этими исключениями вручную.
В наше время чуть ли не каждое приложение использует браузерный клиент. Это просто в написании, это кроссплатформенно, это легко в использовании. Браузерные решения уже активно используются и в промышленной сфере: аналитиками, операторами.
WEB-приложения для управления промышленными платформами могут быть настолько функциональны, что вся их мощь не укладывается в один монитор, а ведь на рабочем месте может быть ни один, и ни два монитора, а даже больше пяти. Но что же делать, если окна приложений ещё и должны являться частью одной системы и предоставлять возможности удобного взаимодействия между друг другом? Эту проблему я бы и хотел осветить.
Меня зовут Дмитрий Дербин – frontend-разработчик компании «Криптонит». В данном материале я поделюсь некоторой теоретической базой по теме и краткими наработками для реализации на Vue 3 на примере простого сайта с погодой.
Друзья, привет!
Практическое понимание событий жизненного цикла компонентов даёт возможность быстро анализировать и разрабатывать бизнес-задачи. Мы разберём 7 событий жизненного цикла компонентов на примере Composition API в Vue3 фреймворке.
Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.
В этой статье c помощью простого чек листа за пару шагов выясним, являются ли функции, которые вы пишете в своем vue коде, настоящими composables
В данной статье будет показана нестандартная реализация компонентов Vue + Bitrix, которую вряд ли кто то видел и использовал.
Без NPM, без сборщиков и без костылей. Все "нативными" средствами
Рассмотрим отличие ref от shallowRef, и попробуем ответить на вопрос - когда же нужно использовать первое, а когда второе? За разъяснением обратимся к исходному коду vue3
Проверка потенциальных контрагентов на благонадёжность — неотъемлемая часть ведения бизнеса. Она нужна, чтобы эффективно управлять рисками, соблюдать должную осмотрительность, исключить репутационные риски и финансовые потери.
Мы создали систему, которая позволила оптимизировать работу по проверке контрагентов из открытых источников. Рассказываем, как она устроена.
Сегодня поговорим про SSR — что это, зачем использовать, как с этим работать, чтобы все получалось.
Что такое SSR?
SSR — это Server Side Rendering, то есть, генерация страницы на стороне сервере, а не в браузере, когда сервер отдает уже сгенерированный HTML.
Любая страница сайта или простейшая веб‑версия приложения — это HTML‑код, который отображается в браузере в виде набора визуальных элементов — текстовых блоков, изображений, ссылок и кнопок. Рендеринг — сборка html кода для браузера пользователя, из блоков кода исходного vue‑файла. Это происходит тогда, когда мы заходим на сайт — то есть, отправляем запрос на сервер, а с него получаем js‑код vue приложения, html c пустыми местами, в которые будет рендериться контент уже на стороне пользователя. И, конечно, мы хотели бы, чтобы это происходило моментально.
Отобразить сайт в браузере с уже сгенерированным HTML занимает меньше времени, чем когда код генерируется в браузере, затрачивая при этом дополнительные ресурсы пользователя. Особенно это заметно на медленном интернете или на устройствах, в которых забита память.
Для этого и существует SSR. При этом методе весь HTML‑код страницы генерируется на сервере и передается пользователю в браузер.
В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.
Мы сфокусируемся на разработке системы авторизации и управления доступом на основе ролей для фронтенда. Этот аспект веб-разработки играет ключевую роль в обеспечении безопасности приложения и определении функциональных возможностей, доступных разным пользователям.
Давайте начнем наше путешествие в мире фронтенд-разработки, изучая, как эффективно реализовывать авторизацию и управление доступом с использованием современных инструментов и лучших практик. Приготовьтесь к увлекательному погружению в мир безопасности фронтенда!
Всем привет! Мы — Иван и Даниил, ведущие разработчики компании ITFB Group. У компании два собственных продукта — ЕСМ/CSP/BPM-платформа СИМФОНИЯ (документооборот, хранение контента, архив, портал) и система распознавания/обработки документов ITFB EasyDoc. Пару месяцев назад к нам прилетела задача интегрировать ряд функций распознавания из продукта ITFB EasyDoc и оформить их в отдельный модуль платформы СИМФОНИЯ, дабы пользователь всё делал в одном месте и не дрейфовал по разным системам. Однако возникла загвоздка: СИМФОНИЯ — на React, а ITFB EasyDoc — на Vue. Для решения вопроса посерчили различные источники информации и плавно ушли в собственное творчество, поскольку не обнаружили стоящих вариантов с вменяемой технической детализацией. В какой-то момент возникло острое желание поделиться нашими итоговыми наработками на Хабре и заполнить пробелы базы знаний в интернете по этому вопросу. Всем, кому интересно увидеть наше решение, добро пожаловать под кат :-)
Так получилось, что при создании очередного проекта для своих клиентов возникла необходимость реализовать уведомления пользователей о событиях да еще ко всему прочему запилить корпоративный чат.
Проект делается на Laravel 10 на стартере Breeze Inertia + Vue.js.
Историю как я придумывал саму логику уведомлений я оставлю как-нибудь на потом, а вот о том как я распрощался с Pusher я расскажу сейчас. Вообще Pusher, конечно, сервис хороший, но если брать бесплатные лимиты, то там всё достаточно грустно, поэтому я решил использовать что‑то другое в качестве альтернативы. Выбор пал на Laravel Websockets.
Для справки, Laravel Websockets — это такая надстройка над Laravel, которая на бэке использует Ratchet, но никаких особых настроек делать не нужно, всё работает практически «из коробки». Правда есть несколько подводных камней, о которых я тоже расскажу.
Можно написать на Vue 3 какой-нибудь полезный компонент и захотеть дать возможность использовать его не только в Vue проектах, но и на любых других фронтендах. Сделать это несложно через регистрацию его как web component, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.
Данное приложение было создано для красивого и удобного показа изменений во Vue 3 проекте в его документации на VitePress. После оно было сделано универсальным, и может быть подключено в любой HTML странице как Web component или микрофронтенд.
Попробовать - https://vuesence.github.io/release-timeline/. Слева вверху можно указать любой публичный репозиторий.
VueUse - популярная библиотека, состоящая из небольших утилит и в среде Vue разработчиков, идущая как "must have" наряду с Pinia. Нисколько не умаляя вклад Anthony Fu в экосистему Vue, опишу, почему я не использую её и не рекомендую для серьезных проектов и опытных разработчиков.
Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.
