”The Sound of Music” kan predika: ”Låt oss börja i början, ett mycket bra ställe att börja på.” Men nästan alla utvecklare vet att det är en dum plan. Det rätta stället att börja är med en fast grund som byggs av ett bra team av utvecklare av öppen källkod. Klona deras hårda arbete och lägg sedan till precis tillräckligt med kod för att göra det till ditt eget. Det finns ingen anledning att upprepa vad alla har gjort tidigare.
Det är en enkel plan – när du väl väljer. Tyvärr kan det vara nästan lika svårt att välja den grunden som att börja från början. Världen av webbramverk är ett mycket aktivt utvecklingsområde och det kan finnas dussintals bra projekt med öppen källkod som skulle vara en bra start för ditt projekt.
För att göra saken ännu värre har de olika grupperna som skapat dessa olika projekt slagit in på en annan väg för att de hade allvarliga filosofiska skillnader med de andra alternativen. De tittade på de andra ramverken och bestämde sig för att de kunde göra det bättre. Med andra ord, de gjorde det av en anledning och du kanske eller kanske inte håller med om deras beslut.
Listan över bra ställen att börja på nedan utelämnar avsiktligt marknadsledarna React, Angular och Vue bara för att göra saker och ting lite enklare. Det betyder inte att de tre stora är dåliga. De kan fortfarande vara rätt för dig. Det är bara det att de diskuteras ständigt och dessa diskussioner utelämnar några ganska bra andra alternativ.
Det finns många goda skäl att välja de mest populära. Många människor i dina skor tittade runt och många av dem valde React, Angular eller Vue av en god anledning. Men det var på den tiden. Under tiden har en del smarta människor skapat nyare ramverk som är snabbare, enklare, starkare eller någon av en stor uppsättning superlativer.
I de flesta av fallen nedan har teamen skapat något spännande och kraftfullt genom att tänka om kring ramverkets natur. Det är ett fint sätt att säga att det slutade med att de tog bort en funktion och på så sätt gjorde ramverket effektivare och därmed minskade mängden minne som det behöver, påskyndade starttiden eller gjorde det generellt sett smidigare. Eller i några fall lade de till nya idéer som kan bli standard i framtiden.
Om du har tid att investera finns här en lista över några av de andra intressanta valen. De är inte nödvändigtvis rätt för vissa personer och de är definitivt inte det bästa valet för alla, men de kan vara ett bättre val för dig. Din uppgift, om du väljer att acceptera den, är att skapa en gedigen beskrivning av din webbapplikation, skriva ner en relativt bestämd beskrivning av de olika användningsfallen och sedan utvärdera verktygen med detta i åtanke.
Kanske gillar du ett visst tillvägagångssätt för att designa kod. Kanske behöver din applikation inte några av funktionerna i de fetare, mer populära ramverken. Det finns dussintals skäl att investera i någon av dessa andra vägar. Du kanske upptäcker att en av dem gör underverk för din applikation.
Petit DOM
Om du älskar idén om ett virtuellt DOM, men inte vill ha alla de begränsningar som följer med att anta tankesättet hos folket i React, Vue eller ditt andra ramverk med stort namn, så är Petit DOM rätt väg att gå. Du får en liten mängd kod som låter dig manipulera en virtuell samling taggar och sedan migrera dem till det riktiga DOM. Allt annat om komponenternas struktur och rendering är upp till dig. Om dina komponenter är enkla, eller om du ska skapa någon superkomplex renderingshierarki som kommer att vara din egen, kan detta vara din grund eftersom allt det ger är ett verktyg för att virtualisera DOM.
Surplus
Den virtuella DOM är kanske inte för alla. Den tar upp utrymme, så om dina manipulationer inte är alltför komplicerade kan du lika gärna leda dina instruktioner direkt till det officiella DOM. Biblioteket Surplus gör just det. Det tar allas favoritmarkup JSX och kompilerar det till en kod som manipulerar det riktiga DOM. Som de säger i annonsbranschen, det skär ut mellanhanden. Ingen diffing. Inget hemligt extra lager. Bara ren manipulation av det riktiga DOM. Om din kod är tillräckligt enkel och direkt för att bara göra några få saker med DOM, varför bry sig om den virtuella distraktionen?
RE:DOM
Ett annat alternativ för dem som inte vill investera något minne i en virtuell DOM är ett litet bibliotek (2KB) som heter RE:DOM. RE:DOM innehåller några grundläggande rutiner som låter dig skapa alla dina taggar och komponenter med några enkla JavaScript-anrop. Syntaxen ligger mycket närmare CSS, så du kan ange ganska utarbetade taggar med ID och klasser med bara några få knapptryckningar. Dina ”mindre än” (<) och ”större än” (>) tangenter kommer att tacka dig.
Mithril
Inte alla alternativ är små och minimalistiska. Mithril skulle kunna kallas ett ”medelstort” ramverk i det här sammanhanget, även om det bara väger omkring 8KB. All denna kod bygger ett virtuellt DOM med en effektiv uppdateringsmekanism som de andra, men den levereras också med en standardiserad uppsättning verktyg för att hantera många av standardutmaningarna som routing och XMLHttpRequest-anrop. Projektutvecklarna vill att Mithril-projekten ska vara relativt standardiserade, och de anser att det ökar standardiseringen att lägga till den här koden till huvudbiblioteket. Om det inte räcker så trycker de också på viss standardformatering och idiomatiska strukturer.
Bobril
Om du gillar Reacts virtuella DOM och stateful-komponenter och gillar att programmera i TypeScript kan Bobril eller dess Angular-vänliga kusin ngBobril vara precis vad du behöver. Ramverket är genomgående mycket snabbare än antingen React eller Angular i vissa av benchmarks, kanske på grund av de snabbare diff-algoritmerna och bristen på stöd för isomorfiskt JavaScript. Det finns också kortfattade funktioner för CSS-manipulering och ett komplett lager för tillståndshantering, BobX, om du behöver det.
Marko
Om du har tillbringat någon tid med att bjuda på Pez-dispenser eller andra samlarföremål har du upplevt kraften i Marko, ett slimmat, snabbt ramverk som eBay delar med sig av genom en öppen källkodslicens. Den trevligaste delen kan vara en mycket lättviktig syntax för templating som på ett smart sätt tar bort det mesta av det överflödiga fettet från HTML så att strukturen definieras av indragning och inte så mycket annat. Och renderingsmotorn är mycket snabb och kan driva utarbetade konstellationer av dansande DIV:er som uppdateras snabbare än 60 fps.
Svelte
Ditt standardwebbramverk levereras med en kompilator och ett nedladdat bibliotek som vid körning hanterar det som kompilatorn producerar. Tvåstegsprocessen möjliggör mycket genomarbetad kod till priset av att man måste vänta på att runtime-biblioteket ska laddas ner och analyseras varje gång sidan öppnas. Svelte-kompilatorn gör sig av med denna komplexitet genom att spotta ut nästan ren JavaScript som nästan är redo att köras på egen hand, om än bara i några av de nyare webbläsarna (t.ex. Chrome, Firefox, Opera och IE10). Det är ett smart arkitektoniskt knep som ger mycket lätta webbplatser som tar lite minne i anspråk.
Inferno
Inferno är ett annat ramverk som skapats för att göra mycket av det som React gör, men med en mindre nedladdning och en snabbare körtid. Det uppnår mycket av detta genom att kasta bort den utstuderade syntetiska händelsemekanismen och koncentrera sig endast på de mest väsentliga som onClick. Många andra delar av API:et är liknande, om inte samma, vilket gör det relativt enkelt att flytta över din kod om den inte behöver optimeringslagret för händelser.
Preact
En av de minsta av React-avkommorna är Preact, en hyllning som erbjuder de flesta av de mest värdefulla funktionerna som ett virtuellt DOM och sofistikerade komponenter, men som tar bort de syntetiska händelsemekanismerna och en del av rekvisitens nedärvning. Medan Inferno försöker implementera endast de viktigaste händelserna som onClick, bryr sig Preact inte om att försöka göra något med händelserna och låter dig förlita dig på webbläsarens inhemska addEventListener. Att utelämna funktioner som inte tillför mycket (enligt deras åsikt) är hur de gör sin nedladdning ännu mindre. Detta är lite av en kompromiss eftersom benchmarks visar att Preact är lite långsammare än Inferno. Naturligtvis kan din applikation vara annorlunda och din körsträcka kan variera. Om du verkligen behöver ren kompatibilitet med React finns det till och med ett bibliotek (preact-compat) som löser de flesta problem under byggandet.
Hapi
Många ramverk anländer i ett enda stycke. Hapi är mer en samling plug-ins, en konstellation av dussintals kodbitar som du kan blanda in i din stack som du vill. Autentisering, auktorisering och loggning är sysslor som kan lösas med ett antal alternativ. Om du bygger en mikrotjänstarkitektur full av API:er genererar den standardiserade Swagger-plugin automatiskt Swagger-dokumentationen från din grundkod.
Koa
Ibland behöver du en ganska komplex samling rutiner som jonglerar inkommande förfrågningar och översätter dem till flera ändringar, några av dem genomarbetade. Koa är utformad för att göra det lite enklare att organisera allt detta arbete. Dess hemlighet är att den förvandlar de callback-funktioner som normalt dominerar JavaScript till en uppsättning asynkrona funktioner som avfyras när tiden är mogen. De inbäddade spaghetti-kallbackstackarna förvandlas till något lite renare.
Nest
Ett annat alternativ för att tämja serverns komplexitet kommer från Nest-teamet, som erbjuder en arkitektur fylld av controllers, pipes och providers med en del vakter, interceptorer och undantagsfilter som slängs in för att hålla ordning. Ramverket är modernt och redo att hantera GraphQL- och mikrotjänstförfrågningar direkt från början.
Drupal, WordPress och Rails
Ramverk som är byggda i JavaScript och som körs ovanpå Node.js fyller det psykologiska centrumet i webbutvecklingsvärlden nuförtiden. Men det kan vara ett misstag att ignorera den tidigare generationen som bygger på PHP, en grund som är snabbare än någonsin nu när den också har en just-in-time-kompilator som JavaScript. Och Ruby och dess ramverk Rails fortsätter att fungera som hörnstenar för bergsäkra webbplatser.
Den förra generationen är stridsmärkt och välbeprövad av mer än ett decennium av kontinuerlig utveckling och arbete. Det finns sofistikerade formgivare som kan göra teman och skins för apparna. Det finns en god chans att någon redan har byggt modulerna med den funktionalitet du behöver. Så innan du utforskar ett smart Node.js-ramverk, fundera på om inte en av de gamla kan redan göra mycket, om inte allt, av det du behöver.
Vanilla JS
Du kanske ser det som ett elakt hugg eller kanske en satir i nivå med ”Kejsarens nya kläder”, men det är svårt att argumentera för dess framgång. Vanilla JS är en webbplats som skryter med att dess ramverk används på fler webbplatser än ”jQuery, Prototype JS, MooTools, YUI och Google Web Toolkit tillsammans”. Detta kan vara sant eller inte med tanke på spridningen av jQuery, men låt oss skratta åt det brända. Webbplatsen kommer också med en söt liten selektor som låter dig bunta ihop ett eget arkiv av olika komponenter som Math, DOM, closures eller reguljära uttryck. Oavsett vad du väljer är resultatet en häpnadsväckande noll bytes långt. Försök att slå det!
Punkten med skämtet är att det ibland är vettigt att bara använda några av standardelementen i JavaScript och hoppa över det extra. Bibliotek och ramverk som jQuery eller React började delvis på grund av de galna skillnaderna mellan webbläsarna. Många av dessa skillnader har försvunnit tack vare standardiseringen.
Vanilla JS-förespråkarna konfronterar naturligtvis inte det faktum att förkortningsfunktioner som $() inte bara är bekväma, de sparar också utrymme i vår egen kod. Men om du bara kommer att använda document.getElementById ibland kanske det inte spelar någon roll. Om du bara ska lägga till några funktioner på din webbsida och dessa funktioner ska göra några grundläggande saker, kan vanlig JavaScript vara det snabbaste ramverket för dig.