Реакт это все что вам нужно для управления состоянием вашего приложения.

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

Существует метод управления состоянием который лично я пытаюсь применять еще с тех пор как я начал использовать Реакт. И теперь, после релиза хуков (hooks) и улучшения контекстов (context), этот метод управления состояниями стало очень просто использовать.

Всем привет! Весенний семестр для некоторых студентов 3-го курса ФУПМ МФТИ ознаменовался сдачей проектов по курсу «Методы оптимизации». Каждый должен был выделить интересную для себя тему (или придумать свою) и воплотить её в жизнь в виде кода, научной статьи, численного эксперимента или даже бота в Telegram.

Жёстких ограничений на выбор темы не было, поэтому можно было дать разгуляться фантазии. You Only Live Once! — воскликнул я, и решил использовать эту возможность, чтобы привнести немного огня в бессмертную классику.

У FreePBX есть Web Sip клиент. Мне было интересно как он работает. Начав изучать технологию WebRTC я наткнулся на 3 библиотеки — это JsSIP, его fork SIP.js, а также sipml5.

JsSIP и SIP.js не удалось запустить с первого раза, не хватало опыта. А вот sipml5 оказался самым простым в применении. Скачав его тестовую версию, получилось совершить первый звонок.

Все 3 библиотеки работоспособны. У каждой есть свои сильные и слабые стороны. Протестировав все 3 библиотеки, остановил выбор на JsSIP.

Мы уже писали о сборке мусора для JavaScript, о DOM, и о том, как всё это реализовано и оптимизировано в JS-движке V8. Правда, Chromium — это не только JavaScript. Большая часть браузера и движок рендеринга Blink, куда встроен V8, написаны на C++. JavaScript можно использовать для работы с DOM, а на экран изменения выводятся с использованием конвейера рендеринга.

Так как граф C++-объектов, имеющих отношение к DOM, тесно связан с JavaScript-объектами, команда разработчиков Chromium пару лет назад начала использовать для управления памятью, в которой хранятся эти объекты, сборщик мусора, названный Oilpan. Oilpan — это сборщик мусора, написанный на C++ и предназначенный для управления C++-памятью, которая может быть подключена к V8. Управление памятью осуществляется с использованием технологии кросс-компонентной сборки мусора. В рамках этой технологии граф связанных C++/JavaScript-объектов рассматривается как единая куча.



Этот материал является первой публикацией, посвящённой Oilpan. Здесь будет сделан обзор основных принципов, лежащих в основе данного сборщика мусора, а также — C++-API Oilpan. Мы рассмотрим некоторые возможности, поддерживаемые Oilpan, расскажем о том, как устроена работа различных подсистемам сборщика мусора. Тут же мы разберём процесс конкурентного освобождения памяти, занятой объектами.

Самое интересное здесь то, что система Oilpan является частью Blink, но сейчас осуществляется её перевод в V8, где она будет представлена в форме библиотеки для сборки мусора. Цель этого всего заключается в том, чтобы облегчить доступ к C++-механизмам сборки мусора всем тем, кто встраивает в свои платформы движок V8. Кроме того, то, что Oilpan станет библиотекой, позволит пользоваться этой системой абсолютно всем заинтересованным в ней C++-программистам.

---

Аннотация

В фронтэенде многие предпочитают (или хотели бы) использовать лёгкие и простые пакеты. Кроме того, на текущий момент использовать средства управления состоянием — это стандарт. Я постарался объединить эти принципы и сделать новый state manger — statirjs. Идеологической основой послужили: rematch, redux.

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

И у меня давно чесались руки попробовать систему отслеживания похожую на ту что используется в Angular для Svelte, и вот появились свободные выходные и я на скорую руку из «говна и палок» состряпал Svelte-подобный компилятор (Svelte-M), что дало положительный побочный эффект в плане размера бандла и скорости работы:

Размер бандла получился почти в 2 раза меньше (todo приложение):

Svelte: 4.7k (2.2k gzipped)
Svelte-M: 2.7k (1.2k gzipped)

Скорость работы:

Рендеринг 5000 элементов: Svelte 894ms, Svelte-M 563ms (Svelte-M быстрее: 63% от времени Svelte).
Удаление 1 элемента: Svelte 113ms, Svelte-M 38ms (Svelte-M быстрее в 3 раза).
Пере-рендеринг (удаление и добавление 5000 элементов): Svelte: 859ms, Svelte-M 418ms (в 2 раза быстрее).

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

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



Я потратил огромное количество времени на дизайн и юзабилити, на то чтобы общение было максимально комфортным.

Пробежимся немного по функционалу

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

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



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

Разработка безопасной системы аутентификации пользователей — это по-настоящему сложная задача. Она гораздо масштабнее, чем многие думают. Эту задачу очень легко решить неправильно. Хуже того: ошибки при создании подсистем аутентификации могут повлечь за собой катастрофические последствия. В базовую структуру систем аутентификации и управления пользователями входит всего несколько форм. Из-за этого создание подобных систем может показаться весьма простым делом. Но, как известно, дьявол кроется в деталях. Нужно немало потрудиться для того чтобы сделать такие системы безопасными (и, когда это возможно или даже необходимо, учесть в них требования конфиденциальности персональных данных).

Добрый день!

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

Хочу познакомить Вас со своей утилитой, которая предназначена для быстрой разработки фронтенда, это некий аналог codepen, но он работает на Вашей стороне, соответственно может использовать Ваше API.

Приветствую, в этой статье мы сделаем игру «Слоты» внутри названия сайта(пример, TitleRun). Механика игры будет очень простая. нажимаешь на кнопку — получаешь случайные слоты, если все слоты совпадают — выигрываешь.

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

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

Салют, хабровчане. В преддверии старта курса «Fullstack разработчик JavaScript», подготовили для вас еще один полезный перевод.

---

Каждый веб-разработчик сталкивался с этой головоломкой: какую зависимость выбрать? Почему мы выбираем jQuery, а не Prototype, или Prototype, а не Mootools, или отдаем предпочтение Vue вместо React, или же предпочитаем Angular вместо Ember, или же Lodash, а не Underscore, и так получается неограниченное количество комбинаций.

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

Несколько приёмов для создания произведений процедурального (генеративного) искусства.



Настройка объекта для микрофона – вещь достаточно лёгкая, хоть и сначала может показаться сложной. Не надо волноваться. Даже если вы это не очень понимаете, то и не нужно. Потому что когда всё настроено и работает, вам больше никогда не придётся проделывать это всё снова…

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

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

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

Добрый день!

В предыдущей части мы успешно создали свой удостоверяющий центр. Чем вообще для наших целей он может быть полезен?

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

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

Я еще помню времена, когда принудительное ООП было доминирующим паттерном. Сейчас это очевидно не так, и все современные ЯП предлагают намного больше парадигм. Однако в области веб-разработки тотально (и на мой взгляд неоправданно) доминирует реактивность, которая в свое время эффективно решила проблему несовершенного DOM API, попутно создав несколько архитектурных проблем вроде централизованного хранилища данных (что вообще-то нарушает принципы SOLID), или переусложненного механизма взаимодействия компонентов. В условиях современных WEB-стандартов, реактивность нуждается как минимум в некотором переосмыслении. Например, реактивная парадигма прекрасно выглядит, если наш стейт централизован (не случайно самый популярный стек это react / redux), а если он распределен по дереву компонентов (что архитектурно правильней), то зачастую нам нужно меньше реактивности, а больше аккуратной императивности.

Свои проекты я пишу на ванильных веб-компонентах, в стиле императивного ООП, с минимальным количеством библиотечного кода, и очень редко действительно скучаю по реактивности. Если бы чистая реактивность покрывала все потребности разработчика, не пришлось бы в каждом фрейморке создавать императивные лазейки, позволяющие модифицировать компонент вместо его пересоздания (рефы, неуправляемые формы, $parent и т.д.). А когда стоит задача получить экстремально-отзывчивое приложение, то волей-неволей приходится думать (и вручную контролировать) момент и способ обновления DOM, как собственно и сделано в большинстве хороших PWA (например Twitter) и не сделано в менее хороших PWA (например VK). Так, большие списки выгодней формировать методом insertAdjacentHTML(), который вполне способен работать с текстово-параметризуемыми веб-компонентами, но вряд-ли применим к управляемым компонентам, и таких примеров достаточно.

15 лет назад я пытался писать диссертацию на тему «Оптоэлектронный метод определения шероховатости поверхности». В ходе работы активно использовались BRDF-функции и прочий замечательный математический аппарат для оптики. Был написан код и пара глав, но интерес пропал — повяз в работе. Пару раз пытался заново начать, но, к сожалению, так и не нашел причины выключиться из семьи и работы на год или даже больше. В качестве побочной задачки решил для себя реализовать визуализацию какого-нибудь интересного оптического эффекта. Выбор пал на интерференцию (wiki: взаимное увеличение или уменьшение результирующей амплитуды двух или нескольких когерентных волн при их наложении друг на друга), как наиболее простую в реализации механику.

Перевод статьи подготовлен в преддверии старта курса «Разработчик Node.js».

---

Самый популярный метод входа в приложение – это предоставление логина и пароля, но пользователи могут найти в этом определенные недостатки. Несмотря на то, что существует множество менеджеров паролей, их использование требует времени. Не сильно много, но все же. Некоторые приложения продвигают сложную и тем самым разочаровывающую политику паролей, поэтому придумать новый пароль бывает совсем непросто. Беспарольная система может стать хорошей альтернативой обычной аутентификации по логину и паролю. Она используется в Slack и FramerX, и выглядит это, как отправка магической ссылки пользователю для включения такой аутентификации в приложении. Беспарольная система работает следующим образом:

1. Пользователь посещает приложение, где есть форма для ввода адреса электронной почты;
2. Пользователь вводит адрес электронной почты и нажимает кнопку подтверждения;
3. Магическая ссылка для входа в систему отправляется на электронную почту пользователя;
4. Пользователь нажимает на ссылку и его перенаправляют в приложение, где он уже вошел в систему.

После этого магическая ссылка более недействительна.

Ниже мы рассмотрим некоторые основные моменты реализации беспарольной авторизации на Node.js.

Перевод статьи подготовлен в преддверии старта курса «Разработчик React.js»

---

Я довольно долго работаю с typescript, и у меня было много проблем с тем, чтобы разобраться с его модулями и советующими настройками, и должен сказать, вокруг них и вправду много непонятного. Пространства имен, import * as React from 'react', esModuleInterop и т.д. Поэтому давайте разберемся из-за чего поднялась вся шумиха.

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