Realizzare Portale in React

React è stato creato da Jordan Walke, un ingegnere software di Facebook, che lo ha chiamato inizialmente “FaxJS”. È stato influenzato da XHP, una libreria di componenti HTML per PHP . E’ utilizzato da grandi player come : Facebook, Instagram, Netflix, Whatsapp, Dropbox,…

 

React Native, che consente lo sviluppo nativo di Android, iOS e UWP con React, è stato annunciato al React Conf di Facebook a febbraio 2015 e rilasciato a marzo 2015.

Cosa è il framework React?

Il framework React è usato per costruire siti, portali, e-commerce con architettura Single Page Application (SPA) rende la fruizione delle pagine veloce interagisce con il browser Web riscrivendo dinamicamente la pagina Web corrente con i nuovi dati dal server Web tramite endpoint che usando microservizi API.

Nella nostra architettura usiamo anche PWA ( Progressive Web App ) un tipo di software applicativo distribuito attraverso il Web nato nel 2015, dal designer Frances Berriman and Google Chrome engineer Alex Russell coniano il termine “progressive web apps”, così vostri clienti se perdono brevemente la connessione possono usare parzialmente il portale, e-commerce,… Tempi di caricamento quasi istantanei e notifiche push basate sul Web offrono un vantaggio competitivo.

La tecnologia React un framework per realizzare layout di siti, portali, e-commerce,… la presente invenzione riguarda il campo tecnico dell’applicazione Web, più specificamente, l’incarnazione dell’attuale invenzione riguarda il metodo di costruzione di un’applicazione web basata sulla tecnologia React, il back-end lo realizziamo con la tecnologia che più preferisci.

Come si facevano prima i portali, siti Web,… senza React framework?

Con lo sviluppo di Internet, le pagine web sono state costituite da semplici pagine html e css, sviluppate in applicazioni web complesse su larga scala.

 

Man mano che le applicazioni Web diventano più complesse, le dimensioni dei team di sviluppo corrispondenti aumentarono, portando a una serie di problemi urgenti:

• La collaborazione del team, il livello di know-how del personale del team è irregolare. In passato lo sviluppo di progetti web complessi potevano avere bisogno solo di uno o due ingegneri front-end.
• Molte volte la comunicazione delle regole della progettazione avveniva attraverso la voce, alcuni progetti avevano un solo ingegnere front-end, lo stile del codice era egocentrico.
• Con l’aumentare della complessità del progetto, i problemi di questo approccio diventarono sempre più acuti: tutti i membri di un team scrivono il codice in base alle proprie attitudini, con la conseguenza di diversi stili di codice in un progetto.
• Quando è necessario estendere una funzionalità esistente, si impiega molto tempo e lo studio del codice precedente scritto si rivela tortuoso e lungo con un aumento dei costi considerevoli.
• Scrivere codice sta diventando sempre più difficile da mantenere, soprattutto quando è necessario lavorare con altri membri del team, o quando qualcuno cambia lavoro, è difficile per le persone capire il codice della persona che la scritto precedentemente da così modificare il progressivo sviluppo del progetto.
• Per un’esigenza aziendale, ogni programmatore ha il proprio modo di implementarlo, con conseguente perdita di tempo quando uno Developer cambia società e i sostituti non hanno lo stesso background, trovando difficile la lettura e relativa comprensione del codice.
• Le caratteristiche significative sono che i costi di comunicazione vanno ad aumentare rapidamente.
• Una volta che uno sviluppatore cambia azienda, L’HR ( Human resources specialista nel reclutare personale) assume con molta difficoltà e spende molto tempo poiché la realizzazione di moduli nel modo tradizionale è difficile, può creare conflitto nel codice, per risolvere eventuali errori ci vorrà un tempo biblico e l’efficienza sarà sicuramente inferiore.
• La manutenibilità del progetto: con la crescente complessità del business aziendale e quindi il codice, la quantità di codice aumenta significativamente, un gran numero di codice mescolato insieme.
• E’ necessario affrontare i problemi; quando i bug sono di difficili da individuare immediatamente, spesso è necessario eseguire ripetutamente il debug per rilevare i bug, e per questo, la manutenzione è estremamente difficile.
• L’aumento delle capacità, la complessità della gestione e la logica diventano sempre più confusa, ponendo una sfida alla manutenzione della piattaforma. Gli approcci tradizionali senza componenti, in cui il codice innato può facilmente diventare enorme, confondendo la logica di business e dedicando più tempo a individuare i problemi e risolvere i bug.
• La riusabilità è funzionale, nella modalità tradizionale, usando Jquery ( in genere ) senza componenti, gli sviluppatori si scervellano a implementare il codice.

Perché realizzare il portale in React Framework?

Con React posso creare componenti( sono delle funzionalità) che il programmatore può inserire più volte in più pagine del sito senza dover riscrivere più volte da zero, facilitando le modifiche e le implementazioni di nuove funzionalità senza aumentare i costi e la complessità come nella modalità tradizionale, rendendo i portali più snelli veloci e facili da modificare ed implementare nuove funzionalità rendendo i costi per i committenti più bassi oltre che rendere la vita degli developer più facile.

 

Mentre senza framework come React, quindi senza componenti per implementare la stessa funzionalità, aumenta la probabilità di errore.

 

Gli sviluppatori riscrivono quindi funzionalità che sono già state implementate, in genere copiando direttamente il codice sorgente esistente, generando un sacco di codice ridondante che deve essere modificato ovunque in caso di errore.

 

Un puzzle di stile,gli stili CSS sono globali, più pagine di stili interferiscono tra loro, vari conflitti di nomi di classe involontari, conflitti di selezione risultano molto complicati da gestire.

Com’è strutturata la tecnologia Framework React:

Lo scopo di React è quello di risolvere il problema della scarsa collaborazione, della scarsa riutilizzabilità e della bassa manutenibilità nello sviluppo di metodi tradizionali non componenti.

 

Fornisce un modo per creare applicazioni Web basate sulla tecnologia React, in base al framework, l’interfaccia dell’utente è suddivisa in gerarchia di componenti, i componenti più bassi possono essere un’aggregazione a funzione singola, con elevata coesione e caratteristiche di accoppiamento.

 

I componenti hanno anche una buona componibilità, riusabilità e manutenibilità, inseriti attraverso la nidificazione della gerarchia dei componenti, costruiscono un’interfaccia utente completa.

 

L’attuale invenzione adotta il seguente schema tecnico: un metodo per la costruzione di un’applicazione Web basata sulla tecnologia React, compresi i seguenti passaggi:

 

Passaggio 1: Suddividere l’interfaccia dell’utente in diagrammi di struttura dei componenti

 

• Split the UI interface into component structure diagrams

 

La divisione del diagramma della struttura dei componenti può essere eseguita sul prototipo o sul progetto dell’interfaccia utente, disegnando una varietà di caselle di colore per inscatolare l’area del componente.

 

La divisione dei componenti può essere divisa dal metodo di divisione dall’alto verso il basso o dal basso verso l’alto, utilizzando il metodo wireframe;
l’area del componente verrà divisa con diversi colori della cornice wireframe, il colore del wireframe utilizzato per distinguere i diversi livelli di componenti.

 

Ad esempio, una pagina del sistema di gestione comune include il menu di navigazione in alto, il pannello delle statistiche a sinistra e la presentazione dei dati dettagliati a destra.

 

In primo luogo l’intera pagina è un componente di grandi dimensioni, sotto il quale l’area del menu di navigazione nella pagina può essere divisa in un componente, il pannello delle statistiche a sinistra può essere diviso in un componente, i dettagli giusti possono anche essere suddivisi in un componente.

 

Questo passaggio è molto importante, principalmente per chiarire il pensiero di divisione dei componenti dell’interfaccia, la gerarchia ragionevole dei componenti divisi.

 

Passaggio 2: Creare componenti con React per completare le pagine statiche senza interazione

 

• Create components with React to complete static pages without interaction

 

Convertire un componente con frame in codice, creare un componente con un framework React o persino creare un’intera pagina in un componente molto grande con la classe React Component.

 

Creare un’istanza React.Component per ogni wireframe ( è il layout della pagina Web dimostra quali elementi dell’interfaccia saranno presenti nelle pagine chiave ), creando una pagina statica senza interazione, in base alla struttura del componente nella progettazione dell’interfaccia utente.

 

Passaggio 3: Il passaggio precedente completa l’interfaccia statica di una singola progettazione dell’interfaccia utente

 

Per un’applicazione Web, non ci sarà certamente una sola interfaccia, ripetuti passaggi uno e due, ogni progettazione dell’interfaccia utente dell’applicazione web viene convertita in pagine statiche.

 

In questo passaggio, per integrare un’applicazione web completa, si utilizza react-router per fare routing front-end per ottenere il passaggio tra i componenti di primo livello.

 

Con react-router quando l’utente clicca, gli viene fornita rapidamente la pagina richiesta senza il classico reload del server che ci impiegherebbe molto più tempo per mostrargliela.

 

Il framework React è un insieme di framework javascript open source dedicati alla costruzione di visualizzazioni Web pubblicate e gestite da Facebook. La sua caratteristica unica è l’introduzione della grammatica JSX e della tecnologia dom virtuale.

 

La grammatica JSX riflette l’idea di view = f (stato), genera html in javascript e integra js e html. Quando il contenuto della pagina sta per cambiare, la dom virtuale viene prima aggiornata e quindi confrontata con la dom effettiva, vengono aggiornate solo le diverse parti, il che risolve il problema dell’operazione dom tradizionale che richiede tempo.

 

Un’ulteriore soluzione tecnica è che i componenti si riferiscano a componenti dell’interfaccia utente incapsulati con funzioni indipendenti: il componente più piccolo ha solo alcune funzioni singole che possono essere nidificate da una combinazione di componenti semplici per formare un componente complesso.

 

Un’ulteriore soluzione tecnica è la gerarchia dei component
Questa si riferisce a una struttura ad albero formata dall’annidamento e dalla combinazione di componenti.

 

Nella gerarchia esiste una relazione genitore-figlio e una relazione di pari livello tra i componenti.

 

Un’ulteriore soluzione tecnica la riscontriamo nel passaggio due.

 

Durante la creazione di un componente React, è possibile utilizzare il metodo della classe es6 o il metodo createReactClass per creare un componente.

 

Sempre nel passaggio due, nel metodo di rendering del componente creato da React, viene impostato un frammento html che costituisce il contenuto dell’area del componente.

 

Inoltre, nel componente viene introdotto CSS per regolare l’effetto della pagina per ottenere il ripristino ad alta fedeltà dell’immagine dell’interfaccia utente.

 

Nella fase tre, con l’aiuto del metodo del ciclo di vita (lifecycle) di React e dell’oggetto di stato, React ascolta gli eventi di interazione dell’utente (mouse, tastiera, tocco dello schermo) nel ciclo di vita del componente per stabilire l’effetto di interazione di ciascun componente nell’applicazione.

 

Prima del primo passaggio, includere anche: utilizzare lo strumento di scaffolding ufficiale create-act-app raccomandato da React per creare un progetto basato su React e utilizzare React-Router per creare il routing della pagina così da controllare il passaggio dei componenti a livello di pagina.

 

Utilizzare redux per gestire i dati a livello di componenti incrociati e utilizzare react-redux per ottenere la connessione dati.

 

Rispetto alla tecnica nota, la presente invenzione ha i seguenti effetti benefici: un metodo per costruire applicazioni web basate sulla componentizzazione della tecnologia React, suddividendo la struttura della pagina in componenti riutilizzabili combinati con l’eccellente tecnologia del framework open source React così da risolvere il processo di sviluppo web, risolvere il problema del basso tasso di riutilizzo del codice e della scarsa manutenibilità.

 

Inoltre, ha una buona componibilità, riusabilità, manutenibilità e può essere costruito dal basso verso l’alto attraverso l’annidamento dei livelli dei componenti per creare un’interfaccia utente completa.

Il metodo di creazione di applicazioni Web basato sulla tecnologia React include i seguenti passaggi:

A. Utilizzare lo strumento di scaffolding di react raccomandato create-react-app per creare un progetto modello basato su React e utilizzare React-router per creare il routing della pagina per controllare il passaggio dei componenti a livello di pagina.

Utilizzare redux per gestire i dati tra i livelli dei componenti e utilizzare reagire-redux per implementare connessioni dati.

 

B. Dividere l’interfaccia UI in diagrammi di struttura dei componenti, quando l’ingegnere di sviluppo front-end ottiene un qualsiasi diagramma prototipo dell’interfaccia UI, disegna alcune caselle sul diagramma UI per includere ogni componente e i loro sotto-componenti.

Quando si dividono i componenti, è possibile decidere se dividere i componenti o in base al principio della singola responsabilità, giudicare se un nuovo oggetto funzionale debba essere creato per un determinato blocco nel diagramma dell’interfaccia utente.

 

C. Creare componenti con React per completare pagine statiche senza interazione.

Quando la struttura del componente della pagina viene confermata con una casella nel diagramma dell’interfaccia utente, la struttura del componente definita nel diagramma deve essere convertita in codice.

Il framework React può aiutare a realizzare la struttura del componente definita. Il componente più esterno (componente radice) contiene tutti i componenti discendenti di seguito, formando un’interfaccia utente completa.

 

D. Impostare i dati di stato dell’effetto di visualizzazione del componente di controllo. In un’applicazione Web, in genere esiste un solo componente principale e l’applicazione Web ha più pagine diverse. Per visualizzare pagine diverse in un componente router, ogni pagina nell’applicazione può essere considerata come un componente figlio del componente router, che decide quale componente di pagina visualizzare in base allo stato.

Nel componente router dell’applicazione, è possibile includere un sotto componente di menu e, facendo clic su una voce di menu, impostare lo stato del componente router, cambiando così la pagina visualizzata.

Dal Framework React si dovrebbe comprendere che gli esperti nella progettazione possono escogitare molte altre modifiche e forme di realizzazione, che rientreranno nell’ambito dei principi divulgati. Quindi lo spirito di react risponde ai seguenti problemi: è possibile apportare varie modifiche e miglioramenti alle parti componenti e / o al layout della combinazione di temi.

Oltre alle variazioni e ai miglioramenti apportati alle parti componenti e / o ai layout, altri usi saranno evidenti agli esperti dell’argomento.

Il riepilogo

Il framework React è il metodo di costruzione di applicazioni Web che coinvolge gli sviluppatori dell’applicazione Web.

 

Ciò include l’utilizzo dello strumento di scaffolding create-react-app, che React raccomanda.

 

Il Web Developer crea un progetto di modello basato su react, usa react-router per compilare il routing delle pagine per controllare gli stub dei componenti a livello di pagina, suddivide l’interfaccia utente in diagrammi di struttura dei componenti, crea componenti, completa le pagine statiche e converte ogni progettazione di un’applicazione Web in una pagina statica, integrando il tutto in un’applicazione Web completa, creando l’effetto di interazione dei vari componenti nell’app.

 

Il progetto realizzato in React ha una buona componibilità, riusabilità e manutenibilità e può costruire un’interfaccia utente completa dal basso verso l’alto fino alla nidificazione dei livelli di componente.