Desenvolupament d'Aplicacions

Què és React i per a què serveix?

ReactJS és una llibreria JavaScript de codi obert enfocada a la visualització. Aquesta tecnologia ens permet el desenvolupament d'interfícies d'usuari de forma senzilla. Això és possible mitjançant components interactius i reutilitzables.

React JS
Albert Campillo
Albert Campillo

gener 27, 2020

D'on surt React?

El web tradicionalment s'ha construït en HTML, JavaScript i CSS, separats en diferents carpetes. Això fa que sigui complicat escalar i extreure certes parts del codi (especialment JS i CSS) per migrar o reutilitzar funcionalitats a causa de les dependències que existeixen entre aquests llenguatges.

¿Però que passaria si fiquéssim tot això en un sol paquet? Això és el que van haver de preguntar-se els enginyers de Facebook i va propiciar que a mitjans de l'any 2013 es llancés la primera versió de la ja famosa llibreria.

React està basat en un paradigma anomenat programació orientada a components en el qual cada component és una peça amb la qual l'usuari pot interactuar. Aquestes peces es creen usant una sintaxi anomenada JSX permetent escriure HTML (i opcionalment CSS) dins d'objectes JavaScript.

Aquests components són reutilitzables i es combinen per crear components majors fins a configurar un web completa.

Aquesta és la forma de tenir HTML amb tota la funcionalitat de JavaScript i l'estil gràfic de CSS centralitzat per extreure'l i usar-se en qualsevol altre projecte.

Per què React?

React aporta una sèrie de clars avantatges enfront de la forma clàssica de fer un web. Les seves facilitats per al desenvolupament unides al rendiment, la flexibilitat i l'organització del codi la converteixen en una de les millors opcions.

Una de les principals raons perquè això sigui possible és l'ús de DOM virtual, React és capaç de generar el DOM de forma dinàmica, fa els canvis en una còpia en memòria i després la compara amb la versió actual de DOM, d'aquesta manera evita renderitzar tota la pàgina cada vegada que hi hagi canvis, simplement s'aplica el canvi a el component que hagi estat actualitzat, simple i ràpid. Això propicia una millor experiència d'usuari, a més d'un rendiment i una fluïdesa impressionant.

En tot projecte web és important tenir en compte el posicionament, i precisament aquest és un dels principals problemes d'aquest tipus de frameworks, això és a causa del desacoblament entre la part de client i de servidor, el contingut HTML s'obté mitjançant peticions a la API i posteriorment es genera, això provoca que quan el robot de Google rastreja la web el contingut encara no existeixi. Amb React no tindrem aquest problema ja que permet isomorfisme, això vol dir que és capaç de renderitzar aquest HTML tant en el client com en el servidor, de manera que quan arribi el robot de Google podrem lliurar-li el contingut ja renderitzat i això ens permetrà posicionar igual de bé que el típic wordpress de tota la vida.

React Native mereix un altre post per si sol, però de moment cal comentar que és una altra eina que compilant el mateix codi Javascript facilita la generació d'aplicacions natives per Android, iOS, etc.

Quina acceptació té al mercat?

L'última enquesta de StackOverflow ens revela que React és el framework més estimat i més desitjat en aquest últim any, a més de ser ja el segon més usat només per darrere de jQuery. Això està fortament lligat al fet que Javascript torna a ser el llenguatge més popular per setè any consecutiu, cosa que marca una tendència clarament ascendent.

No és casualitat que empreses com Netflix, Airbnb, Dropbox, Paypal, Tesla, WhatsApp, Uber, etc. hagin apostat per aquesta tecnologia, la inversió que ha fet Facebook i el gran nombre de desenvolupadors que han contribuït a aquesta llibreria de codi obert fan que sigui una aposta segura de futur.

React i Drupal

Drupal 8 és un potent CMS que ofereix una gran customització de backend i aporta molta flexibilitat en la gestió de continguts. A Drauta som especialistes en disseny web i fem servir React en el desenvolupament d'aplicacions per millorar la velocitat de càrrega de les pàgines i el frontend.


 

Comparteix aquest article

Articles Relacionats