Como Routed States podem melhorar a usabilidade de aplicações web

Ler em Inglês

Quem está envolvido no mundo de aplicações web já enfrentou o desafio de trafegar estados através da URL. Geralmente em páginas diferentes mas no mesmo contexto, por exemplo, páginas de produtos e de produtos detalhados a qual recebe qual o produto(id) que deve ser mostrado ao usuário pela URL.

http://localhost:3000/products
http://localhost:3000/products/123

Mas Routed States afetam não apenas a forma como compartilhamos dados na nossa aplicação. No exemplo acima, questões de SEO são impactadas, ou seja, os mecanismos de busca reconhecerão tanto a página de listagem de produtos quanto a página de detalhes dos produtos. Além disso, a usabilidade é aprimorada, pois, dessa forma, um usuário avançado consegue navegar pelo sistema apenas conhecendo os IDs dos produtos, enquanto usuários leigos podem compartilhar um produto com outros usuários simplesmente utilizando um link.

No entanto, o exemplo acima é amplamente conhecido, mas existem outros cenários em que o estado da sua aplicação seria melhor refletido pela URL.

Imagine o seguinte cenário: você está envolvido em um projeto no qual os usuários são leigos e possuem dificuldades com sistemas e seus conceitos. Por conta disso, novos usuários precisam ser treinados para usá-lo. Em certo momento, um novo usuário foi criado com dados genéricos e precisará alterá-los com a ajuda de um usuário experiente. A página para alterar os dados do perfil é a seguinte:

Muitos desenvolvedores, ao criarem essa página, optarão por controlar os componentes via estados. A solução ficará como mostrado no desenho acima. Entretanto, dessa forma, não estaremos ajudando o usuário experiente a auxiliar o novato, pois, sempre que houver uma interação nessa página, será necessário informar novas ações. No exemplo, será necessário indicar a rota http://localhost:3000/profile e a ação de clicar no menu "Security" para acessar o formulário que permite alterar a senha.

Para contornarmos esse problema, devemos fazer com que os componentes AccountForm e SecurityForm sejam acessíveis via URL. Dessa forma, o usuário experiente precisará apenas informar o caminho http://localhost:3000/profile/security.