Обновить
143.28

JavaScript *

Прототипно-ориентированный язык программирования

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

Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз

Время на прочтение11 мин
Охват и читатели23K

Меня зовут Михаил Сахнюк и я разрабатываю фронтенд уже более шести лет. Сейчас я фронтенд разработчик в Miro. 

В статье рассмотрим:

как оптимизировать веб-приложение и ускорить его загрузку;

почему это важно;

какие инструменты помогут в работе над оптимизацией, замерами и контролем результатов;

преимущества работы с загружаемыми модулями в приложениях.

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

Статья — конспект моего доклада на конференции Mergeconf 2021 в Иннополисе. 

Читать далее

Обзор прошедших конференций JUG Ru Group и анонс весенних: Heisenbug, DotNext, HolyJS, JPoint, Mobius, C++ Russia, Hydra

Время на прочтение10 мин
Охват и читатели2.8K

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

— поделиться с Хабром видеозаписями общедоступной части (суммарно по всем конференциям это более ста часов видео!)

— анонсировать наш следующий конференционный сезон: уже можно и подавать заявки на доклады, и приобретать билеты

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

Читать далее

Пример использования WebAssembly-модуля, скомпилированного из Rust, в React-приложении

Время на прочтение5 мин
Охват и читатели11K


Привет, друзья!


На днях прочитал интересную статью, в которой демонстрируется возможность использования WebAssembly-модулей (далее — Wasm), скомпилированных из Rust, в React-приложении.


Так вот, статья интересная, но автор толком ничего не объясняет, видимо, исходя из предположения, что читатели, как и он, владеют обоими языками программирования (JavaScript и Rust).


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


Исходный код проекта.


Если вам это интересно, прошу под кат.

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №497 (6 — 12 декабря 2021)

Время на прочтение3 мин
Охват и читатели7.1K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Прогрессивный Petite-vue

Время на прочтение7 мин
Охват и читатели5.5K

Привет ?, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто ?

Прогрессировать

Анимации в библиотеке компонентов: виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection

Время на прочтение6 мин
Охват и читатели5.6K

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

В этой статье мы рассмотрим виды анимаций в веб приложениях. Паттерны UI анимаций в дизайн системах и их реализацию на Angular. Также будет показан способ организации анимаций в библиотеках с учетом переиспользования и кастомизации.

Читать далее

Когда уже совсем много запросов на сервер или…

Время на прочтение3 мин
Охват и читатели10K

Когда “еще один пуллинг каждый N секунд” стучится вам в код. Время подумать про вебсокеты a.k.a полнодуплексное соединение.

Речь пойдет про socket.io , не совсем web socket а скорее микс при участии web socket. Но очень удобный в использовании сразу из коробки. 

Читать далее

Деструктуризация массивов и объектов в JavaScript — в чем разница?

Время на прочтение15 мин
Охват и читатели52K

Деструктурирующее присваивание в JavaScript — это изящный способ извлечения значений из массивов и объектов, при котором в полной мере реализуется принцип DRY (англ. Don’t repeat yourself — «Не повторяйся»).

Цель этой статьи — продемонстрировать, как именно работают деструктурирующие присваивания массивов и объектов в JavaScript.

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

Читать далее

Переход с Puppeteer на Playwright

Время на прочтение7 мин
Охват и читатели9.5K

Несмотря на то, что у этих фреймворков много общего, Puppeteer и Playwright развивались с разной скоростью, и сейчас Playwright набрал обороты и оставил Puppeteer позади.

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

Читать далее

Node.js: документирование и визуализация API с помощью Swagger

Время на прочтение8 мин
Охват и читатели34K



Привет, друзья!


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


Мы разработаем простой Express-сервер, способный обрабатывать стандартные CRUD-запросы, с фиктивной базой данных, реализованной с помощью lowdb.


Затем мы подробно опишем наше API, сгенерируем JSON-файл с описанием и визуализируем его.


Так, например, будет выглядеть описание POST-запроса к нашему API:





Исходный код проекта.


Если вам это интересно, прошу под кат.

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

Добавление пользовательской темы для фронтэнд-приложений

Время на прочтение8 мин
Охват и читатели7.2K

Привет, Хабр! Меня зовут Павел, я фронтэнд-архитектор в компании Itransition. Вот уже более 8 лет я работаю во фронтэнде. В течении этого времени мне довелось поработать с приложениями, как полностью основанными на бэкенд технологиях, так и с классическими сайтами, написанными с использованием нативного JS и различных библиотек и фреймворков. В данной статье я хотел бы провести в некотором роде ретроспективу тех решений, с которыми сталкивался на практике.

В последние годы мы привыкли работать со светлыми и темными темами во всем: в IDE, в браузере, на десктопе, часто даже на мобильных устройствах. Обычно, когда нам говорят о разных темах, мы представляем разный набор цветов, в рамках которых главный цвет обычно либо близок к белому, либо темно-серому.

С развитием интернета всё больше приложений перебираются на мобильные устройства и в браузер. Сегодня мы рассмотрим именно последний способ создания приложений – в виде сайтов – при этом учтем как современные приложения, так и enterprise-приложения, которые должны работать со старыми версиями браузеров. 

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

Читать далее

Разбор вступительных заданий в Школу Программистов hh.ru 2021

Время на прочтение6 мин
Охват и читатели14K

Привет! Подошел к концу двенадцатый набор в Школу Программистов hh.ru. Самое время рассказать, как Петр Васильевич раздавал премии менеджерам, кто вышел победителем из "Релиза до выходных" благодаря ролевому помощнику, и как впервые в истории Школы нам пришлось облегчить условия вступительного задания прямо во время набора. 

В этой статье будет подробный разбор заданий свежего набора в Школу Программистов hh.ru.

Поехали разбираться

HTTP/1 и HTTP/2 сервера на nodejs

Время на прочтение5 мин
Охват и читатели7.2K

Экспериментальная поддержка HTTP/3 уже встроена в основные браузеры и начинает потихоньку пробираться на сервера. А это значит, что уже можно полностью отказаться от использования в своих nodejs-приложениях от http-библиотеки и переключиться на http2. Насколько же отличается реализация http2-сервера от обычного http-сервера?

Под катом пример простого web-приложения, выполняющего типовые задачи (получение статики GET'ом, upload файлов, POST-запросы, server sent events) на серверах HTTP/1 и HTTP/2. HTTP/2 Server Push в данном примере не затрагивался. Приложение не использует внешних зависимостей (npm-пакетов), всё сделано при помощи собственного функционала nodejs.

Читать далее

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

Как мы переходили на Node.JS v16, или История о сломанном GC

Время на прочтение3 мин
Охват и читатели7.7K
26 октября 2021 года вышел новый релиз Node.JS 16.13.0 который стал Active LTS.

Как мы переводили на него наш сервис мониторинга и анализа логов PostgreSQL и с какими проблемами столкнулись — в статье ниже.

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

Торговый бот на Node.js и Tinkoff API (Часть 2) Кластеры

Время на прочтение5 мин
Охват и читатели5.8K

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

Читать далее

Petite-vue

Время на прочтение8 мин
Охват и читатели9.7K

Привет, эта статья - "перевод документации и часто используемых примеров" для petite-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).

Зачем нужен petite-vue?

Petite-vue это 6-ти килобайтное подмножество Vue, основной задачей которого, по словам Эвана, является Progressive Enchancement.

Выучить очередной фреймворк

Пишем парсер-мониторинг для «Hyundai Showroom» с выгрузкой в телеграм-канал

Время на прочтение5 мин
Охват и читатели7.9K

На сайте https://showroom.hyundai.ru/ можно заказать машину без переплат, напрямую с завода Hyundai, но проблема в том, что машины уходят очень быстро. При этом новые автомобили появляются нечасто, и, чаще всего, можно наблюдать на сайте сообщение об отсутствии машин.

Чтобы успеть забронировать машину, напишем парсер-мониторинг для «Hyundai Showroom» с выгрузкой в телеграм-канал, который будет уведомлять о том, появились ли машины в шоуруме.

Читать далее

Торговый бот на Node.js и Tinkoff API (Часть 1)

Время на прочтение4 мин
Охват и читатели10K

Все началось несколько лет назад со школьного проекта по Computer science. Моя идея была сделать компьютерную программу которая проанализирует историю рынка, определит комбинации из 4х свечей в кластеры по схожести, запомнит какая свеча шла после этой комбинации и в дальнейшем сможет найти кластер для реальной ситуации на рынке. На странице должна быть отображена ситуация на рынке, найденый кластер комбинаций и его статистика. Если в кластере большой процент комбинаций с последующей зеленой свечей - мы ставим на рост, и соответственно наоборот.

Изначально в качестве API для программы был выбран Forex Oanda. На тот момент это был единственный найденный нами брокер с Open API и кое-какой документацией. В планах сервер который работает с API и фронт для отображения работы
(на тот момент) индикатора, поэтому пишем на Node JS. Проект был доведен до логического завершения, он исправно находил похожие комбинации и собирал их в кластеры, был сделан интерфейс который изображал полу-статичную информацию. Однако протестировать все это мы так и не успели, забросив все после сдачи проекта.

Читать далее

Регулярные выражение Python в интерактивном режиме

Время на прочтение1 мин
Охват и читатели5.1K

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

Поддерживаемые регулярные функции:

Читать далее

Пять причин для ИТ-компании полюбить опенсорс

Время на прочтение4 мин
Охват и читатели7.3K

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

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

И что же он дает?

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