Alexey Grachev: Go Frontend

Kyiv Go Meetup svibanj 2018.:

Alexey Grachev: Go Frontend

Moderator: - Bok svima! Hvala vam što ste ovdje! Danas imamo dva službena govornika - Lyosha i Vanja. Bit će još dva ako budemo imali dovoljno vremena. Prvi govornik je Alexey Grachev, on će nam govoriti o GopherJS.

Alexey Grachev (u daljnjem tekstu – AG): – Ja sam Go programer i pišem web usluge u Go-u. Ponekad se morate pozabaviti sučeljem, ponekad morate u njega ući ručno. Želim razgovarati o svom iskustvu i istraživanju Go-a na sučelju.

Legenda je sljedeća: prvo ćemo razgovarati o tome zašto želimo pokrenuti Go na sučelju, zatim ćemo razgovarati o tome kako se to može učiniti. Postoje dva načina - Web Assembly i GopherJS. Pogledajmo kakav je status tih rješenja i što se može učiniti.

Što nije u redu s sučeljem?

Slažu li se svi da je s frontendom sve u redu?

Alexey Grachev: Go Frontend

Nema dovoljno testova? Spora izgradnja? Ekosustav? Fino.

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

Alexey Grachev: Go Frontend

Javascript nema sustav tipova. Sada ću navesti probleme s kojima sam se susreo u svom radu i objasniti kako se oni rješavaju.

Sustav tipova se teško može nazvati sustavom tipova u Javasriptu - postoje linije koje označavaju tip objekta, ali to zapravo nema nikakve veze s tipovima. Ovaj problem je riješen u TypeScriptu (dodatak za Javasript) i Flow (statička provjera tipa u Javascriptu). Zapravo, sučelje je već doseglo točku rješavanja problema lošeg tipa sustava u Javascriptu.

Alexey Grachev: Go Frontend

Ne postoji standardna biblioteka u pregledniku kao takvom - postoje neki ugrađeni objekti i "čarobne" funkcije u preglednicima. 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: Go Frontend

Povratni poziv dovraga. Mislim da su svi vidjeli Javascript kod prije otprilike 5 godina, i izgledao je kao "rezanac" nevjerojatne zamršenosti povratnih poziva. Sada je ovaj problem riješen (izlaskom ES-15 ili ES-16), obećanja su dodana u Javascript i svi mogu malo lakše disati.

Alexey Grachev: Go Frontend

Dok nije stigao pakao Promice... Ne znam kako se front-end industrija snalazi, ali uvijek se zatjeraju u neku čudnu džunglu. Uspjeli smo napraviti pakao i na obećanjima. Zatim smo riješili ovaj problem dodavanjem nove primitive - async/await:

Alexey Grachev: Go Frontend

Problem s asinkronijom je riješen. Async/await je prilično popularna primitiva u 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 ekosustava i samih programa.

Alexey Grachev: Go Frontend

  • Javascript sintaksa je pomalo čudna. Svi znamo probleme s dodavanjem polja i objekta i ostale šale.
  • Javascript ima više paradigmi. Ovo je posebno hitan sustav sada kada je ekosustav vrlo velik:
    • svatko piše različitim stilovima - neki pišu strukturalno, neki funkcionalno, različiti programeri pišu na različite načine;
    • iz različitih paketa, različite paradigme kada koristite različite pakete;
    • ima puno "zabave" s funkcionalnim programiranjem u Javasriptu - pojavila se biblioteka rambda i sada nitko ne može čitati programe napisane u ovoj biblioteci.

  • Sve to ima veliki utjecaj na ekosustav i on je nevjerojatno narastao. Paketi su nekompatibilni jedan s drugim: neki se temelje na obećanjima, neki na async/await, neki 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.

Što je Web Assembly?

Hrabri momci iz Zaklade Mozilla i brojnih drugih tvrtki osmislili su nešto poput Web Assemblyja. Što je to?

Alexey Grachev: Go Frontend

  • Ovo je virtualni stroj ugrađen u preglednik koji podržava binarni format.
  • Binarni programi stižu tamo i izvršavaju se gotovo nativno, to jest, preglednik ne treba svaki put analizirati sve "rezance" javascript koda.
  • Svi preglednici imaju deklariranu podršku.
  • Budući da je ovo bajt kod, možete napisati kompajler za bilo koji jezik.
  • Četiri glavna preglednika već se isporučuju s podrškom za Web Assembly.
  • Uskoro očekujemo izvornu podršku za Go. Ova nova arhitektura je već dodana: GOARCH=wasm GOOS=js (uskoro). Zasad, koliko sam shvatio, nije u funkciji, ali postoji izjava da će sigurno biti u Gou.

Što učiniti sada? GopherJS

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

Alexey Grachev: Go Frontend

  • Go kod je transpiliran u "čisti" Javascript.
  • Radi u svim preglednicima - nema novih značajki koje podržavaju samo moderni preglednici (ovo je Vanilla JS, koji radi na bilo čemu).
  • Postoji podrška za gotovo sve što Go ima, uključujući goroutines i kanale... sve što volimo i znamo toliko.
  • Podržana je gotovo cijela standardna biblioteka, osim onih paketa koje nema smisla podržavati u pregledniku: syscall, net interakcije (postoji net/http klijent, ali ne i poslužitelj, a klijent se emulira putem XMLHttpRequesta). Općenito, cijela standardna biblioteka je dostupna - ovdje je u pregledniku, ovdje je Goov stdlib, koji volimo.
  • Cijeli ekosustav paketa u Gou, sva rješenja trećih strana (predlošci, itd.) mogu se kompajlirati pomoću GopherJS-a i pokrenuti u pregledniku.

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

Alexey Grachev: Go Frontend

Ovo je tako mali zdrav svijet...

Alexey Grachev: Go Frontend

...Obični Go program, obični standardni knjižnični fmt paket i Binding Js za pristup API-ju preglednika. Println će se na kraju pretvoriti u zapisnik konzole i preglednik će napisati "Hello gophers"! Tako je jednostavno: mi gradimo GopherJS – pokrećemo ga u pregledniku – sve radi!

Što imate u ovom trenutku? Vezovi

Alexey Grachev: Go Frontend

Postoje vezanja za sve popularne js okvire:

  • JQuery;
  • Angular.js;
  • D3.js za iscrtavanje i rad s velikim podacima;
  • React.js;
  • VueJS;
  • postoji čak i podrška za Electron (odnosno, već možemo pisati desktop aplikacije na Electron);
  • a najsmješnija stvar je WebGL (možemo izraditi potpuno grafičke aplikacije, uključujući igrice s 3D grafikom, glazbom i svim sitnicama);
  • i mnoga druga povezivanja sa svim popularnim javascript okvirima i bibliotekama.

Okvir

  1. Već postoji web okvir razvijen posebno za GopherJS - Vecty. Ovo je potpuni analog React.js, ali razvijen samo u Go, sa specifičnostima GopherJS.
  2. Tu su i torbe za igru ​​(iznenađenje!). Našao sam dva najpopularnija:
    • Engo;
    • Ebiten.

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

Alexey Grachev: Go Frontend

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

Alexey Grachev: Go Frontend

Što nudim?

Sada je front-end industrija u takvom stanju da će svi jezici koji su prije plakali od Javascripta pohrliti tamo. Sada će sve biti sastavljeno u "Web Assemblies". Što nam je potrebno da tamo zauzmemo svoje pravo mjesto kao Gophers?

Alexey Grachev: Go Frontend

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

A sada je dobra prilika da napravite knjižnice korisničkog sučelja u Gou koje će raditi na GopherJS! Napokon možete napisati vlastiti okvir! Ovo je vrijeme kada možete napisati okvir, i to će biti jedan od prvih i biti rano usvojen, i bit ćete zvijezda (ako je dobar okvir).

Mnogo različitih paketa koji su već u Go ekosustavu možete prilagoditi specifičnostima preglednika (na primjer, Template engine). Oni će već raditi, možete napraviti prikladna povezivanja tako da možete lako prikazati sadržaj izravno u pregledniku. Osim toga, možete napraviti, na primjer, uslugu koja može prikazati istu stvar na poslužitelju i na front-endu, koristeći isti kod - sve što front-end programeri vole (samo sada u Go).

Možete napisati igru! Samo za zabavu…

To je sve što sam htio reći.

Alexey Grachev: Go Frontend

pitanja

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

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

NA: – Pa pišem u “golom” J?

AG: – Ne, pišete kao u Go i spajate se na API preglednika (API se nije promijenio). Možete napisati vlastita povezivanja tako da se poruke šalju na kanal - nije teško.

NA: – Što je s mobitelom?

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

NA: – Pitanje o Web montaži. Zauzima se sve više prostora, unatoč kompresiji i “zipanju”... Nećemo li na ovaj način još više ubiti front-end svijet?

AG: – Web Assembly je binarni format, a binarni prema zadanim postavkama ne može biti u konačnom izdanju više od teksta... Privlači vas runtime, ali to je isto kao da povlačite standardnu ​​Javascript biblioteku kada je nema, pa mi upotrijebi malo Lodasha. Ne znam koliko Lodash uzima.

NA: – Očito manje od vremena izvođenja...

AG: – U “čistom” Javascriptu?

NA: - da Komprimiramo ga prije slanja...

AG: – Ali ovo je tekst... Općenito, megabajt se čini puno, ali to je sve (imate cijelo vrijeme izvođenja). Zatim pišete vlastitu poslovnu logiku, koja će povećati vašu binarnu datoteku za 1%. Zasad ne vidim da ovo ubija sučelje. Štoviše, Web Assembly radit će brže od Javascripta iz očitog razloga - ne treba ga analizirati.

NA: – Ovo je još uvijek kontroverzna točka... Još ne postoji referentna implementacija “Vasme” (Web Assembly) da bi se moglo jednoznačno suditi. Konceptualno, da: svi razumijemo da bi binarni trebao biti brži, ali trenutna implementacija istog V8 vrlo je učinkovita.

AG: - Da.

NA: – Tamo kompilacija radi stvarno jako cool i nije činjenica da će biti velika prednost.

AG: – Web Assembly rade i veliki dečki.

NA: – Čini mi se da je još uvijek teško procijeniti Web Assembly. Razgovori se vode već dugi niz godina, ali malo je stvarnih postignuća koja se mogu osjetiti.

AG: - Može biti. Vidjet ćemo.

NA: – Nemamo problema na backendu... Možda bismo te probleme trebali ostaviti na frontendu? Zašto ići tamo?

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

Neki oglasi 🙂

Hvala što ste ostali s nama. Sviđaju li vam se naši članci? Želite li vidjeti više zanimljivog sadržaja? Podržite nas narudžbom ili preporukom prijateljima, cloud VPS za programere od 4.99 USD, jedinstveni analog poslužitelja početne razine, koji smo izmislili za vas: Cijela istina o VPS (KVM) E5-2697 v3 (6 jezgri) 10GB DDR4 480GB SSD 1Gbps od 19 USD ili kako podijeliti poslužitelj? (dostupno s RAID1 i RAID10, do 24 jezgre i do 40 GB DDR4).

Dell R730xd 2 puta jeftiniji u Equinix Tier IV podatkovnom 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 Nizozemskoj! Dell R420 - 2x E5-2430 2.2 Ghz 6C 128 GB DDR3 2x960 GB SSD 1 Gbps 100 TB - od 99 USD! Pročitaj o Kako izgraditi infrastrukturu corp. klase uz korištenje Dell R730xd E5-2650 v4 servera vrijednih 9000 eura za lipu?

Izvor: www.habr.com

Dodajte komentar