Мониторинг многопоточных приложений Node.JS
7 мин
В этой статье мы разберем особенности мониторинга многопоточного Node.JS приложения на примере нашего коллектора для сервиса мониторинга и анализа логов серверов PostgreSQL.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №447 (21 — 27 декабря 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Странные применения валидации
2 мин
Валидаторы нужны для валидации. Давайте ради забавы забудем об этом. Давайте с помощью валидатора пройдёмся по вложенной структуре данных. Сумасшествие, скажете вы!
React Server Components — что это?
6 мин
Буквально неделю назад, команда реакт опубликовала в своем блоге о новом RFC. Давайте разберемся, что это за зверь и зачем он нужен.
Какой будет новая версия Vuex?
7 мин
Перевод
Vuex — стейт менеджер для Vue приложений. Его следующая версия — Vuex 4, которая практически готова к официальному релизу. Она добавит поддержку Vue 3, но не принесет никакой новой функциональности.
Несмотря на то, что Vuex считается отличным решением и многие разработчики выбирают его как основную библиотеку для управления состоянием, они надеются получить больше возможностей в будущих релизах. Поэтому, пока Vuex 4 только готовится к выходу, один из его разработчиков, Kia King Ishii (входит в состав core-команды) уже делится планами для следующей, 5 версии. Стоит заметить, что это только планы и некоторые вещи могут измениться, тем не менее основное направление уже выбрано. О нем и пойдет речь.
Несмотря на то, что Vuex считается отличным решением и многие разработчики выбирают его как основную библиотеку для управления состоянием, они надеются получить больше возможностей в будущих релизах. Поэтому, пока Vuex 4 только готовится к выходу, один из его разработчиков, Kia King Ishii (входит в состав core-команды) уже делится планами для следующей, 5 версии. Стоит заметить, что это только планы и некоторые вещи могут измениться, тем не менее основное направление уже выбрано. О нем и пойдет речь.
Библиотека Frontend-разработчика, часть 2: Интернет-ресурсы
4 мин
В прошлой части мы рассмотрели книги, которые дают понимание основ языка, которые в некоторых случаях вводят новичка в сферу, а в некоторых помогают профессионалам разобраться как именно устроен язык и как именно он работает. Но мне верно подметили в комментариях - нельзя молиться только на книги. Есть огромное количество интернет-ресурсов, другие источники информации, помогающие понять иногда странную, но очень интересную философию этого "замечательного" языка.
Устали от глупых шуток о JS? Напишите свою библиотеку
17 мин
Перевод
В JavaScript есть немало моментов, вызывающих вопрос «Чего???». Несмотря на то что у большинства из них есть логическое объяснение, если вы вникнете, они всё равно могут удивлять. Но JavaScript точно не заслуживает возмутительных шуток. Например, иногда мы видим такие шутки:
В этом случае критика абсолютно не заслужена. Давайте разбираться почему.
В этом случае критика абсолютно не заслужена. Давайте разбираться почему.
Что выбрать в качестве библиотеки компонентов для React-проекта
19 мин
Меня зовут Ксюша Луговая. В СберКорусе я занимаюсь поддержкой библиотеки React-компонентов Korus-UI.
С проблемой выбора библиотеки рано или поздно сталкивается почти каждый разработчик, и порой решение может быть нетривиальным. Возникают вопросы: чем руководствоваться при выборе библиотеки, какие популярные решения предлагает рынок, какие у них плюсы и минусы? Обзоры и отзывы не всегда помогают найти решение.
В мире разработки не существует идеального варианта на все случаи. Поэтому в статье я расскажу, как мы решаем эту задачу, и разберу на примерах анализа нескольких популярных решений, как выбрать библиотеку React-компонентов для своего проекта.
Делаем схему выбора мест в кинозале на React: о canvas, красивом дизайне и оптимизации
6 мин
В богатой экосистеме Тинькофф есть лайфстайл-сервисы. Купить билеты на различные мероприятия - в кино, театры, на концерты, спортивные события можно на https://www.tinkoff.ru/entertainment/, а также в мобильном приложении.
Меня зовут Вадим и я расскажу вам, как мы это делали в команде Развлечений в Тинькофф Банке.
Опыт сопряжения Java, JavaScript, Ruby и Python в одном проекте посредством GraalVM
18 мин
В прошлом месяце вышла стабильная LTS-версия многоязычной среды выполнения GraalVM 20.3.0 от корпорации Oracle и мне захотелось испробовать её для решения какой-нибудь интересной практической задачи. Для тех кто не в курсе, приведу краткое описание этой новой платформы. GraalVM позволяет использовать в едином окружении различные популярные языки программирования и обеспечивает их разностороннее взаимодействие в рамках некоторой общей среды выполнения.
Схематическое изображение архитектуры GraalVM из официальной документации.
Добавление новых языков в GraalVM осуществляется с помощью специального фреймворка Truffle, выполненного в виде библиотеки Java. Фреймворк предназначен для создания реализаций языков программирования в качестве интерпретаторов для самомодифицируемых абстрактных синтаксических деревьев (AST). При желании на его основе можно создать собственный язык, в официальных репозиториях GraalVM подробно рассмотрен пример реализации такого проекта под названием SimpleLanguage. Интерпретаторы, которые были написаны с использованием фреймворка Truffle, будут автоматически использовать GraalVM как JIT-компилятор непосредственно для самой реализации языка запускаемой на JVM-платформе и, соответственно, иметь возможность взаимодействия и двустороннего обмена данными в одном и том же пространстве памяти посредством специально разработанного протокола и программного интерфейса Polyglot API.
Платформа GraalVM вместе с исполняемой программой на смеси самых разных языков может быть представлена в виде автономного и самодостаточного исполняемого файла, либо работать поверх OpenJDK, Node.js или даже внутри Oracle Database.
Схематическое изображение архитектуры GraalVM из официальной документации.
Добавление новых языков в GraalVM осуществляется с помощью специального фреймворка Truffle, выполненного в виде библиотеки Java. Фреймворк предназначен для создания реализаций языков программирования в качестве интерпретаторов для самомодифицируемых абстрактных синтаксических деревьев (AST). При желании на его основе можно создать собственный язык, в официальных репозиториях GraalVM подробно рассмотрен пример реализации такого проекта под названием SimpleLanguage. Интерпретаторы, которые были написаны с использованием фреймворка Truffle, будут автоматически использовать GraalVM как JIT-компилятор непосредственно для самой реализации языка запускаемой на JVM-платформе и, соответственно, иметь возможность взаимодействия и двустороннего обмена данными в одном и том же пространстве памяти посредством специально разработанного протокола и программного интерфейса Polyglot API.
Платформа GraalVM вместе с исполняемой программой на смеси самых разных языков может быть представлена в виде автономного и самодостаточного исполняемого файла, либо работать поверх OpenJDK, Node.js или даже внутри Oracle Database.
Первый парсер на деревне
7 мин
Сегодня мы померяемся парсерами. Точнее, померяем эффективность разных вариантов JavaScript-парсеров на примере одной простой задачи преобразования строки конкретного формата в объект.
Вопросы сложностей организации многопоточности в JavaScript оставим за рамками этой статьи и сосредоточимся на различных вариантах и малоизвестных способах использования регулярных выражений для разбора строки buffers-атрибута узла плана PostgreSQL.
То есть из строки вида
Выглядит вроде все тривиально, правда же?
Вопросы сложностей организации многопоточности в JavaScript оставим за рамками этой статьи и сосредоточимся на различных вариантах и малоизвестных способах использования регулярных выражений для разбора строки buffers-атрибута узла плана PostgreSQL.
То есть из строки вида
'Buffers: shared hit=123 read=456, local hit=789' мы хотим как можно быстрее получить JSON такого формата:{
"shared-hit" : 123
, "shared-read" : 456
, "local-hit" : 789
}Выглядит вроде все тривиально, правда же?
DagazServer: Чему научили пользователи
10 мин
Детали, мелочи, нюансы. Сочетание пустяков. От перестановки слагаемых всё меняется.
Раз, и будущее – открытая книга.
…
Нюанс за нюансом, подробность за подробностью…
Это была не игра, это была откровенная дерзость.
Генри Лайон Олди «Нюансеры»
Предусмотреть всё невозможно. Именно поэтому умные люди и придумали бета-тестирование. Поскольку, в моём случае, проект открытый и бесплатный, оно мало чем отличается от обычного функционирования сайта. Люди играют в игры, а я наблюдаю, исправляю найденные ошибки, извиняюсь и наблюдаю снова. А ещё, я прислушиваюсь к советам, порой неожиданным и, часто, очень полезным.
Полный стек на примере списка задач (React, Vue, TypeScript, Express, Mongoose)
18 мин
Доброго времени суток, друзья!
В данном туториале я покажу вам, как создать фуллстек-тудушку.
Наше приложение будет иметь стандартный функционал:
- добавление новой задачи в список
- обновление индикатора выполнения задачи
- обновление текста задачи
- удаление задачи из списка
- фильтрация задач: все, активные, завершенные
- сохранение задач на стороне клиента и в базе данных
Выглядеть наше приложение будет так:
Для более широкого охвата аудитории клиентская часть приложения будет реализована на чистом JavaScript, серверная — на Node.js. В качестве абстракции для ноды будет использован Express.js, в качестве базы данных — сначала локальное хранилище (Local Storage), затем индексированная база данных (IndexedDB) и, наконец, облачная MongoDB.
При разработке клиентской части будут использованы лучшие практики, предлагаемые такими фреймворками, как React и Vue: разделение кода на автономные переиспользуемые компоненты, повторный рендеринг только тех частей приложения, которые подверглись изменениям и т.д. При этом, необходимый функционал будет реализован настолько просто, насколько это возможно. Мы также воздержимся от смешивания HTML, CSS и JavaScript.
Ближайшие события
Best practices для клиент-серверного проекта PoC
21 мин
Типичный клиент-серверный проект PoC (Proof of Concept) для веба состоит из клиента с GUI, сервера c бизнес логикой и API между ними. Также используется база данных, хранящая оперативную информацию и данные пользователей. Во многих случаях необходима связь с внешними системами со своим API.
Когда у меня возникла необходимость в создании проекта PoC, и я начал разбираться в деталях, то оказалось, что порог вхождения в веб-программирование весьма высок. В крупных проектах для каждого компонента есть выделенные специалисты: front-end, back-end разработчики, UX/UI дизайнеры, архитекторы баз данных, специалисты по API и информационной безопасности, системные администраторы. В небольшом PoC надо самому во всем разобраться, выбрать подходящее техническое решение, реализовать и развернуть. Ситуацию ухудшает тот факт, что из обучающих материалов не всегда понятно, почему предлагается сделать именно так, а не иначе, есть ли альтернативы, является ли решение best practice или это частное мнение автора. Поэтому я разработал заготовку под названием «Common Test DB», отвечающую лучшим практикам. Ее можно использовать для начала любого проекта, остается только наполнить функциональным смыслом.
В статье я подробно опишу примененные best practices, расскажу про имеющиеся альтернативы и в конце размещу ссылки на исходники и работающий в сети пример.
Особенности масштабирования WebGL-карты
4 мин
Мы выпустили редактор стилей. Подробно о том, как с ним можно настроить карту под задачи сервиса, можно почитать на vc.ru. На Хабре же хотим рассказать о концепции StyleZoom, которую мы используем в том числе и в редакторе стилей.
Под катом — небольшой рассказ о зум-левелах: почему в стандартном виде они не подходят для больших территорий и как масштаб влияет на загрузку тайлов и внешний вид карты.
Под катом — небольшой рассказ о зум-левелах: почему в стандартном виде они не подходят для больших территорий и как масштаб влияет на загрузку тайлов и внешний вид карты.
Что нужно знать о популярных JS-фреймворках
22 мин
Привет! Меня зовут Дима Чудинов, я наставник на веб-факультете Яндекс.Практикума, Head of Group, Front-end, ABBYY.
Студенты недавно задали мне вопрос: «Что лучше: Angular или React?». Я начал отвечать и понял, что мне понадобится для этого статья. Позже я понял, что и одной статьи не хватит.
О том, какой фреймворк выбрать, я расскажу в другой раз. А в этой статье опишу историю создания фреймворков и их особенности. Выбрать рабочий инструмент статья не поможет. Зато поможет вести споры с другими разработчиками на кухне (если не будет карантина) и в сети. Статья будет полезна новичкам, которые только начинают своё знакомство с фреймворками и библиотеками, и поможет взглянуть на «зоопарк» веб-технологий сверху.
С чего начать разработку приложения
2 мин
Доброго времени суток, друзья!
Я очень не люблю заниматься саморекламой, но в ситуации, когда команда состоит из одного человека, хочешь не хочешь, приходится и разрабатывать, и продвигать продукт самому.
Всем, кто искал, с чего начать разработку веб-приложения, хорошо известен HTML5 Boilerplate (официальный сайт, репозиторий). Как утверждают разработчики, он является «The web’s most popular front-end template». С most popular не поспоришь, а вот с современностью (соответствием современным реалиям веб-разработки) можно. И в этом нет ничего удивительного: проект создан около 6 лет назад. За последние 6 лет многое изменилось. При этом, насколько я могу судить, принципиальных изменений в проект не вносилось (для объявления переменных используется var, предусмотрена возможность добавления плагинов jQuery и т.д.), кроме, разве что, site.webmanifest, который бесполезен без сервис-воркера (и лучше использовать .json).
Я предлагаю своего рода альтернативу — современный стартовый HTML-шаблон (официальный сайт, репозиторий).
JavaScript исполнилось 25 лет
9 мин
Перевод
4 декабря 2020 года JavaScript исполнилось 25 лет. Автор материала, перевод которого мы сегодня публикуем, Даниэль Адамс, говорит, что этот язык повлиял на её карьеру, а так же — на профессиональную деятельность многих программистов. JavaScript повлиял и на то, как обычные люди со всего мира пользуются веб-сайтами. Даниэль предлагает отпраздновать 25-летие JavaScript, вспомнив о 25 заметных событиях, которые сделали экосистему, сложившуюся вокруг этого языка, такой, какой она стала в наши дни.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №446 (14 — 20 декабря 2020)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
