JavaScript har hatt et lite dårlig rykte historisk. Hvor ille? Vel, for å være ærlig, den typen som forlot utviklere som ønsker å pummel den inn i midten av neste uke. Men tider har endret seg. JavaScript er nok en gang den kule gutten på blokken.

Mye av denne gjenopplivede interessen har oppstått på grunn av JavaScript-biblioteker og rammer. jQuery ble først utgitt i januar 2006, og ble fulgt bare dager senere av Prototype. De neste fire til fem årene så en rekke nye biblioteker og rammer, som kjemper for deres plass i utviklerens blyantcase.

Etter hvert som hvert nytt stykke programvare ble raskere og raskere, overgikk de andre i SlickSpeed-tester, ble JavaScript stadig et verktøy som fagpersonene kunne stole på uten bekymring.

Årsaken til at JavaScript hadde tjent seg så dårlig navn gjennom årene siden utgivelsen i 1995 var ikke helt fordi det var et dårlig språk. De virkelige problemene lå med DOM, som ikke ble kalt DOM da.

Nettleserne implementerte det vi kjenner som DOM i dag på forskjellige måter. Det var ofte, og fortsatt er, feil når de interagerer med DOM. Ut av alle ytelsesproblemer i JavaScript, arbeider med (det vil si manipulere eller lese) er DOM øverst for å være den som skal unngå eller minimere. Standardiseringen av DOM har hjulpet enormt i denne forbindelse, men som en anstendig utvikler vet, er Internet Explorer ikke en som følger pakken.

Bare nå, i 2010, støtter den uutgitte IE9 til slutt addEventListener, et ganske grunnleggende krav når du arbeider med DOM. Dette er hvor JavaScript-rammer virkelig produserte sølvkulen. De plugget hullene som ble igjen vidt åpne av nettleserne. Ingen liker å jobbe med repetitive, dumme nettleserbugs, så hvis et rammeverk kan gjøre eselarbeidet for deg, betyr det at du får mer tid på den interessante delen: det virkelige problemløsningen.

De store guttene

Det er fem store aktører i verden av JavaScript-rammer - eller biblioteker, avhengig av ditt valg av fraseologi (Wikipedia regner med at de er de samme, men ikke alle utviklere i samfunnet er enige om dette). Uansett er de store guttene jQuery, Prototype, YUI, Dojo og MooTools.

Hvis du ikke har hørt om dem, har du sikkert skjult under en stor JavaScript-formet stein, og stol på meg, du har gått glipp av det.

Disse markedsledere har noen viktige ting til felles: Solid støtte for nettleser, spesielt for eldre nettlesere (les som IE6). Et kjerneteam av utviklere som kjenner sine ting, men også jobber i det åpne. Åpne lisenser, som gjør det mulig for utviklerne å sette prosjektene til bruk i både private og kommersielle omgivelser. Aktive fellesskap bak ventures. Funksjonalitet som kan utvides hvis nødvendig.

Til tross for dette felles grunnlag, de dekker alle grunnlaget for webutvikling på egen måte. For eksempel er jQuery den sterkeste ved DOM-manipulering, og tilbyr også en måte å skape en tilpasset effekt på og en rekke enkle og kraftige Ajax-metoder.

Prototype, i mellomtiden, er et JavaScript-språkbibliotek som utvider funksjonssettet med JavaScript, men inneholder fortsatt en måte å manipulere DOM.

YUI synes å tilby alt annet enn kjøkkenvasken. Den inneholder grunnleggende om DOM-manipulasjon og hendelseshåndterere, men er også velsignet ved å ha en stor mengde verktøy tilgjengelig for den, alt fra internasjonalisering til historiehåndtering og animasjon. Det som gjør YUI spesielt, er dets evne til å laste inn verktøyene under kjøretid, så du trenger ikke å laste ned hele samlingen av dem som besøkende.

Dojo har ligner på Java-applikasjoner på bedriftsnivå, og hjemmesiden viser hvordan IBM, Cisco og Sun er blant dem som har valgt å gjøre god bruk av det. Faktisk viser Dojos dokumentasjon hvor lett tilgjengelig verktøysettet er via ARIA-støtten den gir.

Selvfølgelig kan du bruke hvert av disse verktøyene til et hvilket som helst antall oppgaver: Det er ingenting som stopper deg ved å bruke Dojo til å gjøre enkel DOM-manipulasjon, og Ajax eller jQuery for omfattende, komplisert, wham-bam-takk-du-ma'am applikasjoner. Du kan kombinere verktøy som du ser hensiktsmessig; det er din prerogative.

Vanligvis vil du imidlertid bruke det beste verktøyet for jobben, så det er lurt å alltid vurdere alternativene dine.

Utvid nettet

Hvis du starter et prosjekt fra grunnen av og vet at det inkluderer et JavaScript-bibliotek eller et rammeverk som skal spare tid og dermed penger, så har du fordelen av å kunne handle for den perfekte kandidaten.

Sammen med de nevnte "store fem" er det også en rekke andre verktøy som du kan vurdere. De har lignende egenskaper, men kan være nyere, eller ha lisenser som ikke tillater prosjektene å reise så langt.

For eksempel er Sencha, tidligere kjent som Ext JS, bra for å danne riktige grensesnitt. Den har et komplett sett med moduler for å lage applikasjoner, og eksempler spenner fra feed viewers og web-skrivebord til Sencha's komplette API dokumentasjon, bygget med eget bibliotek.

For noen år siden brukte jeg Ext JS under en gjennomgang av rammer som passer til vår virksomhet. Dengang var dokumentasjonen fortsatt relativt vanskelig å jobbe med, så det var ikke den beste opplevelsen for meg, men det kan godt passe dine behov, og det ser ganske bra ut også.

Googles Closure er det siste rammene som skal utgis med en fanfare bak den. Det er en irriterende navngivelsesbeslutning av Google; Vi har allerede Prototype, noe som gjør det nesten umulig å søke etter informasjon om JavaScript-prototyper, og nå vil Closure gjøre ting ikke morsomt i det hele tatt for nybegynnere som søker etter hvordan JavaScript-nedleggelser fungerer..

Men hva det gjør for det, er det templerende systemet og utviklerverktøyene, spesielt Closure Compiler, som for tiden er det beste komprimeringsverktøyet som er tilgjengelig for JavaScript.

UI-rammer

Vi har allerede sett på YUI, som gir mange UI-widgets, og jeg har nevnt JavaScript, noe som tvinger deg til en streng modell / visning / kontrollerute, men det er ikke særlig dårlig. Sluttresultatet er et ekstremt polert webapplikasjonsramme som inneholder alle de typiske desktopprogrammene du kan forvente å føle, fordi du vil ha et bedre ord, 'application-y'.

En enkel validering av dette er at teksten generert av SproutCore ikke kan velges som standard, noe vi har kommet til å forvente når vi surfer på nettet og klikker rundt på siden. Er dette en god ting eller en dårlig ting? Du bestemmer.

En ting jeg ikke er så opptatt av, er SproutCores tillit til JavaScript. Det er definitivt ikke et rammeverk for elskere av progressiv forbedring. Opprinnelig ble MobileMe utgitt med en helt tom side hvis JavaScript ble slått av. Hvis du velger å bruke SproutCore, vil du i det minste dekke brukere som besøker med deaktivert JavaScript.

Det er uten tvil mange flere UI-rammer der ute, så hold øynene dine skrællet.

spesialister

Bibliotekene og rammene vi har sett på så langt, tilbyr generiske verktøy og vil løse flertallet av webutviklerens problemer. Men selv om de hver har sine sterke sider, er ingen av dem spesielt spesialiserte.

Spesialistbiblioteker gjør en jobb veldig bra. Det er mange prosjekter på nettet, og listen blir ikke kortere, så jeg skal bare introdusere deg til to av de beste tegneverkene der ute.

Processing.js av John Resig, aka Mr jQuery, er en JavaScript-port av behandlingsspråket som ofte brukes til visualiseringer og animasjoner. Processing.js gjør det mulig for en forfatter å skrive ved hjelp av det faktiske behandlingsspråket i en skriptetikett, ved hjelp av applikasjon eller behandling som typen attributt. Rammeverket vil også gjøre en HTML5 lerret animasjon som stadig kjører draw-metoden.

Det finnes utallige demoer som viser hva som er mulig med Processing.js, og det er enda et nettsted dedikert til HasCanvas-demoer, som viser alt som er blitt lagret og spilt med.

Et lite advarselsvarsel: Processing.js ser mye ut som Java. Selv om det er mye kryssovergang mellom de syntaktiske stilene til Java og JavaScript, må du kanskje støv de gamle Java-bøkene på hyllene for å huske hvordan du lager klasser og slik ikke-JavaScript-tull. Ellers er det et kraftig rammeverk for å utnytte tegningskraften til HTML5 lerretelementet.

Raphaël er et annet tegningsramme, men går i en annen retning, ved å bruke SVG for å oppnå tegneffekter. Faktisk kan Raphaël være en av grunnene til at SVG har fanget så mange JavaScripters 'observasjoner i løpet av det siste året.

For å omgå Internet Explorer mangel på SVG-støtte (selv om den kommer i IE9), bruker Raphaël VML til å produsere de samme effektene i IE6 og oppover, og gir den full støtte på nettleseren. Et stort antall animasjonsdemoer er skrevet med HTML5-lerretet når de burde ha brukt SVG, og Raphaël er et helt fantastisk rammeverk for å oppnå det.

Faktisk, ved hjelp av Raphaël, JavaScript for å oppnå en enkel, men imponerende effekt, er ganske lik jQuery:

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

Micro-biblioteker

Siden biblioteker som jQuery og Prototype er blitt en standard webutvikler, har vi sett en økning i mikrobiblioteker. I rettferdighet er det slik bibliotekene ble levert tilbake i DHTMLs dager, men det er noe veldig annerledes om nyankomne.

Oftere enn ikke, vil et mikrobibliotek være åpen kildekode, lisensiert fritt, slik at du kan bruke den i både personlig og kommersielt arbeid, og vanligvis vil det bli hostet på GitHub for alle å gaffel og gjøre bedre.

Mikrobiblioteker er som de store guttenees anti-materie. De takler en enkelt oppgave og prøver å håndtere det veldig bra. Faktisk er de fleste mikrobiblioteker så minimalistiske at de ofte ikke har en tilhørende nettside, bare deres GitHub-sider.

Jeg har valgt noen få mikrobibliotek for å snakke om her, men det er mange flere som blir opprettet. Jeg er selv skyldig i å skrive noen få av mine egne. Emile.js er "en ikke-thrills frittstående CSS animasjon JavaScript rammeverk, oppkalt etter Émile Cohl, tidlig animator".

Skrevet av Thomas Fuchs, han av Scriptaculous og Scripty 2 berømmelse, er det et 50-linjers, 946-byte, Gzipped-bibliotek (ja det er faktisk så lite) som vil animere hvilken som helst CSS-egenskap du liker. Det eneste unntaket er at det ikke vil fungere med IE-opasitet, selv om det finnes en oppdatering i opacitetsgrenen.

Lawnchair er en lett, JSON-butikk på klientsiden som fungerer i mange, mange forskjellige plattformer. Det er et prosjekt av Brian LeRoux, en av hackerne bak PhoneGap, og gir en enkel API for lagring av vilkårlig mengde data i stort sett alle typer plattformer, inkludert Adobe AIR-apper, Android, iPhone, Palm webOS og desktop-nettlesere fra Chrome til DVS. Veldig enkelt og tonn enklere enn å skrive informasjonskapselkode.

Mustache.js er en JavaScript-implementering av mustasjen (mustasjen. Github.com) for "logisk-mindre maler". Skrevet av Jan Lehnardt, en av arrangørene av JSConf.eu, den nest beste JavaScript-konferansen i Europa (se min side for det beste!),

Mustache.js er tilgjengelig som vaniljescript eller plugin-modul til YUI, jQuery og Dojo. Det er et mikrobibliotek som bare tjener til å slå sammen data fra et JavaScript-objekt til en HTML-dummy uten den vanlige smerten som noen templerende systemer gir. Ikke bare kan du bruke dette systemet i nettleseren, du kan også kjøre det veldig enkelt i server-side JavaScript-miljøer som Node.