Как стать автором
Обновить
0
@J0J0read⁠-⁠only

Пользователь

Отправить сообщение

React + Mobx: в чём смысл?

Время на прочтение16 мин
Количество просмотров142K
Сегодня я хочу рассказать вам о том, как на нашем проекте состоялся переход на Mobx, какие преимущества это даёт. Также будет показан типовой проект и даны пояснения по основным вопросам. Но сначала вводные.

image
Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии143

Алан Кэй не изобретал объекты

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

Люди продолжают утверждать, что современные объектно-ориентированные языки, на самом деле "не совсем объектно-ориентированные", поскольку они не соответствуют определению ООП Алана Кэя. На мой взгляд, в этом есть смысл, хотя я и не согласен с выводом. В последнее время мне встречаются люди, которые говорят о том, что именно Кэй изобрёл объекты. Фактически это неверно.


Алан Кэй не изобретал объекты. Они были в Simula, которую приводит в качестве основного источника вдохновения руководство к Smalltalk-72 (с. 117). В выпуске известного журнала Byte за 1981 год, который популяризировал Smalltalk и ООП, говорится, что "основная идея объектов, сообщений и классов пришла из SIMULA". В нем сказано, что Simula позволяет пользователям создавать "объектно-ориентированные системы", что, возможно, слишком, но тем не менее. Команда Smalltalk хорошо знала систему объектов в Simula и черпала вдохновение из неё.


Одной из причин, почему такой миф всё ещё жив, послужило то, что сказал сам Кэй в 1998 году:


Просто напоминаю, что на последней OOPSLA я постарался донести до всех, что Smalltalk — это не только НЕ синтаксис или библиотека классов, но даже не классы. Мне очень жаль, что ранее я ввел термин "объекты" для этой темы, поскольку это заставляет многих людей сосредоточиться на меньшей идее.
Читать дальше →
Всего голосов 18: ↑15 и ↓3+12
Комментарии11

ReactJS + MobX — опыт использования DI

Время на прочтение6 мин
Количество просмотров7K
Мне кажется, настало время поделится подходом для написания ReactJS App, я не претендую на уникальность.

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

Задачи которые мы будем решать:

  • подключение di для компонентов
  • серверный рендеринг с асинхронной загрузкой данных
Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии9

MobX c MVVM хорош, но с DI ещё лучше

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

В своей прошлой статье я рассуждал о том, как использование паттерна MVVM позволяет упростить процесс разработки. Паттерн был реализован с применением библиотеки MobX. Эту библиотеку я считаю в разы удобнее Redux, аргументы в пользу чего я также привел в статье. Однако, у нее имеется серьезный недостаток - излишняя свобода действий, в следствие наличия которой разработчики не всегда знают как писать код "хорошо". Паттерн MVVM же диктует несколько простых правил по использованию MobX, благодаря которым разработчики могут реже наступать на грабли. Однако, он не решает всех проблем. И в этой статье я бы хотел показать, как можно дополнить паттерн MVVM и сделать процесс разработки ещё приятнее.

Читать далее
Всего голосов 4: ↑3 и ↓1+3
Комментарии35

TypeScript: Раскладываем tsconfig по полочкам. Часть 1

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

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

Читать далее
Всего голосов 26: ↑25 и ↓1+28
Комментарии4

Тестирование с помощью Vitest

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0+3
Комментарии4

Парк сидячего периода. Путешествие в удивительный мир малого таза

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

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

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

Читать далее
Всего голосов 46: ↑37 и ↓9+54
Комментарии50

Насколько быстр Javascript? Симулируем 20 миллионов частиц

Уровень сложностиПростой
Время на прочтение23 мин
Количество просмотров21K

Я бросил себе вызов: симулировать 1000000 (миллион) частиц на чистом Javascript на телефоне, используя только CPU и добившись 60 FPS.

Поехали.

Задача не особо сложна, если выполнять всю работу на GPU, но правило гласит, что нужно пользоваться только CPU, при этом работая на JS, так что никакого WASM.

Читать далее
Всего голосов 109: ↑108 и ↓1+133
Комментарии34

CSS-классы вредны

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров20K

Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. Давайте изучим этот вопрос, начав со скучного урока истории, который вы уже слышали миллион раз.
Читать дальше →
Всего голосов 74: ↑65 и ↓9+78
Комментарии113

Тестирование JavaScript кода с Jest для чайников. Часть 1

Время на прочтение7 мин
Количество просмотров97K
Здравствуй, Хабр! Данное руководство является первой частью в запланированном цикле статей про такой замечательный фреймворк для тестирования как Jest. Материал будет полезен новичкам и тем, кто только знакомится с тестированием, и хотел бы изучить этот фреймворк. В первой части мы разберём: как начать работу с jest, как написать простой тест, и какие есть методы для сопоставления проверяемых значение с ожидаемыми. Кому интересно — добро пожаловать под кат!
Читать дальше →
Всего голосов 6: ↑4 и ↓2+6
Комментарии4

Как тестировать методы REST API

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

Когда ручного тестировщика впервые просишь проверить метод REST API, того охватывает паника: «Как это делать? Я вообще почти ничего не знаю про API. Что делать? Как это тестировать?»

Спокойно. Без паники =) Я уже рассказывала на простом языке, что такое API. А сегодня я расскажу о том, как его тестировать. На самом деле почти также, как GUI: в первую очередь это тест-дизайн и придумывание проверок, а потом уже всякие API-штучки. Но и про них не стоит забывать.

Я дам вам чек-лист, к которому вы сможете обращаться потом — «так, это проверил, и это, и это. А вот это забыл, пойду посмотрю!». А потом мы обсудим каждый пункт — зачем это проверять и как.

После теории будет практика! Для неё возьмем метод doRegister системы Users — он находится в открытом доступе, можете дергать по ходу чтения и проверять =) 

Читать далее
Всего голосов 14: ↑11 и ↓3+8
Комментарии17

Моки без лишней мороки с mswjs+faker.js

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

Недавно я в очередной раз столкнулся с типичной проблемой: для создания нового функционала фронтенд и бэкенд нужно было реализовывать параллельно. Но как делать фронт, не имея 100% рабочих эндпойнтов на бэкенде? Сегодня я расскажу о том, какие подходы применял, и разберу их плюсы и минусы.

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии4

Эмуляция бэкенда: как разрабатывать изолированный фронтенд с помощью Mock Service Worker

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров8K

Всем привет! Сегодня я хочу рассказать о Mock Service Worker — технологии, которая позволяет эмулировать поведение бэкенда в ситуациях, когда по каким-то причинам невозможно использовать реальный бэкенд для полноценной разработки фронтенда, а также когда необходимо изолированно протестировать различные пользовательские сценарии. Тем более, что совсем недавно вышла новая мажорная версия библиотеки msw, и в ней достаточно много важных обновлений.

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии14

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

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров1.4K

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

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

Пользователи не возражают против большого числа кликов, если каждый клик является «безболезненным» и поддерживает их уверенность в том, что они на верном пути — идут вслед за тем, что часто называют «запахом информации». Термин взят из исследования Питера Пиролли и Стюарта Карда на тему «следование за информацией» научно-исследовательского центра Xerox PARC, в котором они проводят параллели между людьми, отыскивающими информацию, и животными, следующими за запахом своей добычи. 

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

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

Вот пример старого веб-дизайна онлайн-статьи на ресурсе издания с трудным неоднозначным выбором для пользователя: 

Читать далее
Всего голосов 5: ↑3 и ↓2+3
Комментарии2

React: тестируем компоненты с помощью Jest и Testing Library

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


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


В данном туториале я покажу вам, как тестировать компоненты на React с помощью Jest и Testing Library.


Список основных задач, которые мы решим на протяжении туториала:


  1. Создание шаблона React-приложения с помощью Vite.
  2. Создание компонента для получения приветствия от сервера.
  3. Установка и настройка Jest.
  4. Установка и настройка Testing Library.
  5. Тестирование компонента с помощью Testing Library:
    1. Используя стандартные возможности.
    2. С помощью кастомного рендера.
    3. С помощью кастомных запросов.
  6. Тестирование компонента с помощью снимков Jest.

Репозиторий с кодом проекта.


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

Читать дальше →
Всего голосов 5: ↑5 и ↓0+5
Комментарии2

Руководство по обработке ошибок в JavaScript

Время на прочтение17 мин
Количество просмотров56K
Ошибки — это хорошо. Автор материала, перевод которого мы сегодня публикуем, говорит, что уверен в том, что эта идея известна всем. На первый взгляд ошибки кажутся чем-то страшным. Им могут сопутствовать какие-то потери. Ошибка, сделанная на публике, вредит авторитету того, кто её совершил. Но, совершая ошибки, мы на них учимся, а значит, попадая в следующий раз в ситуацию, в которой раньше вели себя неправильно, делаем всё как нужно.



Выше мы говорили об ошибках, которые люди совершают в обычной жизни. Ошибки в программировании — это нечто иное. Сообщения об ошибках помогают нам улучшать код, они позволяют сообщать пользователям наших проектов о том, что что-то пошло не так, и, возможно, рассказывают пользователям о том, как нужно вести себя для того, чтобы ошибок больше не возникало.
Читать дальше →
Всего голосов 27: ↑23 и ↓4+19
Комментарии0

Обработка ошибок в JavaScript

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

Привет, Хабр!

Тема обработки ошибок в JavaScript возникает не только у каждого новичка, но и матерого разработчика. Замечу, что тема уже довольно заезжена, поэтому я позволю себе резюмировать в кратком изложении все, что действительно эффективно и проверено в бою мною, коллегами и гуру IT.

Читать далее
Всего голосов 9: ↑8 и ↓1+11
Комментарии1

Используем console на полную

Время на прочтение6 мин
Количество просмотров458K
Метод console.log() — отличный способ вывести отладочную информацию, не мешая пользователю. Но знаете ли Вы, что объект console имеет еще уйму других не менее полезных методов? Очень редко разработчики используют этот функционал, ограничиваясь неблокирующим alert'ом. Что-ж, давайте исправим это положение.

Вкусности console
Всего голосов 172: ↑168 и ↓4+164
Комментарии29

Формируем стратегию работы с ошибками в React

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

Как сделать падение мягким?




Я не нашел исчерпывающего руководства по обработке ошибок в React приложениях, поэтому решил поделиться полученным опытом в этой статье. Статья рассчитана на начинающих разработчиков и может стать некоторой отправной точкой к систематизации обработки ошибок в приложении.
Читать дальше →
Всего голосов 16: ↑16 и ↓0+16
Комментарии15

Теория категорий на JavaScript. Часть 1. Категория множеств

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


Абстракция – это одна из основных техник в ИТ. Любой язык программирования или моделирования, любая парадигма программирования (процедурная, функциональная, ООП, …) дают ответ на вопрос, как и от чего нужно абстрагироваться. Причём, адепты каждого подхода предлагают какой-то свой вариант абстракции.

Если вы хотите увидеть истинную, универсальную абстракцию, то вступайте в нашу… изучайте теорию категорий. В статье на примере категории множеств с картинками и JavaScript-кодом объясняются самые базовые понятия теории категорий: пределы, универсальное свойство. Рассматривается вычислительный аспект теории категорий.

Также немного говорится про классы, примеси и смеси в JavaScript.

Примеры из статьи можно посмотреть тут.
Читать дальше →
Всего голосов 48: ↑48 и ↓0+48
Комментарии47

Информация

В рейтинге
Не участвует
Зарегистрирован
Активность