Episódio
Fluent UI React Insights: posicionamento
por Oleksandr Fediashov
O Fluent UI Insights é uma série que descreve o design e as decisões por trás do sistema de design Fluent UI.
No primeiro episódio, engenheiros da equipe do Fluent UI explicam problemas relacionados à implementação de controles de interface do usuário posicionados compartilhando os requisitos e também contando a história da implementação (e as advertências) relacionadas ao React.js.
Marcadores de capítulo
- 00:00 – Introdução
- 00:52 – Versões de interface do usuário fluentes
- 01:22 – Implementando o componente Popup no Fluent UI Northstar
- 02:28 – Requisitos para posicionamento
- 03:05 – Por que escolhemos Popper.js?
- 04:56 – Modificadores personalizados para posicionamento
- 08:10 – Problemas com refs do React
- 10:04 – Problemas de memória causados pela renderização dupla no React
- 10:56 – gancho useCallbackRef para impedir a renderização dupla
- 12:47 – Resumo
Recursos recomendados
- Repositório de interface do usuário fluente no GitHub
- Popper.js documentação
- Solicitação pull que implementa o componente Popup no Semantic UI React
- Solicitação pull que implementa o componente Popup no Fluent UI React Northstar
- Problema no react-popper sobre desempenho e re-renderizações
- Pull solicitação que implementa o recurso "autoSize"
- Pull solicitação que implementa o recurso "coverTarget"
- Pull request que implementa correções para posicionamento e elementos focalizáveis
- CodeSandbox que demonstra uma ordem de efeitos React com layout de elemento específico
- Implementação do padrão "use-callback-ref"
- Pull solicitação que implementa o gancho React "usePopper()"
O Fluent UI Insights é uma série que descreve o design e as decisões por trás do sistema de design Fluent UI.
No primeiro episódio, engenheiros da equipe do Fluent UI explicam problemas relacionados à implementação de controles de interface do usuário posicionados compartilhando os requisitos e também contando a história da implementação (e as advertências) relacionadas ao React.js.
Marcadores de capítulo
- 00:00 – Introdução
- 00:52 – Versões de interface do usuário fluentes
- 01:22 – Implementando o componente Popup no Fluent UI Northstar
- 02:28 – Requisitos para posicionamento
- 03:05 – Por que escolhemos Popper.js?
- 04:56 – Modificadores personalizados para posicionamento
- 08:10 – Problemas com refs do React
- 10:04 – Problemas de memória causados pela renderização dupla no React
- 10:56 – gancho useCallbackRef para impedir a renderização dupla
- 12:47 – Resumo
Recursos recomendados
- Repositório de interface do usuário fluente no GitHub
- Popper.js documentação
- Solicitação pull que implementa o componente Popup no Semantic UI React
- Solicitação pull que implementa o componente Popup no Fluent UI React Northstar
- Problema no react-popper sobre desempenho e re-renderizações
- Pull solicitação que implementa o recurso "autoSize"
- Pull solicitação que implementa o recurso "coverTarget"
- Pull request que implementa correções para posicionamento e elementos focalizáveis
- CodeSandbox que demonstra uma ordem de efeitos React com layout de elemento específico
- Implementação do padrão "use-callback-ref"
- Pull solicitação que implementa o gancho React "usePopper()"
Tem comentários? Envie um problema aqui.