Questo è probabilmente più semplice di quanto si sta cercando, ma per chiunque altro che può essere confuso ...
Per capire reagire, è necessario capire come AJAX ha cambiato tutto:
Remember Internet negli anni '90?
Quando si fa clic su qualcosa, la pagina dovrebbe ricaricarsi per mostrare ciò che è accaduto con il clic, anche se non era nulla. Here's a good example. Quel sito è stato costruito prima del AJAX era una cosa.
Ora dai un'occhiata a questa pagina: accanto a ogni risposta c'è una freccia in alto. Vai avanti e fai clic su uno di essi.Nota che la pagina non viene ricaricata, ma ti viene dato un feedback: la freccia diventa arancione.
AJAX
AJAX sta per Un sincrono J avascript Un ND X ML. Ma la parola più importante è Asincrono, che significa "in un momento diverso". Nel contesto dell'esempio di Stack Overflow, significa che alcune informazioni vengono inviate a un computer (un server) e il server invia qualcosa indietro. Prima di AJAX, l'unico modo per eseguire l'invio di dati a un server era il ricaricamento della pagina.
Ecco cosa succede quando si fa clic su una freccia su Stack Overflow:
- Il tuo browser (Chrome/IE/Firefox o qualsiasi altra cosa, anche conosciuto come "Cliente") invia un messaggio al server Stack Overflow . Questo è noto come Request perché il browser richiede una risposta dal server.
- La Stack Overflow (SO) del server conferma che si è permesso di fare clic su tale (un esempio di non avere il permesso sarebbe quello di upvote il proprio post)
- il server in modo invia un messaggio al vostro browser dire "sì" o "no"
- Il tuo browser, come indicato dai file javascript di SO, sa che un "sì" significa accendere la freccia su arancione per indicare che l'azione è stata eseguita correttamente.
Oggigiorno tutto utilizza AJAX. È difficile immaginare la rete senza di essa. Pensa a quanto sarebbe seccante se tu controllassi la tua gmail e la pagina ricaricata ogni volta che avessi aperto una nuova email. Dovresti aspettare che il tuo browser ricostruisca la pagina ogni volta. Invece, la pagina non cambia e i dati possono essere recuperati dal server senza quasi nessuna attesa.
React.js
React è una libreria javascript. Se vuoi saperne di più sulle differenze tra librerie e framework e toolkit, controlla this great post out.
In pratica, React consente di utilizzare il codice già scritto per accelerare il tempo necessario per creare una pagina Web o un'applicazione. Utilizza anche un paradigma di codifica dichiarativa, in contrapposizione a un imperativo. Questo in pratica significa che dici quello che vuoi vedere, e decide il modo migliore per realizzarlo.
Ciò significa, in termini di domanda, che React ha incorporato AJAX. Sa quando usarlo e quando no. Quindi se dici "Voglio un pulsante di upvote", React userà AJAX per farlo. Se invece dici "Voglio che un utente sia in grado di aggiungere un commento" React sa che non vuole usare AJAX per quello.
baffi
Moustache è un sistema di template. Ciò significa che consente di definire la struttura di una pagina Web separatamente dal contenuto.Per esempio, ecco una pagina HTML regolare senza baffi:
<h1>This is the Title of My Page. This is Content</h1>
<p>This is a paragraph. blah blah blah. My email is [email protected]</p>
<footer>Contact me at [email protected]</footer>
La struttura è definita da HTML: <h1> & <p> sono "tag" che indicano al browser web (Chrome o Firefox o IE) la struttura del contenuto. Il contenuto è all'interno dei tag.
Sopra, se volevi cambiare il tuo indirizzo e-mail, dovresti cambiarlo in due punti, il che è male perché forse passano dieci anni e ti dimentichi di tutti i posti in cui hai messo la tua email, o qualcun altro funziona sul codice più tardi, e non sanno che è in 2 posti.
In baffi si può fare qualcosa di simile:
<script>
var json = {
title: "This is the Title of My Page. This is Content",
paragraph: "This is a paragraph. blah blah blah. My email is ",
footer_verbiage: "Contact me at ",
email: "[email protected]"
}
</script>
<h1>{{title}}</h1>
<p>{{paragraph}} {{email}}</p>
<footer>{{footer_verbiage}} {{email}}</footer>
Sede, si definisce il contenuto in uno script, separato dalla struttura. Quindi se volevi cambiare la tua email, dovresti solo cambiarla in un posto.
Manubrio
Handlebars rende Baffi più potente. Ecco uno good post per maggiori informazioni sulle differenze. Nel nostro esempio precedente, Handlebars consente al modello (l'HTML) di essere rieseguito sul client invece che sul server.
Comporre il tutto
Reagire crea il codice HTML, utilizzando Baffi per separare la struttura dal contenuto. Quindi React crea gli script e le comunicazioni tra client e server (AJAX). Quando AJAX acquisisce nuovi dati, Handlebars esegue nuovamente il rendering del contenuto (se necessario) applicando le variabili e qualsiasi altra cosa entri in "contenuto dinamico".
Ad esempio, diciamo dopo che l'utente ha fatto clic su un pulsante, il contenuto del paragrafo sarebbe cambiato.
AJAX andrebbe a prendere il nuovo contenuto e la variabile json verrà ridefinita. Moustache permetterebbe che quel contenuto fosse sostituito dinamicamente.
Bonus - Che cos'è l'angolare? Perché è un grosso problema ?:
MVC sta per Modello, Visualizza, Controller. È un modello di codifica che consente alle applicazioni Web di evitare un sacco di complessità, se hai mai scritto un'applicazione in puro jQuery, sai che le cose possono sfuggire di mano molto velocemente (vedi anche spaghetti code). React, Mustache e Handlebars lavorano insieme per impostare qualcosa come un pattern MVC. Ma richiede un sacco di setup e almeno 3 file js che non sono stati pensati l'uno per l'altro (l'eccezione è la relazione di Handlebars con Moustache).
Enter angolare
angolare ti permette di fare tutto questo con un unico file. Inoltre funziona su una tecnologia semplice: la ricerca (Angular è fatta da Google). Nei nostri esempi sopra, potresti cambiare la tua email e vederla cambiare in diretta sulla pagina web. Ciò rende Angular una struttura indispensabile, essendo semplice da imparare le basi.
ci sono svantaggi però:
- un dolore per padroneggiare
- Non ha molto senso nei tradizionali siti web modo in cui sono costruiti
- È necessario riformulare il modo in cui pensa alle applicazioni web o anche alle applicazioni MVC
- Esistono più versioni in giro e un milione di modi per realizzare a volontà, quindi qualcosa funzionerà bene in uno, ma non funziona in un altro.
- questo significa anche che quando si trova aiuto su SO, è necessario imparare come tradurlo in qualsiasi versione/installazione che si sta utilizzando.
- L'interfaccia utente incorporata è scadente: in genere è necessario il numero UI Bootstrap per far funzionare le cose.
- La documentazione è piuttosto negativa. Richiede di capire già molto su Angular.
- Le persone che tendono a rispondere a domande angolari su SO non sono brave a capire cosa stai chiedendo o persino a leggere tutta la tua domanda.
- Esistono troppi modi per generare un errore che non restituisce alcun messaggio di errore.
Ma, con tutto ciò che viene detto, se si sta cercando di scegliere tra l'apprendimento angolare e reagire, andare con angolare. In effetti, React funziona in modo angolare, quindi potresti essere in grado di eseguire la transizione, anche se non li ho mai usati entrambi.
Ajax è un modo per inviare richieste Web in modo asincrono al server senza eseguire il post di una pagina intera ed è completamente diverso da un framework JavaScript. –