25 af de bedste JavaScript API'er

Her er vores valg af de bedste JavaScript-API'er lige nu plus en guide til at komme i gang med at bruge dem. Disse hjælper dig med at tilføje ny og interessant funktionalitet til dine websteder og apps. Et advarselsord: mange af disse API'er er stadig under udvikling, så sørg for at tjekke browsersupport, inden du begynder at bruge dem, og give tilbagefald, hvor det er nødvendigt.

For flere fantastiske plugins at udforske, se på vores guider til de bedste HTML API'er og Google API'er . Eller brug en til at oprette et websted fra bunden (uden kode) webstedsbygger . Plus, det er vigtigt at overveje dit valg af webhosting service for at sikre, at dit websted kører, som du vil have det.

01. Rediger browserindstillinger

Mens browseren normalt er 'over' enhver kode, der kører i den, giver en Mozilla-afledt API JavaScript begrænset adgang til browserindstillinger. Tænk på aspekter som at læse brugerens startside, hvordan bogmærker håndteres, og hvor nye faner vises.



02. Fil-API'er

Håndtering af store mængder vedvarende data var altid lidt af et problem for webapps. W3C-fil-API'en kombinerer nogle af de begreber, der bruges af forskellige leverandører - vær opmærksom på, at fuld filsystemadgang normalt ikke gives, hovedsagelig af sikkerhedsmæssige årsager.

03. Microsoft kognitive tjenester

JavaScript API

(Billedkredit: Microsoft)

Kunstig intelligens kræver ekstreme mængder træningsdata - logisk set er leverandører ikke motiverede til at levere disse modeller til deres kunder. I stedet får udviklere lov til at sende nyttelast til en server, som derefter analyseres online.

Mens alle de store cloud-leverandører tilbyder mere eller mindre sofistikerede tjenester for kunstig intelligens, skiller Microsoft sig ud ved sit fokus på AI-funktioner. API-tilbudene er underordnet under udtrykket kognitive tjenester; du kan få adgang til funktioner såsom avancerede billedgenkendelsestjenester. For eksempel viser snapshotet, der ledsager denne boks, at AI bruges til at genkende Microsofts CEO fra et pressefoto - andre funktioner er relateret til video, håndskrift og lydgenkendelse og transkription.

Mens kvaliteten af ​​output normalt er meget høj, skal du huske på, at fortsat brug er alt andet end billigt - efterhånden som brugen afgifter kan og kan tilføjes. (Hvis du har mediefiler til sikkerhedskopiering, skal du bruge bedste skylagring .)

04. Åbne offentlige API'er

Demokratisk valgte repræsentanter viser normalt stor dygtighed til at transformere penge. Begrebet åben regering betyder, at resultaterne af disse værker gøres tilgængelige via (normalt åbne) API'er, så tredjepartsudviklere kan udføre alle slags magasiner til datahøstning.

Et særligt interessant område vedrører transport: offentlige transporttjenester har tendens til at give API'er live placeringer af deres køretøjer og de frekvenser, der ses på rutenettet.

Dette gøres ikke ud fra ren altruisme: når det gøres rigtigt, kan en 'lokal trafik'-applikation til en bestemt by eller by hurtigt bestige rækken af ​​den lokale appbutik. Regeringen har ikke brug for at investere ressourcer i oprettelsen af ​​tjenesten, mens udvikleren - normalt - tjener en pæn penge, der sælger annonceplads på grund af det lokalt begrænsede publikum.

Ud over disse API'er lades udviklere normalt også løs på andre ting. Den franske regering vil for eksempel give relativt detaljerede muligheder for at finde adresser.

05. HER kortlægning API

JavaScript API

(Billedkredit: HER)

Konkurrence er pr. Definition god. Her er Nokias tidligere kortlægningsafdeling og tilbyder udviklere et 'tredjeparts' alternativ til de store tre kortlægningstjenester. Et interessant aspekt er den ekstremt enkle API, som gør download af fliser til en leg.

06. OpenStreetMap API

OpenStreetMap giver ikke kort, der er klar til visning. I stedet er der brug for en gengivelsestjeneste, såsom CartoType. Når du arbejder på et websted, er det lidt arbejde at oprette et dedikeret gengivelsessystem - MapBox giver et praktisk alternativ pr. Brug.

07. Master i lingvistik

Programmer, der beskæftiger sig med brugergenereret indhold, kan score brownie-point ved at tilbyde en integreret oversættelsestjeneste. En klient til Twitter eller Gab kunne for eksempel oversætte engelske tekster til russisk for at gøre dem lettere at håndtere for det publikum.

Mens 'maskinbaserede oversættelsessystemer' er blandt de ældste forskningsfelter inden for IT, er det svært at udvikle en brugbar maskinoversætter i hånden. Microsofts oversættelses-API blev for nylig opdateret til version 3.0 og er en one-stop-shop for alle problemer af babelske omfang. Udover at udføre oversættelser mellem sprogpar kan tjenesten også bruges til at finde ud af, hvilket sprog en bestemt tekst er på. Du kan derefter bruge disse data til at konfigurere mindre API'er som stavekontrollen.

Endelig kan idiomer og individuelle ord også sendes til en ordbogsforespørgsel. De returnerede oplysninger afhænger af situationen - i nogle tilfælde kan Microsoft endda returnere snesevis af udtryk for at hjælpe med at forstå.

08. API-skærm uden lærred

Udviklere brugte engang en teknik kaldet dobbeltbuffering for at gengive grafik uden at flimre. Google har introduceret noget lignende - det skaber et off screen-vindue, hvor grafik kan 'iscenesættes' med høj ydeevne.

09. NASA

JavaScript API

(Billedkredit: Microsoft)

Microsofts beslutning om at give Windows Phone 7-brugere en lejlighedsvis kurateret tapet kørte krusninger gennem branchen. I betragtning af at billeder af rummet altid er populære, hvorfor ikke gå lige til kilden og få fat i dig et par fra den uendelige butik i NASA?

10. Få slap data

Slack etablerede sig som go-to-værktøjet til 'moderne projektledelse'. Hvis du nogensinde har lyst til at bruge data indeholdt i et sådant projekt, skal du skaffe dig et API-token og hacke væk. Når det er gjort rigtigt, kan din webapplikation endda integrere sig selv i Slack GUI.

11. YouTube API

JavaScript API

(Billedkredit: Microsoft)

En YouTube-kanal er kun så god som den analyse, der står bag den. Googles YouTube Data API er muligvis ikke særlig spiffy, men giver blandt andet værdifuld indsigt i dit publikums opførsel.

12. Betalingsanmodning API

JavaScript API

Den første JavaScript-API, vi kigger på, er betalingsanmodnings-API'en. Når du opretter en e-handelswebsted , masser af tanke går i at forbedre kassen for at sikre, at oplevelsen er så glat og smertefri som muligt. Indtastning af betalingsoplysninger forbliver en gentagen proces. Hvis et felt er lidt forkert, går hele processen i stykker, og det skal startes igen. På udviklerens side er det en tidskrævende proces at sikre, at de rigtige valideringskontrol er på plads for hver betalingsmetode.

API for betalingsanmodning fjerner denne del af kassen. Siden kan anmode om de oplysninger, den har brug for, og browseren giver brugeren de felter, der skal indtastes.

Brugeren behøver kun at indtaste deres oplysninger én gang, og de kan bruges på tværs af forskellige websteder og transaktioner. Afhængigt af enheden kan de endda bruge de betalingsmetoder, der er knyttet til brugerkontoen, såsom Google og Apple Pay.

const request = new PaymentRequest( [{ supportedMethods: 'basic-card' }], { total: { label: 'Total', amount: { currency: 'GBP', value: 6.5 } } } );

Objektet tager et par parametre, der beskriver den betaling, der skal finde sted. Den første beskriver de accepterede betalingsmetoder. Disse kan være forskellige typer betalingskort såvel som detaljer til integration med andre tredjeparts betalingsløsninger. Der er endda mulighed for at inkludere en anden webapplikation som betalingsmetode ved hjælp af Payment Handler API.

Det andet er en oversigt over, hvad der købes. Dette kan være i ethvert format, der giver mening for transaktionen. Dette inkluderer også valgmuligheder for forsendelsesomkostninger, som kan beregnes ud fra andre faktorer, såsom leveringsadresse. Der er også et tredje valgfrit argument for at specificere ekstra information, der skal indsamles, såsom en e-mail-adresse eller et kontaktnummer.

13. CSS Layout API

JavaScript API

Som hovedregel er din webstedslayout skal overlades til CSS. Med JavaScript er håndtering af ændringer i layout tilbøjelige til dårlig ydeevne og masser af manuel vedligeholdelse. Men hvad sker der, hvis et websted kræver et ikke-standard layout? Den traditionelle gitterlignende placering, som CSS giver, fungerer muligvis ikke til mere kreative designideer.

Layout API giver udviklere mulighed for at oprette deres egne layoutmoduler, ligesom det eksisterende gitter eller flexmoduler, der er i brug i dag. Ved at definere de regler, den skal arbejde med, kan API'en placere varer hvor som helst inden for dets indeholdende element. Det er den anden Houdini API, der gør det til browsere.

Houdini introducerede konceptet 'worklets', der fungerer svarende til webarbejdere, men som er højt specialiserede i en aktivitet. Layout-API'en fungerer gennem en bestemt layoutworklet. Disse registreres i browseren, hvilket gør det muligt at afhente dem i CSS.

class MasonryWorklet { *layout(children, edges, constraints, styleMap) {} } registerLayout('masonry', MasonryWorklet);

En layoutworklet har en metode kaldet layout , der beskæftiger sig med placeringen af ​​elementer. Det kører som en generatorfunktion, der gør det muligt at køre parallelt med resten af ​​siden for at holde alt kørende.

Den første parameter er en henvisning til de umiddelbare underordnede elementer i det, layoutet anvendes på. Størrelsesdata er tilgængelige fra den anden og tredje parameter. Den ene giver placerings- og dimensioninformation om det element, der styles, mens den anden definerer de begrænsninger, elementet skal arbejde inden for. Den sidste parameter beskriver resten af ​​elementets stilarter, inklusive eventuelle brugerdefinerede egenskaber, det kan være interesseret i.

.el { display: layout(masonry); }

Et brugerdefineret modul anvendes ved hjælp af det sædvanlige Skærm ejendom på et element. Det bruger layout funktion sammen med navnet på projektlet.

14. Credential Management API

JavaScript API

I stedet for at skulle huske mange individuelle loginoplysninger, kan brugerne logge ind med de legitimationsoplysninger, der er gemt i browseren. På den måde kan brugere på flere enheder få deres detaljer til at følge dem rundt uden at skulle logge på hver gang.

Mens en browsers autofuldførelsesfunktion kan reducere friktionen ved indtastning af selve adgangskoden, kan Credential Management API automatisk logge en bruger ind, så snart de rammer siden. Det kan også logge ind ved hjælp af andre former for godkendelse, såsom en offentlig nøgle eller gennem en godkendelsesudbyder som OpenID.

15. CSS Paint API

JavaScript API

CSS og JavaScript ses ofte som separate dele af et websted - kommer kun sammen på små måder, f.eks. Ved at tilføje et klassenavn. Udviklere har få muligheder for at ændre, hvordan browseren beslutter at gengive en anden side end direkte opdatering af DOM.

Det er klar til at ændre sig i det næste år, da et nyt sæt specifikationer begynder at lande i browsere. De giver adgang til renderingsrørledningen i browseren via JavaScript for at hjælpe udviklere med at finjustere browserens handlinger til deres behov.

Houdini-taskforce består af en samling mennesker fra browser- og teknologivirksomheder. De har til formål at åbne den måde, alt gengives i browseren på en måde, der gør det let tilgængeligt for udviklere. Dette inkluderer layout, skrifttyper og animationer.

Den første specifikation, der allerede rammer browsere, er CSS Paint API (også kendt som CSS Custom Paint). Denne API giver dig mulighed for at programmere generere et billede, hver gang en CSS-ejendom forventer et. Brug JavaScript til at generere dynamiske baggrunde, kanter og billedmasker, og anvend dem i CSS uden et hårdt præstationshit. Det er ved at blive aktiveret som standard i Chrome Stable.

class MyPaintWorklet { static get inputProperties() { return []; } paint(ctx, size, properties) { } } registerPaint('my-paint', MyPaintWorklet);

Paint API bruger en malingsworklet til at definere, hvad browseren skal gøre, hver gang den har brug for at opdatere skærmen. Hver maling kan bruge en ny version af brochuren, hvilket betyder, at vedvarende data skal gemmes andre steder.

Det maling tilbagekaldsmetoden bliver bestået tre værdier. Den første er konteksten, som fungerer meget som en lærredskontekst. Det kan trækkes på på samme måde og har de fleste af de samme muligheder, men da dette kan kaldes flere gange i sekundet, skal det holdes enkelt.

Den anden værdi giver information om det element, der males, såsom dets højde og bredde. Dette kan bruges til at sikre, at slutresultatet passer perfekt, hver gang det bliver brugt.

Den endelige værdi indeholder alle stilegenskaber på objektet. Dette inkluderer alle tilpassede inputegenskaber, der er defineret i getter. Disse bruger Typed Object Model - en anden ny Houdini-funktion, der gør CSS-værdier lettere at fordøje i JavaScript.

Det sidste opkald registrerer workleten i browseren og åbner den op til CSS-siden.

.el { background-image: paint(my-paint); }

For at bruge inden for CSS involverer det en enlinjefunktion. Den videregivne værdi er navnet på den effekt, der er angivet, når worklet registreres. API'et og dets tilknyttede worklet er tilgængelige i Chrome og Opera, mens det fortsat er et centralt fokus for Safari, Firefox og Samsung internetbrowsere. Mens specifikationen nærmer sig færdiggørelse, forvent at se den snart ramme disse browsere.

Senere iterationer på specifikationen giver en mekanisme til at levere argumenter mod CSS-funktionen, svarende til hvordan gradienter i øjeblikket er defineret. Dette muliggør lettere tilpasning uden at skulle anvende brugerdefinerede egenskaber. Andre muligheder, såsom at definere en alfakanal til lagdeling, overvejes også.

16. Web Animations API

JavaScript API

Animation med JavaScript har historisk haft en dårlig rap. Flytning af elementer ved at ændre positionsværdier forårsager masser af malinger igen og resulterer i dårlig ydeevne. CSS animationer er det bedre valg, men de er svære at manipulere på farten.

Web Animations API giver adgang til den samme animationsmotor, der driver CSS-siden.

Const animation = el.animate( [ { transform: 'rotate(0)' }, { transform: 'rotate(360deg)' } ], 1000 );

Hvert element har en Animeret metode, der tager en række nøglerammer plus enten et indstillingsobjekt eller en varighed. Dette returnerer et animationsobjekt, som derefter kan opdateres til afspilning, pause og justering af afspilningshastigheden.

Der er en ekstra fordel, der kommer fra Houdini med animationsarbejdsrum. Disse fungerer på en lignende syntaks som API'et, men giver mulighed for finere kontrol. De kan styres af andre indgange end tid, f.eks. Rulle- eller berøringsposition. Dette er stadig under udvikling - for at finde ud af mere, gå over til Chrome-udviklerblog .

Support til selve Web Animations API er lille, men vokser hurtigt. Ved at bruge funktionsdetektering kan de, der har støtte til det, mærke fordelene med det samme.

17. Skrivbare filer API

JavaScript-API

Det langsigtede mål med webapplikationer er at få dem til at være på samme niveau som deres oprindelige kolleger. Noget funktionalitet mangler dog stadig - især omkring administration af lokale filer.

Skrivning af filer indebærer i øjeblikket oprettelse af en download og lagring i et bestemt bibliotek. Gemme iterationer over en bestemt fil vil skabe flere kopier, hvilket ikke altid er en god oplevelse.

Writable Files API giver udviklere mere fleksibilitet og giver brugerne mulighed for at beslutte, hvor filer skal gemmes. Dette åbner døren til mere fuldt udstyrede projekter på internettet, såsom en online kodeditor eller komplekse grafikapplikationer.

Denne API er i øjeblikket en del af Googles kapacitetsprojekt . Den er i øjeblikket i færd med at indsamle feedback om potentielle funktioner, inden den rammer browseren i en oprindelsesforsøg. Spørgsmål omkring sikkerhed, og hvilken slags filer der kan skrives hvor, skal strækkes ud, før API'en kan gøres officiel.

18. Generisk sensor-API

Sensorer på de enheder, vi bærer rundt hver dag, er en fantastisk måde at give ekstra fordele til en applikation. Brug af det fysiske miljø, f.eks. Med et accelerometer, kan give ekstra fordybelse for kreativ oplevelse.

Hvis vi allerede har begivenheder til denne slags ting, hvorfor er der da en ny API? Enheder skifter konstant og tilføjer nye og varierede sensorer. For at spare at skulle oprette nye API'er til hver nye sensor, der kommer ud, opretter Generic Sensor API en forenklet grænseflade til dem alle.

Mens API'et stadig er under udvikling, inkluderer Chrome og Firefox begge det bag flag at lege med. Andre browsere har det under overvejelse for fremtiden.

19. Paint Timing API

JavaScript API

Ydelse er et stort fokus i år. At få filstørrelser ned kan hjælpe, men der er mere ved ydeevnen end hvad der downloades til browseren. Browseren 'maler' sit indhold på skærmen, hver gang noget ændres. Indtil den første maling sker, vil brugerne stirre på en tom skærm. Når det hænges op i andre detaljer, såsom download af aktiver eller behandling af JavaScript, kan tiden til den første maling tage længere tid.

Paint Timing API holder detaljerede oplysninger om to begivenheder - den første maling og den første 'tilfredse' maling, der refererer til noget mere end bare styling, såsom tekst eller et billede.

Det PerformanceObserver interface beskriver, hvad man skal gøre, når disse begivenheder opstår. Dette kan derefter bruges til at sende dataene til en server til analyse senere.

Lige nu er dette kun tilgængeligt i Chrome og Opera, men andre browsere som Edge og Safari har begge vist interesse og vil muligvis inkludere det i fremtiden.

20. Web Speech API

Denne API er lavet af to dele - syntese og anerkendelse. Talesyntese tager tekst til den og læser den ud i den stemme, som brugeren har valgt. Det SpeechSynthesis objekt giver adgang til alle de forskellige muligheder, inklusive hvad det skal sige. Anerkendelse indebærer at tage en mikrofonindgang og forstå de ord, der bliver sagt. Det Tale genkendelse objekt bruges til at registrere talen, som vil affyre et 'resultat' med, hvad den mener brugeren sagde, og hvor sikker den er.

Syntesesiden af ​​API understøttes i alle større browsere. Støtte til talegenkendelse er i øjeblikket begrænset til Chrome med et præfiks eller Firefox med et flag aktiveret.

Der er diskussioner om at udvide anerkendelsessiden til at omfatte andre input, herunder WebRTC til at levere realtidsudskrifter af videokonferencer. Mens disse stadig er i de tidlige faser, kan det hjælpe med at gøre webinars og online præsentationer mere tilgængelige og lettere at henvise til i fremtiden.

21. Vejkrydsningsobservator

Denne JavaScript API kan bruges til at forstå synligheden og placeringen af ​​DOM-elementer (kendt som 'mål') i forhold til et indeholdende element ('rod'). Brug den til at affyre et tilbagekald, når et element kommer ind og ud af et bestemt område. Denne API er bedst til doven indlæsning eller uendelige rulleeffekter.

22. Rapporteringsobservatør

En del af Reporting API, Reporting Observers, observerer nogle typer rapporter fra JavaScript. Brug dem til at få besked, når browseren skal gribe ind - for eksempel hvis den skal give et tilbagefald til en langsomt indlæst skrifttype.

23. OffscreenCanvas

Tegning til en er en dyr opgave for en browser. Denne nye API giver dig mulighed for at gengive grafik fra hovedtråden uden at ramme DOM.

24. API-internationalisering

Kendt af navneområdet Intl , ECMAScript Internationalization API giver sprogfølsom streng sammenligning, nummerformatering og dato og klokkeslætformatering. Brug den til at undgå at sende tunge biblioteker og vise datoer, numre og strenge i et format, der giver mening i brugerens placering.

25. GraphQL

Selvom dette ikke er en API i den strengeste forstand, er GraphQL noget, der altid fortjener en omtale, når det kommer til at diskutere API'er.

Metoden til vanvid vedrører forespørgsler, der kører mod servere, der indeholder en objektbutik. I stedet for at tvinge udviklere til at oprette en adgangs-API til hvert eneste element oprettes et 'generisk' forespørgselssprog. Udvikleren af ​​en API skal derefter give en standardiseret beskrivelse af objekterne indeholdt i:

type Query { me: User } type User { id: ID name: String }

I det næste trin skal du affyre en eller flere forespørgsler mod disse formaliserede beskrivelser. Et eksempel mod en (fiktiv) menneskelig database vil se sådan ud:

{ human(id: '1000') { name height } }

GraphQL-kompatible servere reagerer ved at returnere et JSON-objekt, der indeholder de ønskede felter. På grund af pladsbegrænsninger kan vi ikke uddybe dette emne yderligere - denne vejledning giver dog et interessant overblik.

Dette er en redigeret version af artikler, der oprindeligt blev vist i Webdesigner magasin.

Læs mere: