Alexey Grachev: Go Frontend

Kyiv Go Meetup Mee 2018:

Alexey Grachev: Go Frontend

Bläi: - Moien alleguer! Merci datt Dir hei sidd! Haut hu mir zwee offiziell Spriecher - Lyosha a Vanya. Et ginn zwou méi wa mir genuch Zäit hunn. Den éischte Spriecher ass den Alexey Grachev, hie wäert eis iwwer GopherJS soen.

Alexey Grachev (nachfolgend - AG): - Ech sinn e Go Entwéckler, an ech schreiwen Webservicer op Go. Heiansdo musst Dir mat der Frontend ëmgoen, heiansdo musst Dir manuell erakommen. Ech wëll iwwer meng Erfahrung a Fuerschung iwwer Go um Frontend schwätzen.

D'Legend ass dëst: als éischt wäerte mir schwätzen iwwer firwat mir Go op de Frontend wëllen lafen, da schwätze mir iwwer wéi dëst ka gemaach ginn. Et ginn zwou Weeër - Web Assemblée a GopherJS. Loosst eis kucken wat de Status vun dëse Léisungen ass a wat ka gemaach ginn.

Wat ass falsch mam Frontend?

Ass jiddereen d'accord datt alles gutt ass mam Frontend?

Alexey Grachev: Go Frontend

Ginn et net genuch Tester? Lues bauen? Ökosystem? Gutt.

Wat de Frontend ugeet, hunn ech den Zitat gär, deen ee vun de Frontend Entwéckler a sengem Buch gesot huet:

Alexey Grachev: Go Frontend

Javascript huet keen Typ System. Elo nennen ech d'Problemer déi ech am Laf vu menger Aarbecht begéint hunn an erkläre wéi se geléist ginn.

Den Typsystem am Allgemengen kann kaum en Typsystem am Javasript genannt ginn - et gi Linnen déi den Typ vum Objet uginn, awer tatsächlech huet dëst näischt mat Typen ze dinn. Dëse Problem gëtt an TypeScript (en Add-on zu Javasript) a Flow (e statesche-Typ Checker am Javascript) geléist. Eigentlech huet de Frontend schonn de Punkt erreecht fir de Problem vun engem schlechten Typ System am Javascript ze léisen.

Alexey Grachev: Go Frontend

Et gëtt keng Standardbibliothéik am Browser als solch - et ginn e puer agebauten Objeten a "Magie" Funktiounen a Browser. Awer am Javascript gëtt et keng Standardbibliothéik als solch. Dëse Problem war schonn eemol vun jQuery geléist (jidderee benotzt jQuery mat all de Prototypen, Helfer, Funktiounen déi néideg waren fir ze schaffen). Elo benotzt jiddereen Lodash:

Alexey Grachev: Go Frontend

Callback hell. Ech mengen datt jiddereen de Javascript Code viru 5 Joer gesinn huet, an et huet ausgesinn wéi eng "Nuddel" vun enger onheemlecher Komplikatioun vu Callbacks. Elo ass dëse Problem geléist (mat der Verëffentlechung vun ES-15 oder ES-16), Verspriechen goufen op Javascript bäigefüügt a jidderee kann eng Zäit méi einfach otmen.

Alexey Grachev: Go Frontend

Bis d'Promice Häll ukomm ass ... Ech weess net wéi d'Front-End-Industrie geréiert, awer si fueren sech ëmmer an e komeschen Dschungel. Mir hunn et och fäerdeg bruecht d'Häll op Verspriechen ze maachen. Dunn hu mir dëse Problem geléist andeems en neie primitiv derbäigesat gëtt - async / wait:

Alexey Grachev: Go Frontend

De Problem mat Asynchronie gëtt geléist. Async / wait ass eng zimlech populär Primitiv a verschiddene Sproochen. Python an anerer hunn dës Approche - et ass ganz gutt. Problem geléist.

Wéi ee Problem ass net geléist? Déi exponentiell wuessend Komplexitéit vu Kaderen, d'Komplexitéit vum Ökosystem an de Programmer selwer.

Alexey Grachev: Go Frontend

  • Javascript Syntax ass e bësse komesch. Mir kennen all d'Problemer mat engem Array an engem Objet an aner Witzer ze addéieren.
  • Javascript ass Multi-Paradigma. Dëst ass e besonnesch dréngend System elo wann den Ökosystem ganz grouss ass:
    • jidderee schreift a verschiddene Stiler - e puer schreiwen strukturell, e puer schreiwen funktionell, verschidde Entwéckler schreiwen op verschidde Manéieren;
    • aus verschiddene Packagen, verschidde Paradigme wann Dir verschidde Packagen benotzt;
    • et gëtt vill "Spaass" mat funktioneller Programméierung am Javasript - d'rambda-Bibliothéik erschéngt an elo ka kee Programmer liesen, déi an dëser Bibliothéik geschriwwe sinn.

  • All dëst mécht e groussen Impakt op den Ökosystem, an et ass onheemlech gewuess. D'Packagen si mateneen inkompatibel: e puer baséieren op Verspriechen, e puer baséieren op Async / waart, e puer baséieren op Callbacks. Si schreiwen och a verschiddene Paradigme!
  • Dëst mécht de Projet schwéier ze erhalen. Et ass schwéier e Feeler ze fannen wann Dir de Code net liest.

Wat ass Web Assemblée?

Déi couragéiert Kärelen vun der Mozilla Foundation an enger Rei vun anere Firmen hunn esou eppes wéi Web Assembly erausfonnt. Wat ass dat?

Alexey Grachev: Go Frontend

  • Dëst ass eng virtuell Maschinn, déi an de Browser agebaut ass, déi de binäre Format ënnerstëtzt.
  • Binär Programmer kommen dohinner a gi bal nativ ausgefouert, dat heescht, de Browser brauch net all Kéier all "Nuddelen" vum Javascript Code ze analyséieren.
  • All Browser hunn Ënnerstëtzung deklaréiert.
  • Well dëst Bytecode ass, kënnt Dir e Compiler fir all Sprooch schreiwen.
  • Véier grouss Browser verschéckt scho mat Web Assembly Support.
  • Mir erwaarden gebierteg Ënnerstëtzung am Go geschwënn. Dës nei Architektur ass scho bäigefüügt: GOARCH=wasm GOOS=js (geschwënn). Sou wäit, wéi ech et verstinn, ass et net funktionell, awer et gëtt eng Ausso datt et definitiv am Go wäert sinn.

Wat soll een elo maachen? Gopher JS

Och wa mir keng Ënnerstëtzung fir Web Assembly hunn, gëtt et en Transpiler wéi GopherJS.

Alexey Grachev: Go Frontend

  • Go Code gëtt an "reng" Javascript transpiléiert.
  • Leeft an all Browser - et gi keng nei Features déi nëmme vu modernen Browser ënnerstëtzt ginn (dëst ass Vanilla JS, deen op alles leeft).
  • Et gëtt Ënnerstëtzung fir bal alles wat Go huet, dorënner Goroutinen a Kanäl ... alles wat mir gär hunn a sou vill wëssen.
  • Bal déi ganz Standardbibliothéik gëtt ënnerstëtzt, ausser fir déi Packagen déi et kee Sënn mécht am Browser z'ënnerstëtzen: Syscall, Netzinteraktiounen (et gëtt en Net/http Client, awer kee Server, an de Client gëtt iwwer XMLHttpRequest emuléiert). Am Allgemengen ass déi ganz Standardbibliothéik verfügbar - hei ass et am Browser, hei ass Go's stdlib, wat mir gär hunn.
  • De ganze Package Ökosystem am Go, all Drëtt Partei Léisungen (Schabloun, etc.) kënne mat GopherJS kompiléiert ginn an am Browser lafen.

GopherJS ass ganz einfach ze kréien - et ass just e reguläre Go Package. Mir ginn et, a mir hunn e GopherJS Kommando fir d'Applikatioun ze bauen:

Alexey Grachev: Go Frontend

Dëst ass sou eng kleng Hallo Welt ...

Alexey Grachev: Go Frontend

... E reguläre Go Programm, e reguläre Standardbibliothéik fmt Package a Binding Js fir de Browser API z'erreechen. Println gëtt schlussendlech an Konsol Log ëmgewandelt an de Browser schreift "Hallo Gophers"! Et ass sou einfach: mir bauen GopherJS - mir starten et am Browser - alles funktionnéiert!

Wat hutt Dir am Moment? Bindungen

Alexey Grachev: Go Frontend

Et gi Bindungen fir all populär js Kaderen:

  • JQuery;
  • Angular.js;
  • D3.js fir ze plotten an ze schaffen mat groussen Daten;
  • React.js;
  • VueJS;
  • et gëtt souguer Ënnerstëtzung fir Electron (dat ass, mir kënnen schonn Desktop-Applikatiounen op Electron schreiwen);
  • an déi witzegst Saach ass WebGL (mir kënne voll Grafiken Uwendungen maachen, dorënner Spiller mat 3D Grafiken, Musek an all Goodies);
  • a vill aner Bindungen un all populär Javascript Kaderen a Bibliothéiken.

Framework

  1. Et gëtt e Web Kader scho speziell fir GopherJS entwéckelt - Vecty. Dëst ass e vollwäertege Analog vu React.js, awer nëmmen am Go entwéckelt, mat de Spezifizitéite vu GopherJS.
  2. Et gi Spill Poschen (Iwwerraschung!). Ech hunn déi zwee populär fonnt:
    • Eng;
    • Ebiten.

Ech weisen Iech e puer Beispiller vu wéi et ausgesäit a wat Dir schonn am Go schreiwen kann:

Alexey Grachev: Go Frontend

Oder dës Optioun (ech konnt keen 3D Shooter fannen, awer vläicht existéiert et):

Alexey Grachev: Go Frontend

Wat proposéieren ech?

Elo ass d'Front-End Industrie an esou engem Zoustand datt all d'Sproochen, déi virdru vu Javascript gekrasch hunn, dohinner rennen. Elo gëtt alles an "Web Assemblies" zesummegesat. Wat brauche mir fir eis richteg Plaz do als Gophers ze huelen?

Alexey Grachev: Go Frontend

Go huet traditionell ugeholl datt et eng Systemprogramméierungssprooch ass, an et gi praktesch keng Bibliothéike fir mat der UI ze schaffen. Et gëtt eppes, awer et ass hallef opginn, hallef net funktionell.

An elo ass eng gutt Chance fir UI Bibliothéiken am Go ze maachen déi op GopherJS lafen! Dir kënnt endlech Ären eegene Kader schreiwen! Dëst ass d'Zäit wou Dir e Kader schreiwen kann, an et wäert ee vun deenen éischten ginn a fréi Adoptioun kréien, an Dir wäert e Stär (wann et e gudde Kader ass).

Dir kënnt vill verschidde Packagen adaptéieren, déi schonn am Go-Ökosystem sinn, un d'Spezifizitéiten vum Browser (zum Beispill Schablounmotor). Si wäerte scho funktionnéieren, Dir kënnt praktesch Bindungen maachen, sou datt Dir den Inhalt direkt am Browser renderéiere kënnt. Plus, Dir kënnt zum Beispill e Service maachen deen déiselwecht Saach um Server an um Front-End liwwere kann, mam selwechte Code benotzt - alles wat Front-End Entwéckler gär hunn (nëmmen elo am Go).

Dir kënnt e Spill schreiwen! Just fir Spaass ...

Dat war alles wat ech wollt soen.

Alexey Grachev: Go Frontend

Är Froen

Fro (nodréiglech als Q bezeechent): - Schreiwen ech an Go oder Js?

AG: – Dir schreift Routinen, Channels, Strukturen, Embedding – alles am Go ... Dir abonnéiert Iech op en Event, passéiert eng Funktioun dohinner.

IN: - Also ech schreiwen an "plakeg" Js?

AG: - Neen, Dir schreift wéi wann am Go a verbënnt mat der Browser API (d'API huet net geännert). Dir kënnt Är eege Bindungen schreiwen sou datt Messagen un de Kanal geschéckt ginn - et ass net schwéier.

IN: - Wat iwwer Handy?

AG: - Ech hunn definitiv gesinn: et gi Bindungen fir de Cordova Patch deen Js leeft. In React Native - Ech weess et net; vläicht gëtt et, vläicht net (Ech war net besonnesch interesséiert). Den N-go Spillmotor ënnerstëtzt béid mobil Uwendungen - souwuel iOS an Android.

IN: - Fro iwwer Web Assemblée. Ëmmer méi Plaz gëtt opgeholl, trotz der Kompressioun an dem "Zippen"... Wäerte mir d'Front-End Welt net esou nach méi ëmbréngen?

AG: - Web Assemblée ass e binärt Format, a binär als Standard kann net an der definitiver Verëffentlechung méi wéi Text sinn ... Dir sidd op Runtime gezunn, awer dëst ass d'selwecht wéi d'Standard Javascript Bibliothéik erauszezéien wann se net do ass, also mir benotzt e puer Lodash . Ech weess net wéi vill Lodash hëlt.

IN: - Offensichtlech manner wéi Runtime ...

AG: - Am "reng" Javascript?

IN: - Jo. Mir kompriméieren et ier mir et schécken ...

AG: - Awer dëst ass Text ... Am Allgemengen schéngt e Megabyte vill, awer dat ass alles (Dir hutt déi ganz Runtime). Als nächst schreift Dir Är eege Geschäftslogik, déi Är Binär ëm 1% eropgeet. Bis elo gesinn ech dat net de Frontend ëmbréngen. Ausserdeem funktionnéiert d'Webversammlung méi séier wéi Javascript aus dem offensichtleche Grond - et muss net parséiert ginn.

IN: - Dëst ass nach ëmmer e kontroverse Punkt ... Et gëtt nach keng Referenzimplementatioun vu "Vasma" (Web Assembly) sou datt een eendeiteg beurteelen kann. Konzeptuell, jo: mir verstinn all datt binär méi séier sollt sinn, awer déi aktuell Ëmsetzung vum selwechte V8 ass ganz effizient.

AG: - Jo.

IN: - D'Kompilatioun do funktionnéiert wierklech ganz cool an et ass net e Fakt datt et e grousse Virdeel gëtt.

AG: - Web Assemblée gëtt och vu grousse Kärelen gemaach.

IN: - Et schéngt fir mech, datt et nach schwéier ass Web Assemblée ze Riichter. Et gi Gespréicher fir vill Joren elo, mä et sinn wéineg real Leeschtungen, datt gefillt ginn.

AG: - Vläicht. Mir wäerte gesinn.

IN: - Mir hu keng Probleemer um Backend ... Vläicht sollte mir dës Problemer um Frontend verloossen? Firwat dohinner goen?

AG: - Mir mussen e Personal vu Frontlinnenaarbechter halen.

Puer Annoncen 🙂

Merci datt Dir bei eis bleift. Hutt Dir eis Artikelen gär? Wëllt Dir méi interessant Inhalt gesinn? Ënnerstëtzt eis andeems Dir eng Bestellung maacht oder Frënn empfeelt, Cloud VPS fir Entwéckler vun $ 4.99, en eenzegaartegen Analog vun Entry-Level Serveren, dee vun eis fir Iech erfonnt gouf: Déi ganz Wourecht iwwer VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps vun $19 oder wéi een e Server deelt? (verfügbar mat RAID1 an RAID10, bis zu 24 Kären a bis zu 40GB DDR4).

Dell R730xd 2 Mol méi bëlleg an Equinix Tier IV Daten Zentrum zu Amsterdam? Nëmmen hei 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV vun $199 an Holland! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - vun $99! Liest iwwer Wéi bauen ech Infrastructure Corp. Klass mat der Benotzung vun Dell R730xd E5-2650 v4 Serveren Wäert 9000 Euro fir e Penny?

Source: will.com

Setzt e Commentaire