Здравствуйте. Меня зовут Ник, я фронтенд разработчик (жидкие аплодисменты). Кроме того, что я пишу код, я преподаю в Школе программистов hh.ru.

Записи наших лекций от 2018-2019 учебного года можно посмотреть на youtube

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

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

Лонгридом можно пользоваться как справочником, чтобы не читать за один присест. Вот список тем, которые мы затронем:

1. Зачем думать о производительности
2. FMP, TTI + подробнее в докладе
3. Critical render path, DOM, CSSOM, RenderTree
4. Шаги по улучшению производительности первой загрузки + подробнее в докладе

Понимайте свою программу без ущерба для производительности

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

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

Сегодня, в 10 уроке курса по Vue, мы поговорим о том, как работать с формами. Формы позволяют собирать данные, вводимые пользователем. Кроме того, здесь мы обсудим валидацию форм, то есть — проверку того, что в них вводят.

Появилась задача написать веб интерфейс управления устройством. Управлять устройством будет Raspberry Pi. Логика управления — python, соответственно и интерфейс хотелось бы python. Хочу поделится своим опытом.

• 1. lighttpd mod_cgi и простой скрипт
• 2. web.py на порту 8080
• 3. WCGI интерфейс
• 4. Простой сервер WSGI
• 5. WSGI с использованием wsgiref
• 6. WSGI c помощью flup
• 7. web.py приложение с использованием flup
• 8. Немного особенностей

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

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

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

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



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

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

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

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

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

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



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

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

Пара слов о…

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

Предисловие

Nuxt — "фреймворк над фреймворком Vue" или популярная конфигурация Vue-based приложений с использованием лучших практик разработки на Vue. Среди них: организация каталогов приложения; включение и преконфигурация самых популярных инструментов в виде Nuxt модулей; включение Vuex по-умолчанию в любую конфигурацию; готовый и преднастроенный SSR с hot-reloading'ом

Django — самый популярный веб-фреймворк на почти самом популярном языке программирования на сегодняшний день — Python. Сами разработчики позиционируют проект как "Веб-фреймворк для перфекционистов с дедлайнами". Представляет из себя решение "всё в одном" и позволяет в кратчайшие сроки построить MVP вашего веб-приложения.

GraphQL — язык запросов изначально созданный компанией Facebook. В статье будет говориться о конкретных реализациях протокола этого языка, а именно библиотек Apollo для фронтенда и graphene для бэкенда.

О чем и для кого эта статья

В предыдущей части мы настроили структуру приложения, в данной статье мы настроим Strapi API и выведем список ресторанов.

Первая часть тут

Продолжаем разработку нашего интернет магазина. В этой части будет:

• нормальная загрузка картинок по статическим адресам
• генерация хлебных крошек на клиенте
• страница товара
• шапка
• рабочая кнопка купить с синхронизацией товаров между вкладками (и сессиями)

Мы в команде Ptah решили пойти чуть дальше привычных SPA и попробовали использовать Vue для конструктора лендингов. И теперь хотим поделиться частью нашего опыта.

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

Как и обещал продолжаем.

В этой части:

• создадим блоки товаров "С этим товаром также покупают" и "Интересные товары"
• создадим иконку корзины с количеством товаров
• подключим модальное окно с товарами в корзине
• перепишем всю логику store

В один яркий солнечный день, когда на стройке работа просто кипит, всё вокруг ярко и позитивно, и прямо хочется вечерком пожарить шашлык, на объект проник бывший сотрудник одного из подрядчиков. Он прошёл мимо проходной, помахал рукой охраннику, который знал его в лицо (но не знал, что он уволен), и зашёл внутрь. Там он пошёл к своим друзьям из Центральной Азии. Через полчаса они уже жарили шашлык и наслаждались жизнью.

Нюанс в том, что костёр они развели между двух газовых баллонов.

Один из баллонов почему-то взорвался. Как говорится, ничего не предвещало, и вот баллон почему-то повёл себя нетипично. Если вы видели, как с этими баллонами обращаются в родных для героев рассказа регионах, то можете представить себе и их искреннее недоумение от произошедшего.

Все остались живы и даже более-менее целы (ничего необратимого). Шашлык улетел, но на орбиту не вышел. Шампуры не проткнули никого внизу и сбоку. А вот к неудавшимся космонавтам приехала полиция, скорая и чуть ли не Спортлото.

Пришлось побеспокоиться, но не так сильно, как в тот день, когда на стройку приезжала проверка от ФМС. Тогда выяснилось, что очень многие работают по документам братьев. То есть один в семье делает себе комплект бумаг, устраивается на стройку — а дальше вместо него ходит брат. Не близнец, но для отечественного неокортекса почти неотличимый.

За одного такого родственника на стройке накладывается штраф от 500 тысяч рублей и выше, и стройка может быть приостановлена от 14 до 90 дней. А это кончается очень, очень печально для генподрядчика и заказчика.

Именно после этого инцидента позвали нас решить задачу ИТ-средствами.

Перевод статьи подготовлен в преддверии старта курса «Web-разработчик на Python».

---

Введение

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

Я использую весь функционал Django, который ускоряет разработку, и я не хотел бы упускать из виду его шаблонизатор. Поэтому бэкенд на Django и фронтенд на JavaScript SPA – это для меня не вариант. Однако даже самый заядлый бэкенд-разработчик должен признать, что некоторые вещи нужно реализовывать на стороне клиента. Незначительные действия пользователя не должны требовать перезагрузки страницы. Помимо этого, некоторые части веб-приложения, которое я создаю, требуют довольно сложного взаимодействия с пользователем.

По традиции, можно было бы смешать Django и jQuery, чтобы получить желаемое поведение. Но сейчас есть более новые технологии JavaScript, такие как React и Vue. Поскольку наша цель состоит в том, чтобы найти фреймворк, который мы сможем использовать вместе с Django не переписывая все с нуля, мы воспользуемся Vue, как более легкой альтернативой. В этой статье я покажу, как начать пользоваться Vue вместе с Django с минимальными усилиями.

• Часть 1: Nuxt as fullstack server: frontend + backend API Server
• Часть 2: Additional SSR performance with Nuxt fullstack server

Разработчики Nuxt предлагают 3 метода доступа к API:

1. Встроенный в Nuxt сервер Connect и использование serverMiddleware
2. Интегрированные фреймворки (Express, Koa, Hapi и т.д.)
3. Внешние API сервера

Я покажу на простом примере как организовать API сервер с использованием serverMiddleware на том же инстансе Nuxt, который у нас отвечает за frontend.

Начиная с основ

Вам когда-либо приходило в голову желание относительно того, чтобы начать писать собственные одностраничные веб-приложения? Не замечали ли вы тот факт, что на данный момент времени имеется три базовых претендента на роль вашего верного спутника? Каждый из них уникален в своём роде и предоставляет целый ряд преимуществ.

Так, например, Angular имеет огромное количество функциональных возможностей из коробки, React позволяет очень гибко настраивать собственное окружение, а VueJS славится своей абстракцией над сложными вещами. Какой выбрать именно вам? Это дело сугубо индивидуальное и зависит от проектной задумки и поставленных задач.

Одностраничные приложения? Это вкусно?

Да, конечно, они достаточно вкусны и имеют строго специфический вкус в зависимости от выбранной технологии. Так, например, рассматриваемая в данной статье технология позволяет почувствовать лёгкие нотки приятной жизни и некоторой недосказанности.

Если же говорить более серьёзно, то подобного рода приложения позволяют нам, как разработчикам осуществлять куда большую взаимосвязанность между каждым компонентом веб-сайта. Это звучит, конечно, хорошо, но чем же это хорошо для конечного пользователя? Здесь достаточно много переменных. Так, например, стоит отметить большую отзывчивость интерфейса, практически моментальную загрузку страниц и многое другое.

• Часть 1: Nuxt as fullstack server: frontend + backend API Server
• Часть 2: Additional SSR performance with Nuxt fullstack server

В Части 1 я рассказал как легко организовать API Server в Nuxt. В Части 2 я хочу рассказать какие дополнительные преимущества можно извлечь из Nuxt fullstack server.