Обновить
206.01

JavaScript *

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

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

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

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

Предполагалось, что React облегчит разработку, но он создал препятствия


Летом 2018 года, мой босс, Эдриан, попросил меня присоединиться к его звонку по Skype с Джеймсом, техническим директором крупной канадской компании.

Пока мы узнавали друг друга, я понял, что Джеймс – умный парень с большими амбициями. Его видение заключается в миграции массивного десктопного приложения WPF в облако.

Мне нравится его дружелюбное отношение, и я могу сказать, что он готов сотрудничать с нами. У Джеймса уже есть партнёр по развитию в Индии, но ему не хватает опыта в создании веб-приложений. Казалось бы, что может пойти не так?


Приятного чтения!

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

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

GitJS


В 2013 году компания Canonical пыталась собрать средства на выпуск смартфона Ubuntu Edge. Особенностью продукта должна была стать возможность преобразовывать смартфон в полноценный ПК. Увы, необходимую сумму собрать не удалось, поэтому мечта создать универсальное устройство так и осталась мечтой.


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


Ранее я уже описывал как преимущества браузерных приложений на примере генератора статических сайтов nCKOB, так и преимущества замены очередного сервера с АПИ на Git для общения с внешним миром на примере приложения учёта трат ГитБюджет. После выпуска ГитБюджета оставшуюся часть 2020 года я потратил на систему, позволяющую создавать браузерные приложения прямо в браузере. Эту систему я назвал GitJS.

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

Опасная уязвимость в популярной библиотеке Sequelize

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


Привет, Хабр! Данная статья будет интересна тем, кто уже использует библиотеку Sequelize или же только собирается с ней работать. Под катом мы расскажем, чем встроенный функционал operatorAliases может быть вреден и как избежать утечки из собственной базы данных.
Читать дальше →

Углублённое руководство по JavaScript: генераторы. Часть 2, простой пример использования

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

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

Тестирование с использованием Puppeteer

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


Любите ли вы тесты, как люблю их я: всеми фибрами души, со всей страстью и энтузиазмом, на которые только способен разработчик, жадный до полного покрытия кода?


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

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

Почему контекст не является «инструментом для управления состоянием»

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


TL;DR


Context и Redux — это одно и тоже?

Нет. Это разные инструменты, делающие разные вещи и используемые в разных целях.

Является ли контекст инструментом «управления состоянием»?

Нет. Контекст — это форма внедрения зависимостей (dependency injection). Это транспортный механизм, который ничем не управляет. Любое «управление состоянием» осуществляется вручную, как правило, с помощью хуков useState()/useReducer().

Являются ли Context и useReducer() заменой Redux?

Нет. Они в чем-то похожи и частично пересекаются, но сильно отличаются в плане возможностей.

Когда следует использовать контекст?

Когда вы хотите сделать некоторые данные доступными для нескольких компонентов, но не хотите передавать эти данные в виде пропов на каждом уровне дерева компонентов.

Когда следует использовать Context и useReducer()?

Когда вам требуется управление состоянием умеренно сложного компонента в определенной части приложения.

Когда следует использовать Redux?

Redux наиболее полезен в следующих случаях:

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

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

Углублённое руководство по JavaScript: генераторы. Часть 1, основы

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

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

Я не исхожу из того, что вы хоть что-то знаете о генераторах. Но вам требуется хорошо разбираться в итераторах и итерируемых объектах в JavaScript. Если вы с ними не знакомы или «плаваете в теме», то сначала углублённо изучите их. Если же вы владеете этими знаниями, то можно погружаться в мир генераторов. Это очень странный мир, в котором многое совершенно не похоже на то, что вы используете в обычном JS-коде. При этом сам механизм очень прост, и даже после прочтения этой статьи вы сможете уверенно использовать генераторы. Приступим!
Читать дальше →

NodeGUI

Время на прочтение4 мин
Охват и читатели10K
NodeGUI — фреймворк, который позволяет писать нативные кроссплатформенные десктопные приложения. Под капотом он использует Qt для отрисовки интерфейса.

Есть возможность подключить React или Vue.

Также существует имплементация с Angular от irustm.

Эта статья будет опираться именно на версию с React.

Запуск и настройка


Сначала необходимо установить cmake.
Склонируем готовый шаблон от разработчиков и запустим его.

npm install
npm run dev
npm start

Чтобы приложение пересобиралось каждый раз, как в код вносятся изменения, к компоненту app подключается hot reload.

if (module.hot) {
 module.hot.accept(['./app'], function () {
   Renderer.forceUpdate();
 });
}

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

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

Практическое знакомство с Deno: разрабатываем REST API + MongoDB + Linux

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

Всем привет. В этот раз я решил сделать нечто более интересное, чем очередной бот, поэтому далее я покажу как реализовать REST API с Deno, подключить и использовать MongoDB в качестве базы данных, и всё это запустить из под Linux.

Читать далее

Поговорим об инструментах для создания клиентских веб-приложений с использованием традиционных языков программирования

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

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

Вместе с тем со временем всё чаще стала возникать потребность в написании монолитных – как правило, простых и непритязательных веб-приложений, не требующих для работы серверной части. Естественно, с широким распространением HTML5 подобные приложения начали обретать весьма богатый функционал, однако... Однако же не все разработчики были готовы смириться с существующим положением вещей, когда все доступные им решения, по сути, имели своим краеугольным камнем всё тот же пресловутый JavaScript.

В конце концов, многие, что называется, “с младых ногтей” привыкли к другому подходу к проектированию и созданию приложений широкого профиля. Это, в первую очередь, различные RAD-среды, среди которых в нашей стране наибольшей популярностью (по крайней мере, в академической среде), всегда пользовалась Delphi. Натянул пару кнопок на форму, прописал нужные обработчики событий на привычном языке Pascal – красота!.. Чего ещё можно желать, в особенности если вы сосредоточены на реализации каких-то нужных вам алгоритмов, а интерфейс для вас не играет такой уж принципиальной роли?

При традиционном дизайне и проектировании веб-приложений всё совсем не так. Тут тебе бы неплохо помнить и все основные детали описаний различных тэгов HTML-разметки и атрибутов CSS-стили, и уметь сверстать всё это дело воедино, да ещё и “оживить” интерактивными сценариями, реализованными на JavaScript. Очевидно, что такой подход, ориентированный в первую очередь на дизайн, а не на саму разработку как таковую, вряд ли устроит нашего традиционного разработчика, воспитанного на классических алгоритмах и структурах данных, с возможным вкраплением зачатков объектно-ориентированного подхода. (Напоминаем, что речь идёт в первую очередь о разработчиках небольших приложений, где теоретически мог бы управиться и один человек.)

Читать далее

Автогенерация тестов на Puppeteer встроена в Chrome DevTools

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

В Chrome 89 в DevTools добавлена экспериментальная поддержка автогенерации JS-скриптов на Puppeteer.

Схематично это работает так: вы открываете нужную страницу, в DevTools включаете запись действий, и после делаете что-то на странице обычным образом (кликаете по ссылкам и кнопкам, переходите на другие страницы, вводите текст). По мере выполнения действий браузер наполняет DevTools-вкладку с виртуальным файлом записи JS-кодом, описывающим через API Puppeteer все действия. После этого запись можно остановить, и сохранить полученный код в виде реального JS-файла.

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

Но сперва, поскольку это ещё ранняя экспериментальная функция (хотя авторы планируют развивать и расширять Puppeteer Recorder), её нужно включить в настройках DevTools, на вкладке Experiments, в виде пункта Recorder:

Читать далее

Как отслеживать производительность веб-приложения с JavaScript и Performance API

Время на прочтение5 мин
Охват и читатели11K
В сентябре этого года у меня была возможность присоединиться к Forest Admin, компании, которая выполняет всю тяжёлую работу по созданию панели администратора любого веб-приложения и предоставляет платформу на основе API, чтобы реализовать все ваши конкретные бизнес-процессы. Моей первой задачей было реализовать мониторинг времени загрузки приложения, а также мониторинг времени запросов, сделанных нашими клиентами в их административном бэкенде, который я разработал.

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


Приятного чтения!

Библиотека Frontend-разработчика, часть 4: Алгоритмы

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

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

Как и любой разработчик - True Frontend'eр должен расти в своей сфере, и конечно же, уходить от простой разработки интерфейсов к чему-то более сложному.
На фоне недавно нашумевшего сериала, можно выписать такой тезис - разработка, как игра в шахматы - неинтересно играть с тем, кто ниже рангом также, как и неинтересно всю жизнь делать одно и тоже одной сложности.
Всегда хочется лезть в дебри, повышать свой уровень. И там где дебри, начинается математика, структуры данных, алгоритмы. Хотите оптимизировать загрузку - это вам к алгоритмам. Хотите увеличить скорость отображения элементов на странице - необходимо обратиться к математике и алгоритмам. Возможно сортировка пузырьком элементов была лишней...

Отдельное слово хочу сказать о структурах данных - несмотря на то, что в js полный беспорядок в плане типов - всегда есть ts, где структуры данных - это основа основ. Для этого ts и был сделан. Контролировать беспорядок.

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

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

Это статья о том, что алгоритмы разработчику нужны. Это статья о том, что по алгоритмам есть интересные и нескучные книжки, которые помогут быстро понять основы и прокачать свои hard-skills.

Ну, удиви

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

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

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

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

Lens JS как менеджер состояния приложения

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

Обзор библиотеки lens-js и эксперименты с котиками.

Данные — это, в действительности, важная часть Вашего будущего приложения или отдельной библиотеки. Важна их структура, целостность, а также и подходы к организации их хранения и обработки. Задача, прямо скажем, не тривиальна, особенно в масштабах корпоративных проектов. Одно из решений — использование менеджера состояния, об одном из которых, тут пойдёт речь.

Читать далее

Что нового в Node.js 15?

Время на прочтение8 мин
Охват и читатели8.8K
Делимся переводом статьи, в которой собраны подробности о новых функциях 15-й версии Node.js.

Версия Node.js 15 была выпущена 20 октября 2020 года. Среди основных изменений:

  • режим throw при необработанных отклонениях
  • особенности языка V8 8.6
  • NPM 7
  • экспериментальная поддержка QUIC
  • N-API Version 7
  • доработка API асинхронного локального хранилища (Async Local Storage)

Давайте подробнее рассмотрим, что эти нововведения из себя представляют и как их можно использовать.
Читать дальше →

Конфетти на канвасе

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

Привет Хабр! Попалась недавно интересная библиотечка , которая создает эффект конфетти на страничке. Решил разобраться , что же там внутри находится и как работает. Подробности под катом

Читать далее

Будущее JavaScript: классы

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


Доброго времени суток, друзья!

Сегодня я хочу поговорить с вами о трех предложениях, относящихся к JavaScript-классам, которые находятся на 3 стадии рассмотрения:


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

Вспомним, что такое классы в JavaScript.
Читать дальше →

DagazServer: Встречайте Garbo Chess

Время на прочтение8 мин
Охват и читатели3.6K
Кто мне сказал, — «не получится»?
Если мне хочется, сбудется!

Земфира

Плюнь тому в глаза, кто скажет,
что можно объять необъятное!

Козьма Прутков "Плоды раздумья"


Новогодние праздники вновь навалились внезапно. Такое обилие свободного времени было просто необходимо разбавить какой-то осмысленной деятельностью и я решил приделать к своему серверу бота для игры в Шахматы. Готовых шахматных движков существует множество. Я решил остановиться на Garbochess-JS — простой и понятной реализации, на языке JavaScript, названной в честь знаменитой актрисы Греты Гарбо (вы можете видеть её на фотографии).
О том, что из этого вышло, читайте далее...

Ajax, REST API OpenCart

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

В статье рассмотрим как устроены ajax запросы в OpenCart, в том числе запросы через api OpenCart, познакомимся с новым понятием front controller и немного коснемся темы ajax REST API.

Читать далее