Alexey Grachev: Choďte na frontend

Kyjev Go Meetup máj 2018:

Alexey Grachev: Choďte na frontend

moderátor: - Ahojte všetci! Ďakujeme, že ste tu! Dnes tu máme dvoch oficiálnych rečníkov – Lyosha a Vanya. Ak budeme mať dostatok času, budú ďalšie dve. Prvým rečníkom je Alexey Grachev, ktorý nám porozpráva o GopherJS.

Alexey Grachev (ďalej len AG): – Som vývojár Go a píšem webové služby v Go. Niekedy sa musíte popasovať s frontendom, niekedy sa do toho musíte dostať manuálne. Chcem hovoriť o svojich skúsenostiach a výskume Go na frontende.

Legenda je takáto: najprv si povieme, prečo chceme spustiť Go na frontende, potom si povieme, ako sa to dá urobiť. Existujú dva spôsoby - Web Assembly a GopherJS. Pozrime sa, aký je stav týchto riešení a čo sa dá urobiť.

Čo je zlé na frontende?

Súhlasia všetci s tým, že s frontendom je všetko v poriadku?

Alexey Grachev: Choďte na frontend

Nie je dostatok testov? Pomalé budovanie? Ekosystém? Dobre.

Čo sa týka frontendu, páči sa mi citát, ktorý jeden z vývojárov frontendu povedal vo svojej knihe:

Alexey Grachev: Choďte na frontend

Javascript nemá typový systém. Teraz pomenujem problémy, s ktorými som sa pri svojej práci stretol a vysvetlím, ako sa riešia.

Typový systém vo všeobecnosti možno v Javasripte len ťažko nazvať typovým systémom - existujú riadky, ktoré označujú typ objektu, ale v skutočnosti to nemá nič spoločné s typmi. Tento problém je vyriešený v TypeScript (doplnok k Javasript) a Flow (kontrola statického typu v Javascripte). V skutočnosti už frontend dosiahol bod riešenia problému zlého typu systému v Javascripte.

Alexey Grachev: Choďte na frontend

V prehliadači ako takom neexistuje štandardná knižnica - v prehliadačoch sú niektoré vstavané objekty a „magické“ funkcie. Ale v Javascripte neexistuje štandardná knižnica ako taká. Tento problém už raz jQuery riešil (všetci používali jQuery so všetkými prototypmi, pomocníkmi, funkciami, ktoré boli potrebné k práci). Teraz každý používa Lodash:

Alexey Grachev: Choďte na frontend

Spätné volanie do pekla. Myslím, že každý videl kód Javascript asi pred 5 rokmi a vyzeralo to ako „rezanec“ neuveriteľnej zložitosti spätných volaní. Teraz je tento problém vyriešený (s vydaním ES-15 alebo ES-16), do Javascriptu pribudli sľuby a každému sa na chvíľu ľahšie dýcha.

Alexey Grachev: Choďte na frontend

Kým neprišlo peklo Promice... Neviem, ako to zvláda front-endový priemysel, ale vždy sa dostanú do nejakej zvláštnej džungle. Podarilo sa nám urobiť peklo aj zo sľubov. Potom sme tento problém vyriešili pridaním nového primitíva - async/await:

Alexey Grachev: Choďte na frontend

Problém s asynchróniou je vyriešený. Async/await je pomerne populárny primitív v rôznych jazykoch. Python a iní majú tento prístup - je to celkom dobré. Problém je vyriešený.

Aký problém nie je vyriešený? Exponenciálne rastúca zložitosť rámcov, zložitosť ekosystému a samotných programov.

Alexey Grachev: Choďte na frontend

  • Syntax Javascriptu je trochu zvláštna. Všetci poznáme problémy s pridávaním poľa a objektu a iné vtipy.
  • Javascript je multiparadigma. Toto je obzvlášť naliehavý systém teraz, keď je ekosystém veľmi veľký:
    • každý píše iným štýlom – niekto píše štruktúrne, niekto funkčne, rôzni vývojári píšu rôznymi spôsobmi;
    • z rôznych balíkov, rôznych paradigiem, keď používate rôzne balíky;
    • s funkčným programovaním v Javasripte je veľa „zábavy“ - objavila sa knižnica rambda a teraz nikto nemôže čítať programy napísané v tejto knižnici.

  • To všetko má veľký vplyv na ekosystém a neuveriteľne sa rozrástol. Balíky sú navzájom nekompatibilné: niektoré sú založené na prísľuboch, niektoré sú založené na async/wait, niektoré sú založené na spätných volaniach. Tiež píšu v rôznych paradigmách!
  • To sťažuje údržbu projektu. Je ťažké nájsť chybu, ak nemôžete prečítať kód.

Čo je to Web Assembly?

Odvážni chlapci z Mozilla Foundation a množstva ďalších spoločností vymysleli niečo ako Web Assembly. Čo to je?

Alexey Grachev: Choďte na frontend

  • Ide o virtuálny stroj zabudovaný do prehliadača, ktorý podporuje binárny formát.
  • Binárne programy sa tam dostanú a sú spustené takmer natívne, to znamená, že prehliadač nemusí zakaždým analyzovať všetky „rezance“ kódu javascript.
  • Všetky prehliadače deklarovali podporu.
  • Keďže ide o bajtový kód, môžete napísať kompilátor pre akýkoľvek jazyk.
  • Štyri hlavné prehliadače sa už dodávajú s podporou Web Assembly.
  • Čoskoro očakávame natívnu podporu v Go. Táto nová architektúra už bola pridaná: GOARCH=wasm GOOS=js (čoskoro). Zatiaľ, ako som pochopil, je nefunkčný, ale je tam vyjadrenie, že v Go určite bude.

Čo teraz? GopherJS

Aj keď nemáme podporu pre Web Assembly, existuje transpiler ako GopherJS.

Alexey Grachev: Choďte na frontend

  • Go kód je preložený do „čistého“ Javascriptu.
  • Beží vo všetkých prehliadačoch - neexistujú žiadne nové funkcie, ktoré podporujú iba moderné prehliadače (toto je Vanilla JS, ktorá beží na čomkoľvek).
  • Podporuje takmer všetko, čo má Go, vrátane gorutín a kanálov... všetko, čo tak veľmi milujeme a poznáme.
  • Podporovaná je takmer celá štandardná knižnica, okrem tých balíkov, ktoré nemá zmysel podporovať v prehliadači: syscall, net interakcie (existuje sieťový/http klient, ale žiadny server a klient je emulovaný cez XMLHttpRequest). Vo všeobecnosti je k dispozícii celá štandardná knižnica - tu je v prehliadači, tu je stdlib Go, ktorý milujeme.
  • Celý ekosystém balíkov v Go, všetky riešenia tretích strán (šablóny atď.) je možné skompilovať pomocou GopherJS a spustiť v prehliadači.

GopherJS je veľmi jednoduché získať – je to len obyčajný balík Go. Ideme získať a máme príkaz GopherJS na zostavenie aplikácie:

Alexey Grachev: Choďte na frontend

Toto je taký malý ahoj svet...

Alexey Grachev: Choďte na frontend

...Bežný program Go, bežný balík fmt štandardnej knižnice a Binding Js na dosiahnutie API prehliadača. Println sa nakoniec skonvertuje na protokol konzoly a prehliadač napíše „Hello gophers“! Je to také jednoduché: zostavujeme GopherJS – spúšťame ho v prehliadači – všetko funguje!

čo máš momentálne? Viazanie

Alexey Grachev: Choďte na frontend

Existujú väzby pre všetky populárne rámce js:

  • JQuery;
  • Angular.js;
  • D3.js na vykresľovanie a prácu s veľkými údajmi;
  • React.js;
  • VueJS;
  • dokonca existuje podpora pre Electron (to znamená, že na Electron už môžeme písať desktopové aplikácie);
  • a najvtipnejšie je WebGL (vieme robiť full-grafické aplikácie vrátane hier s 3D grafikou, hudbou a všetkými vychytávkami);
  • a mnoho ďalších väzieb na všetky populárne javascriptové rámce a knižnice.

Rámec

  1. Existuje už vyvinutý webový rámec špeciálne pre GopherJS - Vecty. Toto je plnohodnotný analóg React.js, ale vyvinutý iba v Go so špecifikami GopherJS.
  2. Existujú herné tašky (prekvapenie!). Našiel som dve najobľúbenejšie:
    • Engo;
    • Ebiten.

Ukážem vám niekoľko príkladov, ako to vyzerá a čo už môžete písať v Go:

Alexey Grachev: Choďte na frontend

Alebo táto možnosť (nenašiel som 3D strieľačku, ale možno existuje):

Alexey Grachev: Choďte na frontend

čo ponúkam?

Teraz je front-endový priemysel v takom stave, že sa tam ponáhľajú všetky jazyky, ktoré predtým kričali z Javascriptu. Teraz bude všetko skompilované do „Web Assemblies“. Čo potrebujeme, aby sme tam zaujali svoje právoplatné miesto ako Gophers?

Alexey Grachev: Choďte na frontend

Go tradične predpokladá, že ide o systémový programovací jazyk a prakticky neexistujú žiadne knižnice na prácu s používateľským rozhraním. Niečo tam je, ale je to napoly opustené, napoly nefunkčné.

A teraz je dobrá šanca vytvoriť knižnice používateľského rozhrania v Go, ktoré budú bežať na GopherJS! Konečne si môžete napísať svoj vlastný rámec! Toto je čas, kedy môžete napísať rámec a bude jedným z prvých a bude čoskoro prijatý a budete hviezdou (ak je to dobrý rámec).

Množstvo rôznych balíkov, ktoré sa už nachádzajú v ekosystéme Go, môžete prispôsobiť špecifikám prehliadača (napríklad Template engine). Už budú fungovať, môžete si urobiť pohodlné väzby, aby ste obsah jednoducho vykreslili priamo v prehliadači. Navyše môžete vytvoriť napríklad službu, ktorá dokáže vykresliť to isté na serveri aj na front-ende pomocou rovnakého kódu – všetko, čo majú front-end vývojári radi (len teraz v Go).

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

To je všetko, čo som chcel povedať.

Alexey Grachev: Choďte na frontend

otázky

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

AG: – Píšete rutiny, kanály, štruktúry, vkladanie – všetko v Go... Prihlásite sa na odber udalosti, odošlete tam funkciu.

in: – Takže píšem v „nahých“ Js?

AG: – Nie, píšete akoby v Go a pripájate sa k API prehliadača (API sa nezmenilo). Môžete si napísať svoje vlastné väzby, aby sa správy odosielali do kanála - nie je to ťažké.

in: – A čo mobil?

AG: – Určite som videl: existujú väzby pre Cordova patch, ktorý Js prevádzkuje. V React Native - neviem; možno existuje, možno nie (hlavne ma to nezaujímalo). Herný engine N-go podporuje obe mobilné aplikácie – iOS aj Android.

in: – Otázka o Web Assembly. Aj napriek kompresii a „zipsovaniu“ zaberá stále viac miesta... Nezabijeme frontendový svet týmto spôsobom ešte viac?

AG: – Web Assembly je binárny formát a v predvolenom nastavení binárny nemôže byť v konečnom vydaní viac ako text... Ste privedení do prostredia runtime, ale je to rovnaké ako pretiahnutie štandardnej knižnice Javascript, keď tam nie je, takže použite nejaký Lodash. Neviem, koľko berie Lodash.

in: – Očividne menej ako runtime...

AG: – V „čistom“ Javascripte?

in: - Áno. Pred odoslaním ho komprimujeme...

AG: – Ale toto je text... Vo všeobecnosti sa zdá, že megabajt je veľa, ale to je všetko (máte celý runtime). Ďalej napíšete svoju vlastnú obchodnú logiku, ktorá zvýši vašu binárnu hodnotu o 1 %. Zatiaľ nevidím, že by to zabíjalo frontend. Navyše, Web Assembly bude pracovať rýchlejšie ako Javascript zo zjavného dôvodu – nie je potrebné ho analyzovať.

in: – Toto je stále kontroverzný bod... Zatiaľ neexistuje žiadna referenčná implementácia „Vasma“ (Web Assembly), aby sa dalo jednoznačne posúdiť. Koncepčne áno: všetci chápeme, že binárne by malo byť rýchlejšie, ale súčasná implementácia tej istej V8 je veľmi efektívna.

AG: - Áno.

in: – Kompilácia tam funguje naozaj veľmi dobre a nie je pravda, že to bude veľká výhoda.

AG: – Web Assembly robia aj veľkí chlapi.

in: – Zdá sa mi, že je stále ťažké posúdiť Web Assembly. Konverzácie sa vedú už mnoho rokov, ale skutočných úspechov je len málo, čo je cítiť.

AG: - Možno. Uvidíme.

in: – Nemáme problémy na backende... Možno by sme mali nechať tieto problémy na frontende? Prečo tam ísť?

AG: – Musíme si ponechať personál v prvej línii.

Nejaké inzeráty 🙂

Ďakujeme, že ste zostali s nami. Páčia sa vám naše články? Chcete vidieť viac zaujímavého obsahu? Podporte nás zadaním objednávky alebo odporučením priateľom, cloud VPS pre vývojárov od 4.99 USD, jedinečný analóg serverov základnej úrovne, ktorý sme pre vás vymysleli: Celá pravda o VPS (KVM) E5-2697 v3 (6 jadier) 10GB DDR4 480GB SSD 1Gbps od 19 USD alebo ako zdieľať server? (k dispozícii s RAID1 a RAID10, až 24 jadier a až 40 GB DDR4).

Dell R730xd 2 krát lacnejší v dátovom centre Equinix Tier IV v Amsterdame? Len tu 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6 GHz 14C 64 GB DDR4 4 x 960 GB SSD 1 Gbps 100 TV od 199 USD v Holandsku! Dell R420 – 2x E5-2430 2.2 GHz 6C 128 GB DDR3 2 x 960 GB SSD 1 Gb/s 100 TB – od 99 USD! Čítať o Ako vybudovať infraštruktúru spol. triedy s využitím serverov Dell R730xd E5-2650 v4 v hodnote 9000 XNUMX eur za cent?

Zdroj: hab.com

Pridať komentár