{"id":25962,"date":"2024-02-21T09:30:00","date_gmt":"2024-02-21T08:30:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=25962"},"modified":"2024-02-20T14:32:34","modified_gmt":"2024-02-20T13:32:34","slug":"tendenze-frontend","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/tendenze-frontend\/","title":{"rendered":"Tendenze frontend per il 2024: rinascita dei CSS, BFF, linguaggi egemoni e altro"},"content":{"rendered":"\n

Il frontend non dorme mai! Ecco alcuni aggiornamenti, best practice e risorse degne di nota che sicuramente susciteranno il tuo interesse e miglioreranno i tuoi sforzi nello sviluppo.<\/p>\n\n\n\n

Abbiamo assistito alla straordinaria presentazione di Tejas Kumar durante la Codemotion Conference 2023 a Milano<\/a>, dove ha condiviso alcune delle ultime tendenze che caratterizzeranno il calendario dello sviluppo per il frontend nel 2024.<\/p>\n\n\n\n

Questo articolo si basa in parte sul suo intervento e su alcune altre considerazioni condivise dalla community di Codemotion.<\/p>\n\n\n\n

CSS Not Dead<\/h2>\n\n\n\n

CSS sta sfidando i detrattori ed emerge come un tool sempre pi\u00f9 robusto. Nonostante le sue limitazioni intrinseche, CSS sta entrando in una nuova era con l’introduzione di funzionalit\u00e0 e framework all’avanguardia, in particolare Tailwind CSS.<\/p>\n\n\n\n

Nuove funzionalit\u00e0 e risorse CSS<\/h3>\n\n\n\n
    \n
  1. Container Queries<\/strong><\/li>\n<\/ol>\n\n\n\n

    La personalizzazione degli stili in base alle dimensioni del \u2018contenitore\u2019 apre possibilit\u00e0 dinamiche per design responsivi. Le container query  forniscono un controllo pi\u00f9 dettagliato, consentendo agli sviluppatori di regolare finemente l’aspetto degli elementi all’interno di contenitori specifici.<\/p>\n\n\n\n

      \n
    1. Nesting<\/strong><\/li>\n<\/ol>\n\n\n\n

      L’introduzione del nesting nei CSS semplifica la struttura dei fogli di stile, migliorandone la leggibilit\u00e0 e l’organizzazione. Il nesting consente agli sviluppatori di racchiudere gli stili all’interno di contesti specifici, semplificando la lettura del  codice.<\/p>\n\n\n\n

        \n
      1. Viewport Units<\/strong><\/li>\n<\/ol>\n\n\n\n

        Con le viewport units, i CSS implementano uno strumento potente per il design responsivo. Gli sviluppatori possono specificare lunghezze e dimensioni relative alle dimensioni del viewport, garantendo un’esperienza utente fluida e adattabile su vari dispositivi.<\/p>\n\n\n\n

          \n
        1. Tailwind CSS Toolkit<\/strong><\/li>\n<\/ol>\n\n\n\n

          Nato nel 2017 ma cresciuto rapidamente in popolarit\u00e0, Tailwind CSS sta facendo sempre pi\u00f9 parlare di s\u00e9 con promesse di miglioramento delle prestazioni<\/a>, migliore esperienza dello sviluppatore e dimensioni di bundle ridotte. Tailwind \u00e8 open-source e consente agli sviluppatori di utilizzare classi di utility preesistenti direttamente nel codice HTML.<\/p>\n\n\n\n

          Backend for the Frontend (BFF): una nuova dimensione nello sviluppo frontend<\/strong><\/h2>\n\n\n\n

          La distinzione tra frontend e backend \u00e8 diventata pi\u00f9 sfumata con l’introduzione dei pattern Backend for the Frontend (BFF). Questo approccio innovativo aggiunge uno strato di controllo per gli sviluppatori frontend, cercando di colmare  il divario tra i due mondi. Vediamolo pi\u00f9 da vicino.<\/p>\n\n\n\n

          Cos’\u00e8 un modello BFF?<\/strong><\/h3>\n\n\n\n

          Il modello BFF (Backend for the Frontend) \u00e8 un approccio di design per cui viene creato un servizio backend dedicato specificamente per soddisfare le esigenze di un’applicazione frontend. Invece di avere un backend “uno per tutti ” che serve  pi\u00f9 applicazioni frontend, ogni frontend ha a disposizione un suo backend personalizzato.<\/p>\n\n\n\n

          Qui alcune caratteristiche del pattern BFF.<\/p>\n\n\n\n