Alexey Grachev: Ale Frontend

Kyiv Go Meetup Me 2018:

Alexey Grachev: Ale Frontend

Plon: - Bonjou tout moun! Mèsi paske ou la! Jodi a nou gen de oratè ofisyèl - Lyosha ak Vanya. Pral gen de plis si nou gen tan. Premye oratè a se Alexey Grachev, li pral pale nou sou GopherJS.

Alexey Grachev (apwe sa - AG): – Mwen se yon pwomotè Go epi mwen ekri sèvis entènèt nan Go. Pafwa ou oblije fè fas ak frontend la, pafwa ou oblije monte la ak manch. Mwen vle pale sou eksperyans mwen ak rechèch sou Go on the frontend.

Lejand la se sa a: premye nou pral pale sou poukisa nou vle kouri Go sou frontend la, Lè sa a, nou pral pale sou ki jan nou ka fè li. Gen de fason - Web Assembly ak GopherJS. Ann wè nan ki eta desizyon sa yo ye e kisa ki ka fèt.

Ki sa ki mal ak frontend?

Tout moun dakò ke tout bagay anfòm ak frontend la?

Alexey Grachev: Ale Frontend

Kèk tès? Ralanti bati? Ekosistèm? Byen.

Konsènan front-end la, mwen renmen yon site ke youn nan devlopè front-end te di nan liv li a:

Alexey Grachev: Ale Frontend

Javascript pa gen yon sistèm tip. Koulye a, mwen pral bay non pwoblèm mwen te rankontre pandan travay mwen an epi eksplike kijan yo rezoud yo.

Sistèm tip la jeneralman difisil pou rele yon sistèm tip nan Javascript - gen liy ki endike kalite yon objè, men an reyalite sa a pa gen anyen fè ak kalite. Pwoblèm sa a rezoud nan TypeScript (ajout Javascript a) ak Flow (estatik-chekè Javascript nan kalite). An reyalite, entèfas la te deja ale osi lwen ke rezoud pwoblèm nan nan yon sistèm kalite move nan Javascript.

Alexey Grachev: Ale Frontend

Pa gen okenn bibliyotèk estanda nan navigatè a kòm sa yo - gen kèk objè entegre ak fonksyon "majik" nan navigatè yo. Men, mwen pa gen yon bibliyotèk estanda nan Javascript kòm sa yo. Pwoblèm sa a deja rezoud pa jQuery (tout moun te itilize jQuery ak tout pwototip, asistan, fonksyon ki te bezwen travay). Koulye a, tout moun sèvi ak Lodash:

Alexey Grachev: Ale Frontend

lanfè rappel. Mwen panse ke tout moun te wè kòd Javascript sou 5 ane de sa, epi li te sanble ak yon "nouy" ki soti nan yon sibtilite enkwayab nan callbacks. Koulye a, pwoblèm sa a rezoud (ak liberasyon ES-15 oswa ES-16), pwomès yo te ajoute nan Javascript ak tout moun te kòmanse respire pi fasil pou yon ti tan.

Alexey Grachev: Ale Frontend

Jiskaske lanfè Promice te vini... Mwen pa konnen ki jan endistri front-end jere, men yo toujou kondwi tèt yo nan kèk forè etranj. Nou menm tou nou jere fè lanfè sou "pwomès". Lè sa a, nou rezoud pwoblèm sa a lè nou ajoute yon nouvo primitif - async / tann:

Alexey Grachev: Ale Frontend

Avèk asynchrony, pwoblèm nan rezoud. Async/wait se byen yon primitif popilè nan diferan lang. Python ak lòt moun gen apwòch sa a - li bon ase. Pwoblèm rezoud.

Ki pwoblèm ki pa rezoud? Konpleksite nan kad ki ogmante eksponansyèlman, konpleksite ekosistèm nan ak pwogram yo tèt yo.

Alexey Grachev: Ale Frontend

  • Sentaks Javascript se yon ti kras etranj. Nou tout konnen pwoblèm ki genyen ak ajoute yon etalaj ak yon objè ak lòt ke trik nouvèl.
  • Javascript se milti-paradigm. Koulye a, sa a se yon sistèm patikilyèman peze lè ekosistèm nan gwo anpil:
    • tout moun ekri nan diferan estil - yon moun ekri estriktirèl, yon moun ekri fonksyonèl, diferan devlopè ekri yon fason diferan;
    • soti nan diferan pakè (pake) diferan paradigm lè ou itilize pakè diferan;
    • yon anpil nan "plezi" ak pwogramasyon fonksyonèl nan Javascript - bibliyotèk la rambda parèt e kounye a, pèsonn pa ka li pwogram ki ekri nan bibliyotèk sa a.

  • Tout bagay sa yo fè yon gwo enpak sou ekosistèm nan, epi li te grandi ekstrèmman. Pakè yo enkonpatib youn ak lòt: gen kèk ki sou pwomès, gen kèk ki sou async / tann, kèk ki sou apèl. Yo menm tou yo ekri nan paradigm diferan!
  • Sa fè pwojè a difisil pou kenbe. Li difisil pou jwenn yon ensèk si ou pa ka li kòd la.

Ki sa ki se Web Assembly?

Mesye vanyan ki soti nan Fondasyon Mozilla ak yon kantite lòt konpayi yo te vini ak yon bagay tankou Web Assembly. Kisa sa ye?

Alexey Grachev: Ale Frontend

  • Sa a se yon machin vityèl bati nan navigatè a ki sipòte fòma binè a.
  • Pwogram binè yo rive la, yo egzekite prèske natif natal, se sa ki, navigatè a pa bezwen analize tout "nouy yo" nan kòd la javascript chak fwa.
  • Tout navigatè yo te deklare sipò.
  • Depi sa a se bytecode, ou ka ekri yon du pou nenpòt lang.
  • Kat navigatè prensipal yo deja anbake ak sipò Web Assembly.
  • Nou ap tann sipò natif natal nan Go byento. Nouvo achitekti sa a te deja ajoute: GOARCH=wasm GOOS=js (byento). Jiskaprezan, jan mwen konprann li, li pa fonksyonèl, men gen yon deklarasyon ke li pral definitivman nan Go.

Kisa pou w fè kounye a? GopherJS

Pandan ke nou pa gen sipò Web Assembly, gen yon transpiler tankou GopherJS.

Alexey Grachev: Ale Frontend

  • Kòd Go a transpile nan "pi" Javascript.
  • Kouri nan tout navigatè - pa gen okenn karakteristik nouvo ki sipòte sèlman pa navigatè modèn (sa a se Vanilla JS, ki kouri sou nenpòt bagay).
  • Gen sipò pou prèske tout bagay ki nan Go, ki gen ladan goroutines ak chanèl ... - tout sa nou renmen ak konnen anpil.
  • Prèske tout bibliyotèk estanda a sipòte, eksepte pakè sa yo ke li pa gen okenn sans pou sipòte nan navigatè a: syscall, entèraksyon nèt (gen yon rezo / http kliyan, men pa gen sèvè, ak kliyan an imite atravè XMLHttpRequest) . An jeneral, tout bibliyotèk estanda a disponib - isit la li nan navigatè a, isit la se Go stdlib ke nou renmen.
  • Tout ekosistèm pake a nan Go, tout solisyon twazyèm pati (modèl, elatriye) ka konpile ak GopherJS epi kouri nan navigatè a.

Jwenn GopherJS trè fasil - li se jis yon pake regilye Go. Nou fè yon ale jwenn epi nou gen yon lòd GopherJS pou konstwi aplikasyon an:

Alexey Grachev: Ale Frontend

Isit la se tankou yon ti bonjou mond ...

Alexey Grachev: Ale Frontend

...Yon pwogram Go regilye, yon pake fmt regilye nan bibliyotèk estanda a ak Binding Js pou rive nan API navigatè a. Println pral evantyèlman konvèti nan jounal konsole epi navigatè a pral ekri "Bonjou gophers"! Li tèlman senp: nou fè GopherJS build - nou lanse li nan navigatè a - tout bagay ap mache!

Ki sa ki genyen nan moman sa a? Liaisons

Alexey Grachev: Ale Frontend

Gen obligatwa pou tout kad js popilè:

  • jquery;
  • Angular.js
  • D3.js pou trase ak travay ak done gwo;
  • React.js
  • VueJS;
  • gen menm sipò pou Electron (ki se, nou ka deja ekri aplikasyon pou Desktop sou Electron);
  • ak bagay ki pi komik la se WebGL (nou ka fè aplikasyon pou plen grafik, ki gen ladan jwèt ak grafik 3D, mizik ak tout bon kalite);
  • ak yon anpil nan lòt lyezon nan tout kad javascript popilè ak bibliyotèk.

Fondasyon

  1. Gen yon kad entènèt ki deja devlope espesyalman pou GopherJS - Vecty. Sa a se yon analòg konplè nan React.js, men sèlman devlope nan Go, ak spesifik yo nan GopherJS.
  2. Gen sache jwèt (toudenkou!). Mwen te jwenn de nan pi popilè yo:
    • engo;
    • Ebiten.

Mwen pral montre yon koup nan egzanp sou ki jan li sanble ak sa ki ka deja ekri nan Go:

Alexey Grachev: Ale Frontend

Oswa opsyon sa a (mwen pa t 'jwenn yon tirè 3D, men petèt li egziste):

Alexey Grachev: Ale Frontend

Kisa mwen sijere?

Koulye a, endistri front-end la nan yon eta konsa ke tout lang ki te deja kriye nan Javascript pral prese la. Koulye a, tout bagay pral konpile nan "Web Asanble yo". Ki sa nou bezwen pran yon plas diy la kòm "gophers"?

Alexey Grachev: Ale Frontend

Nan Go, li te tradisyonèlman ale ke li se yon langaj pwogramasyon Sistèm, epi pa gen pratikman pa gen okenn bibliyotèk pou travay ak UI la. Gen yon bagay, men li mwatye abandone, mwatye ki pa fonksyonèl.

Epi kounye a - yon bon chans pou fè bibliyotèk UI nan Go ki pral kouri sou GopherJS! Ou ka finalman ekri pwòp kad ou! Lè a rive lè ou ka ekri yon kad, epi li pral youn nan premye yo epi yo pral adopte bonè, epi ou pral yon zetwal (si li se yon bon fondasyon).

Ou ka adapte yon anpil nan pakè diferan ki deja egziste nan ekosistèm Go a spesifik yo nan navigatè a (pa egzanp, motè a Modèl). Yo pral deja travay, ou ka fè atachman pratik pou ke ou ka fasilman rann kontni dirèkteman nan navigatè a. Anplis de sa, ou ka fè, pou egzanp, yon sèvis ki ka rann menm bagay la sou sèvè a ak sou front-end la, lè l sèvi avèk menm kòd la - tout bagay ke devlopè front-end renmen (sèlman kounye a sou Go).

Ou ka ekri yon jwèt! Jis pou plezi...

Se tout sa mwen te vle di.

Alexey Grachev: Ale Frontend

Kesyon ou yo

Kesyon (ki refere yo kòm Q): – Èske mwen ekri nan Go oswa Js?

AG: – Ou ekri woutin, chanèl, estrikti, embedding – tout bagay nan Go… Ou abònman nan yon evènman, pase yon fonksyon la.

NAN: - Sa vle di, mwen ekri sou "toutouni" Js yo?

AG: - Non, ou ekri tankou si nan Go epi konekte ak API navigatè a (API a pa chanje). Ou ka ekri pwòp ou yo pou mesaj yo rive sou kanal la - li pa difisil.

NAN: - E mobil?

AG: - Mwen te wè byen: gen atachman pou patch Cordova ke Js lanse. Nan React Native, mwen pa konnen; petèt gen, petèt pa (pa enterese patikilyèman). Motè jwèt N-go a sipòte tou de aplikasyon mobil - tou de iOS ak Android.

NAN: – Yon kesyon sou Web Assembly. Plis ak plis kote yo te okipe, malgre konsizyon an, "zipping" ... Èske nou p ap touye mond lan nan frontend la menm plis nan fason sa a?

AG: - Web Assembly se yon fòma binè, ak binè default la pa ka pi gwo pase tèks nan lage final la ... Ou ap rale pa ègzekutabl, men sa a se menm jan ak rale nan bibliyotèk la estanda Javascript lè li pa la, se konsa nou sèvi ak kèk Lodash. Mwen pa konnen konbyen tan Lodash pran.

NAN: - Li evidan mwens pase ègzekutabl ...

AG: - Sou "pi" Javascript?

NAN: - Wi. Nou konprese li anvan ou voye li...

AG: - Men, sa a se tèks ... An jeneral, yon megabyte se tankou yon anpil, men sa a tout (ou gen tout tan an). Apre sa, ou ekri pwòp lojik biznis ou ki pral ogmante binè ou pa 1%. Jiskaprezan mwen pa wè li touye frontend la. Anplis, Web Assembly ap travay pi vit pase Javascript pou rezon evidan - li pa bezwen analize.

NAN: - Se konsa, lwen, yon pwen kontwovèsyal ... Pa gen okenn aplikasyon referans toujou nan "Wasma" (Web Asanble), pou ke yon moun ka jije san anbigwite. Konseptyèlman, wi: nou tout konprann ke binè yo ta dwe pi vit, men aplikasyon aktyèl la nan menm V8 la trè efikas.

AG: - Wi.

NAN: - Konpilasyon gen travay vrèman trè fre epi li pa yon reyalite ke pral gen yon gwo avantaj.

AG: - Web Assembly tou fèt pa gwo nèg.

NAN: - Jiskaprezan, li sanble m ', li toujou difisil pou jije Asanble Web. Pandan plizyè ane te gen chita pale, men gen kèk reyalizasyon reyèl ki ka santi.

AG: - Petèt. Ann wè.

NAN: – Nou pa gen pwoblèm sou backend la... Petèt nou ta dwe kite pwoblèm sa yo nan frontend la? Poukisa ale la?

AG: - Nou dwe kenbe anplwaye nan frontliners.

Kèk piblisite 🙂

Mèsi paske w rete avèk nou. Ou renmen atik nou yo? Vle wè plis kontni enteresan? Sipòte nou pa mete yon lòd oswa rekòmande pou zanmi, nwaj VPS pou devlopè soti nan $ 4.99, yon analogue inik nan sèvè nivo antre, ki te envante pa nou pou ou: Tout verite sou VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps soti nan $ 19 oswa ki jan yo pataje yon sèvè? (disponib ak RAID1 ak RAID10, jiska 24 nwayo ak jiska 40GB DDR4).

Dell R730xd 2 fwa pi bon mache nan sant done Equinix Tier IV nan Amstèdam? Sèlman isit la 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV soti nan $199 nan Netherlands! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - soti nan $ 99! Li sou Ki jan yo bati enfrastrikti corp. klas ak itilizasyon Dell R730xd E5-2650 v4 serveurs ki vo 9000 ero pou yon jounen travay?

Sous: www.habr.com

Add nouvo kòmantè