Gratis CloudFlare UI Framework for Frontend Developers

CloudFlare kunngjorde nylig en omfattende revisjon av systemet fra Backbone til React.js . Dette kom med et oppdatert frontend UI-rammeverk og laget bestemte seg for å åpne den for alle.

CloudFlare UI Framework, forkortet CF-UI, er et gratis åpen kildekode-bibliotek med frontend-koder som kan knyttes til en React-arbeidsflyt .

Teamet har vært veldig åpent om deres trekk, inkludert andre teknologier som Lerna.js for å administrere kode på tvers av flere repos . Denne overhalingen går dypere enn overfladiske komponenter, men disse gratis komponentene kan gjøre en stor forskjell i arbeidsflyten din.

CloudFlare la til tilpassede komponenter i et bibliotek sammen med enhetstester for å kontrollere kodekvalitet. Du kan se en live demo for alle komponentene på denne siden, inkludert dokumentasjon og kodestykker .

All kode er bygget med React, slik at den utvider klasser laget for forskjellige komponenter som paginering, rullegardinmenyer, inputfelter og til og med automatisk kopiering av tekstområder.

Du kan bla gjennom alle pakkene på GitHub og de kan alle installeres via npm . Merk dette er ikke et enkelt frontend-rammeverk som Bootstrap (selv om det nøyaktig etterligner stilen deres). I stedet er dette en komplett React + Redux tilnærming til frontend-komponenter.

Vær oppmerksom på at du allerede bør føle deg komfortabel med å arbeide med React-komponenter, installere biblioteker via npm, og legge til bindinger gjennom React Redux.

Alle disse prosjektene er åpen kildekode og enkelt å legge til på nettstedet ditt. Individuelle komponenter har egne JS-filer som du kan legge til i sidens overskrift. Og du kan bla gjennom alle komponentene på GitHub-siden hvis du vil lære mer.

Live eksempler og kildekodestykker kan du finne her hvis du vil dykke rett inn. Og selvfølgelig, hvis du har spørsmål eller ideer til tekniske funksjoner, bør du bla gjennom diskusjonskatalogen for mer info. Du kan også prøve å sende CloudFlare devs eller sende dem en tweet @Cloudflare.