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

JavaScript *

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

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

Альтернативы Redux в 2021 году

Время на прочтение6 мин
Количество просмотров26K
Предположим, вы создаёте или планируете создать React-приложение и вам нужен некий механизм для управления состоянием этого приложения. Если так — это значит, что вам есть из чего выбирать. В сфере инструментов для управления состоянием React-приложений, после её взрывного роста в 2014 году, наблюдается определённое спокойствие. Но в нашем распоряжении, несмотря на это, всё ещё имеется множество решений — от стабильных и проверенных временем, до сверхсовременных.

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



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

Взрослый back-end на node.js возможен?

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

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

Хочу обратить ваше внимание на относительно молодой фреймворк Nest.js. Из коробки он предлагает заранее предопределенную архитектуру, которая заточена под максимально удобную поддержку и масштабируемость вашего приложения. Заложенные архитектурные подходы проверены временем и давно используются в других, более зрелых платформах: Java(Spring), Python(Django), PHP(Laravel) и прочих.

Авторы Nest.js не скрывают, что их вдохновил один из популярных фреймворков для клиентских приложений — Angular.js, а его авторы ориентировались на походы, используемые в Java и C#. Если вы знакомы с Angular.js, то увидите в Nest.js много схожих идей.

Читать далее

Делаем собственные курсоры для сайтов

Время на прочтение7 мин
Количество просмотров22K
Существует множество способов обогащения визуальных впечатлений, которые вызывает у пользователей креативный веб-сайт, множество способов перевода существующего статического дизайна на новый уровень. В частности, речь идёт об оснащении сайтов интерактивным функционалом. А здесь мы исследуем один из способов реализации такого функционала через разработку собственного курсора (указателя мыши) для сайта, представляющего собой независимый элемент пользовательского интерфейса. Это — элемент интерфейса, который будет не только интерактивным и визуально привлекательным, но и полезным с практической точки зрения. Мы уделим особое внимание примерам кода, которые дадут всем желающим возможность расширить те базовые вещи, которые мы рассмотрим, и сделать собственный качественный курсор для сайта.


Пользователь взаимодействует со страницей сайта 14islands.com с использованием собственного курсора этого сайта
Читать дальше →

Как я сделал свой трекер мечты и понял цену времени

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

Основной посыл этого поста - рассказать о развитии своей старой идеи, которая переделывалась несколько раз, и прошла путь от простой кривой WinForm до полноценного кросс-платформенного приложения на Electron'e.

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

Читать далее

Идеальный инструмент для работы с СУБД без SQL для Node.js или Все, что вы хотели знать о Sequelize. Часть 1

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

Представляю вашему вниманию руководство по Sequelize.


Sequelize — это ORM (Object-Relational Mapping — объектно-реляционное отображение или преобразование) для работы с такими СУБД (системами управления (реляционными) базами данных, Relational Database Management System, RDBMS), как Postgres, MySQL, MariaDB, SQLite и MSSQL. Это далеко не единственная ORM для работы с названными базами данных (далее — БД), но, на мой взгляд, одна из самых продвинутых и, что называется, "battle tested" (проверенных временем).


ORM хороши тем, что позволяют взаимодействовать с БД на языке приложения (JavaScript), т.е. без использования специально предназначенных для этого языков (SQL). Тем не менее, существуют ситуации, когда запрос к БД легче выполнить с помощью SQL (или можно выполнить только c помощью него). Поэтому перед изучением настоящего руководства рекомендую бросить хотя бы беглый взгляд на SQL. Вот соответствующая шпаргалка.


Это первая из 3 частей руководства, в которой мы поговорим о начале работы с Sequelize, основах создания и использования моделей и экземпляров для взаимодействия с БД, выполнении поисковых и других запросов, геттерах, сеттерах и виртуальных (virtual) атрибутах, валидации, ограничениях и необработанных (raw, SQL) запросах.


Вторая часть.
Третья часть.


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

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

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

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

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

React испортил веб-разработку

Время на прочтение4 мин
Количество просмотров39K
В начале июня я посетил конференцию разработчиков .debug, на которой у моей компании был свой стенд. Смысл стенда заключался в том, чтобы создать ситуацию «Измени моё мнение»: мы представляли какую-нибудь радикальную идею, предлагали людям обсудить её с нами, а потом показывали им, что интересного мы делаем.

Мы решили взять такую идею:


Моим первым оппонентом стал этот молодой парень справа, создающий приложения на нативном React.

Если серьёзно, то React — это хорошая библиотека. Она важна для веб-разработки, потому что в ней используются декларативные и реактивные шаблоны, а такой сдвиг парадигмы в момент её создания был нужен всем. В те времена (6-7 лет назад) возникали проблемы с движками рендеринга и реактивностью, но React довольно неплохо их решил.
Читать дальше →

Когда код это данные

Время на прочтение8 мин
Количество просмотров11K
«Представь, что люди как бы находятся в подземном жилище наподобие пещеры, где во всю её длину тянется широкий просвет. С малых лет у них на ногах и на шее оковы, так что людям не двинуться с места, и видят они только то, что у них прямо перед глазами, ибо повернуть голову они не могут из-за этих оков.»

© Платон «Государство», книга 7: Миф О Пещере
Время от времени мне пишут с просьбой помочь в написании кода, который меняет код (далее кодмод, от слов код и модификация - изменение) и сегодня я расскажу об этом нехитром процессе в новом формате, вдохновлённом диалогами Платона, он будет содержать вопросы обратившегося ко мне человека по поводу линтера нового поколения, и мои развёрнутые ответы.

Забегая вперед скажу, что результатом общения стал loader ESTrace, который при запуске может показать что-то вроде:


Но об этом позже, а сейчас:
Следим за функциями

Новые JavaScript-API для работы с аппаратным обеспечением

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



В этом материале речь пойдёт о трёх новых JavaScript-API, направленных на работу с аппаратным обеспечением. В частности — о WebHID, о WebNFC и о WebUSB.
Читать дальше →

За что я не люблю Redux

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

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

Читать далее

Юмористичный обзор Rust с перспективы JavaScript

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

В этой статье я в несколько забавном ключе документирую кое-какие размышления о своем знакомстве с Rust с позиции прожженного энтузиаста JavaScript. Здесь вас ждет импровизированная прогулка по феодам Вестероса, встреча с Ланнистерами и даже замаскированный под остров корабль — занятные аналогии, которые можно провести с работой в этом языке.
Читать дальше →

<img>. Доклад Яндекса

Время на прочтение30 мин
Количество просмотров28K
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

— Всем привет. У меня доклад с интригующим названием в виде одного тега.

CSS, JavaScript и блокировка парсинга веб-страниц

Время на прочтение5 мин
Количество просмотров16K
Недавно мне попался материал, посвящённый проблеме загрузки CSS-файлов, которая замедляет обработку материалов страниц. Я читал ту статью, стремясь научиться чему-то новому, но мне показалось, что то, о чём там говорилось, не вполне соответствует истине. Поэтому я провёл собственное исследование этой темы и поэкспериментировал с загрузкой CSS и JavaScript.


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

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

Как я ускорил движок на 13%

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

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

Автоматизация или смерть: как управлять тысячами единиц игрового контента с помощью гугл-таблиц

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

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

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

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

Читать далее

Использование ECMAScript-модулей в Node.js

Время на прочтение6 мин
Количество просмотров25K
ECMAScript-модули (кратко их называют ES-модулями) — это модули, формат которых описан в стандарте ECMAScript, при работе с которыми используются инструкции import и export:

// ECMAScript-модуль

// инструкция import
import myFunc from './my-func';

//инструкция export
export myOtherFunc(param) {
  const result = myFunc(param);
  // ....
  return otherResult;
}

В Node.js, начиная с версии 13.2.0, имеется стабильная поддержка ES-модулей.



Этот материал посвящён особенностям работы с ES-модулями в Node.js.
Читать дальше →

Полное руководство по инкрементной регенерации статических сайтов с помощью Next.js

Время на прочтение10 мин
Количество просмотров19K
Год назад во фреймворке Next.js 9.3 появилась поддержка генерирования статических сайтов (Static Site Generation, SSG), что сделало его первым гибридным фреймворком. Я к тому моменту уже несколько лет с удовольствием пользовался Next.js. Но тот релиз сделал Next.js моим новым стандартным инструментом. После того, как я много и серьёзно поработал с Next.js, я присоединился к Vercel для того чтобы помогать компаниям, вроде Tripadvisor и Washington Post, в деле внедрения Next.js и расширения того, что у них получилось.

В этом материале мне хотелось бы исследовать новый виток эволюции Jamstack — механизм инкрементной регенерации статических сайтов (Incremental Static Regeneration, ISR). Здесь вы найдёте руководство по ISR, а так же — практические примеры использования этой технологии, демонстрационные проекты и рассказ о сопутствующих внедрению ISR компромиссах.



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

Практическое руководство по TypeScript для разработчиков

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

Представляю вашему вниманию перевод статьи "Working With TypeScript: A Practical Guide for Developers".


Что такое TypeScript?


TypeScript — это популярный статический типизатор (static type checker) или типизированное надмножество (typed superset) для JavaScript, инструмент, разработанный Microsoft и добавляющий систему типов к гибкости и динамическим возможностям JavaScript.


TypeScript развивается как проект с открытым исходным кодом, распространяется под лицензией Apache 2.0, имеет очень активное и высокопрофессиональное сообщество, а также огромное влияние на экосистему JavaScript.


Установка TypeScript


Для того, чтобы начать работу с TypeScript, нужно либо установить специальный интерфейс командной строки (command line interface, CLI), либо воспользоваться официальной онлайн-песочницей или другим похожим инструментом.

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

Швейцарский нож отладки JavaScript

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


Кажется, что все в начале пути разработчика отлаживали код при помощи console.log(). Я уверен, что и сейчас среди читателей найдётся человек, который сможет отладить код любой сложности при помощи вывода информации в консоль.

Признаюсь честно, я и сам достаточно долго просто выводил что-то в консоль, пытаясь понять, что пошло не так. Я понимал, что использовать breakpoint быстрее и продуктивнее, даёт больше возможностей, ну и в целом выглядит солиднее, но по-прежнему пользовался консолью.
Читать дальше →

Паттерны отложенной инициализации свойств объектов в JavaScript

Время на прочтение6 мин
Количество просмотров13K
Автор статьи, перевод которой мы публикуем сегодня, хочет рассказать о нескольких JavaScript-паттернах, направленных на отложенную инициализацию свойств объектов, для выполнения которой требуется произвести вычисления, создающие серьёзную нагрузку на систему. В основе всех этих паттернов лежит использование дескрипторов доступа — свойств объектов, описываемых парой функций — геттером и сеттером.


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

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