ReactJS *

В первой части я рассказал про то, почему я пришел к необходимости создания собственной СДО. Итак, на текущий момент имеем: сайт, работающий на самописном PHP frameworke, отдельные скрипты JS, подключаемые на определённых страницах с соответствующим типом задания (тест, квест). Тип задания и необходимость загрузки скриптов определяется выполнением кода PHP на конкретной странице. JS работает локально (база данных используется только PHP).

Появилась задача взаимодействия JS с базой данных для расширения функционала интерактивных возможностей СДО. Так как ранее я работал с PHP, было принято решение передавать сведения, полученных PHP из базы данных в JS. Для хранения массивов в SQL сначала я использовал сериализацию и base64, но быстро отказался от такого подхода ввиду сложности понимания структуры данных, хранящихся в базе.

Задача разработчика — показать пользователю, как живут и умирают цифровые клетки. Автор воспользовался React и её хуками: управление состоянием и возможность абстрагироваться от логики, связанной с состоянием, позволяют легко читать и понимать проект. Подробностями реализации и кодом на Github делимся, пока у нас начинается курс по Frontend-разработке.

Дисклеймер: система дистанционного обучения (СДО) в настоящее время введена в эксплуатацию (продакшн), апробирована, протестирована и успешно работает. Система бесплатна, имеет открытый исходный код и выложена в репозитории GitHub. С точки зрения стека технологий она построена на фреймворке Laravel 8.0 (PHP 7.4) с использованием библиотек и иных пакетов (программ): React (redux+router), SocketIo, Docker, NodeJs, Rest API, WebRTC, Leaflet и т.д.

В серии статей я расскажу, как устроена система, через что пришлось пройти при ее разработке и какие проблемы пришлось решать.

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

Хочу поделиться с вами примерами использования GSAP.

Репозиторий

Что такое GSAP?

Если в двух словах, то GSAP (The GreenSock Animation Platform) — это набор инструментов для реализации анимации любого уровня сложности с помощью JavaScript.

• Начало работы с GSAP

Пандемия, осеннее обострение, зима близко и QR коды на каждом шагу, роботы наступают, рутина работы затягивает. Хочешь покушать покажи картинку. Скучную и квадратную, для робота, не для человека.

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

В данной заметке я бы хотел поделиться опытом реализации простого, но достаточно функционального сервиса уведомлений, который можно легко реализовать в своем React (или NextJS, как в моем случае) приложении. Приложение будет написано на TypeScript, базисом для него послужит фреймворк NextJS 11-й версии (версию 12, каюсь, пока не изучал и в бою не испытывал). Для связи между страницей и алертами будет использоваться библиотека RxJS.

Вдохновением для написания данной статьи послужила, во-первых, производственная необходимость (а все мы знаем, как данный зверь умеет придать вдохновения), а во-вторых - прошлогодняя статья Jason Watmore. Однако переводом данная заметка не является, поскольку итоговый результат сильно отличается от результата Джейсона. Кроме того, наш инструмент будет написан на TypeScript.

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

Хочу поделиться с вами заметками о Next.js (надеюсь, кому-нибудь пригодится).

Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений.

Как известно, основным недостатком SPA являются проблемы с индексацией страниц таких приложений поисковыми роботами, что негативно влияет на SEO.

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

Кроме того, существуют специальные инструменты, такие как react-snap, позволяющие превратить React-SPA в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head с помощью таких утилит, как react-helmet. Однако Next.js существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap). Он также предоставляет множество других интересных возможностей.

• Документация
• Примеры

Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React. Также обратите внимание, что заметки не сделают вас специалистом по Next.js, но позволят получить о нем исчерпывающее представление.

Заметки состоят из 2 частей. Это часть номер два.

Итерация первая

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

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

Если у тебя есть какие то замечания (или находишь статью душноватой), дополнения или можно как то написать статью лучше, то пожалуйста напиши об этом в комментарии, мне будет очень интересно почитать :)

Это пост - третий из серии постов об автотрекинге - новой системе реактивности Ember.js. В этой серии я также обсуждаю общие принципы реактивности и то, как они проявляются в мире Javascript. (Прим пер.: ссылки на переводы предыдущих двух: 1. Что такое реактивность? 2.Что делает реактивную систему хорошей? )

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

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

История разбита на пять частей: что нас к этому привело, как это сделать, сколько нужно тестов и каких, что следует автоматизировать в процессе деплоя и как мониторить продакшн.

Время от времени мне приходится проводить собеседования. И сегодня я хочу поделиться моими любимыми вопросами на тему Redux. К сожалению, вопросы немного устарели, т.к. они касаются компонента высшего порядка connect, который активно заменяют на хуки. Но connect может уже и не сильно актуален, а принципы на которых он построен абсолютно не изменились. (Данная статья является расшифровкой видео).

Бывало так, что после загрузки страницы, вам нужно сделать прокрутку экрана к заданному месту? Все ли всегда получалось с первого раза? И что делать если скролл все равно дергается в процессе загрузки страницы?

Если вам интересны ответы на эти вопросы, то прошу под кат (осторожно, много gif трафика!)

Добрейшего времени суток %HABRUSER% и проходящим мимо, в первую очередь я очень рад что ты открыл эту статью, без шуток :)

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

Добрый день, читатели Хабра, представляю вашему вниманию перевод статьи React, Abort Controller and onClick async calls

Что такое Abort Controller в JavaScript Web Apps, как его использовать в React для прерывания асинхронных вызовов? Теория и некоторые примеры использования.

Что в статье?

В самом начале мы поговорим о базовой теории асинхронных функций в JavaScript и о том, как они работают.

Затем немного об Abort Controller и о том, зачем его вообще использовать?

По окончании введения я покажу два варианта использования в React: первый - когда получаете данные при монтировании компонента, а второй - для асинхронных запросов, вызываемых пользовательским действием, например, onClick.

Автор этого туториала сосредоточился на анимации. Он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. В конце вы найдёте ссылки на игру, её код и демо анимаций. Подробности рассказываем под катом, пока у нас начинается курс по Frontend-разработке.

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

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

Хочу поделиться с вами заметками о Next.js (надеюсь, кому-нибудь пригодится).

Next.js — это основанный на React фреймворк, предназначенный для разработки веб-приложений, обладающих функционалом, выходящим за рамки SPA, т.е. так называемых одностраничных приложений.

Как известно, основным недостатком SPA являются проблемы с индексацией страниц таких приложений поисковыми роботами, что негативно влияет на SEO.

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

Кроме того, существуют специальные инструменты, такие как react-snap, позволяющие превратить React-SPA в многостраничник путем предварительного рендеринга приложения в статическую разметку. Метаинформацию же можно встраивать в head с помощью таких утилит, как react-helmet. Однако Next.js существенно упрощает процесс разработки многостраничных и гибридных приложений (последнего невозможно добиться с помощью того же react-snap). Он также предоставляет множество других интересных возможностей.

• Документация
• Примеры

Обратите внимание: данная статья предполагает, что вы обладаете некоторым опытом работы с React. Также обратите внимание, что заметки не сделают вас специалистом по Next.js, но позволят получить о нем исчерпывающее представление.

Заметки состоят из 2 частей. Это часть номер раз.

Итерация вторая.

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