DEV Community

Igor Soares
Igor Soares

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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:

exemplo-com-states-modificando-o-atual-component

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.

exemplo-com-rotas-modificando-o-atual-component

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay