Alexey Grachev: Idi Frontend

Kyiv Go Meetup, maj 2018:

Alexey Grachev: Idi Frontend

Olovo: - Zdravo svima! Hvala vam što ste ovdje! Danas imamo dva zvanična govornika - Lyosha i Vanya. Biće još dva ako budemo imali dovoljno vremena. Prvi govornik je Alexey Grachev, on će nam pričati o GopherJS-u.

Alexey Grachev (u daljem tekstu – AG): – Ja sam Go programer i pišem web servise u Go. Ponekad morate da se bavite frontendom, ponekad morate da uđete u njega ručno. Želim da pričam o svom iskustvu i istraživanju Go na frontendu.

Legenda je sledeća: prvo ćemo razgovarati o tome zašto želimo da pokrenemo Go na frontendu, a zatim ćemo razgovarati o tome kako se to može uraditi. Postoje dva načina - Web Assembly i GopherJS. Da vidimo kakav je status ovih rješenja i šta se može učiniti.

Šta nije u redu sa frontendom?

Da li se svi slažu da je sve u redu sa frontendom?

Alexey Grachev: Idi Frontend

Nema dovoljno testova? Spora gradnja? Ekosistem? U redu.

Što se tiče frontenda, sviđa mi se citat koji je jedan od frontend programera rekao u svojoj knjizi:

Alexey Grachev: Idi Frontend

Javascript nema sistem tipova. Sada ću navesti probleme sa kojima sam se susreo u toku svog rada i objasniti kako se rješavaju.

Sistem tipova uopšte se teško može nazvati sistemom tipova u Javasript-u - postoje linije koje ukazuju na tip objekta, ali to u stvari nema nikakve veze sa tipovima. Ovaj problem je rešen u TypeScript-u (dodatak za Javasript) i Flow-u (provera statičkog tipa u Javascript-u). Zapravo, frontend je već stigao do tačke rešavanja problema lošeg sistema tipova u Javascript-u.

Alexey Grachev: Idi Frontend

Ne postoji standardna biblioteka u pretraživaču kao takva - postoje neki ugrađeni objekti i "magične" funkcije u pretraživačima. Ali u Javascriptu ne postoji standardna biblioteka kao takva. Ovaj problem je već jednom riješio jQuery (svi su koristili jQuery sa svim prototipovima, pomoćnicima, funkcijama koje su bile potrebne za rad). Sada svi koriste Lodash:

Alexey Grachev: Idi Frontend

Pakao povratnog poziva. Mislim da su svi vidjeli Javascript kod prije otprilike 5 godina, i izgledao je kao “rezanci” nevjerovatne zamršenosti povratnih poziva. Sada je ovaj problem riješen (sa izdavanjem ES-15 ili ES-16), obećanja su dodana u Javascript i svako može lakše disati neko vrijeme.

Alexey Grachev: Idi Frontend

Dok nije stigao pakao Promice... Ne znam kako se front-end industrija snalazi, ali uvijek se odvezu u neku čudnu džunglu. Također smo uspjeli napraviti pakao na obećanjima. Zatim smo ovaj problem riješili dodavanjem novog primitiva - async/await:

Alexey Grachev: Idi Frontend

Problem sa asinhronijom je riješen. Async/await je prilično popularan primitiv na raznim jezicima. Python i drugi imaju ovaj pristup - prilično je dobar. Problem riješen.

Koji problem nije riješen? Eksponencijalno rastuća složenost okvira, složenost ekosistema i samih programa.

Alexey Grachev: Idi Frontend

  • Javascript sintaksa je malo čudna. Svi znamo probleme sa dodavanjem niza i objekta i druge šale.
  • Javascript je multi-paradigma. Ovo je posebno hitan sistem sada kada je ekosistem veoma velik:
    • svi pišu u različitim stilovima – neki pišu strukturalno, neki pišu funkcionalno, različiti programeri pišu na različite načine;
    • iz različitih paketa, različite paradigme kada koristite različite pakete;
    • postoji mnogo "zabave" sa funkcionalnim programiranjem u Javasript-u - pojavila se rambda biblioteka i sada niko ne može čitati programe napisane u ovoj biblioteci.

  • Sve ovo ima veliki uticaj na ekosistem, i on je neverovatno narastao. Paketi su međusobno nekompatibilni: neki su zasnovani na obećanjima, neki na async/await, neki su zasnovani na povratnim pozivima. Oni također pišu u različitim paradigmama!
  • To otežava održavanje projekta. Teško je pronaći grešku ako ne možete pročitati kod.

Šta je Web Assembly?

Hrabri momci iz Mozilla fondacije i niza drugih kompanija smislili su takvu stvar kao što je Web Assembly. Šta je ovo?

Alexey Grachev: Idi Frontend

  • Ovo je virtuelna mašina ugrađena u pretraživač koja podržava binarni format.
  • Binarni programi stižu tamo i izvršavaju se skoro nativno, odnosno pretraživač ne mora svaki put da raščlani sve „rezance“ javascript koda.
  • Svi pretraživači su deklarirali podršku.
  • Pošto je ovo bajtkod, možete napisati kompajler za bilo koji jezik.
  • Četiri glavna pretraživača se već isporučuju s podrškom za Web Assembly.
  • Uskoro očekujemo domaću podršku u Go. Ova nova arhitektura je već dodana: GOARCH=wasm GOOS=js (uskoro). Za sada, koliko sam shvatio, nije funkcionalan, ali postoji izjava da će sigurno biti u Go.

Šta sada učiniti? GopherJS

Iako nemamo podršku za Web Assembly, postoji transpiler kao što je GopherJS.

Alexey Grachev: Idi Frontend

  • Go kod se transpilira u “čisti” Javascript.
  • Radi u svim pretraživačima - nema novih funkcija koje podržavaju samo moderni pretraživači (ovo je Vanilla JS, koji radi na bilo čemu).
  • Postoji podrška za gotovo sve što Go ima, uključujući gorrutine i kanale... sve što volimo i znamo toliko.
  • Podržana je skoro cijela standardna biblioteka, osim onih paketa koje nema smisla podržavati u pretraživaču: syscall, mrežne interakcije (postoji net/http klijent, ali nema servera, a klijent se emulira preko XMLHttpRequest). Općenito, dostupna je cijela standardna biblioteka - ovdje je u pretraživaču, ovdje je Go-ov stdlib, koji nam se sviđa.
  • Cijeli ekosistem paketa u Go, sva rješenja treće strane (templating, itd.) mogu se kompajlirati pomoću GopherJS-a i pokrenuti u pretraživaču.

GopherJS je vrlo lako nabaviti - to je samo običan Go paket. Idemo dobiti i imamo GopherJS naredbu za izgradnju aplikacije:

Alexey Grachev: Idi Frontend

Ovo je tako mali zdrav svijet...

Alexey Grachev: Idi Frontend

...Običan Go program, običan fmt paket standardne biblioteke i Binding Js za pristup API pretraživača. Println će na kraju biti konvertovan u dnevnik konzole i pretraživač će napisati “Hello gophers”! Tako je jednostavno: radimo GopherJS build – pokrećemo ga u pretraživaču – sve radi!

Šta trenutno imate? Vezi

Alexey Grachev: Idi Frontend

Postoje veze za sve popularne js okvire:

  • JQuery;
  • Angular.js;
  • D3.js za crtanje i rad sa velikim podacima;
  • React.js;
  • VueJS;
  • postoji čak i podrška za Electron (to jest, već možemo pisati desktop aplikacije na Electron-u);
  • a najsmješnija stvar je WebGL (možemo napraviti potpuno grafičke aplikacije, uključujući igre sa 3D grafikom, muzikom i svim dobrima);
  • i mnoge druge veze za sve popularne javascript okvire i biblioteke.

okvir

  1. Postoji web framework koji je već razvijen posebno za GopherJS - Vecty. Ovo je potpuni analog React.js-a, ali razvijen samo u Go-u, sa specifičnostima GopherJS-a.
  2. Postoje torbe za igru ​​(iznenađenje!). Našao sam dvije najpopularnije:
    • Engo;
    • Ebiten.

Pokazat ću vam nekoliko primjera kako to izgleda i šta već možete napisati u Go:

Alexey Grachev: Idi Frontend

Ili ova opcija (nisam mogao pronaći 3D pucač, ali možda postoji):

Alexey Grachev: Idi Frontend

Šta ja nudim?

Sada je front-end industrija u takvom stanju da će svi jezici koji su ranije vapili iz Javascripta pohrliti tamo. Sada će sve biti sastavljeno u “Web Assemblies”. Šta nam je potrebno da zauzmemo mjesto koje nam pripada kao Gophers?

Alexey Grachev: Idi Frontend

Go tradicionalno pretpostavlja da je sistemski programski jezik i praktično ne postoje biblioteke za rad sa korisničkim sučeljem. Ima nešto, ali je napola napušteno, pola nefunkcionalno.

A sada je dobra prilika da napravite UI biblioteke u Go-u koje će raditi na GopherJS-u! Konačno možete napisati svoj vlastiti okvir! Ovo je vrijeme kada možete napisati okvir, i on će biti jedan od prvih i biti rano usvojen, a vi ćete biti zvijezda (ako je dobar okvir).

Možete prilagoditi mnogo različitih paketa koji se već nalaze u Go ekosistemu specifičnostima pretraživača (na primjer, Template engine). Oni će već raditi, možete napraviti zgodne veze tako da možete lako prikazati sadržaj direktno u pretraživaču. Osim toga, možete napraviti, na primjer, uslugu koja može generirati istu stvar na serveru i na front-endu, koristeći isti kod - sve što se sviđa front-end programerima (samo sada u Go).

Možete napisati igru! Samo za zabavu…

To je sve što sam htio reći.

Alexey Grachev: Idi Frontend

Vaša pitanja

Pitanje (u daljem tekstu Q): – Da li pišem na Go ili Js?

AG: – Pišete rutine, kanale, strukture, embedding – sve u Go... Pretplatite se na događaj, tamo proslijedite funkciju.

AT: – Znači pišem u „goli“ Js?

AG: – Ne, pišete kao u Go i povezujete se na API pretraživača (API se nije promijenio). Možete napisati svoje veze tako da se poruke šalju na kanal - nije teško.

AT: – Šta je sa mobilnim?

AG: – Definitivno sam vidio: postoje vezovi za Cordova patch koji Js pokreće. U React Native-u - ne znam; možda ima, možda i ne (nisam bio posebno zainteresovan). N-go game engine podržava obje mobilne aplikacije - i iOS i Android.

AT: – Pitanje o Web Assembly. Zauzima se sve više prostora, uprkos kompresiji i “zippingu”... Nećemo li na ovaj način još više ubiti front-end svijet?

AG: – Web Assembly je binarni format, a binarno standardno ne može biti u konačnom izdanju više od teksta... Privlači vas runtime, ali ovo je isto kao da izvlačite standardnu ​​Javascript biblioteku kada je nema, pa mi koristite neki Lodash. Ne znam koliko Lodash uzima.

AT: – Očigledno manje od vremena rada...

AG: – U “čistom” Javascriptu?

AT: - Da. Komprimujemo ga prije slanja...

AG: – Ali ovo je tekst... Općenito, megabajt izgleda puno, ali to je sve (imate cijelo vrijeme rada). Zatim pišete sopstvenu poslovnu logiku koja će povećati vašu binarnost za 1%. Za sada ne vidim da ovo ubija frontend. Štaviše, Web Assembly će raditi brže od Javascripta iz očiglednog razloga - ne treba ga raščlanjivati.

AT: – Ovo je još uvijek kontroverzna stvar... Još ne postoji nijedna referentna implementacija “Vasme” (Web Assembly) da bi se moglo nedvosmisleno suditi. Konceptualno, da: svi razumijemo da bi binarnost trebala biti brža, ali trenutna implementacija istog V8 je vrlo efikasna.

AG: - Da.

AT: – Kompilacija tamo radi zaista jako cool i nije činjenica da će biti velika prednost.

AG: – Web Assembly takođe prave veliki momci.

AT: – Čini mi se da je i dalje teško suditi o Web Assembly. Razgovori se vode već dugi niz godina, ali malo je stvarnih dostignuća koja se mogu osjetiti.

AG: - Možda. Vidit ćemo.

AT: – Nemamo problema na bekendu... Možda bi ove probleme trebalo da ostavimo na frontendu? Zašto ići tamo?

AG: – Moramo zadržati kadar radnika na prvoj liniji.

Neke reklame 🙂

Hvala vam što ste ostali s nama. Da li vam se sviđaju naši članci? Želite li vidjeti još zanimljivih sadržaja? Podržite nas naručivanjem ili preporukom prijateljima, cloud VPS za programere od 4.99 USD, jedinstveni analog servera početnog nivoa, koji smo mi izmislili za vas: Cijela istina o VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps od 19$ ili kako dijeliti server? (dostupno sa RAID1 i RAID10, do 24 jezgra i do 40GB DDR4).

Dell R730xd 2 puta jeftiniji u Equinix Tier IV data centru u Amsterdamu? Samo ovdje 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV od 199 USD u Holandiji! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - od 99 USD! Pročitajte o Kako izgraditi infrastrukturnu kompaniju. klase uz korišćenje Dell R730xd E5-2650 v4 servera u vrednosti od 9000 evra za peni?

izvor: www.habr.com

Dodajte komentar