Все потоки
Поиск
Написать публикацию
Обновить
16.58

VueJS *

Прогрессивный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Несколько простых, но полезных советов по работе с геттерами в Vuex

Время на прочтение3 мин
Количество просмотров11K

Vuex предоставляет удобные инструменты для работы с данными, но некоторые разработчики используют их не всегда по назначению, либо создают избыточные конструкции там, где можно было написать более понятно и ёмко, такое также случается, когда разработчик только знакомится с данными инструментами. В данной статье будут приведены некоторые рекомендации по организации геттеров (Getters), которые вы сможете применить в работе.

Читать дальше →

Практический пример использования render-функций Vue: создание типографской сетки для дизайн-системы

Время на прочтение13 мин
Количество просмотров22K
В материале, перевод которого мы сегодня публикуем, речь пойдёт о том, как создать типографскую сетку для дизайн-системы с использованием render-функций Vue. Вот демонстрационная версия проекта, который мы будем здесь рассматривать. Здесь можно найти его код. Автор этого материала говорит, что использовал render-функции из-за того, что они позволяют гораздо точнее контролировать процесс создания HTML-кода, чем обычные шаблоны Vue. Однако, к своему удивлению, он не смог найти практических примеров их применения. Ему попадались лишь учебные руководства. Он надеется на то, что этот материал изменит ситуацию в лучшую сторону благодаря тому, что здесь приводится практический пример использования render-функций Vue.

Читать дальше →

Как я сделал удобной разработку на Vue.js с server-side рендерингом

Время на прочтение10 мин
Количество просмотров38K
Всем привет!

Начну с небольшой предыстории.

Свой новый проект я решил попробовать сделать на Vue.js. Мне нужен был серверный рендеринг (SSR), CSS модули, code-splitting и прочие прелести. Разумеется, для повышения производительности разработки нужна была горячая перезагрузка (HMR).

Я не хотел использовать готовые решения, типа Nuxt.js, т.к. при разрастании проекта важно иметь возможность кастомизации. А любые высокоуровневые решения, как правило, не дают этого делать, или дают, но с большими усилиями (был похожий опыт с использованием Next.js для React).

Основная проблема локальной разработки при использовании серверного рендеринга и горячей перезагрузки состояла в том, что мало запустить один webpack-dev-server. Мы должны также что-то сделать с исходниками, которые запускает Node.js, иначе при следующей перезагрузке страницы мы получим код, который не был обновлен на сервере, но обновился на клиенте.

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


Читать дальше →

Всё, что нужно для начала работы с Vue.js

Время на прочтение13 мин
Количество просмотров121K
Скорее всего, вы, читая эти строки, уже слышали о JavaScript-фреймворке, который называется Vue. Если вы собирались его опробовать, но не очень хорошо представляли себе то, с чего вам стоит начать, значит — этот материал написан специально для вас. Его автор говорит, что хочет рассказать о том, почему ему очень нравится Vue. Кроме того, он собирается представить всем желающим 4 способа написания первого приложения на Vue.



В конце этого материала, вы найдете ссылки на целый курс по Vue.js.
Читать дальше →

JavaScript: Создание простого MEVN-приложения

Время на прочтение19 мин
Количество просмотров33K

О чем статья


Цель этой статьи — показать, как можно создать базовое MEVN-приложение. Акроним MEVN
означает — MongoDB + Express.js + Vue.js + Node.js. В качестве примера будет написано
одностраничное приложение, которое содержит форму, состоящую из нескольких текстовых
полей. При заполнении формы и отправке данных, сервер будет записывать их в базу данных, а
клиент редиректить на страницу “Спасибо”.

В качестве операционной системы используется Ubuntu 18.10, установка всех компонентов будет
указана относительно нее.

Необходимые требования


  • Знания HTML, CSS;
  • Базовые знания JavaScript.

Что имеем на выходе


  • Полноценное Fullstack-приложение;
  • CRUD операции и REST API при помощи Express.js;
  • Подключение к MongoDB.
Читать дальше →

Темный день для Vue.js

Время на прочтение6 мин
Количество просмотров81K

Сегодня я был изумлен тем, как обычно позитивное и дружелюбное сообщество Vue.js скатилось в печальное противостояние. Две недели назад создатель Vue Эван Ю опубликовал предложение (RFC) с новым функциональным API для компонентов в грядущем Vue 3.0. Сегодня критическое обсуждение на Reddit и аналогичные комментарии на Hacker News вызвали наплыв разработчиков в изначальный RFC с возмущениями, порой даже чересчур резкими.

Читать дальше →

5 чрезвычайно простых способов ощутимо повысить скорость вашего VueJS-приложения

Время на прочтение4 мин
Количество просмотров14K
Здравствуйте. Перевод данной статьи подготовлен специально для студентов курса «Разработчик JavaScript», который стартует уже на следующей неделе.


Голос Чуи

Немного обо мне — меня зовут Вайбхав, я из Five2One. Я вовлечен во VueJS уже целых 2 года (с момента выхода 1.0) и в основном помогал создавать/обучать 3 из крупнейших кодовых баз VueJS в Сиднее. Этот код служит миллионам людей, поэтому моя задача — не просто создавать масштабируемые паттерны кода, а еще и в значительной степени заботиться о его производительности.

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

Давайте перейдем прямо к делу — поговорим о некоторых простых способах повышения производительности вашего приложения VueJS.
Читать дальше →

Концепты VueJS для backend разработчиков — мастер-класс 22 июня

Время на прочтение2 мин
Количество просмотров4.2K
22 июня в конгресс-центр «Альфа» пройдет мастер-класс «Концепты VueJS для backend разработчиков»

Ведущий — Сергей Рябенко имеет пятнадцатилетний опыт коммерческой разработки в различных ролях. Работал разработчиком в LinguaLeo и Head of Engineering в SalesLift. Последний год переключился с бэкэнда на фронтэнд и наконец-то начал считать себя full-stack разработчиком. На данный момент проводит онлайн и оффлайн мастер классы по VueJS и TDD в PHP.

Важные концепты, которые обходят стороной в популярных туториалах, но необходимые для избежания многих граблей. Многие бэкэнд разработчики уже пробовали изучать VueJS или React, но после небольшого перерыва приходилось изучать все заново. Прослушав данный мастер класс вы сможете очень быстро перестать подглядывать в документацию и начать делать сложные frontend приложения.

Сегодня VueJS — один из самых простых и мощных JavaScript фреймворков. Каждый разработчик может начать работать с ним просто прочитав отличную документацию, но чтобы писать действительно сложные проекты нужно хорошо понимать как он устроен внутри.
Читать дальше →

DevOps в разработке: автоматизация написания кода веб-приложений

Время на прочтение12 мин
Количество просмотров13K
Доброго времени суток, уважаемые Хабражители!

Сегодня DevOps находится на волне успеха. Практически на любой конференции, посвященной автоматизации, можно услышать от спикера мол “мы внедрили DevOps и тут и там, применили это и то, вести проекты стало значительно проще и т. д. и т. п.”. И это похвально. Но, как правило, внедрение DevOps во многих компаниях заканчивается на этапе автоматизации IT Operations, и очень мало кто говорит о внедрении DevOps непосредственно в сам процесс разработки.

Мне бы хотелось исправить это маленькое недоразумение. DevOps в разработку может прийти через формализацию кодовой базы, например, при написании GUI для REST API.

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

Надеюсь данный материал будет вам интересен и полезен.

Ну что ж, начнем!
Читать дальше →

VueJs + MVC минимум кода максимум функциональности

Время на прочтение16 мин
Количество просмотров17K

Добрый день.


Я много лет использовал WPF. Паттерн MVVM наверное один из наиболее удобных архитектурных паттернов. Я предполагал что MVC почти то же самое. Когда я на новом месте работы я увидел использование MVC на практике, то был удивлен запутанностью и одновременно отсутствием элементарной Юзабилити. Больше всего раздражает то, что валидация происходит только при перегрузке формы. Нет красных рамок подсвечивающих поле в котором ошибка, а просто выводится alert со списком ошибок. Если ошибок много, то приходится исправлять часть ошибок и жать сохранить, что бы повторить валидацию. Кнопка сохранить всегда активна. Связанные списки правда реализованы через js, но сложно и запутанно. Модель, представление и контроллер сильно связаны поэтому протестировать все это великолепие весьма сложно.
Как с этим бороться ?? Кому интересно прошу под кат.

Читать дальше →

Логи фронтенд-разработчика Хабра: рефакторим и рефлексируем

Время на прочтение9 мин
Количество просмотров15K


Мне всегда было интересно, как устроен Хабр изнутри, как построен workflow, как выстроены коммуникации, какие применяются стандарты и как тут вообще пишут код. К счастью, такая возможность у меня появилась, ведь недавно я стал частью хабракоманды. На примере небольшого рефакторинга мобильной версии попробую ответить на вопрос: каково это — работать тут фронтом. В программе: Node, Vue, Vuex и SSR под соусом из заметок о личном опыте в Хабре.
Читать дальше →

Прокачиваем разработку на Vue с помощью паттернов: HOC

Время на прочтение3 мин
Количество просмотров27K

Паттерн HOC (Higher Order Component) очень популярен у React-разработчиков. А вот Vue-разработчики его как-то обходят стороной. Очень зря. Попробуем разобраться в этом.

Еще одна система мониторинга

Время на прочтение6 мин
Количество просмотров8.4K


Суммирование скорости на 16-ти модемах 4-х сотовых операторов. Исходящая скорость в один поток — 933.45 Мбит/с


Введение


Привет! Это статья про то, как мы написали для себя новую систему мониторинга. От существующих она отличается возможностью высокочастотного синхронного получения метрик и очень маленьким потреблением ресурсов. Частота опроса может достигать 0.1 миллисекунды с точностью синхронизации между метриками в 10 наносекунд. Все бинарные файлы занимают 6 мегабайт.

Читать дальше →

Ближайшие события

Пишите меньше кода

Время на прочтение5 мин
Количество просмотров31K

Хайп по Svelte после недавнего релиза 3 версии фреймворка всё-таки имеет место быть, чему свидетельствуют сильно возросшее комьюнити и огромное количество вопросов как в официальном чате, так и в нашем рускоязычном telegram-канале. Всё больше разработчиков украдкой или всерьёз присматриваются к этой технологии и задумываются о её применении в своих новых проектах. Для этих разработчиков и всех прочих интересующихся темой максимально эффективного написания кода, Rich Harris, автор и идеолог фреймворка, опубликовал статью о том, как Svelte помогает разработчику минимизировать усилия при создании современных реактивных web-приложений, перевод которой я и предлагаю ниже.

Читать дальше →

Повышение эффективности ручного тестирования на VueJS

Время на прочтение3 мин
Количество просмотров5.5K


Сегодня я предлагаю затронуть вопрос ручного тестирования проектов на VueJS.

Независимо от уровня автоматизации процессов тестирования, практически всегда остается “живое общение” тестировщика с будущим релизом. Естественно, что оно должно быть комфортным и эффективным.

В своих проектах на VueJS мы внедрили простые, но эффективные решения, которые значительно облегчили жизнь нашим тестировщикам. Ими я и хочу с вами поделиться.
Читать дальше →

Книга «Vue.js в действии»

Время на прочтение14 мин
Количество просмотров22K
imageПривет, Хаброжители! Цель этой книги — дать вам знания, с помощью которых вы без колебаний присоединитесь к любому проекту, использующему эту библиотеку. Книга предназначена для всех, кто заинтересован в изучении Vue.js и имеет опыт работы с JavaScript, HTML и CSS. От вас не требуются глубокие знания этой области, но понимание основ, таких как массивы, переменные, циклы и HTML-элементы, не помешает.

Под катом представлен отрывок в виде главы «Vuex», описывающий: что такое состояние; использование геттеров; реализация мутаций; добавление действий; работа со вспомогательными методами Vuex; модули и настройка проекта.
Читать дальше →

IDE нормального человека или почему мы выбрали Monaco

Время на прочтение12 мин
Количество просмотров36K

Памятка от редактора


В прошлой статье мы рассказали про релиз панели управления Voximplant, не забыв упомянуть обновленную IDE. Сегодня мы посвящаем этому инструменту отдельный лонгрид – наша коллега Geloosa заботливо описала как процесс выбора технологии, так и имплементацию с вкладками, автокомплитом и кастомными стилями. Садитесь удобнее, отложите остальные дела и заходите в подкат, где любопытных ждут кишки Monaco – не поскользнитесь, их там много :) Приятного чтения.

Читать дальше →

Валидация форм во Vue.js

Время на прочтение11 мин
Количество просмотров85K
Привет, Хабр!

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

Vue.js содержит много интересных и необычных подходов к валидации, которые помогут решить ваши проблемы. Обзор под катом!

Читать дальше →

Расширение браузера для сайта toster.ru

Время на прочтение1 мин
Количество просмотров5.3K
Привет, уважаемые Хабровчане.

Как и многие здесь я часто пользуюсь Тостером и порой очень не хватает некоторых фич, которые могли бы облегчить или ускорить процесс взаимодействия с данным сайтом.
Поэтому было решено сделать расширение для браузера, которое восполнило бы этот пробел.
Читать дальше →

Подключение Google reCAPTCHA на Vue и валидация ответа на сервере

Время на прочтение7 мин
Количество просмотров38K


В этой статье я покажу как подключить капчу от Google (reCAPTCHA) на Vue JS и валидировать ответ на сервере (я использую бекенд на Laravel/Lumen в качестве примера, но принцип валидации одинаковый для всех технологий).

Читать дальше →

Вклад авторов