Обновить
179.75

JavaScript *

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

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

Реализация архитектуры Redux на MobX. Часть 2: «Пример на MobX»

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

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

Я много раз читал, как кто-то попробовал MobX, у него код получился запутанным с не контролируемыми изменениями, после чего он продолжил писать на Redux. Для MobX нет рекомендованной архитектуры. Но при использовании и соблюдении в MobX строгой и однообразной (имеется ввиду одинаковой в различных участках проекта) архитектуры, можно получить понятный код с контролируемыми изменениями в сколь угодно большом проекте. Я опишу один из вариантов, как этого добиться.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №458 (8 — 14 марта 2021)

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

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

Веб-компоненты проще, чем вы думаете

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

Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно, но и довольно сложно. Тысяча строк JavaScript, чтобы сохранить всего 4 строки HTML. Докладчик или неизбежно скрывал за простыми вещами огромное количество JS кода, или погружался в сложные детали, тогда мои глаза начинали закрываться от скуки, и я начинал думать о том, покрывают ли мои суточные выплаты расходы на закуски.

Однако в недавнем проекте, созданном для легкого изучения HTML (Конечно, путем добавления зомби и глупых шуток), я решил, что необходимо описать каждый элемент HTML в спецификации. Не считая той конференции, я впервые начинал знакомство с <slot> и <template> элементами, и, когда я захотел написать что-то интересное о них в проекте, мне пришлось углубиться в тему.

И в процессе углубления я понял: веб-компоненты проще, чем я думал.

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

Я здесь, чтобы сказать вам: да, вы можете создать веб-компонент. Давайте оставим страх и даже закуски за дверью, чтобы сделать все вместе.

Читать далее

Фреймворк-независимое браузерное SPA

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

Учитывая насколько hype-driven является разработка софта в наше время, можно быть уверенным в том что через несколько лет будут существовать новые модные фреймворки для фронтенд разработки. В момент когда фреймворк на базе которого построено приложение выходит из моды — вы вынуждены либо поддерживать устаревшую (legacy) кодовую базу либо стартовать процесс перевода приложения на новый фреймворк.

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

Данная статья является примером построения SPA с использованием высокоуровневых принципов дизайна архитектуры. При этом конкретные библиотеки и фреймворки выбираются для удовлетворения ответственностей, определённых желаемой архитектурой.

Читать далее

NEST.JS. Работа с ошибками. Мысли и рецепты

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

Одни умные люди говорят: "эксепшены - это зло, используйте монады!", другие кричат: "коды ошибок ещё никто не отменял!", а третьи включают механизм исключений в языки программирования.. Однако, у большинства статей, который попадались мне на глаза есть две относительные проблемы (при всём уважении к авторам!):

Некоторая... академичность. Разобрано множество идей и концепций, но заканчивается всё стандартным: "ваш выбор зависит от вашей ситуации".

Абсолютно отсутствуют упоминания о бюджете. Никто же не будет спорить, что теоретически мерседес лучше, чем восьмёрка по всем показателям... если не считать цены.

Цель этого поста - поделиться выработанным практическим рецептом. В конкретном фреймворке и с конкретными границами применимости. Без претензий на уникальность, универсальность, идеальность и, тем более, академическую "правильность".

Кому интересно, прошу под кат.

Читать далее

Заметки фронтендера #1

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

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

Нарушает ли React DOM-стандарты?

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

Существует довольно популярный сайт https://custom-elements-everywhere.com где показывается как работают веб-компоненты в разных фреймворках. Почти у всех фреймворков там красивый 100% результат, но у React там очень настораживающие 71%.

Многие пользователи смотрят на эту страничку и делают вывод, что React плохо поддерживает не только веб-компоненты, но и DOM API в принципе. Так ли это? Действительно ли все плохо?

Давайте разбираться!

Read more

Реализация архитектуры Redux на MobX. Часть 1: «Проблемные места Redux»

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

Эта часть статьи будет об осмыслении составляющих Redux. Так ли они необходимы, что является их аналогом. Также будет предложена более удобная альтернатива хука useReducer.

На самом деле, я не буду воспроизводить Redux. Вместо этого, в следующей части будет описано, как спроектировать более удобную архитектуру с использованием MobX. Следующая часть в основном для тех, у кого проекты на MobX получались запутанными, с неконтролируемыми изменениями.

В этой части статьи я хочу показать, что:

— редьюсеры - это аналог обычных чистых функции для получения нового состояния.

селекторы - это аналоги обычных функций с мемоизацией, которые возвращают данные.

— dispatch + action + action creators - это аналог обычных вызовов функций, и разбиение на dispatch, action, action creators является зачастую ненужным и используются не к месту.

Читать далее

Удвойте скорость написания кода на React с помощью этих простых трюков

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

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

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

Читать далее

Простой WebSocket-сервер на Node.JS

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

Сейчас мы с вами напишем простой WebSocket-сервер на node.js. При подключении к этому серверу в ответ придёт приветственное сообщение. А так же будет доступна к выполнению пара не сложных команд.

Читать далее

React: основные подходы к управлению состоянием

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


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

Предлагаю вашему вниманию простое приложение — список задач. Что в нем особенного, спросите вы. Дело в том, что я попытался реализовать одну и ту же «тудушку» с использованием четырех разных подходов к управлению состоянием в React-приложениях: useState, useContext + useReducer, Redux Toolkit и Recoil.

Начнем с того, что такое состояние приложения, и почему так важен выбор правильного инструмента для работы с ним.

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

Условно, состояние можно разделить на локальное и глобальное. Под локальным состоянием, обычно, понимается состояние отдельно взятого компонента, например, состояние формы, как правило, является локальным состоянием соответствующего компонента. В свою очередь, глобальное состояние правильнее именовать распределенным или совместно используемым, подразумевая под этим то, что такое состояние используется более чем одним компонентом. Условность рассматриваемой градации выражается в том, что локальное состояние вполне может использоваться несколькими компонентами (например, состояние, определенное с помощью useState(), может в виде пропов передаваться дочерним компонентам), а глобальное состояние не обязательно используется всеми компонентами приложения (например, в Redux, где имеется одно хранилище для состояния всего приложения, обычно, создается отдельный срез (slice) состояния для каждой части UI, точнее, для логики управления этой частью).
Читать дальше →

10 лучших игр по программированию, которые улучшат ваши навыки

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

Вы помните далёкие дни из детства, когда вы, проводили целый день, а иногда даже не ели целый день, чтобы поиграть в игры на Nintendo? (Ах, дни Mario и Contra!!!)

С того времени игры претерпели гигантские преобразования и сфера стала более обширной. Это уже не просто хобби. Сейчас в Интернете доступно множество игр, связанных с программированием, и вы можете использовать их чтобы изучить и отточить свои скилы в увлекательной форме. Более того, эти игры могут помочь вам улучшить навыки решения задач, поскольку вам нужно будет решать задачи различной сложности, а также соревноваться с другими опытными программистами по всему миру. Специально к старту новых потоков курсов Fullstack-разработчик на Python, разработка на C# и разработка на Java, в этой статье мы отобрали несколько таких игр, играя в которые можно параллельно качать и себя самого.

Start game

Интервью с Дэном Абрамовым: React 17, Suspense, Redux, холивары

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


Главный миф о Дэне Абрамове — что он «создал React». Но хотя это и не так, сейчас он имеет самое прямое отношение к фреймворку, так что поговорить с ним про React очень интересно. Обычно Дэна не увидеть на российских конференциях, но нам помог онлайн-формат, и на HolyJS его подробно расспросили Наталия Теплухина (член core team Vue.js) и Наталия Короткова (занимается веб-проектами с 2010 года).


Тут получился не поверхностный разговор о погоде, а обсуждение технической конкретики для тех, кто вдается в детали. Но под конец были и более общие вопросы: когда появится новая документация React, переписанная с нуля? Что не так с Redux? Как Дэн воспринимает холивары о фреймворках? Что он может рассказать о релокации?


Так что, если не осилите все технические детали в первой половине интервью, переходите ко второй, там попроще. Под катом — и видеозапись разговора, и текстовая расшифровка.

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

Разгоняем JS-парсер с помощью WebAssembly (часть 2: алгоритм и его оптимизации)

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

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

Мы ведь теперь пишем "прямо на ассемблере" - значит, все будет супербыстро! Правда ведь?

Читать далее

Вавилонская башня из миллиона печенек. Как мы делали игру в VK mini app

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

Весной 2020 года KTS вместе с командой спецпроектов ВКонтакте придумали концепцию и механику игры к 5-летию Oreo в России.

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

В этой статье мы расскажем про визуальную составляющую (почти)бесконечной башни на TS + React + MobX + react-spring + styled-components и как мы решали задачи отображения и оптимизаций, чтобы добиться максимально плавного игрового взаимодействия.

Как мы это сделали

Хорошо зарекомендовавший себя вариант повторного использования кода компонентов, малоизвестный в веб-разработке

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

В этой статье я покажу, как для React-компонентов реализовать один из подходов на основе сущностей и их составляющих. Описываемый подход используется для решения той же проблемы, что HOC и Custom hooks – повторно использовать код между множеством однотипных объектов/функций и разбивать сложные объекты (такие как компоненты в веб-разработке) на более простые составляющие.

Даже если этот подход вам не интересен, как минимум вы увидите, как можно переделать структуру функциональных компоненты и компонентов-классов под свои нужды. Узнаете нестандартные приемы, которые можно использовать при разработке компонентов.
Те, кто пишет компоненты-классы, узнает, как повторно использовать код более эффективным способом, чем HOC, не создавая лишние компоненты-обертки.

Читать далее

Представляем новый справочник по TypeScript

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

Привет, Хабр! Мы рады сообщить, что бета-версия новой редакции TypeScript Handbook вышла из стадии бета-тестирования и теперь является основным ресурсом нашего веб-сайта для изучения TypeScript!

Читать далее

Exports в package.json

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

Привет. Я работаю в команде, занимающейся улучшением пользовательского опыта
при работе с деньгами. Front-end мы поставляем npm-пакетами.

В какой-то момент я столкнулся с проблемами, которые привели меня к использованию
поля exports в package.json

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

Программная генерация изображений с помощью API CSS Painting

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

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

Вы можете программно генерировать геометрические изображения «на лету», используя API CSS Painting.

Давайте выясним, что это за API и как сгенерировать изображение с его помощью.

Читать далее

Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular

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

В процессе эволюции нашей библиотеки компонентов Taiga UI мы стали замечать, что некоторые компоненты посложнее имеют @Input просто для того, чтобы прокинуть его значение в @Input другого нашего базового компонента внутри себя. Иногда встречается такая вложенность даже в три слоя.

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

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

Посмотреть

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