Alexej Gračov: Go Frontend

Kyjev Go Meetup máj 2018:

Alexej Gračov: Go Frontend

Moderátor: – Vitajte všetci! Ďakujem, že ste sa tu zišli! Dnes máme dvoch oficiálnych rečníkov – Lešu a Vaňu. Budú ešte dvaja, ak nám zostane čas. Prvým rečníkom je Alexej Gračov, porozpráva nám o GopherJS.

Alexej Gračov (ďalej – AG): – Som Go vývojár a píšem webové služby v Go. Niekedy sa musím zaoberať frontendom, občas sa musím dostať aj tam rukami. Chcem sa s vami podeliť o svoje skúsenosti a výskum Go na fronte.

Legendy hovoria: najprv sa porozprávame, prečo chceme spúšťať Go na fronte, potom si povieme, ako to môžeme urobiť. Sú dve cesty – Web Assembly a GopherJS. Pozrime sa, v akom stave sú tieto riešenia a čo sa dá robiť.

Čo nie je v poriadku s frontend-om?

Všetci súhlasia, že je front-end v poriadku?

Alexej Gračov: Go Frontend

Málo testov? Pomalá kompilácia? Ekosystém? Dobre.

Pokiaľ ide o frontend, páči sa mi citát, ktorý povedal jeden z frontend vývojárov vo svojej knihe:

Alexej Gračov: Go Frontend

V Javascripte nie je systém typov. Teraz začnem hovoriť o problémoch, s ktorými som sa stretol v priebehu svojej práce a vysvetliť, ako ich riešia.

Systém typov sa ťažko nazýva systémom typov v Javascripte – sú tam reťazce, ktoré označujú typ objektu, ale v skutočnosti to nemá nič spoločného s typmi. Tento problém bol vyriešený v TypeScripte (nadstavba nad Javascriptem) a Flow (statický kontrolór typov v Javascripte). V skutočnosti už frontend dosiahol riešenie problému zlého systému typov v Javascripte.

Alexej Gračov: Go Frontend

Štandardná knižnica v prehliadači jednoducho neexistuje – sú tam nejaké vstavané objekty a "magické" funkcie v prehliadačoch. Ale v Javascipte ako takom neexistuje štandardná knižnica. Tento problém už kedysi vyriešil jQuery (všetci používali jQuery so všetkými prototypmi, pomocnými funkciami, ktoré sú potrebné na prácu). Teraz všetci používajú Lodash:

Alexej Gračov: Go Frontend

Callback hell. Myslím, že všetci už niekde videli kód v Javascripte pred asi 5 rokmi, a pripomínal "nudle" z neuveriteľnej spleti callbackov. Teraz sa tento problém vyriešil (s príchodom ES-15 alebo ES-16), do Javascriptu pridali promisy a všetkým sa na chvíľu ľahšie dýchalo.

Alexej Gračov: Go Frontend

Kým neprišiel Promice hell… Neviem, ako sa frontendový priemysel dostáva do takých zvláštnych situácií, ale stále sa dostávajú do zvláštnych zložitostí. Podarilo sa im urobiť hell aj z „promisov“. Potom tento problém vyriešili pridaním nového primitívu – async/await:

Alexej Gračov: Go Frontend

S asynchrónnosťou je problém vyriešený. Async/await – relatívne populárny primitív v rôznych jazykoch. V Pythone a iných existuje takýto prístup – je dosť dobrý. Problém je vyriešený.

Aký problém nie je vyriešený? Rastuúca geometrická zložitosti rámca, zložitosti ekosystému a samotných programov.

Alexej Gračov: Go Frontend

  • Syntax JavaScriptu je trochu zvláštny. Všetci vieme o problémoch s sčítaním polia a objektu a inými záležitosťami.
  • JavaScript je multiparadigmatický. Momentálne je to osobitne aktuálny systém, keď je ekosystém veľmi veľký:
    • všetci píšu rôznymi štýlmi – niekto píše štrukturálne, niekto funkčne, rôzni vývojári píšu inak;
    • z rôznych balíkov (packages) rôzne paradigmy, keď používate rôzne balíčky;
    • veľa "zábavy" s funkcionálnym programovaním v JavaScripte – objavila sa knižnica ramda a teraz nikto nedokáže čítať programy napísané v tejto knižnici.

  • To všetko vnáša veľký dopad do ekosystému, ktorý narástol neuveriteľne. Balíčky si navzájom nie sú kompatibilné: niektoré fungujú na prísľuboch, niektoré na async/await, niektoré na spätnej väzbe. Ešte aj píšu v rôznych paradigmach!
  • To vedie k tomu, že je ťažké projekt udržiavať. ťažké nájsť bug, ak nemôžete prečítať kód.

Čo je to Web Assembly?

Dodržať zásady z Mozilla Foundation a niekoľkých iných spoločností vytvorili takú vec, ako Web Assembly. Čo to je?

Alexej Gračov: Go Frontend

  • Je to zabudovaný virtuálny stroj v prehliadači, ktorý podporuje binárny formát.
  • Binárne programy sa dostanú dovnútra, vykonávajú sa takmer natívne, to znamená, že prehliadaču nie je potrebné zakaždým analyzovať celú "nudnú" javascriptovú kód.
  • Všetky prehliadače ohlásili podporu.
  • Keďže je to bajtkód, je možné napísať kompilátor pre akýkoľvek jazyk.
  • Štyri hlavné prehliadače už sú dodávané s podporou Web Assembly.
  • Čoskoro očakávame natívnu podporu v Go. Takáto nová architektúra už bola pridaná: GOARCH=wasm GOOS=js (čoskoro). Zatiaľ, ako chápem, nie je funkčná, avšak je tu vyhlásenie, že to určite bude v Go.

Čo robiť teraz? GopherJS

Kým nemáme podporu Web Assembly, existuje taký transpiler ako GopherJS.

Alexej Gračov: Go Frontend

  • Kód na Go sa transpile do "čistého" JavaScriptu.
  • Beží vo všetkých prehliadačoch – tam nie sú žiadne nové funkcie, ktoré sú podporované iba modernými prehliadačmi (to je Vanilla JS, ktorý beží na všetkom).
  • Podpora podstatne všetkého, čo je v Go, vrátane gorutín a kanálov… – všetko, čo máme radi a poznáme.
  • Takmer celá štandardná knižnica je podporovaná, okrem tých balíkov, ktoré nemajú zmysel podporovať v prehliadači: syscall, sieťová interakcia (existuje net/http klient, ale server nie, a klient je emulovaný prostredníctvom XMLHttpRequest). Vo všeobecnosti je celá štandardná knižnica dostupná – tu je v prehliadači, tu je stdlib Go, ktorú milujeme.
  • Celý ekosystém balíka v Go, všetky externé riešenia (šablónovanie a iné) môžu byť skompilované pomocou GopherJS a spustené v prehliadači.

Získať GopherJS je veľmi jednoduché – je to bežný Go balík. Robíme go get, a máme príkaz GopherJS na zostavenie aplikácie:

Alexej Gračov: Go Frontend

Takýto malý hello world…

Alexej Gračov: Go Frontend

…Bežný Go program, bežný balík fmt zo štandardnej knižnice a Binding Js, aby sme sa dostali k API prehliadača. Println nakoniec bude prekonvertovaný na console log a prehliadač napíše „Hello gophers“! Takto jednoducho: robíme GopherJS build – spúšťame v prehliadači – všetko funguje!

Čo tu máme momentálne? Binders

Alexej Gračov: Go Frontend

Existujú bindery ku všetkým populárnym js-frameworkom:

  • JQuery;
  • Angular.js;
  • D3.js na vytváranie grafov a prácu s veľkými dátami;
  • React.js;
  • VueJS;
  • existuje dokonca podpora Electron (to znamená, že už teraz môžeme písať desktopové aplikácie na 'Elektrone');
  • a najzábavnejšie – to je WebGL (môžeme robiť polygónové aplikácie, vrátane hier s 3D grafikou, hudbou a všetkými vychytávkami);
  • a veľmi veľa ďalších binderov ku všetkým populárnym javascript-frameworkom a knižniciam.

Framework

  1. Existuje už vyvinutý webový framework špeciálne pre GopherJS – Vecty. Je to plnohodnotný ekvivalent React.js, ale vyvinutý v Go, so špecifikou GopherJS.
  2. Existujú herné rámce (prekvapujúco!). Našiel som dva najpopulárnejšie:
    • Engo;
    • Ebiten.

Predvediem pár príkladov, ako to vyzerá a čo už teraz môžeme napísať v Go:

Alexej Gračov: Go Frontend

Alebo takáto verzia (3D strielačku som nenašiel, ale možno existuje):

Alexej Gračov: Go Frontend

Čo navrhujem?

Momentálne je priemysel frontendu v takom stave, že tam teraz pozvú všetky jazyky, ktoré predtým plakali nad Javascriptom. Teraz sa všetky jazyky budú kompilovať do 'Web Assembly'. Čo potrebujeme, aby sme sa tam umiestnili na slušnom mieste ako 'gofers'?

Alexej Gračov: Go Frontend

V Go je tradične považovaný za jazyk systémového programovania a takmer neexistujú žiadne knižnice na prácu s UI. Niečo existuje, ale je to napoly zanedbané a napoly nefunkčné.

A tu je – skvelá príležitosť vytvoriť UI knižnice v Go, ktoré sa spustia na GopherJS! Môžete konečne napísať svoj vlastný framework! Prišiel čas, kedy môžete napísať framework, a ten bude jedným z prvých a získa rýchlu adopciu, a vy sa stanete hviezdou (ak to bude dobrý framework).

Môžete prispôsobiť množstvo rôznych balíkov, ktoré už existujú v ekosystéme Go, pre špecifiká prehliadača (napríklad templátovací systém). Tieto už budú fungovať, môžete vytvoriť pohodlné obalové funkcie, aby ste mohli ľahko renderovať obsah priamo v prehliadači. Navyše, môžete vytvoriť napríklad službu, ktorá dokáže renderovať to isté na serveri a na frontende pomocou toho istého kódu – všetko, ako to majú radi frontendoví vývojári (len teraz v Go).

Môžete napísať hru! Len pre zábavu…

Mám všetko.

Alexej Gračov: Go Frontend

Otázky

Otázka (ďalej – O): – Píšem v Go alebo v Js?

AG: – Píšeš v Go routine, kanály, štruktúry, embedding – všetko... Prihlásiš sa na udalosť, posielaš tam funkciu.

A: – Takže píšem v "holom" Js?

AG: – Nie, píšeš akoby v Go a pripájaš sa k API prehliadača (API pri tom nezmenilo). Môžeš napísať svoje obalové funkcie, aby správy prichádzali do kanála – to nie je zložité.

A: – Čo s mobilom?

AG: – Určite som videl: existujú väzby pre patch Cordova, ktoré Js spúšťa. V React Native – neviem; možno sú, a možno nie (nemal som veľmi záujem). Herný engine N-go podporuje aj mobilné aplikácie – a iOS, aj Android.

A: – Otázka ohľadom Web Assembly. Miesta je stále viac, napriek kompresii, „zipovosti“... Nezabijeme tým svet frontendu ešte viac?

AG: – Web Assembly je binárny formát a binárny ako predvolený nemôže byť v konečnej verzii väčší ako text... Tiahne vás runtime, ale to je to isté, ako ťahať štandardnú knižnicu Javascript, keď ju nemáte, preto používame niečo ako Lodash. Neviem, koľko Lodash zaberá.

A: – Určite menej, než runtime...

AG: – Na „čistom“ Javascript?

A: – Áno. Veď ho komprimujeme predtým, ako ho posielame...

AG: – Ale to je text… V podstate, megabajt je dosť veľa, ale to je všetko (máš celý runtime). Potom napíš svoju obchodnú logiku, ktorá zvýši tvoj binary o 1 %. Zatiaľ nevidím, že by to zabíjalo frontend. Oveľa viac, Web Assembly bude fungovať rýchlejšie ako Javascript z ohľadom na jasný dôvod – nemusí sa parsovať.

A: – Zatiaľ sporný bod… Ešte neexistuje nejaká vzorová implementácia „Vasm“ (Web Assembly), aby sa dalo jednoznačne posúdiť. Konceptuálne – áno: všetci rozumieme, že binary by mal byť rýchlejší, ale súčasná implementácia toho istého V8 je veľmi efektívna.

AG: – Áno.

A: – Kompilácia tam funguje naozaj veľmi skvele a nie je isté, že bude veľká výhoda.

AG: – Web Assembly robia tiež veľkí chlapci.

A: – Zatiaľ, myslím, je ťažké posúdiť Web Assembly. Už koľko rokov sa o tom diskusuje, a reálnych dosiahnutí, ktoré môžeme nahmatať, je málo.

AG: – Možno. Uvidíme.

A: – Nemáme problémy na backend-e… Možno, by sme mali nechať tieto problémy na frontende? Prečo sa tam miešať?

AG: – Musíme držať tím frontendárov.

Prehrajte video

Trochu reklamy 🙂

Ďakujeme, že ostávate s nami. Páčia sa vám naše články? Chcete vidieť viac zaujímavých materiálov? Podporte nás, vytvorením objednávky alebo odporúčaním známym, cloud VPS pre vývojárov od 4,99 dolárov, unikátny ekvivalent entry-level serverov, ktorý sme pre vás vytvorili: Celá pravda o VPS (KVM) E5-2697 v3 (6 jadier) 10GB DDR4 480GB SSD 1Gbps od 19 dolárov alebo ako správne rozdeliť server? (k dispozícii varianty s RAID1 a RAID10, až 24 jadier a až 40GB DDR4).

Dell R730xd je dvakrát lacnejší v dátovom centre Equinix Tier IV v Amsterdame? Len u nás 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TB od 199 dolárov v Holandsku! Dell R420 — 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB — od 99 dolárov! Prečítajte si o tom Ako vybudovať infraštruktúru korporátneho typu s použitím serverov Dell R730xd E5-2650 v4 s cenou 9000 eur za zlomok ceny?

Zdroj: habr.com

Kúpte si spoľahlivý hosting pre webové stránky s ochranou proti DDoS, VPS VDS servery 🔥 Kúpte si spoľahlivý hosting pre webové stránky s ochranou proti DDoS, VPS VDS servery | ProHoster