ReactJS *

Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP

На сайте React'a есть туториал, в котором описывается разработка игры Tic Tac Toe. Я решил повторить разработку этой игры на Svelte. Статья охватывает только первую половину туториала, до реализации истории ходов. Для целей ознакомления с фреймворком этого вполне достаточно. Каждый раздел статьи соответствует разделу туториала, содержит ссылки на исходный код обоих фреймворков.

Мы очень рады анонсировать новую пятую версию styled-components! Новая версия полностью обратно совместима с предыдущей при условии использования React^16.8.

Бету пятой версии можно попробовать уже сейчас:

npm install styled-components@beta

Нужна версия React, поддерживающая React.hooks, т.е. react@^16.8 react-dom@^16.8 react-is@^16.8

А теперь об изменениях!

Быстро. Еще Быстрее. Styled-Components.

Когда больше чем 2 года назад мы выпустили вторую версию, мы обещали фокусироваться на производительности. Мы уже сильно ускорили работу библиотеки в течение нескольких релизов. Так, мы получили десятикратное увеличение скорости в версии 3.1 и еще 25% ускорение в версии 4.

К пятой версии, библиотека styled-components стала еще быстрее! Сравнивая с 4 версией, мы получили:

• на 19% меньший размер минифицированного кода (16.2kB vs. 13.63kB min+gzip) ️
• на 18% быстрее инициализация на клиентской стороне
• на 17% быстрее обновление динамических стилей
• на 45% (!!!) быстрее серверный рендеринг

Что ж оно так лагает-то?

Если при рендеринге огромной таблицы с какой-нибудь transition анимацией не делать ничего дополнительно, то приложение будет лагать, а пользователь страдать.

Спрашивается, о чём мой проект? А я сам не знаю. Планы меняются. Идей много. Но всегда есть общий базовый функционал. Вот я пока про это. Уже 5 месяцев. После весеннего обострения, в приступе одиночества, хочу поделиться некоторыми наработками.

// index.jsx

<History>
  <Observer>
     <HeaderView />
     <MainView />
  </Observer>
</History>

Всем привет! Меня зовут Виталий Ризо, я фронтенд-разработчик в «Амплифере». Мы сделали Uibook — простой инструмент для визуального тестирования React-компонентов с реальными медиа-запросами. Расскажу, как он работает и чем может быть полезен вам.

Когда и где

Программа

Рассмотрим реализацию запроса данных к API c помощью нового друга React Hooks и старых добрых товарищей Render Prop и HOC (Higher Order Component). Выясним, действительно ли новый друг лучше старых двух.

LogRock: Тестирование через логирование

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

Учтите, что это не урок по началу работы со Svelte. Уже существует прекрасное пошаговое интерактивное руководство от команды Svelte, которое погрузит вас в мир реактивного программирования.

Доброго времени суток.

class ReducerRegistry {
  constructor () {
    if (!ReducerRegistry.instance) {
      this._emitChange = null
      this._reducers = {}
      ReducerRegistry.instance = this
    }
    return ReducerRegistry.instance
  }

  getReducers () {
    return {...this._reducers}
  }

  register (name, reducer) {
    this._reducers = {...this._reducers, [name]: reducer}
    if (this._emitChange) {
      this._emitChange(this.getReducers())
    }
  }

  setChangeListener (listner) {
    this._emitChange = listner
  }
}

const reducerRegistry = new ReducerRegistry()

export default reducerRegistry

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

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

Конечно же буду выкладывать в Open Source, что приносит свои очевидные плоды. А ещё хочу стримы — зачем? Не ответил для себя полностью, но какие успехи по пунктам: