Реагировать в Финляндию 2019 года

Конференция Был проведен 24-26 апреля в Хельсинки, Финляндии. Я был там с мастерской на Системы дизайна для разработчиков реагирования и разговор. Проверьте мои заметки В прошлом году.

Конференция

Рейкт Финляндия является одной из моих любимых конференций. Это был мой второй раз, и оба раз я чувствовал себя хорошо, как говорящий. Переговоры были великолепны: два дня с большими перерывами, чтобы иметь достаточно времени, чтобы поговорить с друзьями. Мне понравился выбор разговоров: дизайнерские системы, анимация, архитектура. Место проведения (здание с башней на фото выше) также было хорошо.

Переговоры

Mobx. – Путешествие Мишелем Вестерстратом

Слайды , видео Отказ

• Если вы не можете продать библиотеку, продайте проблему.
• «Mobx […] пытается позволить вам пойти домой рано каждый день».
• Всегда продолжайте учиться: оставайтесь слегка из вашей зоны комфорта.
• Открытый исходный код Хорошие части: обучение, счастливые пользователи, основные участники, красивые конференции, потрясающие люди, видеоуправления, семинары, книга, получают рейз, видя других, добиваются успеха.
• Плохие запчасти с открытым исходным кодом: заставить свою библиотеку работать со всеми остальными библиотеками, нет праздников, теперь у вас есть две работы.
• При подаче проблем, помните: вы просите бесплатную помощь на то, что вы платите.
• Охраняйте свое сердце и живите сбалансированной жизнью.

Первый #ReaCtfinland говорить по @mweststrate Отказ pic.twitter.com/iVpcvD0tlm

Разработка только на добавлении с реакцией: вступление в поведенческое программирование лючью Matteis

Слайды , видео Отказ

• ” Язык программирования практически не имеет значения в создании продуктов ».
• Техническое обслуживание кода является корнем проблемы.
• Внести изменения без необходимости читать и поддерживать код.
• Новый добавленный код может изменить, сколько старого кода выполняется.
• Поведенческое программирование для JavaScript Отказ

Чтение разума с адаптивным и интеллектуальным УИС в реакции Дэвида Хуршида

Видео Отказ

• Адаптироваться к людям, а не только устройствам.
• Microsoft Clippy – первый адаптивный интерфейс.
• Тесты A/B неэффективны.
• Соберите статистику на изменения и оптимизировать потоки.
• Xstate Отказ

Клиппи в @Davidkpiano. говорить на #Reachtfinland. . pic.twitter.com/qh1OTKCfPt

Общий язык дизайна. Пусть дизайнеры и разработчики разговаривают друг с другом Андреем Окончниковым

Видео Отказ

• Дизайн: типография, цвет и расстояние.
• Разработчики говорят в коде.
• Дизайнеры разговаривают в примитивах UI.
• Инструменты дизайна разговаривают в формах, как стрелка и треугольники.
• Обычный язык: UI Примитивы.
• Component-Driven.io : Дизайн и разработка компонентов и разработка для современной сети.

Этот парень снова! @okonetchnikov на #Reachtfinland. . pic.twitter.com/7UwpGzXaPu

Практическое руководство по созданию вашей инфраструктуры системы проектирования Варя Степановой

Слайды , видео Отказ

• Система дизайна является общая практика, инструменты, процессы и сообщество.
• Руководства живого стиля: Реагировать стильгидист , Статьгор Отказ
• Визуальные регрессионные тесты.
• Использует Styleguidist для документирования простых компонентов HTML.
• Реактивировать HTML: <кнопка> → <кнопка> Отказ
• Система дизайна сайта: единый источник правды.
• Автоматизировать все.
• Добро пожаловать вклад: редактировать на кнопку GitHub, список участников.
• Ведение блога с WordPress в качестве бэкэнда и Гэтсби.

@varya_en использует @styleguidist Для генерации документации для простых компонентов CSS/HTML с @styleguidist Отказ pic.twitter.com/kvhosfxqSl

12 8 советов по более доступным реагированным приложениям Manuel Matuzovic

Слайды , видео Отказ

1. Создать звуковой план документов: начните с H1 И не пропускайте уровни.
2. Правильно скрыть содержимое: Дисплей: нет , Видимость: скрыто и скрытый Скрытие контента от считывателей экрана, используйте Сочетание свойств CSS что скрывает содержание только визуально или Визуально компонент от досягаемости Ui.
3. Использовать <кнопка> Если вам нужна кнопка: они сосредоточены по умолчанию и поддерживают события клавиатуры.
4. Используйте фрагменты, чтобы избежать неверных HTML:
   → <> Отказ
5. Позаботьтесь о управлении фокусом: может быть проблемой для модальных, помещена фокус внутри модала на открытом воздухе и не позволяйте ему оставить модаль.
6. Уведомления доступны для всех: использовать Роль = "Оповещение" или Роль = «Статус» Сделать читатели экрана объявить уведомления.
7. Сообщить об изменениях страницы: на одном странице Приложения Ударки экрана должны прочитать заголовок страницы на навигации. Проверить Достичь маршрутизатора .
8. Проверьте свой React Code автоматически: используйте ADe-ax и eslint-plugin-jsx-a11y Отказ

Автоматизация уровней заголовка, @mmatuzo на #Reachtfinland. . pic.twitter.com/EZtGeEiXyW

Восхитительная анимация UI, понимая мозг Бруно Лууренсо

Видео Отказ

• Анимация – иллюзия движения.
• Реагировать Морф : Морфирующие интерфейсы интерфейса.
• Создает клон элемента и использует Флип-техника сделать морфинговую анимацию.

Я определенно собираюсь попробовать React-Morph, это выглядит невероятно! #ReaCtfinland pic.twitter.com/3qgu3csw8o.

Пользовательские CSS – это путь к непоследовательному интерфейсу Artem Sapegin

Слайды , видео Отказ

• Мы используем пользовательские стили в основном для типографии, пробелы и макета.
• Это приводит к непоследовательному интерфейсу UI, потому что CSS слишком выразительна.
• Дизайн токены являются первым шагом для достижения последовательности пользовательского интерфейса.
• Но не все комбинации дизайна токенов хороши: вы можете создать нечитаемый текст, например.
• Примитивы UI (примитивные компоненты) – это решение.
• Текст и Заголовок Компоненты для визуализации всего текста в приложении.
• Коробка, flex и Сетка (стек) Компоненты для определения пробелов и макетов.
• Использовать Стиль-система Для создания таких компонентов: работает с любыми CSS в JS Библиотеке.

«CSS слишком выразительна» – @IAMSAPEGIN #ReaCtfinland pic.twitter.com/N5u8qI9Gaj

Создание макетов, которые, последний от Artem Zakharchenko

Видео Отказ

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

Больше макетов, больше расстояния от @kettanaito. на #Reachtfinland. . pic.twitter.com/I4GLeV3tpt

Масштабируемые (проектные) системы с помощью Tejas Kumar

Слайды , видео Отказ

• Tymdercript – хороший выбор для систем дизайна: обеспечения договоров, уверенность в внесении изменений, позволяет масштабировать.
• Использует Реагировать стильгидист и TypeyScript для их дизайнерской системы.
• Взломанный STYLUGUIDIST, чтобы использовать Typearcript и Monaco редактор в компонентных примерах.

Типписный редактор с автозаполнением в @styleguidist по @Tejaskumar_ на #ReaCtfinland – очень круто! pic.twitter.com/mycWMeqrxU

Строительная архитектура устойчивости к монике

Слайды , видео Отказ

• Рефакторинг только временно помогает с технической задолженностью.
• Второй эффект системы: тенденция небольших, элегантных и успешных систем, которые должны быть успешными путем чрезмерных инженерных, раздутых систем из-за надутых ожиданий и чрезмерного сопротивления.
• «Наследийный код» часто отличается от его предложенной альтернативы на самом деле работает и масштабируется ». – Bjarne Stroustrup.
• Реальная стоимость программного обеспечения не является начальным развитием, а техническое обслуживание со временем.
• Архитектура как включение ограничений: Ограничения о том, как мы используем данные и код, которые помогают нам двигаться быстрее со временем.
• Общие зависимости: добавьте их в систему дизайна или копировать.
• Отделенный код лучше высохнуть.

Три ограничения, которые вы можете использовать сегодня для более устойчивой архитектуры Frontend:

1. Зависимости исходных кода должны указывать внутрь: не зависят от кода другой команды.
2. Будьте консервативны о повторном использовании кода: избегайте соединения кода, который отклоняется со временем.
3. Обеспечьте свои границы: не позволяйте людям зависеть от вашего кода (с Зависимость – Cruiser ).

Моника @manicalent Разговор был моим любимым в #ReaCtfinland – действительно резонирует со мной 🤓 pic.twitter.com/2NwSZ41BFC

«Интуитивно понятное» оснащено Каролином Странским

Слайды , видео Отказ

• Трудно изучать вещи: Tymdercript, redux, graphql, gatsby, flexbox.
• ” Мы ошибаемся знакомствами для простоты »- Джим Фишер .
• Спираль тишины Отказ
• Сочувствие имеет значение больше в образовании.
• Начните внутреннюю программу наставничества.
• Запретить слова, такие как «легко» из вашего словаря.
• Просто потому, что вы понимаете, что-то не означает, что кто-то еще будет.

Flexbox трудно учиться – определенно согласен с @carolstran. #Reachtfinland. . pic.twitter.com/TLExVyWvJC

Ссылки

• Эскиз примечания Патрик Хонг
• Первый день и второй день Заметки Бориса Сердиюка (включает в себя молния переговоры)
• Мои фотографии
• Общий фотоальбом

Подписаться на мою рассылку: https://tinyletter.com/sapegin

Оригинал: “https://dev.to/sapegin/react-finland-2019-4h8k”