Een paar maanden geleden, begon ik te werken aan een eenjarig project voor de ontwikkeling van webapplicaties, en ik realiseerde me hoeveel ontwikkelaars niet helemaal op de hoogte zijn van de beste industriële praktijken bij de front-end ontwikkeling van webapps. Zelfs ik was me niet bewust van sommige praktijken ook. Dus besloot ik dit artikel te schrijven om te delen wat ik weet en wat ik heb geleerd over de beste praktijken om te volgen bij het ontwikkelen van een webapplicatie.

Dit artikel zal zich richten op de beste praktijken in front-end ontwikkeling, omdat de kwaliteit van de front-end code in mijn ervaring de meest beslissende factor is van een geweldige web-app, maar de meeste ontwikkelaars slagen er niet in deze praktijken te volgen en hun individuele componenten te ontwikkelen. Als front-end ontwikkelaars deze praktijken niet volgen, zal het echt moeilijk zijn om de code te beheren, zal er geen consistentie zijn in het ontwerp, en zal de snelheid van de web app ook een negatieve invloed hebben. Het volgen van deze praktijken zal de code meer schoon en gemakkelijk te beheren maken, en zal de productiviteit van alle ontwikkelaars verhogen.

In dit artikel ga ik het hebben over best practices om te volgen bij het structureren van de frontend-architectuur van het project, het schrijven van front-end code, en het voorbereiden op deployment. Dus laten we aan de slag gaan.

Wanneer je aan het project begint, is het eerste wat je moet doen de front-end code-architectuur goed structureren. En dit zijn de beste praktijken die elke front-end ontwikkelaar van het project moet volgen.

Structurering van de stijl code

In de map stijlen, maak aparte mappen voor configuraties, basis, lay-out, componenten, en pagina’s, afhankelijk van uw webapplicatie. Gebruik een apart typografiebestand om de afmetingen en kleuren te definiëren voor alle HTML-teksttags (zoals h1,h2,…) die in de webapplicatie worden gebruikt. Kleuren moeten worden gedefinieerd in een variabelenbestand en wijs kleuren toe aan variabelen met geschikte namen en gebruik die variabelen wanneer kleuren moeten worden toegepast op de hele web site. Neem deze stijlbestanden op in de mappen die zijn aangemaakt zoals in de onderstaande afbeelding.

U kunt deze bestanden vervolgens importeren in het hoofdstijlbestand. Als u scss gebruikt in uw webapp, zou het main.scss-bestand vergelijkbaar zijn met de onderstaande code.

Structurering van de JS-code

In principe betekent het structureren van uw JavaScript dat u uw bestanden verdeelt en uw eigen JavaScript scheidt van het JavaScript dat van andere plaatsen afkomstig is. Plugins, vendor, en scripts zijn de belangrijkste drie mappen waarin we JS bestanden kunnen verdelen. Plugins bevatten nuttige stukken code die we overal in de webapp gebruiken, zoals jQuery plugins, vendors zijn JavaScript-code van derden, zoals Frameworks en Libraries, zoals de slick library, en de scripts-map bevat de scripts die we schrijven voor onze webapp-logica.