Обновить
151.29

JavaScript *

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

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

Fastify.js — не только самый быстрый веб-фреймворк для node.js

Время на прочтение8 мин
Охват и читатели49K
Последние 10 лет среди веб-фреймворков для node.js самой большой популярностью пользуется Express.js. Всем, кто с ним работал, известно, что сложные приложения на Express.js бывает сложно структурировать. Но, как говорится, привычка — вторая натура. От Express.js бывает сложно отказаться. Как, например, сложно бросить курить. Кажется, что нам непременно нужна эта бесконечная цепь middleware, и если у нас забрать возможность создавать их по любому поводу и без повода — проект остановится.

Отрадно, что сейчас, наконец, появился достойный претендент на место главного веб-фреймворка всех и вся — я имею в виду не Fastify.js, а, конечно же, Nest.js. Хотя по количественным показателям популярности, до Express.js ему очень и очень далеко.

Таблица. Показатели популярности пакетов по данным npmjs.org, github.com
Пакет Количество загрузок Количество «звезд»
1 connect 4 373 963 9 100
2 express 16 492 569 52 900
3 koa 844 877 31 100
4 nestjs 624 603 36 700
5 hapi 389 530 13 200
6 fastify 216 240 18 600
7 restify 93 665 10 100
8 polka 71 394 4 700
9 loopback 28 501 13 300
10 Adonis.js 3 825 10 100


Express.js по-прежнему работает в более чем в 2/3 веб-приложений для node.js. Более того, 2/3 наиболее популярных веб-фреймворков для node.js используют подходы Express.js. (Точнее было бы сказать, подходы библиотеки Connect.js, на которой до версии 4 базировался Express.js).

В предлагаемом сообщении обсуждаются особенности основных веб-фреймворков для node.js, и что делает Fastify.js фреймворком другого уровня, что позволяет выбрать его как фреймворк для разработки Вашего следующего проекта.
Читать дальше →

Как я уместил систему управления товарами на сайте Presta Shop в пяти кнопках

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

Моя попытка организации системы управления продуктами на сайте c PrestaShop

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

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

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

За описанием процесса создания такой менеджмент системы приглашаю под кат.

Читать далее

Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом

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

В предыдущей статье “Фреймворк Webix Jet глазами новичка. Часть 1. Композиция и навигация” я подробно рассказал вам как создать интерфейс приложения с помощью UI компонентов Webix и распределить полномочия между view-модулями и логикой внутри архитектуры Jet фреймворка. 

В этой статье я продолжу свой рассказ о Jet фреймворке и библиотеке Webix, и реализую следующее:

добавлю в уже известное вам приложение немного интерактива

организую серверные модели с разными подходами к загрузке и сохранению данных.

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

Читать далее

Варианты создания интерактивной экскурсии для пользователей

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

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

Читать далее

Как проводить сквозное (end-to-end) тестирование вашего приложения используя Cypress.io

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

В этой статье вы узнаете:

Что такое Cypress и когда его стоит использовать.

Основы тестирования с использованием Cypress.

Расширенные команды Cypress.

Взаимодействие с элементами пользовательского интерфейса.

Лучшие практики с использованием Cypress.

Читать далее

JavaScript-классы — это не просто «синтаксический сахар»

Время на прочтение6 мин
Охват и читатели31K
После того, как я прочитал очередную статью, где говорится о том, что JS-классы — это всего лишь «синтаксический сахар» для прототипного наследования, я решил написать материал, призванный (в который раз!) прояснить вопрос о том, почему данное утверждение неверно. Тут я, надеюсь, смогу объяснить разницу между JS-классами и прототипным наследованием, и смогу рассказать о том, почему важно понимать эту разницу.


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

Продвинутые дженерики в TypeScript. Доклад Яндекса

Время на прочтение14 мин
Охват и читатели20K
Дженерики, или параметризованные типы, позволяют писать более гибкие функции и интерфейсы. Чтобы зайти дальше, чем параметризация одним типом, нужно понять лишь несколько общих принципов составления дженериков — и TypeScript раскроется перед вами, как шкатулка с секретом. AlexandrNikolaichev объяснил, как не бояться вкладывать дженерики друг в друга и использовать автоматический вывод типов в ваших проектах.

— Всем привет, меня зовут Александр Николаичев. Я работаю в Yandex.Cloud фронтенд-разработчиком, занимаюсь внутренней инфраструктурой Яндекса. Сегодня расскажу об очень полезной вещи, без которой сложно представить современное приложение, особенно большого масштаба.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)

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

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

Кастомный виджет Яндекс.Переводчик для сайтов

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

Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика...

Читать далее

5 React-хуков, которые пригодятся в любом проекте

Время на прочтение7 мин
Охват и читатели30K
Хочу рассказать о пяти простых React-хуках, которые пригодятся в любом проекте. Причём, полезность этих хуков не зависит от того, в каком именно приложении их будут использовать. Описывая каждый из них, я рассказываю о его реализации и привожу пример его использования в клиентском коде.


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

Оплата в телеграм боте — Платежи 2.0 — Сбербанк + Telegraf + Node.js

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

Платежи 2.0 — В мессенджере Telegram появилась возможность принимать платежи в любом чате, включая группы и каналы. Подключить свой магазин к платформе можно самостоятельно, без согласования с Telegram.



И в этом туториале мы создадим простого бота с Node.js на фреймворке Telegraf.js, который сможет принимать деньги с клиента и отправлять их на ваш счет через Сбербанк.

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

Человеко-читаемый JavaScript: история о двух экспертах

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


Каждый хочет быть экспертом. Но что это хотя бы означает? За годы работы мне встречалось два типа людей, именуемых «экспертами». Эксперт первого типа – это человек, который не только знает в языке каждый винтик, но и непременно все эти винтики использует, независимо от того, приносит ли это пользу. Эксперт второго типа также знает каждую синтаксическую тонкость, но разборчивее подходит к выбору инструмента для решения задачи, учитывая ряд факторов, как связанных, так и не связанных с кодом.

Давайте угадаю, эксперта какого типа вы хотели бы видеть в своей команде. Второго, верно? Это такой разработчик, который стремится выдавать удобочитаемый код, такие строки JavaScript, которые будут понятны другим специалистам, и которые легко будет поддерживать. Но характеристика «удобочитаемый» редко является определяющей – на самом деле, она обычно заключена в глазах смотрящего. Итак, к чему нас это приводит? К чему нужно стремиться, если наша цель – удобочитаемый код? Есть ли в данном случае явно верный или неверный выбор? Зависит от многого.

Очевидный выбор


Чтобы облегчить труд разработчика, TC39 в последние годы добавил множество новых возможностей в ECMAScript, в том числе, многие проверенные паттерны, заимствованные из других языков. Одним из таких нововведений, появившихся в ES2019, является метод Array.prototype.flat(). Он принимает аргумент глубины или Infinity и выравнивает массив. При отсутствии аргументов глубина массива по умолчанию равна 1.
Читать дальше →

Только 39% функций в node_modules уникальны в дефолтном Angular проекте

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

39% — это количество уникальных функций в папке node_modules в дефолтном Angular проекте, созданном командой ng new my-app.


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


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

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

Content Indexing API: страницы, доступные в offline. Доклад с RamblerFront #9

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

Здравствуйте, меня зовут Антонина, я работаю frontend-разработчиком в Rambler&Co, в команде Lenta.ru.

Content Indexing API — новый инструмент от Google, показывающий, какие страницы доступны в offline-режиме. Я расскажу, как работает Content Indexing API, когда его следует использовать и как его внедряла наша команда.

Читать далее

Как выдать Золушку за принца и не сойти с ума. Паттерн Декоратор

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

Всем привет, я Максим Кравец из Holyweb, и мы продолжаем разговор о паттернах (первую статью о Singleton можно почитать вот тут). Героя нашего сегодняшнего сюжета порой называют «wrapper» или «обертка», поскольку он оборачивает исходный код, но мне больше нравится название «декоратор» — оно точнее отражает не механику, а суть происходящего.

Читать далее

Обзор Prisma ORM: как забыть об SQL и сосредоточиться на данных

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


Это статья-обзор о Prisma ORM.

ORM (англ. Object-Relational Mapping — «объектно-реляционное отображение или преобразование») — технология программирования, которая связывает базы данных с концепциями объектно-ориентированных языков программирования, создавая «виртуальную объектную базу данных».

Работа с базами данных (моделирование данных, изменение схем, формирование запросов и т.п.) — одна из наиболее сложных задач, возникающих при разработке приложений. Prisma предлагает решение, позволяющее сосредоточиться на данных вместо SQL.

Что такое Prisma?


Как утверждают разработчики, Prisma представляет собой «открытую ORM нового поколения для Node.js и TypeScript», реализующую «новую парадигму объектно-реляционного отображения».

Поддерживаемые языки программирования:

  • JavaScript
  • TypeScript
  • Go (в разработке)
Читать дальше →

Yarn 2 — Устанавливаем и разбираемся

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

Yarn 2 (Berry) — это новый выпуск революционного и хорошо зарекомендовавшего себя менеджера пакетов Yarn!

Что такое Plug’n’Play? Куда потерялись node_modules? Как автоматически добавлять @types?

Поздороваться с Yarn

AEM Test Automation — Create Pages via HTTP Requests

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

"Автоматизированное тестирование AEM" или "Создание AEM страниц с помощью http запросов".

Чаще всего АЕМ тестируют с помощью моков или на страницах, взятых с продакшена.

А что если создавать AEM страницы на лету, не через UI? Создали пару страниц, пошли проверили функциональность, создали новые — проверили для новой конфигурации.

Читать далее

Библиотека next-persist: преодоление разрыва между серверным рендерингом и постоянным хранением данных на клиенте

Время на прочтение9 мин
Охват и читатели6.2K
Статья, перевод которой мы публикуем сегодня, посвящена next-persist — компактному и нетребовательному к ресурсам NPM-пакету. Цель его создания — упрощение обработки и реконсиляции данных, на постоянной основе хранящихся на клиенте и не имеющих критического значения. При этом данный пакет задуман так, чтобы его применение не ухудшило бы полезных возможностей Next.js по серверному рендерингу и генерированию статических сайтов.

Прежде чем мы поговорим о месте next-persist в экосистеме современной веб-разработки, нам нужно коснуться Next.js — передового фреймворка, созданного Vercel, позволяющего без особых сложностей создавать и развёртывать приложения, которые, при этом, отличаются высокой скоростью загрузки.



Next.js произвёл революцию в осмыслении того, как именно веб-содержимое доставляется пользователям. Произошло это за счёт объединения всего лучшего из сфер серверного и клиентского рендеринга с технологиями генерирования статических сайтов. Кроме того, применение Next.js до крайности упрощает доведение веб-проектов до рабочего состояния. Это происходит за счёт автоматизации конфигурирования вспомогательного ПО, вроде webpack и babel, и благодаря использованию CI/CD Vercel.

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

Оптимизируем производительность: JavaScript (V8) vs AssemblyScript (WebAssembly)

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


Чтобы повысить производительность web-приложений, используйте WebAssembly в связке с AssemblyScript, чтобы переписать критически важные для производительности компоненты web-приложения, написанные на JavaScript. «И это действительно поможет?», — спросите вы.

К сожалению, на этот вопрос нет чёткого ответа. Всё зависит от того, как вы будете их использовать. Вариантов много: в одних случаях ответ будет отрицательный, в других — положительный. В одной ситуации лучше выбрать JavaScript вместо AssemblyScript, а в другой — наоборот. На это влияет множество различных условий.

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

Кто я такой и почему занимаюсь этой темой? 


(Данный раздел можете пропустить, это несущественно для понимания дальнейшего материала).

Мне по-настоящему нравится язык AssemblyScript. Я даже в какой-то момент начал помогать разработчикам финансово. У них небольшая команда, в которой каждый серьёзно увлечён этим проектом. AssemblyScript — очень молодой язык, похожий на TypeScript и способный компилироваться в WebAssembly (Wasm). Именно в этом и заключается одно из его преимуществ. Раньше, чтобы использовать Wasm, web-разработчик должен был учить чуждые ему языки типа С, C++, C#, Go или Rust, так как в WebAssembly изначально могли компилироваться именно такие высокоуровневые языки со статической типизацией. 

Хотя AssemblyScript (ASC) и похож на TypeScript (TS), он не связан с этим языком и не  компилируется в JS. Схожесть в синтаксисе и семантике нужна, чтобы облегчить процесс «портирования» с TS на ASC. Такое портирование в основном сводится к добавлению аннотаций типов.
Читать дальше →

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