JavaScript har historiskt haft lite dåligt rykte. Hur dåligt? Tja, för att vara uppriktig, det slag som lämnade utvecklare som vill pummel det i mitten av nästa vecka. Men tiderna har förändrats. JavaScript är återigen det coola barnet på blocket.

Många av detta återupplivade intresse har uppstått på grund av JavaScript-bibliotek och ramverk. jQuery släpptes första gången i januari 2006 och följdes några dagar senare av Prototype. De kommande fyra till fem åren såg ett antal nya bibliotek och ramverk, som alla kämpade för sin plats i utvecklarens pennahus.

När varje ny mjukvara blev snabbare och snabbare än de andra i SlickSpeed-testen, blev JavaScript stadigt ett verktyg som de professionella kunde lita på utan att oroa sig.

Anledningen till att JavaScript hade förtjänat ett så dåligt namn under åren sedan 1995 års utgåva var inte helt för att det var ett dåligt språk. De verkliga problemen låg med DOM, som inte kallades DOM då.

Webbläsarna implementerade vad vi vet som DOM idag på olika sätt. Det fanns ofta, och fortfarande är, fel när de interagerar med DOM. Utan alla prestanda problem i JavaScript, arbetar med (det vill säga manipulera eller läsa) är DOM högst upp för att vara den som ska undvika eller minimera. Standardiseringen av DOM har hjälpt enormt i detta avseende, men som en anständig utvecklare vet är Internet Explorer inte en att följa paketet.

Endast nu, under 2010, stödjer den olevererade IE9 slutligen addEventListener, ett ganska grundläggande krav när man arbetar med DOM. Det här var ju JavaScript-ramar skapade verkligen silverkulan. De pluggar luckorna som lämnades breda öppna av webbläsarna. Ingen gillar att hantera repeterande, dumma webbläsarfel, så om ett ramverk kan göra åsnan fungerar för dig betyder det att du får mer tid på den intressanta delen: det verkliga problemlösningen.

De stora pojkarna

Det finns fem stora aktörer i världen av JavaScript-ramar - eller bibliotek, beroende på ditt val av frasologi (Wikipedia beräknar att de är samma sak, men inte alla utvecklare i samhället är överens om detta). Hur som helst är de stora killarna jQuery, Prototype, YUI, Dojo och MooTools.

Om du inte har hört talas om dem, har du förmodligen gömt sig under en stor JavaScript-formad sten och lita på mig, du har saknat dig.

Dessa marknadsledare har några viktiga saker gemensamt: Solidt stöd för webbläsare, särskilt för äldre webbläsare (läs som IE6). Ett kärnteam av utvecklare som känner till sina saker men också arbetar i det öppna. Öppna licenser, vilket gör att utvecklarna kan använda projekten i både privata och kommersiella miljöer. Aktiva samhällen bakom satsningarna. Funktionalitet som kan utökas vid behov.

Trots denna gemensamma grund täcker de alla grunden för webbutveckling på egen väg. JQuery är till exempel den starkaste på DOM-manipulationen, och erbjuder också ett sätt att skapa någon anpassad effekt och en rad enkla och kraftfulla Ajax-metoder.

Prototyp är under tiden ett JavaScript-språkbibliotek som utökar funktionssatsen med JavaScript men innehåller fortfarande ett sätt att manipulera DOM.

YUI verkar erbjuda allt annat än diskbänken. Den innehåller grunderna för DOM-manipulering och händelsehanterare, men är också välsignad genom att ha en stor mängd verktyg som är tillgängliga för den, allt från internationalisering till historiahantering och animering. Vad som gör YUI speciellt är dess förmåga att ladda verktygen under körtiden, så du behöver inte ladda ner hela samlingen av dem som besökare.

Dojo är relaterat till företagsnivån JavaScript-applikationer, och dess hemsida visar hur IBM, Cisco och Sun är bland dem som har valt att utnyttja det. Faktum är att Dojos dokumentation visar hur tillgänglig verktyget är via det ARIA-stöd som det ger.

Naturligtvis kan du använda alla dessa verktyg för alla typer av uppgifter: Det finns inget som hindrar dig från att använda Dojo för att göra enkel DOM-manipulation, och Ajax eller jQuery för storskalig, komplicerad, wham-bam-tack-du-ma'am tillämpningar. Du kan kombinera verktyg som du tycker är lämplig; det är din prerogativ.

Men i allmänhet vill du använda det bästa verktyget för jobbet, så det är klokt att alltid överväga dina alternativ.

Förbättra nätet

Om du startar ett projekt från början och vet att det är ett JavaScript-bibliotek eller ramverk som sparar tid och pengar, då har du fördelen att du kan handla för den perfekta kandidaten.

Tillsammans med de ovan nämnda "stora fem" finns det också ett antal andra verktyg som du kan tänka dig. De har liknande egenskaper, men kan vara nyare, eller ha licenser som inte tillåter projekten att resa så långt.

Sencha, tidigare känd som Ext JS, är till exempel bra för att skapa riktiga gränssnitt. Den har en komplett uppsättning moduler för att skapa applikationer, och exempel varierar från flödesvisare och webbdatorer till Sencha fullständiga API-dokumentation, byggt med eget bibliotek.

För några år sedan använde jag Ext JS under en granskning av ramar som skulle passa vår verksamhet. Därefter var dokumentationen fortfarande relativt svår att arbeta med, så det var inte den bästa upplevelsen för mig, men det kan passa dina behov, och det ser också bra ut.

Googles stängning är den senaste ramen som ska släppas med en fanfare bakom den. Det är ett irriterande namnbeslut av Google; vi har redan prototyp, vilket gör det nästan omöjligt att söka efter information om JavaScript-prototyper, och nu kommer Closure att göra saker inte roligt alls för nybörjare som söker efter hur JavaScript stängs.

Men vad det går för det är dess templerande system och utvecklingsverktyg, i synnerhet Closure Compiler, som för närvarande är det bästa komprimeringsverktyget tillgängligt för JavaScript.

UI-ramar

Vi har redan tittat på YUI, som ger en hel del UI-widgets, och jag har nämnt JavaScript, vilket tvingar dig ner en strikt modell / vy / kontrollrute, men det är inte särskilt dåligt. Slutresultatet är ett extremt polerat webbapplikationsramverk som innehåller alla de typiska skrivbordsapplikations widgets du kan förvänta dig att känna, för att du vill ha ett bättre ord, "application-y".

En enkel validering av detta är att texten som genereras av SproutCore inte kan väljas som standard, något vi har kommit att förvänta oss när vi surfar på webben och klickar runt på sidan. Är det här en bra sak eller en dålig sak? Du bestämmer.

En sak som jag inte är så angelägen om är SproutCores tillit till JavaScript. Det är definitivt inte ett ramverk för älskare av progressiv förbättring. Ursprungligen släpptes MobileMe med en helt tom sida om JavaScript var avstängt. Om du väljer att använda SproutCore, kommer du åtminstone att täcka användare som besöker JavaScript.

Det är säkert många fler användargränssnitt där ute, så håll dina ögon avskalade.

specialister

De bibliotek och ramar vi har tittat på hittills erbjuder generiska verktyg och kommer att lösa majoriteten av en webbutvecklare problem. Men även om de alla har sina styrkor är ingen av dem särskilt specialiserade.

Specialistbibliotek gör ett jobb riktigt bra. Det finns många projekt på webben och listan blir inte kortare, så jag introducerar bara två av de bästa ritningsramarna där ute.

Processing.js av John Resig, aka Mr jQuery, är en JavaScript-port i Processing-språk som ofta används för visualiseringar och animeringar. Processing.js gör det möjligt för en författare att skriva med hjälp av det faktiska bearbetningsspråket i en skriptikett, med hjälp av applikation eller behandling som typattributet. Ramverket kommer också att göra en HTML5-kanvasanimering som ständigt körs med dragningsmetoden.

Det finns otaliga demo som visar vad som är möjligt med Processing.js, och det finns till och med en webbplats dedikerad till HasCanvas demos, som visar allt som har sparats och spelats med.

Ett litet varningsmeddelande: Processing.js ser mycket ut som Java. Även om det finns mycket överkorsning mellan de syntaktiska stilerna i Java och JavaScript, kan du behöva damma bort de gamla Java-böckerna på hyllorna för att komma ihåg hur man skapar klasser och sådan icke-JavaScript-nonsens. Annars är det en kraftfull ram för att utnyttja dragkraften i HTML5-kanvaselementet.

Raphaël är en annan ritningsram men går i en annan riktning, med hjälp av SVG för att uppnå ritningseffekter. Faktum är att Raphaël kan vara en av anledningarna till att SVG har tagit så många JavaScripters uppmärksamhet under det senaste året.

För att komma runt Internet Explorer brist på SVG-stöd (även om det kommer i IE9), använder Raphaël VML för att producera samma effekter i IE6 och uppåt, vilket ger det fullständigt stöd för flera webbläsare. Ett stort antal animationsdemoer har skrivits med hjälp av HTML5-kanalen när de borde ha använt SVG, och Raphaël är en helt fantastisk ram för att uppnå det.

Ja, med hjälp av Raphaël, JavaScript för att uppnå en enkel men imponerande effekt liknar ganska jQuery:

paper.circle (320, 240, 60) .animate (fill: "# 223fa3", slag: "# 000", "slagbredd": 80, "stroke-opacity": 0,5, 2000);

Mikro bibliotek

Eftersom bibliotek som jQuery och Prototype har blivit en standard webbutvecklare, har vi sett en ökning av mikrobibliotek. I rättvisa är det här hur biblioteken levererades i DHTMLs dagar, men det finns något väldigt annorlunda om nykomlingarna.

Oftast kommer ett mikrobibliotek vara öppen källkod, licensierad fritt så att du kan använda den i både personligt och kommersiellt arbete och vanligtvis kommer det att vara värd på GitHub för att någon ska gaffla och göra bättre.

Mikrobibliotek är som de stora pojkernas motsats. De hanterar en enda uppgift och försöker hantera det riktigt bra. Faktum är att de flesta mikrobibliotek är så minimalistiska att de ofta inte har en åtföljande hemsida, bara deras GitHub-sidor.

Jag har valt några mikrobibliotek att prata om här, men det finns mycket mer som skapas. Jag är även skyldig att skriva några av mina egna. Emile.js är en "no-thrills" fristående CSS-animering JavaScript-ramverk, uppkallad efter Émile Cohl, tidig animator ".

Skriven av Thomas Fuchs, han av Scriptaculous and Scripty 2 berömmelse, är det ett 50-linjers, 946-byte, Gzipped-bibliotek (ja det är faktiskt så litet) som kommer att animera vilken CSS-egenskap du gillar. Det enda undantaget är att det inte kommer att fungera med IE-opacitet, även om det finns en patch tillgänglig i opacitetsgrenen.

Lawnchair är en lätt, JSON-butik på kundsidan som fungerar på många, många olika plattformar. Det är ett projekt av Brian LeRoux, en av hackarna bakom PhoneGap, och ger ett enkelt API för att lagra godtyckliga datamängder på nästan alla typer av plattformar, inklusive Adobe AIR-appar, Android, iPhone, Palm webOS och skrivbords webbläsare från Chrome till IE. Mycket enkelt och lite lättare än att skriva cookie-kod.

Mustache.js är ett JavaScript-genomförande av mustasch (mustasch, github.com) för "logikfria mallar". Skriven av Jan Lehnardt, en av arrangörerna av JSConf.eu, den näst bästa JavaScript-konferensen i Europa (se min sida för bästa!),

Mustache.js finns som vaniljskript eller plugin till YUI, jQuery och Dojo. Det är ett mikrobibliotek som endast fungerar för att sammanfoga data från ett JavaScript-objekt till en HTML-dummy utan den vanliga smärtan som vissa templerande system ger. Du kan inte bara använda det här systemet i webbläsaren, du kan också köra det mycket enkelt i server-sida JavaScript-miljöer som Node.