Bästa metoder för webbutveckling från min erfarenhet i branschen
Om du inte redan följer dessa bör du överväga att börja genast
För några månader sedan, började jag arbeta med ett ettårigt projekt för utveckling av webbapplikationer, och jag insåg hur många utvecklare som inte riktigt känner till de bästa industriella metoderna för front-end-utveckling av webbapplikationer. Till och med jag var inte medveten om vissa metoder också. Så jag bestämde mig för att skriva den här artikeln för att dela med mig av vad jag vet och vad jag har lärt mig om de bästa metoderna att följa när man utvecklar en webbapplikation.
Den här artikeln kommer att fokusera på de bästa metoderna inom front-end utveckling eftersom kvaliteten på front-end koden är den mest avgörande faktorn för en bra webbapplikation enligt min erfarenhet, men de flesta utvecklare misslyckas med att följa de här metoderna och utvecklar sina individuella komponenter. Om front-end-utvecklare inte följer dessa metoder kommer det att bli riktigt svårt att hantera koden, det kommer inte att finnas någon konsistens i designen och webbappens hastighet kommer också att ha en negativ inverkan. Om du följer dessa metoder kommer koden att bli renare och lättare att hantera, och det kommer att öka produktiviteten hos alla utvecklare.
I den här artikeln kommer jag att prata om de bästa metoderna att följa när man strukturerar projektets frontend-arkitektur, skriver frontend-kod och förbereder sig för driftsättning. Så nu sätter vi igång.
När du sätter igång med projektet är det första du ska göra att strukturera frontendkodarkitekturen på rätt sätt. Och det här är de bästa metoderna som varje front-end-utvecklare i projektet måste följa.
Strukturera stilkoden
Inom mappen styles skapar du separata mappar för konfigurationer, bas, layout, komponenter och sidor beroende på din webbapplikation. Använd en separat typografimapp för att definiera storlekar och färger för alla HTML-texttaggar (t.ex. h1, h2,…) som används i webbapplikationen. Färger bör definieras i en variabelfil och tilldela färgerna till variabler med lämpliga namn och använd dessa variabler när färgerna ska användas på hela webbplatsen. Inkludera dessa stilfiler inuti de mappar som skapas likt bilden nedan.
Du kan sedan importera dessa filer till den huvudsakliga stilfilen. Om du använder scss i din webbapplikation skulle filen main.scss likna koden nedan.
Strukturering av JS-koden
Strukturering av JavaScript innebär i grund och botten att du delar upp filerna och separerar ditt eget JavaScript från det som kommer från andra ställen. Plugins, vendor och scripts är de tre viktigaste mapparna som vi kan dela in JS-filer i. Plugins skulle innehålla användbara kodbitar som vi använder överallt i webbapplikationen, t.ex. jQuery-plugins, vendors skulle vara JavaScript-kod från tredje part, t.ex. ramverk och bibliotek, t.ex. slick-biblioteket, och skriptmappen skulle innehålla de skript som vi skriver för vår webbapplikations logik.
.