Hvordan vi:
Udviklede vores hjemmeside
En gennemgang af teknologien bag vores hjemmeside fra valg af techstack til logikken bag vores 3d model på forsiden
Introduktion
KB Software havde brug for en ny hjemmeside, efter at have haft en WordPress løsning oppe i nogle år, følte vi for at lave noget lidt mere spændende og iøjnefaldende. Den skulle udstråle vores værdier, agilitet, kvalitet og service, give besøgende et indblik i, hvem vi er og samtidig gå i dybden med vores virksomheds kvalifikationer og ekspertise.
Techstack
Der findes rigtig mange forskellige frameworks, programmeringssprog og biblioteker til udvikling af webapps og websider, så der rig mulighed for at vælge imellem det hele. Nogle af de mest udbredte er f.eks. React, jQuery, Ruby on Rails, Angular, ASP.net, Vue.js, Django og listen udvider sig dagligt. Så hvorfor vælge Next.js? Og hvad er det smarte ved dette React framework?
Next.js giver en løsning til mange af de problemer som man møder når man er udvikler, og skaber samtidig en optimeret og hurtig webløsning til jer. Mange kunder og virksomheder kender til en af de mest moderne og betroede webteknologier, som React.js, især fordi at det er udviklet af selveste Facebook og bruger også React.js.
Next.js tager skridtet videre med React.js og bruger det samme økosystem, men udvider den med begreber som Automatic Static Optimization, pre-rendering af sider, server-side logik og API-ruter. Frameworket er også ekstremt SEO-friendly, og en fornøjelse at udvikle med.
Design
Hvis du har været på eventyr igennem hjemmesiden, kan du nok genkende at du skal scrolle en god mængde, billederne og teksten er store og der gøres brug af overgangs animationer. Alle disse valg er taget med omhu, da målet var at skabe et interaktiv, men minimalistisk design, som var en af de store webtrends i 2020 og har det med at lave comebacks nu og da.
Forside "Hero"
Her er der lige en forhåndsvisning af kuben på forsiden med en hvid baggrund, så det er nemmere at se:
Jeg tror de fleste kan genkende at det første man ser på forsiden af en hjemmeside typisk er et stort billede eller et banner, det er intet andet end Hero billedet og indeholder på andre tidspunkter også en form for animation eller 3D objekt. Vores hero er skabt med et bibliotek kaldet React-Three-Fiber som er en overbygning på nettets mest populære 3D bibliotek kaldt Three.js, som gør det muligt igennem WebGL at arbejde med det tredimensionelle univers i sin egen browser, også dynamisk. Og det er ikke det eneste 3D-rendering og logik i det tredimensionelle som KB Software beskæftiger sig med.
Hvis man intet kender til Three.js, men godt vil have en god guide Three.js: Creating a scene
return (
<>
<Canvas camera={{ fov: 60, near: 0.1, far: 800, position: new THREE.Vector3(0, 0, 12) }}
shadowMap
colorManagement
pixelRatio={window.devicePixelRatio}
gl={{ powerPreference: "high-performance" }}
>
<ambientLight intensity={0.25} />
<directionalLight
castShadow
position={[0, 10, 0]}
intensity={.1}
shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
shadow-camera-far={50}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-bottom={-10}
/>
<pointLight position={[0, -10, 0]} intensity={1.2} />
<KBIco colorInterval={320} position={[13, 0.5, -30]} radius={20} detail={2} />
</Canvas>
</>
)Her sætter vi vores 3D scene op, med React-Three-Fiber som var vores React renderer for Three.js.
- Canvas er hele vores 3D scenes omfang. Derefter tilføjer vi vores lys.
- "ambientLight" udligner mængden af lys på alt i scenen, det giver lidt bedre kvalitet.
- "directionalLight er et lys som kan kaste skygger, derved får vi noget dybde og følelsen af "3D" på en skærm.
- "pointLight" er tilføjet så det er lidt nemmere at se kuben hele tiden.
- KBIco er den kube som man så kan se på forsiden af hjemmesiden, med ændrende lys, rotation og kanter som "bouncer" ud af midten.
Animationer
Manipulationen af figurer og objekter, der får dem til at ligne at de er i bevægelse. Til animationerne på siden bliver der gjort brug af React-spring og GSAP. I din browser er der faktisk allerede muligheden for at udføre animationer igennem CSS, men den er ikke særlig god cross-platform. Derfor har vi valgt at bruge React-spring til de mindre animationer og GSAP til animationerne som afhænger af, hvor brugeren er på hjemmesiden. React-spring ligger pres på og løser et problem i animationsverdenen som er konceptet med at animationer i øjeblikket afhænger af hardcoded baner og varigheder, og hvorfor er det et problem?
En brugerflade udvikler kaldt Andy Matuschak sagde på et tidspunkt:
"Animation APIs parameterized by duration and curve are fundamentally opposed to continous, fluid interactivity."
React-spring løser dette problem, og gør det muligt for os at afbryde animationer midt i deres “varigheden”, det betyder vi kan få meget mere flydende og komponerebare brugeroplevelser. Men en af de ting man kan savne ved React-spring er muligheden for at lave animationer som afhænger af, hvor langt nede på siden brugeren er, men det løser GSAP. GSAP gør det muligt at lave animationer baseret på scroll-positionen, eksempelvis: På den måde kan vi lave brugerflader som føles levende og dynamiske, og GSAP er en af de mest populære animationsbiblioteker derude.
gsap.fromTo(element.current, {
opacity: 0,
transform: "translateY(40px)"
},
{
scrollTrigger: {
trigger: element.current,
start: "top center+=30%",
end: "bottom top",
toggleActions: "play none none none",
once: true
},
delay: delay,
opacity: 1,
transform: "translateY(0px)",
stagger: .1,
duration: 1.15,
ease: Power2.easeInOut
});Dette er et eksempel på en GSAP Tween med en scrolltrigger.
Det er denne tween som bliver brugt på alle elementer på den blog du læser lige nu!
Deployment
Til at deploy vores hjemmesideløsning til nettet gør vi brug af docker, som er nemt at fejlfinde og opsætte gennem en såkaldt “Dockerfile”.
FROM node:12
ENV PORT $PORT
ARG DATABASE
ENV DATABASE $DATABASE
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . /usr/src/app
RUN npm run build
CMD ["npm", "start"]Dette er en simpel metode til at skabe et docker image af en hvilken som helst app, som tager "DATABASE" som et argument.
Konklusion
Denne blog er ikke kun baseret på at forklare designet og konceptet bag hjemmesiden, men også for at inspirere andre til at bruge Next.js til deres hjemmesider, samt animationsbiblioteker som React-spring.
Hvis ikke andet er spørgsmål og lysten til at kontakte os meget velkommen!