VueJS *

Меня зовут Александр, я активно исследую экономические данные, строю регрессии, 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.

Всем привет! Это вторая статья из цикла статей о разработке приложений в нашей компании. В первой статье я рассказал Вам про общую архитектуру некоторых наших проектов. В данной статье хочется описать наши варианты решения часто встречающихся задач в рамках Django + Vue приложения.

Мне не раз попадались такие проекты, от кода которых берет оторопь. Такое чувство, что сами авторы не смогут объяснить - почему у них все выглядит именно так. В этот момент у меня возникает вопрос: как так получилось? Если вас он тоже волнует, то могу пожелать лишь приятного чтения.

Всем привет!
Мы продолжаем строить собственный SSO Server. Сегодня мы детально разберем Vue.js приложение, а также спроектируем и реализуем долгожданные механизмы регистрации и сброса пароля. Как всегда, дополнительно мы разберём ряд интересных общесистемных решений, которые наверняка Вам пригодятся в дальнейшем.

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