Migrando do jQuery para outro framework/lib JavaScript

[allysonsouza]

Olá pessoal, estou atuando em um projeto de intranet desenvolvida com WordPress, com recursos como publicar conteúdo (em diversos formatos, como texto, imagem, vídeo, enquetes), comentários, mensagens diretas, notificações, etc.

Até aqui tudo ok, o porém é que o projeto foi todo desenvolvido como um tema WordPress, e na base do jQuery, e agora surgiram as demanda de adicionar atualizações constantes do feed de publicações, comentários, notificações e etc.

Meu receio agora é como avançar nisso utilizando jQuery, penso que posso acabar em um "callback hell", portanto pensei em seguir para a utilização de algum framework/lib mais recente e com mais recursos para me ajudar nestas requisições assíncronas.

Pergunta 1: Tecnologia a adotar

Como o Vue se vende como uma lib que pode ser adotada incrementalmente, e reescrever o projeto está fora de cogitiação, pensei nele. Vue também é a tecnologia que estive começando a estudar recentemente, tive contato com Backbone alguns anos atrás e Angular com Ionic. Gostaria de opiniões e sugestões se seria um bom caminho.

Pergunta 2: "Real time"

Outro ponto que tenho bastante dúvidas, por falta de experiência no assunto mesmo, é como lidar esta comunicação da API do WordPress e o JavaScript para notificar de que há conteúdo novo a ser consumido? Timeout? Promisses? Async/Await? WebSockets? O que precisarei usar?

Obrigado!

[mikejavier]

Tanto o Vue quanto o React podem te ajudar nessa tarefa. Amb@s frameworks Libs podem ser implementadas em features/modulos especificos sem grandes dores de cabeça. Sou suspeito a falar sobre vue por ser a lib que utilizo mais no meu dia a dia. Mas como você ta pensando em tomar o caminho do Vue neste link tem uma introdução rica de como pode te ajudar nesse problema. Sem uso de outras ferramentas (babel, webpack, etc), somente plugando o script via tag e escrevendo vanilla Js.

Quanto ao lance do Realtime.... eu acho que Websocket seja o caminho, pq vc mantem um conexão aberta com entre server e client assim o server pode enviar notificações ou dados para o front sem o mesmo ter que resquistar. Se vai utilizar Promisses ou Async/Await vai depender da lib que for utilizada. Tu pode dar uma olhada no Pusher para fazer isso de uma forma rapida, tem exemplo para varias linguagem, inclusive PHP já que se trata de um projeto WP.

[luizbills]

Tecnologia a adotar

Se você tem experiência com Vue, vai com ele mesmo. Recomendo você ir naquilo que você tem mais afinidade mesmo, para não perder muito tempo ou fazer algo instável. De qualquer forma, a curva de aprendizado do Vue é bem tranquila.
Sobre o jquery, só toma cuidado que outros plugins (caso seu wp use plugin de terceiros) utilizam muito jquery. Que torna a tarefa de tirar o jquery desses outros mais chato.

Real time

Já vi soluções de websocket em PHP, mas nunca animei mexer nelas. Acho mais fácil você trabalhar com hooks do wordpress. Assim quando sair conteúdo novo, voce usa o update_option para gravar uma array com os ID dos conteudos novos. No endpoint que te falaria se tem ou não conteudo novo, você poderia colocar um timestamp para você meio que controlar pelo front se você já leu esses conteudos novos.
E pelo front, você usa o setTimeout para verificar de tempos em tempos o timestamp do endpoint para saber se tem conteudo novo.

Ou fazer como o @mikejavier citou, usar o Pusher ou outro serviço de real-time para fazer esse trampo das notificações.