Ja ha passat una mica més d’una dècada des d’aquell abril en què una carta d’Steve Jobs anunciava la negativa d’incloure Flash en la plataforma iOS i que desembocaria en el declivi de Flash, una plataforma que per a molts era en aquells dies la més avançada i versàtil en el context del desenvolupament web.
No és la meva intenció reviure en aquest article les eternes discussions sobre les bondats i problemes que ens presentava aquesta tecnologia en aquells dies. Ja saps… un gran poder comporta una gran responsabilitat. Res nou.
El que sí que vull analitzar i posar en perspectiva és el canvi que ha implicat el fet que els actors principals de l’ecosistema web decidissin canviar el camí cap a altres tecnologies. Un canvi que, des del meu punt de vista, se sustentava sobre un argumentari que tenia poc a veure amb el que realment motivava aquestes decisions.
Tornant al tema, centrem-nos a analitzar breument l’impacte que aquest canvi ha implicat per a tots els professionals del desenvolupament web, a molts i diferents nivells entre els qual es troben: tecnologies i llenguatges, noves API en navegadors, filosofies, estratègies i paradigmes de desenvolupament, frameworks i llibreries, editors de codi, eines i serveis de publicació en línia, automatització, etc.
La primera conseqüència, i més òbvia, de totes les que implica un canvi com el que s’estava iniciant en aquells dies, era que l’alternativa triada havia de prendre el relleu intentant que, en aquest procés, no es fes un pas enrere. L’alternativa triada van ser els estàndards web i el temps ha anat demostrant que el camí no ha estat tan senzill com ens van voler vendre.
El canvi va ser gran i tant si el vas patir com si el vas gaudir, o com si no el vas experimentar, perquè portes menys temps en això…, és bo no perdre de vista la història que ens ha portat fins on ens trobem avui.
La cosa s’ha posat interessant? Som-hi!
HTML5, CSS3, Canvas, WebGL, SVG…
Els estàndards web van ser triats com a alternativa, però la realitat és que hi havia molta feina encara per fer en moltes àrees per a permetre mantenir el nivell de les experiències en línia, a les quals els usuaris ja estaven acostumats.
Els que ja tenim una edat i vam viure aquell canvi, recordarem sens dubte que coses tan «trivials» avui dia com centrar un element en pantalla no ho eren tant el 2010, ja que el Flexible Box Layout que avui ens sembla fins i tot «antic», va començar a implementar-se en els navegadors entorn el 2012.
Era necessària una millora important en les especificacions i capacitats que conformaven la base d’aquest nou camí i així hem anat vivint l’aparició d’HTML5 i CSS3: el primer modernitzant i millorant les opcions d’etiquetatge semàntic i el segon donant cobertura a una infinitat de necessitats visuals que eren complexes o fins i tot impossibles d’implementar sense fer ús de Javascript.
Parlant d’HTML, ens hem de referir a Canvas per al treball amb gràfics des de Javascript, la inclusió d’elements àudio i vídeo per al treball amb aquests formats sense necessitat de plugins de tercers, etiquetes picture i source per al treball amb imatges en multidispositiu i l’API WebGL per al treball amb contingut 3D mitjançant scripting són algunes de les mancances «directes» que s’han hagut d’anar superant per a no retrocedir en el temps.
D’altra banda, CSS3 va representar un punt d’inflexió en la capacitat dels navegadors per abordar sol·licituds determinades, amb un canvi de paradigma en l’especificació en basar-se en mòduls independents com ara el control del model de caixa, tipografies variables, gestió avançada de fons i vores, efectes de text, transformacions 2D i 3D, animacions i layouts avançats amb media queries, columnes múltiples, flexbox i, més recentment, funcionalitats tan importants com grid, variables, millores en selectors (has, is i imbricació), container queries, cascade layers, multitud de noves unitats, suport a nous sistemes de color…
Aquesta millora en els llenguatges ha generat un patró al qual Eric Meyer (un dels referents mundials quant a estàndards web es refereix) va denominar el 2017 «La complexitat decreixent», i encara que ell va aplicar el concepte a CSS, crec que es pot traslladar també als altres dos fonaments dels estàndards que regeixen avui la web: HTML i Javascript.
La seva intenció era traslladar que la incorporació de les capacitats dels llenguatges per a permetre simplificar tasques que abans no eren si més no possibles implica un creixement, que no necessàriament té per què ser sinònim de complexitat.
Del tuit original va quedar gravat en la meva retina la imatge tan contundent on es podia apreciar l’evolució de CSS en els últims temps. S’hi veia clarament que l’última edició del seu llibre que en aquells dies publicava CSS The Definitive Guide, tenia la mateixa extensió que les dues edicions anteriors juntes.
El mateix ha ocorregut amb SVG. Una cosa aparentment tan simple com un format d’arxiu d’imatge del qual es poden trobar llibres de més de 300 pàgines dedicats en exclusiva a ell, o fins i tot llibres sobre tècniques específiques per al seu ús de més de 200 pàgines.
JavaScript
Javascript no només ha hagut d’acompanyar aquestes noves funcionalitats (com Canvas, WebGL, àudio, vídeo, etc.), sinó millorar com a llenguatge i simplificar moltes tasques.
El llenguatge gairebé no havia evolucionat des de 1999, però es va produir un punt d’inflexió amb l’arribada d’ECMAScript 6 (també conegut com a ES6 o ECMAScript 2015 per ser publicat al juny d’aquest any), que va comportar una gran actualització incloent-hi gran quantitat de funcionalitats esperades en un ECMAScript 4 que mai no va veure la llum.
Aquesta versió, a més de fer un pas de gegant per millorar el treball amb el llenguatge, també va implicar una nova dinàmica de treball en l’estàndard, amb versions periòdiques anuals a través de les quals s’introdueixen contínuament millores en el llenguatge, una cosa totalment necessària si es vol mantenir el pols amb els avanços tecnològics actuals i demandes dels usuaris (dispositius, maquinari, programari, sensors, capacitats…).
No podem entrar detalladament de tot el que ha donat de si Javascript en aquests anys, però simplement consultant la llista de noves API suportades ens podem fer una idea de l’envergadura del canvi: Fetch, Web Components, Web Workers, Storage, File, Push, Clipboard, History, Keyboard, Gamepad, Geolocation, Canvas, WebGL, WebRTC, GraphQL…
I arribats a aquest punt, he de parlar també de TypeScript, un llenguatge tret a la llum per Microsoft el 2012, tipat, transpilat a Javascript i que ha adquirit una notorietat més que evident en el desenvolupament frontend, oferint alguns avantatges molt interessants per a segons quin tipus de projectes i sent adoptat per la gairebé totalitat dels principals frameworks actuals.
Déu-n’hi-do.
I no he esmentat que el 2009 va irrompre node.js en el nostre món per a canviar-lo per complet, corrent Javascript fora del navegador (principalment en el servidor) gràcies a les possibilitats que va oferir el motor de JavaScript V8 que va comportar un altre punt d’inflexió a molts nivells.
Navegadors
Tot el que hem vist no pot baixar a la terra si els navegadors no donen el suport necessari, i a més fent-lo de la manera més consistent i unificada possible.
Al llarg de la meva trajectòria, m’han preguntat en moltes ocasions en què creia que residia l’èxit de tecnologies com a Flash, o fins i tot llibreries com jQuery. Jo sempre vaig veure clara la resposta. Totes elles van néixer amb l’objectiu de solucionar un dels grans problemes que hi havia en el desenvolupament web: la inconsistència dels navegadors, tant amb mancances per suportar continguts determinats com amb les diferències que generaven a l’hora d’implementar aquest suport.
Quan parlo de suport no només vull fer al·lusió al fet que els navegadors siguin capaços de mostrar aquestes millores, sinó que aportin eines que permetin una millor experiència en el desenvolupament amb aquestes. A parer meu, quelcom totalment necessari per abordar les necessitats i nivell de professionalització actuals.
Per fortuna, les eines per a desenvolupadors que els navegadors principals (Chrome, Safari i Firefox) han anat incorporant i millorant, han estat claus per poder abordar l’actual complexitat i professionalització existent en el desenvolupament web.
En aquest sentit, crec que ens trobem en una de les millors èpoques del desenvolupament web, encara que no exempts d’algunes inconsistències i mancances de suport que difícilment es podrien solucionar per complet mentre els navegadors depenguin d’empreses (en molts casos molt poderoses) amb els seus propis interessos i fulls de ruta.
Sobre filosofies, estratègies i paradigmes de desenvolupament
Haig de reconèixer que m’ha costat posar un encapçalat a aquest apartat, perquè hi vull incloure aspectes no tan tangibles com poden ser els vists fins ara.
El món ha canviat, ho continua fent molt ràpidament i la tecnologia ha estat un dels principals detonants d’aquests canvis… Per si n’hi hagués prou, internet és un dels protagonistes on tot això està succeint, i això, com a professionals que treballem en i per a aquest mitjà, ens impacta de ple.
Hem passat de dissenyar i desenvolupar per a una resolució gairebé única a ser pràcticament impossible elaborar un llistat de les resolucions on els nostres projectes cobraran vida. De disposar d’una connexió generalment lenta, a enfrontar-nos a tota mena de connexions. De treballar amb un servidor, a combinar el nostre contingut des de multitud de serveis especialitzats, com per exemple CDN. De mostrar contingut gairebé estàtic, a donar informació en temps real amb notificacions, consulta constant de dades, etc.
Tot això ens ha portat a replantejar-nos multitud d’aspectes que abans eren més senzills per naturalesa, i ha requerit posar sobre la taula noves filosofies de desenvolupament, arquitectures i paradigmes com l’arxiconegut Responsive Web Design el 2010, d’Ethan Marcotte (renegant del terme responsiu com a traducció), Mobile First el 2009 del genial Luke Wroblewski que posteriorment es convertiria en un llibre, ITCSS el 2016 d’Harry Roberts (molt alineat amb les noves cascade layers de CSS) i una gran multitud d’estratègies de desenvolupament com: Single Page Applications (SPAs), Server Side Rendering (SSR), Static Sites Generators (SSGs), Progressive Web Applications (PWAs), arquitectura Jamstack, etc.
Una infinitat de possibilitats (no necessàriament excloents) a l’hora d’abordar els nostres projectes, amb els seus avantatges i els seus desavantatges, però que ens han portat una multitud de frameworks de desenvolupament com els omnipresents: Angular, React i Vue.
Eines i serveis
I no podíem deixar de parlar de les eines, més enllà dels navegadors dels quals ja hem dit que són una peça clau en aquest apartat.
Aquí tenim un monstre de múltiples caps el creixement i l’avanç dels quals ha canviat en diverses ocasions manera com desenvolupem els nostres projectes, perquè no parlem només d’editors de codi (possiblement liderats avui per Visual Studio Code), sinó que cal abastar multitud d’eines que són i han estat claus en aquest camí (moltes d’elles entorn de l’ecosistema creat per node.js):
- Plataformes com Github, GitLab, Bitbucket per al desenvolupament col·laboratiu i versionat de codi.
- Package managers com npm o yarn.
- Preprocessadors CSS com Sass i LESS o eines com PostCSS.
- Linters, especialment per a JS com són JSLint, ESLint o JSHint.
- Task runners com Grunt i Gulp.
- Build systems com WebPack, ESbuild, Vite…
- Eines DevOps i de desplegament continu amb plataformes com Docker, Kubernetes i serveis en el núvol com AWS d’Amazon, Azure o Google Cloud.
- Serveis per a projectes Jamstack que simplifiquen algunes tasques en el desenvolupament i publicació a nivells sorprenents, com són el cas de Netlify i Vercel.
- Plataformes completes específiques per a diferents tipus de projectes com Shopify, Squarespace…
I encara em quedarien molts fronts per abordar, com, per exemple, totes les eines d’optimització, nous protocols de compressió o la irrupció de la IA en moltes d’aquestes eines per a anar un pas més enllà, com és el cas de l’assistent Copilot per a l’escriptura de codi o la bogeria amb la IA generativa en el camp de la creació de contingut.
I ara què?
En el meu cas personal, les sensacions que experimento quan faig retrospectiva de tot el que està succeint en el desenvolupament web són una mescla de sorpresa, emoció i angoixa.
Sorpresa per la velocitat a la qual tot s’està succeint. Emoció, per les noves possibilitats que s’obren. I angoixa perquè no puc negar que implica, almenys en el meu cas, un factor d’angoixa i fatiga.
Per sort, soc dels quals pensen que la clau de l’èxit no es troba en la tecnologia ni en les eines (encara que sempre he defensat que sí que són molt importants i tenen un impacte evident en el nostre treball), sinó en les persones, en les idees i en la força dels missatges que som capaços de dirigir als fonaments que mouen a l’ésser humà (on l’evolució en el coneixement i estudi de l’experiència d’usuari ha estat un altre gran pas en aquests últims anys).
De fet, només he de mirar al meu voltant per comprovar que la immensa majoria d’aquells talentosos creatius, dissenyadors i desenvolupadors que triomfaven amb Flash continuen triomfant (i fins i tot més) després de sobreviure a aquest huracà què s’ha convertit la nostra professió.
Alguna cosa deu voler dir.
Referències / Enllaços relacionats
https://en.wikipedia.org/wiki/Thoughts_on_Flash
https://caniuse.com/?search=flex
https://meyerweb.com/eric/thoughts/2017/11/14/declining-complexity-in-css/
https://medium.com/codeburst/declining-complexity-in-css-ca65c4d606e4
https://www.oreilly.com/library/view/css-the-definitive/9781098117603/
https://en.wikipedia.org/wiki/ECMAScript_version_history
https://developer.mozilla.org/en-US/docs/Web/API
https://developer.chrome.com/docs/devtools?hl=es-419
https://developer.apple.com/safari/tools/
https://alistapart.com/article/responsive-web-design/
https://www.lukew.com/ff/entry.asp?933
https://www.lukew.com/resources/mobile_first.asp
https://csswizardry.com/2018/11/itcss-and-skillshare/
https://es.wikipedia.org/wiki/Single-page_application
https://en.wikipedia.org/wiki/Server-side_scripting#Server-side_rendering
https://en.wikipedia.org/wiki/Static_site_generator
https://en.wikipedia.org/wiki/Jamstack
Cita recomanada: GONZÁLEZ SANCHO, Juan Marcos. Retorn al futur. Mosaic [en línia], desembre 2024, no. 202. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n202.2408
Deja un comentario