Er zijn tegenwoordig flink wat programmeertalen die interessant kunnen zijn voor beginnende developers. Om te beginnen zal ik je aanraden om te beslissen waarin je jezelf wilt specialiseren, is dat front-end (het uiterlijk van de site), de backend (het technische gedeelte van de website) of een beetje van beiden (allround developer)?
In deze informatieve tutorial gaan we door verschillende veelgebruikte technieken, frameworks en interessante mogelijkheden. De mogelijkheden zijn in deze tutorial beknopt beschreven en zijn veel uitgebreider, maar het geeft je een goed beeld wat interessant voor jou kan zijn en waar je kan beginnen.
Indien je iets tofs ziet, open Visual Studio code (ook wel bekend als VS Code) maak een nieuw project aan en probeer het uit! Indien je ergens niet uit komt, stel je vraag op het forum 😎
TIP: Iedereen leert op zijn eigen tempo, zorg ervoor dat ook jij leert op je eigen tempo en je langzaam moeilijkere uitdagingen aan gaat. Begin niet direct bij de lastigste uitdagingen, want dan leer je de basis niet.
TIP: Maak fouten tijdens het programmeren, hierdoor leer je nieuwe situaties kennen en weet je in de toekomst hoe je die fout kan oplossen.
Beginnen met front-end development
HTML & CSS
HTML is een afkorting dat staat voor HyperText Markup Language en wordt gebruikt als opmaaktaal voor webpagina's. De afkorting CSS staat voor Cascading Style Sheets en geeft de mogelijkheid om de vormgeving en opmaak van webpagina's aan te passen. Je gebruikt CSS om de HTML te stijlen.
Indien je de interesse hebt om voor frontend development te gaan zou ik je willen aanbevelen om er voor te zorgen dat je beting met het leren van HTML en CSS. Daardoor kan je snel schakelen tijdens het bouwen van je websites en projecten.
CSS-Tricks en W3schools hebben veel leuke tricks en informatie over CSS properties, flex-box en beschikbare tools. Je kan ook enorm veel toffe voorbeelden zien op codepen.io.
JavaScript
JavaScript is een scripttaal om je websites en webpagina's interactief te maken. Het is ontwikkeld door Mozilla en is een taal waar veel frontend frameworks geschreven in zijn waardoor. JavaScript staat in iedere browser standaard aan en is de afgelopen jaren steeds populairder en geavanceerder geworden.
De afgelopen jaren is JavaScript uitgegroeid naar een steeds volwassener scripttaal door de uitrol van ES5, een versie waar nieuwe technieken, functionaliteiten en de pijlfuncties beschikbaar kwamen. Als je van plan bent om JavaScript wilt gaan leren zou ik je aanbevelen om uit te zoeken wat hierin allemaal veranderd is.
De documentatie van JavaScript is te vinden op de website van Mozilla (docs) en er zijn veel tutorials bij W3schools.
Wanneer je al wat meer ervaren bent in HTML, CSS en JavaScript, dan raad ik je aan om eens te experimenteren met JavaScript frameworks, deze frameworks helpen je uitgebreide applicaties te ontwikkelen en veel code te hergebruiken. Populaire JavaScript frameworks zijn onder andere React.js of Vue.js.
Hieronder zijn een aantal leuke frameworks benoemd waar je mee kan experimenteren:
- React.js
- Vue.js
- Angular
- Mithril
Heb je een probleem met je JavaScript code of heb je andere vragen? Post je code in de Vraag & antwoorden categorie 😎
Package managers
Voor frontend development zijn handige package managers in het leven geroepen waarvan ik je aanraad om ze uit te proberen. Je gaat ze geheid tegenkomen als je dieper in frontend gaat. Package managers zijn plekken waar componenten, stukken functionaliteiten of framework cores kunnen worden gepubliceerd, via de package managers kun je deze simpel downloaden in je project en up-to-date houden. Een van de populairste package managers zijn npm en yarn, beiden maken gebruik van NodeJS in de achtergrond.
Persoonlijk maak ik gebruik van npm, maar dat is per developer verschillend.
Wat is Webpack, en wat zijn asset bundlers?
Veel frontend frameworks zijn geoptimaliseerd om gebruikt te worden met Webpack of Gulp, daardoor zal je vaak deze namen terug zien komen in tutorials of documentatie. Dit zijn simpel gezegd module bundlers.
Packages voor deze bundlers kunnen worden gepubliceerd op npm en yarn en kunnen worden gebruikt om bepaalde assets te genereren voor je website. Door je site te bouwen in deze asset bundlers kun je geavanceerde functies gebruiken om bijvoorbeeld JS te bundelen naar één bestand en kun je gebruik maken van SASS, een handige package die je helpt om gestructureerde CSS te schrijven.
Modules kunnen ook worden gebruikt om bepaalde functies toe te voegen aan builden en deployen van je website (de website publiceren). Zo kun je Babel.js toevoegen om nieuwe JavaScript functies te laten werken voor oudere browsers waardoor je bijna gegarandeerd bent dat je website werkt in oudere browsers.
Hier zijn veel mogelijkheden in en ik raad je aan om er mee te experimenteren.
Wat zijn Progressive Web Applications
Progressive Web Applicaties (afgekort met de term PWA) zijn webapplicaties in JavaScript en HTML die uitgevoerd kunnen worden als een native programma. Het heeft de voordelen dat de website gewoon bezocht kan worden, maar in de meeste gevallen gecached wordt in de achtergrond.
De browser download de assets van de PWA website en wanneer de gebruiker op een later moment de website bezoekt zullen deze gebruikt worden waardoor de website direct geopend wordt. Hierdoor is je content ook offline beschikbaar.
Een ander voordeel van PWA's is dat de gebruiker de keuze krijgt om de applicatie te 'installeren' op de mobiel en desktop. Als je de applicatie installeert op mobiel verdwijnt de webbrowser UI (User Interface) en wordt het gezien als een daadwerkelijke mobiele APP. Het zou hierdoor ook goed mogelijk zijn dat mobiele APPs op een gegeven moment vervangen worden door Progressive Web Applications omdat elke app per platform een eigen source heeft (voor iOS is dat Swift, voor Android is dat Java). Google is op dit moment naar de mogelijkheden aan het kijken om PWA's toe te staan in de Google Play Store, terwijl Apple nog probeert om PWA's te weren (al worden de mogelijkheden op dit platform toch steeds meer uitgebreid).
Net zoals op mobiel, zal een PWA op desktops ook geopend worden zonder browser UI. Het leuke hiervan is dat je website of applicatie vanaf een icoon op het bureaublad of startmenu te openen is.
De meeste JavaScript frameworks zijn tegenwoordig al uitgerust met basiscode voor PWA's.
TIP: Om te zien wat er tegenwoordig met JavaScript allemaal mogelijk is qua mobiele functies (zoals trillen, push notificaties, Bluetooth, file access etc), bekijk deze website: https://whatwebcando.today/
Als je deze website op mobiel bekijkt, kun je een aantal functies (zoals trillen, push notificaties etc) uittesten!
De jQuery library
Wanneer je zoekt naar JavaScript oplossingen zal je waarschijnlijk merken dat het internet vol staat met oplossingen waar jQuery in genoemd wordt. Ik raad je af om deze library te gebruiken als je gebruik maakt van een frontend framework. jQuery is een library die vroeger (en in principe nog steeds) populair was/is. Maar het is niet gebouwd om gebruikt te worden in frameworks zoals React of Vue.js.
Tegenwoordig bied de library geen voordelen meer omdat JavaScript in de loop der jaren krachtiger is geworden en meer functionaliteiten heeft gekregen.
Backend development
Voor de backend development kan PHP of NodeJS (JavaScript serverside) interessant zijn.
Indien je zowel frontend als backend wilt leren en een frontend framework wilt leren, dan zou je gebruik kunnen maken van Next.js, dat is een React.js en NodeJS gebundelde oplossing waar je de backend van de website ook in JavaScript schrijft. Ook Vue.js heeft hier een variant van, genaamd Nuxt.js.
Voor PHP zijn er velen interessante frameworks waar je gebruik van kan maken:
Deze PHP frameworks hebben vaak ook tools om samen te gebruiken met je frontend frameworks. In veel gevallen schrijven developers een Rest API voor de data management of is er een frontend map in je GIT die de backend weergeeft.
API 's en RESTful API 's
Als je met backend bezig bent en andere services implementeert krijg je te maken met een Application Programming Interface (API). Door middel van deze API's maak je verbinding met hun service en website waardoor je functies kan gebruiken die zij aanbieden. Ook kun je van API's gebruik maken als je data wilt uitlezen van een website. API's hoeven niet publiekelijk toegankelijk te zijn, vaak moet je jezelf authentiseren met een secret token voordat je toegang krijgt. Deze tokens kun je aanvragen op de desbetreffende service of staan voor jou zichtbaar in je account.
Het is belangrijk dat je op z'n minst de basis hiervan kent en begrijpt wat het is/doet en wat de mogelijkheden zijn.
PHP Package manager/Dependency manager
Net zoals voor frontend zijn er voor de PHP backend ook package managers. De meest populaire package manager is Composer. Hoewel de website verschrikkelijk simpel uit ziet, is het een uitgebreide manager en zijn er gigantisch veel packages beschikbaar.
Een overzicht van packages is te zien op Packagist. Wanneer je zoekt op bijvoorbeeld PHP functionaliteiten wordt er vaak de optie gegeven om de package te installeren via composer waarna die direct in je project te gebruiken is.
Maak gebruik van GIT / GitHub / GitLab
Als laatste tip wil ik meegeven om gebruik te maken van GIT. Git is een versie manager voor de code die je schrijft en is belangrijk voor zowel frontend als backend development. Ook is het populair als je met meerdere mensen aan een project werkt. Per project maak je een repository aan en kun je de voortgang bijhouden per project. Zo verlies je je code en project niet als je computer crasht 🙂
In git kan je verschillende branches aanmaken waar je bepaalde features in bouwt en daarna merged naar je master zodra je gaat deployen. Je met GIT ook oude code terughalen omdat je steeds commit naar de server toe waardoor elke coderegel/versie opgeslagen wordt.
Elke teamlid cloned de repository lokaal op z'n eigen computer en commit wijzigingen naar de juiste branch (of een eigen branch). Daarna kun je deze wijzigingen pullen en heb je de wijzigingen lokaal.
GIT kan ook helpen met het deployen van je website/de applicatie na het mergen/pushen van code naar een bepaalde branch (bijvoorbeeld de master branch). Zo zou je automatisch de code kunnen laten builden, testen en het resultaat uploaden naar je website. AWS of GitHub actions gebruiken (als je GitHub gebruikt).
Git platformen bieden ook aan dat je issues bijhouden, zo kun je snel je feature requests en problemen met de applicatie verwerken en commits eraan koppelen.
Let op: Je hebt de mogelijkheid om publieke en privé repositories aan te maken. Het ligt er aan of je project open-source is of voor een klant. Klanten houden er namelijk niet van als blijkt dat de source van hun website online staat waarvoor ze hebben betaald. Vergeet hier dus geen private repository te maken indien je hiermee bezig bent.
Populaire GIT platformen zijn:
- GitHub (bekend van heel veel open-source projecten die hier worden gehost)
- GitLab
- Bitbucket (wordt vaak gebruikt door bedrijven)
GitHub is voor veel beginners een goede start, er zijn veel open-source projecten beschikbaar en het is makkelijk te gebruiken. Voor developers is het daarbij een interessante portfolio aangezien je repositories publiekelijk te zien zijn en mensen kunnen zien waar aan je hebt werkt (als voorbeeld, zie mijn GitHub profiel), daarbij kan je iemands leerproces goed zien. Uiteraard zie je geen de private repositories in de lijst.
