25 najboljih API-ja za JavaScript

Evo našeg izbora najboljih JavaScript API-ja koji trenutno postoje, kao i vodič za početak korištenja. To će vam pomoći da dodate nove i zanimljive funkcije svojim web lokacijama i aplikacijama. Riječ upozorenja: mnogi od ovih API-ja još su u fazi izrade, zato provjerite jeste li provjerili podršku preglednika prije nego što ih počnete koristiti i po potrebi pružite povratne informacije.

Za još sjajnih dodataka za istraživanje, pogledajte naše vodiče kako najbolje HTML API-ji i Google API-ji . Ili za izradu web stranice od nule (bez koda) upotrijebite graditelj web stranica . Osim toga, vitalno je razmotriti svoj izbor web hosting usluga, kako bi se osiguralo da vaša web lokacija radi kako vi želite.



01. Izmijenite postavke preglednika

Iako je preglednik obično 'iznad' bilo kojeg koda koji se u njemu izvodi, API izveden iz Mozille omogućuje JavaScript ograničen pristup postavkama preglednika. Razmislite o aspektima kao što su čitanje korisničke početne stranice, način na koji se postupa s oznakama i gdje se prikazuju nove kartice.



02. API-ji datoteka

Rukovanje velikim količinama trajnih podataka uvijek je predstavljalo problem za web aplikacije. API datoteke W3C kombinira neke koncepte koje koriste različiti dobavljači - imajte na umu da puni pristup datotečnom sustavu obično nije odobren, uglavnom iz sigurnosnih razloga.

kako preokrenuti slovo u

03. Microsoftove kognitivne usluge

JavaScript API-ji: Microsoftove kognitivne usluge



(Slika dodijeljena: Microsoft)

Umjetna inteligencija zahtijeva ekstremne količine podataka o treningu - logično je da dobavljači nisu motivirani pružiti ove modele svojim kupcima. Umjesto toga, programeri smiju slati korisne terete na poslužitelj, koji se zatim analiziraju on-line.

Iako svi veliki dobavljači oblaka nude više ili manje sofisticirane usluge umjetne inteligencije, Microsoft se ističe fokusom na značajke AI. Ponude API-a podvode se pod izraz kognitivne usluge; možete pristupiti značajkama poput naprednih usluga prepoznavanja slika. Na primjer, snimka koja prati ovaj okvir prikazuje AI koji se koristi za prepoznavanje Microsoftovog izvršnog direktora s fotografije za tisak - ostale su značajke povezane s prepoznavanjem i prepisivanjem videozapisa, rukopisa i zvuka.

Iako je kvaliteta rezultata obično vrlo visoka, imajte na umu da je kontinuirana upotreba sve samo ne jeftina - kako vrijeme prolazi, naknade za upotrebu mogu se i zbrajati. (Ako imate medijske datoteke za sigurnosnu kopiju, upotrijebite najbolja pohrana u oblaku .)



04. API otvorene vlade

Demokratski izabrani predstavnici obično pokazuju veliku vještinu u transformiranju novca. Koncept otvorene vlade znači da su rezultati tih radova dostupni putem (obično otvorenih) API-ja, omogućujući neovisnim programerima da izvedu sve vrste prikupljanja podataka.

Jedno posebno zanimljivo područje tiče se prijevoza: usluge javnog prijevoza imaju tendenciju da API-jevima daju lokacije njihovih vozila i frekvencije viđene na mreži ruta.

To se ne radi iz čistog altruizma: kada se to učini pravilno, aplikacija 'lokalnog prometa' za određeni grad može se brzo popeti na mjesto lokalne trgovine aplikacija. Vlada ne treba ulagati resurse u stvaranje usluge, dok programer - obično - dobro zarađuje prodajući oglasni prostor zbog lokalno ograničene publike.

Uz ove API-je, programeri se obično puste i oko drugih stvari. Francuska vlada, na primjer, pružit će relativno detaljne mogućnosti pretraživanja adresa.

05. OVDJE API za mapiranje

JavaScript API-ji: OVDJE

(Slika zasluga: OVDJE)

Konkurencija je po definiciji dobra. Ovdje je Nokijin bivši odjel za mapiranje i nudi programerima alternativu 'treće strane' uslugama mapiranja velike trojke. Jedan zanimljiv aspekt je izuzetno jednostavan API, koji preuzimanje pločica čini laganim.

06. API OpenStreetMap

OpenStreetMap ne nudi karte spremne za prikaz. Umjesto toga, bit će potrebna usluga prikazivanja, poput CartoType. Kada radite na web mjestu, stvaranje namjenskog sustava za prikazivanje pomalo je posao - MapBox pruža prikladnu alternativu plaćanja po korištenju.

07. magistar lingvistike

Programi koji se bave sadržajem koji generiraju korisnici mogu postići bodove u pretraživanju nudeći integriranu uslugu prevođenja. Klijent za Twitter ili Gab mogao bi, na primjer, prevesti engleske tekstove na ruski jezik kako bi ih bilo lakše rukovati za tu publiku.

Iako su 'sustavi za strojno prevođenje' među najstarijim istraživačkim poljima u IT-u, teško je razviti ručno izvedljiv strojni prevoditelj. Microsoftov prijevodni API nedavno je ažuriran na verziju 3.0 i jedno je mjesto za sve probleme babelskog opsega. Uz izvođenje prijevoda između jezičnih parova, usluga se također može koristiti za otkrivanje na kojem se jeziku nalazi određeni tekst. Te podatke zatim možete koristiti za konfiguriranje manjih API-ja poput provjere pravopisa.

Konačno, idiomi i pojedinačne riječi također se mogu poslati u rječnički upit. Vraćene informacije ovise o situaciji - u nekim slučajevima Microsoft čak može vratiti na desetke idioma koji pomažu u razumijevanju.

08. Izvan zaslona API platna

Programeri su svojedobno koristili tehniku ​​koja se naziva dvostruko međuspremništvo za generiranje grafike bez treperenja. Google je predstavio nešto slično - stvara prozor izvan zaslona u kojem se grafika može 'inscenirati' uz visoke performanse.

09. NASA

JavaScript API-ji: NASA

(Slika dodijeljena: Microsoft)

Odluka Microsofta da korisnicima Windows Phone 7 povremeno pruži kurirane pozadine dovela je do mreškanja kroz industriju. S obzirom na to da su slike Svemira uvijek popularne, zašto ne biste otišli ravno do izvora i uzeli ih nekoliko iz neprestane NASA-ine trgovine?

10. Dohvatite podatke Slack

Slack se etablirao kao alat za 'moderno upravljanje projektima'. Ako ikada poželite koristiti podatke sadržane u takvom projektu, nabavite API token i hakirajte ga. Kada se dobro završi, vaša se web aplikacija čak može integrirati u Slack GUI.

11. YouTube API

JavaScript API-ji: YouTube

(Slika dodijeljena: Microsoft)

YouTube kanal dobar je koliko i analitika koja stoji iza njega. Googleov API za podatke o YouTubeu možda nije posebno šaljiv, ali pruža, između ostalog, dragocjene uvide u ponašanje vaše publike.

12. API zahtjeva za plaćanje

JavaScript API-ji: API zahtjeva za plaćanje

Prvi JavaScript API koji gledamo je API zahtjeva za plaćanje. Prilikom stvaranja web mjesto za e-trgovinu , puno se misli ulaže u poboljšanje tijeka plaćanja kako bi se osiguralo da iskustvo bude što glatko i bezbolnije. Unos podataka o plaćanju i dalje se ponavlja. Ako je neko polje pomalo pogrešno, cijeli se postupak prekida i treba ga ponovno pokrenuti. Na strani programera, postupak provjere valjanosti provjere valjanosti za svaki način plaćanja dugotrajan je postupak.

API zahtjeva za plaćanje uklanja ovaj dio iskustva s naplatom. Stranica može zatražiti potrebne podatke, a preglednik pruža korisniku polja za unos.

Korisnik treba samo jednom unijeti svoje podatke i oni se mogu koristiti na različitim web mjestima i transakcijama. Ovisno o uređaju, mogu čak koristiti i načine plaćanja povezane s korisničkim računom, poput Googlea i Apple Paya.

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

Objekt uzima nekoliko parametara koji opisuju plaćanje koje bi se trebalo izvršiti. Prvi opisuje prihvaćene načine plaćanja. To mogu biti različite vrste platnih kartica, kao i detalji za integraciju s drugim rješenjima za plaćanje treće strane. Postoji čak i opseg uključivanja druge web aplikacije kao načina plaćanja pomoću API-ja Payment Handler.

Druga je raščlamba onoga što se kupuje. To može biti u bilo kojem obliku koji za transakciju ima smisla. To također uključuje opcije za troškove dostave, koje se mogu izračunati na temelju drugih čimbenika, poput adrese za dostavu. Tu je i treći, neobavezni argument za određivanje dodatnih podataka koje je potrebno prikupiti, poput adrese e-pošte ili broja kontakta.

13. CSS Layout API

JavaScript API-ji: CSS Layout API

U pravilu, vaš izgled web stranice treba prepustiti CSS-u. S JavaScriptom, rukovanje promjenama izgleda sklono je lošim performansama i puno ručnog održavanja. Ali što se događa ako web mjesto zahtijeva nestandardni izgled? Tradicionalni položaj sličan mreži koji CSS pruža možda neće raditi za kreativnije ideje dizajna.

Layout API omogućuje programerima da kreiraju vlastite module izgleda, slično kao i postojeći grid ili flex moduli koji se danas koriste. Definiranjem pravila na kojima bi trebao raditi, API može smjestiti stavke bilo gdje unutar svog elementa koji sadrži. To je drugi Houdini API koji je ušao u preglednike.

Houdini je predstavio koncept 'radnih pločica', koje rade slično web radnicima, ali su visoko specijalizirane za jednu aktivnost. Layout API radi kroz određenu radnu knjižicu izgleda. Oni se registriraju u pregledniku, što im omogućuje preuzimanje u CSS-u.

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

Radna knjižica izgleda ima jednu metodu koja se naziva raspored , koji se bavi pozicioniranjem elemenata. Izvodi se kao funkcija generatora, omogućujući mu pokretanje paralelno s ostatkom stranice kako bi sve radilo bez problema.

Prvi je parametar referenca na neposredne podređene elemente onoga na koji se primjenjuje raspored. Podaci o veličini dostupni su iz drugog i trećeg parametra. Jedna pruža informacije o položaju i dimenziji o elementu koji se stilizira, dok druga definira ograničenja u kojima element mora raditi. Završni parametar opisuje ostatak stilova elementa, uključujući sva prilagođena svojstva koja bi ga mogla zanimati.

.el { display: layout(masonry); }

Prilagođeni modul primjenjuje se uobičajenim prikaz svojstvo na elementu. Koristi raspored funkcija, zajedno s nazivom radne ploče.

14. API za upravljanje vjerodajnicama

JavaScript API-ji: API za upravljanje vjerodajnicama

Umjesto da pamte puno pojedinačnih pojedinosti za prijavu, korisnici se mogu prijaviti s vjerodajnicama pohranjenim u pregledniku. Na taj način korisnici na više uređaja mogu ih pratiti kako bi ih detalji slijedili bez potrebe da se svaki put prijavljuju.

Iako značajka automatskog dovršavanja preglednika može smanjiti trenje s unosom same lozinke, API za upravljanje vjerodajnicama može automatski prijaviti korisnika čim pogodi stranicu. Također se može prijaviti koristeći druge oblike provjere autentičnosti, poput javnog ključa ili putem davatelja autentičnosti poput OpenID-a.

15. CSS Paint API

JavaScript API-ji: CSS Paint API

CSS i JavaScript često se smatraju zasebnim dijelovima web stranice - koji se uvijek okupljaju na male načine, poput dodavanja naziva klase. Programeri imaju malo prilika promijeniti način na koji preglednik odlučuje prikazati stranicu osim izravnog ažuriranja DOM-a.

To će se sve promijeniti u sljedećoj godini jer će novi set specifikacija početi dolaziti u preglednike. Omogućuju pristup cjevovodu rendera u pregledniku putem JavaScript-a, kako bi pomogli programerima da fino prilagode radnje preglednika prema njihovim potrebama.

Radnu skupinu za Houdini čini kolekcija ljudi iz pregledničkih i tehnoloških tvrtki. Cilj im je otvoriti način na koji se sve prikazuje u pregledniku na način koji ga čini pristupačnim za programere. To uključuje izglede, fontove i animacije.

Prva specifikacija koja već pogađa preglednike je CSS Paint API (poznat i kao CSS prilagođena boja). Ovaj API omogućuje vam programsko generiranje slike kad god je CSS svojstvo očekuje. Upotrijebite JavaScript za generiranje dinamičnih pozadina, obruba i maski za slike i primijenite ih u CSS-u bez velikih performansi. Uskoro će biti omogućen prema zadanim postavkama u Chrome Stableu.

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

Paint API koristi radnu ploču za bojenje kako bi definirao što preglednik treba učiniti svaki put kada treba ažurirati zaslon. Svaka boja može koristiti novu verziju radne ploče, što znači da se svi trajni podaci trebaju pohraniti negdje drugdje.

The boja metoda povratnog poziva dobiva tri vrijednosti. Prvi je kontekst, koji djeluje slično kontekstu platna. Na njega se može vući na isti način i ima većinu istih mogućnosti, ali kako se to može nazvati više puta u sekundi, trebalo bi biti jednostavno.

Druga vrijednost pruža informacije o elementu koji se boji, poput njegove visine i širine. To se može koristiti kako bi se osiguralo da krajnji rezultat savršeno odgovara svaki put kada se navikne.

Konačna vrijednost sadrži sva svojstva stila na objektu. To uključuje sva ulazna prilagođena svojstva definirana unutar getera. Oni koriste Typed Object Model - još jednu novu značajku Houdini koja olakšava probavljivost CSS vrijednosti u JavaScript-u.

Posljednji poziv registrira radnu knjižicu u pregledniku i otvara je na CSS stranu.

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

Za upotrebu unutar CSS-a uključuje funkciju u jednom retku. Proslijeđena vrijednost je naziv učinka koji se pruža prilikom registracije radnog programa. API i pripadajuća radna knjižica dostupni su u Chromeu i Operi, dok je i dalje ključni fokus za Safari, Firefox i Samsung internetske preglednike. Dok se specifikacija bliži kraju, očekujte da će uskoro doći do tih preglednika.

Kasnije iteracije specifikacije pružaju mehanizam za davanje argumenata protiv CSS funkcije, sličan onome kako su gradijenti trenutno definirani. To omogućuje lakše prilagođavanje bez primjene prilagođenih svojstava. Razmatraju se i druge mogućnosti, poput definiranja alfa kanala za slojevito postavljanje.

16. API za web animacije

JavaScript API-ji: API za web animacije

Animacija s JavaScriptom u prošlosti je imala loših rezultata. Pomicanje elemenata promjenom vrijednosti položaja uzrokuje puno ponovnih bojanja i rezultira lošim performansama. CSS animacije su bolji izbor, ali njima je teško manipulirati u hodu.

API za web animacije omogućuje pristup istom mehanizmu za animaciju koji pokreće CSS stranu.

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

Svaki element ima Animirani metoda koja uzima niz ključnih okvira plus objekt postavke ili trajanje. To vraća objekt animacije, koji se zatim može ažurirati za reprodukciju, pauziranje i podešavanje brzine reprodukcije.

Houdini donosi dodatnu korist s animacijskim radnim pločicama. Oni rade na sličnoj sintaksi kao API, ali omogućuju finiju kontrolu. Njima se mogu upravljati ulazi koji nisu vrijeme, poput pomicanja ili položaja dodira. Ovo je još u fazi izrade - da biste saznali više, prijeđite na Blog za programere za Chrome .

pričvrstite olovku za jabuku na pametnu tipkovnicu

Podrška za sam API web animacija je mala, ali brzo raste. Korištenjem otkrivanja značajki oni koji imaju podršku za to mogu odmah osjetiti blagodati.

17. API za zapis datoteke

JavaScript API-ji: API za zapis datoteke

Dugoročni je cilj web aplikacija postići da budu na istoj razini kao i njihovi izvorni kolege. Međutim, neke funkcije i dalje nedostaju - posebno oko upravljanja lokalnim datotekama.

Pisanje datoteka trenutno uključuje stvaranje preuzimanja i spremanje u određeni direktorij. Spremanjem iteracija u određenoj datoteci stvorit će se više kopija, što nije uvijek dobro iskustvo.

API za pisanje datoteka pružit će programerima veću fleksibilnost i omogućiti korisnicima da odluče gdje datoteke trebaju biti pohranjene. To otvara vrata cjelovitijim projektima na webu, poput mrežnog uređivača koda ili složenih grafičkih aplikacija.

Ovaj je API trenutno dio Googleov projekt sposobnosti . Trenutno je u procesu prikupljanja povratnih informacija o potencijalnim značajkama prije nego što pogodi preglednik u probnoj verziji. Pitanja oko sigurnosti i vrste datoteka gdje se mogu napisati potrebno je izglačati prije nego što API može postati službenim.

18. API generičkog senzora

Senzori na uređajima koje svakodnevno nosimo izvrstan su način pružanja dodatne koristi aplikaciji. Korištenje fizičkog okruženja, poput akcelerometra, može pružiti dodatnu uronjenost za kreativno iskustvo.

Ako već imamo događaje za takve stvari, zašto postoji novi API? Uređaji se neprestano mijenjaju i dodaju nove i raznolike senzore. Kako bi uštedio potrebu za izradom novih API-ja za svaki novi senzor koji izađe, Generic Sensor API stvara pojednostavljeno sučelje za sve njih.

Iako je API još uvijek u razvoju, Chrome i Firefox uključuju ga iza zastava za poigravanje. Drugi ga preglednici razmatraju za budućnost.

19. Paint Timing API

JavaScript API-ji: API za bojenje vremena

Izvedba je veliki fokus ove godine. Smanjivanje veličina datoteka može vam pomoći, ali izvedba ima više od onoga što se preuzima u preglednik. Preglednik ‘slika’ svoj sadržaj na zaslonu svaki put kad se nešto promijeni. Dok se ne dogodi prva boja, korisnici će ostati zagledani u prazan zaslon. Kad se prekine s drugim pojedinostima, poput preuzimanja sredstava ili obrade JavaScript-a, vrijeme do prve boje može potrajati duže.

API za prilagođavanje boje zadržava detaljne informacije o dva događaja - prvoj i prvoj 'sadržajnoj', koja se odnosi na nešto više od samog stila, poput teksta ili slike.

The PerformanceObserver sučelje opisuje što učiniti kada se ti događaji dogode. To se zatim može koristiti za slanje podataka na poslužitelj radi kasnije analize.

Trenutno je ovo dostupno samo u Chromeu i Operi, ali i drugi preglednici poput Edgea i Safarija pokazali su interes i možda će ga uključiti u budućnosti.

20. API web govora

Ovaj se API sastoji od dva dijela - sinteze i prepoznavanja. Sinteza govora uzet će mu dostavljeni tekst i pročitati ga glasom koji je odabrao korisnik. The Govorna sinteza objekt omogućuje pristup svim različitim opcijama, uključujući ono što bi trebao reći. Prepoznavanje uključuje uzimanje ulaza za mikrofon i razumijevanje izgovorenih riječi. The Prepoznavanje govora Objekt se koristi za otkrivanje govora, koji će aktivirati 'rezultat' s onim što misli da je korisnik rekao i koliko je samopouzdan.

Sintezna strana API-ja podržana je u svim glavnim preglednicima. Podrška za prepoznavanje govora trenutno je ograničena na Chrome s prefiksom ili Firefox s omogućenom zastavicom.

Postoje rasprave o proširenju strane prepoznavanja na druge ulaze, uključujući WebRTC za pružanje transkripata video konferencija u stvarnom vremenu. Iako su oni još uvijek u ranoj fazi, to bi moglo pomoći da webinari i mrežne prezentacije budu dostupniji i jednostavniji za referenciranje u budućnosti.

21. Promatrač raskrižja

Ovaj JavaScript API može se koristiti za razumijevanje vidljivosti i položaja DOM elemenata (poznatih kao 'ciljevi') u odnosu na element koji sadrži ('korijen'). Koristite ga za aktiviranje povratnog poziva kad god element uđe i izađe iz određenog područja. Ovaj je API najbolji za lijeno učitavanje ili efekte beskonačnog pomicanja.

22. Promatrač izvještavanja

Dio API-ja za izvještavanje, Promatrači izvješća promatraju neke vrste izvješća iz JavaScript-a. Upotrijebite ih za primanje obavijesti kada preglednik mora intervenirati - na primjer, ako mora osigurati zamjenski font za sporo učitavanje fonta.

23. OffscreenCanvas

Crtanje do a je skup zadatak za preglednik. Ovaj novi API omogućuje vam prikazivanje grafika iz glavne niti, bez udaranja u DOM.

24. API internacionalizacija

Poznat po prostoru imena Intl , ECMAScript internacionalizacijski API pruža jezičnu usporedbu niza, oblikovanje brojeva i oblikovanje datuma i vremena. Koristite ga da biste izbjegli slanje teških biblioteka i prikazivali datume, brojeve i nizove u formatu koji ima smisla na korisnikovom mjestu.

25. GraphQL

Iako ovo nije API u najstrožem smislu, GraphQL je nešto što uvijek zaslužuje spomen kad je riječ o raspravljanju API-ja.

Metoda za ludilo odnosi se na upite pokrenute protiv poslužitelja koji sadrže spremište objekata. Umjesto da se programeri natjeraju da kreiraju pristupni API za svaki element, uspostavlja se 'generički' jezik upita. Programer API-ja tada mora pružiti standardizirani opis objekata sadržanih u:

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

U sljedećem koraku aktivirajte jedan ili više upita prema tim formaliziranim opisima. Primjer protiv (izmišljene) ljudske baze podataka izgledao bi ovako:

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

GraphQL sposobni poslužitelji reagiraju vraćanjem JSON objekta koji sadrži tražena polja. Zbog ograničenja prostora ovu temu ne možemo dalje razrađivati ​​- ovaj tutorial pruža, međutim, zanimljiv pregled.

Ovo je uređena verzija članaka koji su se izvorno pojavili u Web dizajner časopis.

Čitaj više: