VueJS *

Привет, Хабр! Данная статья обязательна к прочтению всем, кто работает с Vue SSR, в частности с Nuxt. Речь пойдет об утечке памяти при использовании axios.

Предыстория

Пол года назад я попал на проект со стеком VueJS + Nuxt, его особенность была в том, что в проде постоянно умирали нодовские сервера(Nuxt) и на их места поднимались новые. По графикам и логам было видно, что оператива процесса ноды доходила до 100% и она падала с ошибкой out of memory. В это время на место убитого процесса поднимался новый, на что уходило порядка 30 сек., этого хватало, чтобы пользователи успели получить 502 ошибку. Очевидно, что где-то в коде была утечка памяти, которую нужно было найти.

Приготовьтесь написать клон сервиса по доставке еды deliveroo.co.uk используя современные технологии: Nuxt.js, GraphQL, Strapi и Stripe!

От входа до оформления заказа, мы дадим пользователям возможность открывать для себя новые рестораны, блюда и выбирать свою любимую еду.

… или знакомство с плагинами Vue JS на примере интегрированной шины событий

Пара слов о…

Всем привет! Сразу оговорюсь. Я очень люблю VueJS, активно пишу на нем уже больше 2-х лет и не считаю, что разработка на нем может причинить боль хоть в какой-то значимой степени :)
С другой стороны, мы всегда пытаемся найти универсальные решения, которые помогут тратить меньше времени на механическую работу и больше – на то, что действительно интересно. Иногда решение оказывается особенно удачным. Одним из таких я хочу поделиться с вами. 10 строк, о которых пойдет речь (спойлер: в конце их окажется немного больше), родились в процессе работы над проектом Cloud Blue – Connect, который представляет собой достаточно крупное приложение на 400+ компонентов. Найденное нами решение уже интегрировано в самые разные точки системы и вот уже более полугода ни разу не требовало правок, поэтому его смело можно считать успешно проверенным на устойчивость.

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

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



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

Пятый и завершающий пост о моём знакомстве с Vue Storefront. IMHO, самым современным с технической точки зрения решением в сфере e-commerce на данный момент. Ссылки на предыдущие посты:

• Vue Storefront: Второй подход к снаряду
• Vue Storefront: Поднимаем backend
• Vue Storefront: Заливаем данные в ES
• Vue Storefront: Импорт каталога из Magento 2

Под катом краткое описание особенностей этого этапа и итоговое резюме.

Добрый день, дорогие обитатели Хабра!

Как и следует из названия, данная статья является дополнением к написанной ранее Веб-приложение на Kotlin + Spring Boot + Vue.js, позволяющим усовершенствовать скелет будущего приложения и сделать удобнее работу с ним.

Всем привет, меня зовут Андрей Яковенко, и я веб-разработчик компании Digital Design.

В нашей компании есть множество проектов, реализованных с помощью системы управления веб-контентом sitefinity, или по-простому CMS. Причины, по которым мы ее используем, были описаны ранее в этой статье. CMS – это, как правило, Multi Page Application, и сегодня я расскажу о том, что может дать внедрение frontend-фреймворков в решения на sitefinity и как это сделать.

В 2019 году популярность фреймворка Vue невероятно сильно выросла. Количество еженедельных загрузок Vue удвоилось: в прошлом году это было 600 тысяч, а теперь это 1.2 миллиона. Долгожданная третья версия Vue, следующая итерация фреймворка, должна выйти где-то в первом квартале 2020 года.

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



Здесь я собрал некоторые советы, которые пригодятся тем, кто хочет подготовиться к появлению Vue 3.0. Надеюсь, что тот, кто последует этим советам, сможет очень быстро освоиться в новых условиях.

Всем привет! В данной статье рассмотрим разработку фронта простенького блога на Vue с использованием всех прелестей Vue включая Vuex и Router. А также поговорим про структуру приложения и работу с контейнером и роутером.

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

В 2019 году мир фронтенд-разработки, как уже бывало, развивался с головокружительной скоростью. Материал, перевод которого мы сегодня публикуем, посвящён обзору важных событий, новостей и трендов 2019 года.



А вот, кстати, аналогичный материал, опубликованный нами в 2018 году. Там, в конце, есть раздел прогнозов на 2019 год. На наш взгляд, многие из них оправдались. Не обойдётся без прогнозов и эта статья, но не будем забегать вперёд.

Как подружить проект на rest framework с vue? Можно создать в каталоге с django проектом проект на vue с помощью vue-cli. Перейдя в него и набрав yarn build, на выходите получим в каталоге dist файлы index.html и каталоги css и js. Ага, css и js можно положить в static, а из index.html сделать шаблон.

Когда все начинают знакомство с React или Vue, как с двумя самыми популярными фреймворками для frontend, конечно-же все используем магические команды npm install, npm build. И только после этого папочку 'public' Мы деплоим «куда надо».

Но есть и другой (я бы назвал его извращенный) не стандартный способ, о котором многие начинающие фронтэнд разработчики даже не знают, так как они «выросли» на npm install/build.

А что, если не нужно проводить сборку, а просто вставить js код в html?

Подождите плевать мне в лицо и бросать камни с надписью 'I love node'… Мы конечно знаем, что без сборки Мы потеряем юнит тесты, скорость, да и как быть с импортом компонентов, и иерархией файлов, да и вообще спагетти код какой-то получится…

Так для чего Вам (и Нам) это и как это работает ?

На днях к нам прилетел заказ от «бизнеса» по добавлению функционала в их BPM/ERP систему, которая по-сути является сильно модифицированным Redmine. Всё это чудо делалось довольно давно и крутится на VPS сервере с кучей helper'ов микросервисов для считывания данных производства, станков и тп. Трогать ОС нельзя…

Наконец-то получилось увидеть данные из Magento (категории и продукты) в приложении Vue Storefront (VSF). Это уже четвёртая статья (1, 2, 3), в которой я описываю процесс изучения возможностей интеграции VSF с электронным магазином на базе Magento 2, и первая, где данные из Magento проскочили в браузер покупателя.

Под катом ссылка на скрипты развёртывания и краткое описание шагов.

Одним из самых ярких событий в мире Фронтенда в этому году стала публикация репозитория Vue next — части функционала третьей версии VueJS. В этой статье представлен обзор новых killer features VueJS. На момент публикации статьи репозиторий находился в статусе Pre-Alpha. Планы на релиз можно посмотреть в Roadmap

Вместо предисловия

Vue используется во всех проектах FunCorp. Мы внимательно следим за развитием фреймворка, постоянно улучшаем процесс разработки и внедряем лучшие практики. И, конечно же, мы не могли пройти мимо и не перевести статью Филиппа Раковски, сооснователя VueStorefront, про новые фичи Vue 3, серьёзно влияющие на написание кода.


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

Ещё один пост в рамках рекламной кампании по продвижению своей реферальной ссылки. В первой и второй публикации я поднял фронт-сервер, api-сервер и два вспомогательных сервиса (Elasticsearch & Redis), которые используются api-сервером. На этом шаге я попытался залить какие-то данные из существующего Magento-проекта в моё тестовое VSF-приложение.

На третьем шаге появился некоторый прогресс. PWA-приложение в браузере перестало сообщать об ошибке и начало показывать более-менее пристойную домашнюю страничку. Пусть даже и не с теми данными, которые были в моём Magento-проекте. Любое изменение лучше, чем топтание на месте.

Под катом описание того, каким образом залить данные из своего Magento-магазина в приложение Vue StoreFront так, чтобы вместо них клиенту показывались демо-данные. Да, результат опять не очень, но для рекламной кампании это не самое главное.

Продолжаю продвигать свою реферальную ссылку на IaaS-провайдера Exostate и запиливаю вторую статью своей рекламной кампании. В первой статье я развернул и запустил приложение 'vue-storefront' как отдельный сервер, без привязки к каким-либо данным, маскируя таким нелепым образом свой коммерческий интерес в продажах сервисов Exoscale. Мои жалкие потуги были успешно вскрыты коллегой aol-nnov и я был выведен на чистую воду. Что ж, второй этап моей рекламной кампании по результату не отличается от первого — такая же страница с ошибкой:

Фронт теперь привязан к backend'у ('vue-storefront-api'), но в браузере клиента то же самое безрадостное сообщение "Something went wrong ...". Поэтому я, отбросив ложную скромность, вынес свою реферальную ссылку до ката, а всю маскировку поместил под кат — детали того, каким образом я совмещал "Vue Storefront" с "Vue Storefront API".

Одним из выступленией, заинтересовавших меня на конференции Meet Magento Baltics, было выступление Sander Mangel о возможностях применения Vue Storefront (VSF) совместно с Magento.

PWA является перспективным направлением развития в web-разработке. Разработчики Magento 2 предлагают свой набор инструментов для создания современного, мобильно-ориентированного web-приложения, соответствующего традициям Magento, а разработчики Vue Storefront пошли по пути создания универсального фронта, способного через адаптеры взаимодействовать с различными backend'ами (Magento, WooComerce, Odoo, ...). Несколько месяцев назад я попробовал PWA Studio от Magento и пришёл к выводу, что решение пока что сыровато. Демо-версия Vue Storefront произвела на меня очень хорошее впечатление и мне захотелось пощупать это решение более интимно.

Отдаю должное ребятам, подготовившим демку для развёртывания — достаточно соответствовать условиям (иметь предустановленными nodejs, yarn, docker, ...), выбрать все опции по-умолчанию в процессе установки, и можно получить на собственной машине PWA, аналогичное демо-версии. Но мне же не нужно иметь ещё одну демку, мне нужно подключить Vue Storefront к уже имеющимся у меня проектам. И вот тут начинается засада.

У Magento-разработчиков хорошее представление о мире PHP и, как правило, не очень хорошее о мире nodejs. Вещи, тривиальные для второго мира, вызывают ступор у обитателей мира первого. Под катом я описал свой второй подход к развёртыванию Vue Storefront в попытке подключить его к имеющемуся у меня проекту. Сразу скажу, что результатом второго подхода у меня является приложение не подключенное ни к чему, но хотя бы загружающееся в браузер. Очень похоже, что мне придётся сделать ещё не один подход, пока я получу желаемый результат.

С чего все началось?

Я фронтенд разработчик, но стремлюсь к развитию, решил написать fullstack приложение и стать миллионером получить бесценный опыт.

Так вот, начал планировать бэкенд, выбрал MongoDB для хранения данных, и был готов планировать структуру и связи полей.

Но столкнулся с отсутствием простого и достаточно функционального редактора схем без излишеств для NoSQL баз данных.

— Нет? Значит сделаю делов то, найти библиотеку и накидать интерфейс!
Fullstack идея была отодвинута на задний план и я начал проработку простейшего редактора схем БД.
— Наивный… – но это я понял немного позднее.