VueJS *

Многие разработчики, когда дело заходит о стандартном веб функционале, например: хранение boolean значений, отлавливания нажатия клавиш или создания stepper, часто идут гуглить как сделать ту или иную функцию и чаще находят способ с реализацией функционала с полного нуля.

Приветствую! С вами Вадим, frontend разработчик компании «Перспективный мониторинг». Сегодня хочу поделиться нашей типовой структурой frontend приложения, рассказать об архитектурной методологии, которую мы используем, а также основных проблемах, с которыми нам пришлось столкнуться, и способах их решения.

У нас есть небольшой демо-проект - hba-demo-todo-app, доступный для всех желающих. Это минимальная конфигурация, далекая от реальных проектов, но для демонстрации кода я буду использовать именно ее.

Для веб-разработчика (особенно начинающего) создание собственных модулей и публикация их в open source может казаться сложным процессом. В этой статье я покажу один из самых простых и быстрых способов публикации своего модуля на NPM при помощи бандлера Vite.

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

Всем привет! Меня зовут Иван Кузнецов, я 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, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.