Blazor e il Source Generator con le Roslyn API

Capita a tutti di invecchiare e rincoglionirsi, per me il processo è iniziato intorno all’adolescenza, ma è una sorte che prima o poi spetta a tutti quanti. Oddio sto iniziando con una digressione, ma se è all’inizio di un testo, può ancora essere chiamata digressione oppure può benissimo essere definita apertura a vuoto o ad-cazzum? Oh my God, sto introducendo una nuova digressione, sarà una re-digressione o una meta-digressione?!?!?!? OK stop…

Come scritto in precedenza ho ricominciato a scrivere codice su Blazor, non ne comprendo neanche io il reale motivo, forse non voglio essere uno sviluppatore à la page ma non voglio neanche diventare un dinosauro, mi piace piuttosto rimanere fra “tra incudine e martello”, non riscendo a decidere di quale morte voglia morire. Ho iniziato a sviluppare una serie di involucri (wrapper) per librerie API JavaScript, così da studiare le nuove strategie di sviluppo introdotte su Blazor, visto che ero rimasto fermo alle versione .NET 4.x, imparando a mie spese le peculiarità del nuovo JS Interop sviluppato da Microsoft. Uno dei primi problemi che mi sono trovato ad affrontare sin da (praticamente) subito è stato quello del dover creare script .JS personalizzati anche solo per leggere/scrivere una misera proprietà o invocare il costruttore di una classe JavaScript. Questo ha introdotto il “nuovo” (che poi tanto nuovo non era) problema del dover gestire il caricamento del modulo, coi relativi script JavaScript annessi, ed in modalità on-demand: ovvero solo quando ce ne fosse stato realmente bisogno. Questo ha introdotto una nuova problematica del dover gestire lo smaltimento del modulo una volta che…

… eh no, caro Zio Billy*, stavolta mi sono fatto furbo! 😏

(* Zio Billy per me sarebbe Bill Gates che non è più in Microsoft da 20 anni, ecco sono così vecchio io)

Continua a leggere “Blazor e il Source Generator con le Roslyn API”

Ritorno a Blazor 🥳

Qualche anno fa avevo iniziato a studiare il framework Blazor quando era ancora basato sulla versione di .NET antecedente alla 5.0 (v3.1 del 2019), realizzando anche una piccola applicazione WebAssembly per processare tag audio col browser, ma incontrai molte difficoltà tecniche, principalmente nell’interoperabilità JavaScript / CSS, e soprattutto il paradigma della programmazione mi sembrava eccessivamente farraginoso. L’idea di sviluppare applicazioni web front-end con il magnifico linguaggio C# è molto attraente. Tuttavia, la piattaforma, basata esclusivamente sui browser, impone limiti significativi al livello di astrazione raggiungibile.

La visione (utopistica) per la quale nutrivo grandi speranze era di sviluppare 1, o al massimo 2 layer di librerie Blazor di basso livello per l’astrazione base fondamentale. Su questa base fondamentale, avrei poi potuto adattare una serie di librerie .NET C# di più alto livello che, in parte, avevo già sviluppato. Questo mi avrebbe consentito di disaccoppiare il codice di alto livello dalla piattaforma sottostante e poter poi realizzare, con lo stesso identico code base, sia applicazioni web sia la loro versione desktop … e anche mobile! Ecco è rimasto giusto un sogno perchè poi le cose sono andate totalmente in merda 😏

Ma oggi con Blazor basato su .NET 8/9 le cose sembrano essere migliorate…

Continua a leggere “Ritorno a Blazor 🥳”

Aggiornamento pagina per esempi grafica in TypeScript 📜

Ho finalmente aggiornato la pagina esempi grafici in TypeScript, ora sono inclusi i progetti (a.k.a. soluzioni) scaricabili sviluppati usando Visual Studio 2022 (Community Edition). Ogni archivio ZIP contiene sia l'”eseguibile” compilato sia il codice sorgente completo. Ho inoltre aggiunto un nuovo progetto alla lista: lo script WebGL dell’header (e del footer) usato in questo blog.

Sono solo semplici esperimenti ma sentitevi liberi di usarli per qualsiasi scopo 😉👍

Giochicchiando con WebGL – Parte III

Dopo un lungo periodo di assenza, sto pian piano riprendendo le attività in questo mio blog personale e spero in maniera regolare. Era troppo tempo che intendevo aggiornare l’header superiore del sito, scritto in TypeScript e in WebGL, e finalmente ci sono riuscito; a dire il vero il codice è stato modificato diverse settimane fa ma ho scritto un post solo ora. Il banner animato è estremamente semplice: ci sono 2 triangoli che formano un rettangolo a pieno schermo canvas e ai 4 angoli vengono generati 4 colori casuali. Usando l’interpolazione bi-lineare classica su ogni triangolo, non viene considerato il 4° colore, perchè non è parte dell’elenco dei vertici passati al renderizzatore, creando un artifatto grafico (del colore) sulle ipotenuse. Ho risolto molto semplicemente creando un color fragment shader ad-hoc per svolgere il compito, adesso per ogni pixel dei triangoli vengono interpolati linearmente i 4 colori degli angoli, creando una doppia interpolazione lineare (a.k.a. bilinear filtering), sia nell’asse X sia nell’Y … da non confondere con la quadratic interpolation che invece è tutt’altra cosa!

Continua a leggere “Giochicchiando con WebGL – Parte III”

JavaScript fa ca**re 😫

Da qualche giorno sto brigando pesantemente con Emscripten: quel magico strumento che consente di transpilare (un neologismo, dall’inglese “to transpile“) codice C/C++ in WebAssembly. Devo convertire alcune librerie C++ in wasm, per poterle invocare da JavaScript e successivamente (molto probabilmente) da Blazor. È un lavoro molto impegnativo perchè la purezza del C++ in qualche modo deve scontrarsi col pressapochismo intrinseco di JavaScript; e putroppo questo è inevitabile 😓

Continua a leggere “JavaScript fa ca**re 😫”

Blazor – .NET 5 RC1

Qualche giorno fa è stato rilasciato il nuovo .NET 5 (Release Candidate 1) che ha introdotto alcune interessanti novità nel comparto Blazor. La succosa novità che ho provato a velocità warp è stato il neo-introdotto <Virtualize> ovvero il componente built-in che consente di virtualizzare una serie (numerosa) di elementi in modalità scorrimento; a mo’ di ListBox per capirci. Putroppo non funziona benissimo, ancora qualche bug, ma la direzione intrapresa è quella giusta.

Continua a leggere “Blazor – .NET 5 RC1”

Huawei lascia Android: benvenuto WebAssembly!

Con un annuncio ufficiale all’HDC 2020, Huawei dice addio (definitivamente) ad Android in favore di HarmonyOS. Per lo scenario post-Android si possono prendere in considerazioni diverse ipotesi, almeno per il breve futuro:

  1. Huawei perderà importantissime quote di mercato globale.
  2. Si aprirà un nuovo mercato Cinese, specifico ed esclusivo, per HarmonyOS.
  3. All’attuale duopolio Android-iOS si aggiungerà anche HarmonyOS segmentando ulteriormente le piattaforme (come se gli sviluppatori non fossero incasinati già abbastanza 😥).

Forse la 3° ipotesi è quella più probabile, visto che dalle caratteristiche dichiarate HarmonyOS sarebbe in grado di convertire seamless gli APK Android in applicazioni HOS.

Continua a leggere “Huawei lascia Android: benvenuto WebAssembly!”

PWA – Progressive Web Application

Ho sviluppato una piccola applicazione webassembly usando Blazor (https://wasmtagger.medieval.it) poi ho deciso di pubblicarla nei vari app store e questo è stato il risultato:

  • Apple Store è zona interdetta: non si possono pubblicare WebAssembly. In realtà ci sarebbe il modo, ma bisogna usare chilometri di red-tape quindi, per ora, escluso.
  • Google Play accettata con riserva. Le app webassembly possono essere distribuite solo ai maggiorenni, che è un paradosso perchè anche se la tua applicazione ha “PEGI 0”, cioè indicata anche per neonati, può essere distribuita solo ai 18+. Ipotizzo per una questione di sicurezza. Considerato il rapporto costi-benefici, direi che questo limite risulta più che accettabile.
  • Microsoft Store accetta senza riserve (e credo sia anche normale visto che questo store lo usa giusto Bill Gates e ¾ della palazzina sua 😅). L’unico problema è trovare il software giusto per editare il file APPX da inviare al portale, personalmente ho usato Advanced Installer in versione trial.

Il sito PWABuilder ti genera sia il file .APK da inviare a Google Play sia il file .APPX da inviare a Microsoft Store, estraendo i dati dal manifest.json del tuo sito PWA: il meccanismo funziona piuttosto bene.

Al momento sto riscontrando problemi nell’aggiornamento delle versioni, penso ci sia un corto-circuito tra cache e service worker, ma sto facendo delle prove più approfondite per capire chi è il responsabile nella catena: tra browser, applicazione, service worker o app store.

Fondamenti di CSS: display e position

Ai folli che si stanno addentrando nel meraviglioso mondo di CSS come me, voglio dare un consiglio per evitare inutili mal di testa. Ogni volta che si affronta un problema di indentazione e/o impaginazione, bisogna tenere sempre ben a mente 2 fondamentali proprietà CSS: display e position.

Display – La migliore definizione che ho trovato è in assoluto questa su StackOverflow.com. I 3 valori “inline”, “block” e “inline-block” sono quelli storici e più usati, il nuovo valore “flex” è quello da studiare subito dopo. I valori “table”, “table-row” e “table-cell” li troveree spesso ma sono abusati. Una volta assorbiti i fondamenti, ricordatevi che alcuni tag HTML sono per default elementi-blocchi (lista completa) mentre i rimanenti sono elementi inline (lista completa).

Position – Causerà parecchi grattacapi. La migliore spiegazione che ho trovato è questa. Come si evince dal tutorial, “position” ha un doppio legame anche con le proprietà “float” e “clear”. Queste 3 proprietà insieme verranno molto usate.

Imparare la teoria “su carta” di queste proprietà è stupendo, fa sembrare tutto semplice, ma quando ci si trova con decine di layer innestati, ognuno con definizioni differenti, si fa molta fatica a seguire il significato logico dei vari elementi HTML. Se ogni volta che vi scontrate con codice HTML + CSS sentite una forte sensazione di frustrazione interna, sappiate che è un disagio assolutamente NORMALE!!!

CSS è fantastiglioso!

OK, OK, dovevo fare una cosa semplicissima con CSS: posizionare 2 elementi dietro l’altro in orizzontale e centrarli verticalmente. Facile direte voi … LA MINCHIA rispondo io!

vertical-align: Ironia sul web
vertical-align: Ironia sul web

Da buon neofita di CSS, come prima soluzione ho usato il comando vertical-align con valore middle, ovviamente il browser m’ha risposto picche (è s’è fatto pure ‘na risata). Come si può vedere dall’immagine allegata sulla destra, su questo argomento alcune persone particolarmente goliardiche hanno scatenato la loro ironia e ci si sono divertite alla grande 🙂 Ho iniziato a cercare, a ricercare e a ricercare ancora su Internet una possibile soluzione e dopo circa 37-38 ore di navigazione ininterrotta mi è venuto il dubbio che fosse un problema piuttosto comune. Può sembrare strano ma è esattamente così: questo è uno scoglio su cui ci si scontrano inizialmente praticamente tutti gli sviluppatori. Alla fine ho trovato questa pagina che spiega un paio di barbatrucchi semplici semplici, ma è frustrante constatare come l’HTML, dopo oltre 20 anni di onorato servizio, risulti ancora così “arretrato”.

A quanto pare i browser più recenti hanno risolto questi problemi di allineamento e orientamento usando il nuovo parametro FlexBox, che sarà la prossima funzionalità che andrò a studiare non appena mi riprendo da questo trip.