Alexey Grachev: Mur Frontend

Kyiv Go Meetup Mejju 2018:

Alexey Grachev: Mur Frontend

Moderatur: - Hi kollha! Grazzi talli kont hawn! Illum għandna żewġ kelliema uffiċjali - Lyosha u Vanya. Ikun hemm tnejn oħra jekk ikollna biżżejjed ħin. L-ewwel kelliem huwa Alexey Grachev, se jgħidilna dwar GopherJS.

Alexey Grachev (minn hawn 'il quddiem – AG): – Jiena żviluppatur ta' Go, u nikteb servizzi tal-web f'Go. Xi drabi trid tittratta l-frontend, xi drabi trid tidħol fiha manwalment. Irrid nitkellem dwar l-esperjenza u r-riċerka tiegħi f'Go on the frontend.

Il-leġġenda hija din: l-ewwel nitkellmu dwar għaliex irridu nħaddmu Go fuq il-frontend, imbagħad nitkellmu dwar kif dan jista 'jsir. Hemm żewġ modi - Web Assembly u GopherJS. Ejja naraw x'inhu l-istatus ta' dawn is-soluzzjonijiet u x'jista' jsir.

X'hemm ħażin mal-frontend?

Kulħadd jaqbel li kollox tajjeb mal-frontend?

Alexey Grachev: Mur Frontend

M'hemmx biżżejjed testijiet? Bini bil-mod? Ekosistema? Multa.

Rigward il-frontend, jogħġobni l-kwotazzjoni li qal wieħed mill-iżviluppaturi tal-frontend fil-ktieb tiegħu:

Alexey Grachev: Mur Frontend

Javascript m'għandux sistema tat-tip. Issa se nsemmi l-problemi li ltqajt magħhom matul ix-xogħol tiegħi u nispjega kif jiġu solvuti.

Is-sistema tat-tip b'mod ġenerali ma tantx tista 'tissejjaħ sistema tat-tip f'Javasript - hemm linji li jindikaw it-tip tal-oġġett, iżda fil-fatt dan m'għandu x'jaqsam xejn mat-tipi. Din il-problema hija solvuta f'TypeScript (add-on għal Javasript) u Flow (kontrollur tat-tip statiku f'Javascript). Attwalment, il-frontend diġà laħaq il-punt li jsolvi l-problema ta 'sistema ta' tip ħażin f'Javascript.

Alexey Grachev: Mur Frontend

M'hemm l-ebda librerija standard fil-browser bħala tali - hemm xi oġġetti mibnija u funzjonijiet "maġiċi" fil-browsers. Iżda fil-Javascript m'hemm l-ebda librerija standard bħala tali. Din il-problema kienet diġà solvuta darba minn jQuery (kulħadd uża jQuery bil-prototipi, helpers, funzjonijiet kollha li kienu meħtieġa biex jaħdmu). Issa kulħadd juża Lodash:

Alexey Grachev: Mur Frontend

Callback infern. Naħseb li kulħadd ra kodiċi Javascript madwar 5 snin ilu, u deher qisu "noodle" ta 'intricacy inkredibbli ta' callbacks. Issa din il-problema ġiet solvuta (bil-ħruġ ta 'ES-15 jew ES-16), wegħdiet ġew miżjuda mal-Javascript u kulħadd jista' jieħu n-nifs aktar faċli għal xi żmien.

Alexey Grachev: Mur Frontend

Sakemm wasal l-infern tal-Promice... Ma nafx kif timmaniġġja l-industrija ta 'quddiem, iżda dejjem isuqu lilhom infushom f'xi ġungla stramba. Irnexxielna wkoll nagħmlu l-infern fuq wegħdiet. Imbagħad solvejna din il-problema billi żidna primitive ġdida - async/wait:

Alexey Grachev: Mur Frontend

Il-problema bl-asinkronija hija solvuta. Async/wait huwa primittiv pjuttost popolari f'diversi lingwi. Python u oħrajn għandhom dan l-approċċ - huwa pjuttost tajjeb. Problema solvuta.

Liema problema mhix solvuta? Il-kumplessità tal-oqfsa li qed tiżdied b'mod esponenzjali, il-kumplessità tal-ekosistema u l-programmi nfushom.

Alexey Grachev: Mur Frontend

  • Is-sintassi tal-Javascript hija daqsxejn stramba. Ilkoll nafu l-problemi biż-żieda ta 'firxa u oġġett u ċajt ieħor.
  • Javascript huwa multi-paradigma. Din hija sistema partikolarment urġenti issa meta l-ekosistema hija kbira ħafna:
    • kulħadd jikteb fi stili differenti - xi wħud jiktbu strutturalment, xi wħud jiktbu funzjonalment, żviluppaturi differenti jiktbu b'modi differenti;
    • minn pakketti differenti, paradigmi differenti meta tuża pakketti differenti;
    • hemm ħafna "gost" bl-ipprogrammar funzjonali f'Javasript - dehret il-librerija rambda u issa ħadd ma jista 'jaqra programmi miktuba f'din il-librerija.

  • Dan kollu jagħmel impatt kbir fuq l-ekosistema, u kibret b'mod inkredibbli. Il-pakketti huma inkompatibbli ma 'xulxin: xi wħud huma bbażati fuq wegħdiet, xi wħud huma bbażati fuq async/wait, xi wħud huma bbażati fuq callbacks. Huma jiktbu wkoll f'paradigmi differenti!
  • Dan jagħmel il-proġett diffiċli biex jinżamm. Huwa diffiċli li ssib bug jekk ma tistax taqra l-kodiċi.

X'inhu Web Assembly?

L-irġiel kuraġġużi mill-Fondazzjoni Mozilla u numru ta 'kumpaniji oħra ħarġu b'ħaġa bħal Web Assembly. X'inhu dan?

Alexey Grachev: Mur Frontend

  • Din hija magna virtwali mibnija fil-browser li tappoġġja l-format binarju.
  • Programmi binarji jaslu hemm u huma eżegwiti kważi b'mod nattiv, jiġifieri, il-browser m'għandux għalfejn janalizza l-"noodles" kollha tal-kodiċi javascript kull darba.
  • Il-browsers kollha ddikjaraw appoġġ.
  • Peress li dan huwa bytecode, tista 'tikteb kompilatur għal kwalunkwe lingwa.
  • Erba' browsers ewlenin diġà jintbagħtu bl-appoġġ tal-Web Assembly.
  • Qed nistennew appoġġ nattiv f'Go dalwaqt. Din l-arkitettura ġdida diġà ġiet miżjuda: GOARCH=wasm GOOS=js (dalwaqt). S'issa, kif nifhem jien, mhix funzjonali, iżda hemm stqarrija li żgur se tkun f'Go.

X'għandek tagħmel issa? GopherJS

Filwaqt li m'għandniex appoġġ għall-Web Assembly, hemm transpiler bħal GopherJS.

Alexey Grachev: Mur Frontend

  • Il-kodiċi Go huwa trażpilat f'Javascript "pur".
  • Jiġi fil-browsers kollha - m'hemm l-ebda karatteristiċi ġodda li huma appoġġjati biss minn browsers moderni (dan huwa Vanilla JS, li jaħdem fuq xi ħaġa).
  • Hemm appoġġ għal kważi dak kollu li għandu Go, inklużi goroutines u kanali... dak kollu li nħobbu u nafu ħafna.
  • Kważi l-librerija standard kollha hija appoġġjata, ħlief għal dawk il-pakketti li ma jagħmilx sens li jiġu appoġġjati fil-browser: syscall, interazzjonijiet netti (hemm klijent nett/http, iżda l-ebda server, u l-klijent huwa emulat permezz ta 'XMLHttpRequest). B'mod ġenerali, il-librerija standard kollha hija disponibbli - hawnhekk hija fil-browser, hawn huwa l-istdlib ta 'Go, li aħna nħobbu.
  • L-ekosistema tal-pakkett kollu f'Go, is-soluzzjonijiet kollha ta 'partijiet terzi (templating, eċċ.) Jistgħu jiġu kkompilati bl-użu ta' GopherJS u jitħaddmu fil-browser.

GopherJS huwa faċli ħafna li tinkiseb - huwa biss pakkett Go regolari. Immorru nġibu, u għandna kmand GopherJS biex nibnu l-applikazzjoni:

Alexey Grachev: Mur Frontend

Din hi dinja daqshekk żgħira hello...

Alexey Grachev: Mur Frontend

...Programm Go regolari, pakkett fmt tal-librerija standard regolari u Binding Js biex tilħaq l-API tal-browser. Println eventwalment se jiġi kkonvertit għal console log u l-browser se jikteb "Hello gophers"! Huwa daqshekk sempliċi: nagħmlu GopherJS build - innieduh fil-browser - kollox jaħdem!

X'għandek bħalissa? Irbit

Alexey Grachev: Mur Frontend

Hemm rbit għall-oqfsa js popolari kollha:

  • JQuery;
  • Angular.js;
  • D3.js għal plotting u xogħol ma big data;
  • React.js;
  • VueJS;
  • hemm anke appoġġ għal Electron (jiġifieri, diġà nistgħu niktbu applikazzjonijiet tad-desktop fuq Electron);
  • u l-aktar ħaġa umoristiċi hija WebGL (nistgħu nagħmlu applikazzjonijiet full-grafiċi, inklużi logħob bi grafika 3D, mużika u l-goodies kollha);
  • u ħafna rbit oħra għall-oqfsa u l-libreriji javascript popolari kollha.

Qafas

  1. Hemm qafas tal-web diġà żviluppat speċifikament għal GopherJS - Vecty. Dan huwa analogu sħiħ ta 'React.js, iżda żviluppat biss f'Go, bl-ispeċifiċitajiet ta' GopherJS.
  2. Hemm basktijiet tal-logħob (sorpriża!). Sibt it-tnejn l-aktar popolari:
    • Engo;
    • Ebiten.

Ser nuruk ftit eżempji ta’ kif tidher u dak li diġà tista’ tikteb f’Go:

Alexey Grachev: Mur Frontend

Jew din l-għażla (ma stajtx insib shooter 3D, imma forsi teżisti):

Alexey Grachev: Mur Frontend

X'qed noffri?

Issa l-industrija front-end tinsab f'tali stat li l-lingwi kollha li qabel kienu jibku minn Javascript se jgħaġġlu hemm. Issa kollox se jkun miġbur f'"Assembleji tal-Web". X’għandna bżonn biex nieħdu l-post leġittimu tagħna hemmhekk bħala Gophers?

Alexey Grachev: Mur Frontend

Go tradizzjonalment assumiet li hija lingwa ta 'programmar tas-Sistema, u prattikament m'hemm l-ebda librerija biex taħdem ma' l-UI. Hemm xi ħaġa, iżda hija nofsha abbandunata, nofsha mhux funzjonali.

U issa huwa ċans tajjeb li tagħmel libreriji UI f'Go li se jaħdmu fuq GopherJS! Fl-aħħar tista' tikteb il-qafas tiegħek! Dan huwa ż-żmien meta tista 'tikteb qafas, u se tkun waħda mill-ewwel u tikseb adozzjoni bikrija, u tkun stilla (jekk ikun qafas tajjeb).

Tista' tadatta ħafna pakketti differenti li diġà jinsabu fl-ekosistema Go għall-ispeċifiċitajiet tal-browser (per eżempju, magna Template). Diġà se jaħdmu, tista 'tagħmel rbit konvenjenti sabiex tkun tista' faċilment tirrendi l-kontenut direttament fil-browser. Barra minn hekk, tista 'tagħmel, pereżempju, servizz li jista' jagħmel l-istess ħaġa fuq is-server u fuq il-front-end, billi tuża l-istess kodiċi - dak kollu li jħobb l-iżviluppaturi front-end (issa biss f'Go).

Tista 'tikteb logħba! Biss għall-gost...

Dak kollu ridt ngħid.

Alexey Grachev: Mur Frontend

mistoqsijiet

Mistoqsija (minn hawn 'il quddiem imsejħa Q): – Nikteb fil-Go jew Js?

AG: – Tikteb rutini, kanali, strutturi, embedding – kollox f’Go... Inti tabbona għal avveniment, tgħaddi funzjoni hemmhekk.

FI: – Allura nikteb f’Js “mikxufa”?

AG: – Le, tikteb bħallikieku f'Go u qabbad mal-API tal-browser (l-API ma nbidlitx). Tista 'tikteb l-irbit tiegħek sabiex il-messaġġi jintbagħtu lill-kanal - mhuwiex diffiċli.

FI: – Xi ngħidu dwar il-mowbajl?

AG: – Żgur rajt: hemm rbit għall-garża ta 'Cordova li jmexxi Js. F'React Native - ma nafx; forsi hemm, forsi le (ma kontx interessat partikolarment). Il-magna tal-logħob N-go tappoġġja kemm applikazzjonijiet mobbli - kemm iOS kif ukoll Android.

FI: – Mistoqsija dwar Web Assembly. Qed jittieħed aktar u aktar spazju, minkejja l-kompressjoni u l-“zipping”... Mhux se noqtlu d-dinja front-end b’dan il-mod saħansitra aktar?

AG: – Web Assembly huwa format binarju, u binarju awtomatikament ma jistax ikun fir-rilaxx finali aktar minn test... Int miġbud lejn ir-runtime, iżda dan huwa l-istess bħal tkaxkir il-librerija standard Javascript meta ma tkunx hemm, għalhekk aħna uża xi Lodash. Ma nafx kemm jieħu Lodash.

FI: – Ovvjament inqas minn runtime...

AG: – Fi Javascript “pur”?

FI: - Iva. Aħna nikkompressawha qabel nibagħtu...

AG: – Iżda dan huwa test... B'mod ġenerali, megabyte jidher qisu ħafna, iżda dak kollu (għandek ir-runtime kollu). Sussegwentement, tikteb il-loġika tan-negozju tiegħek stess, li se żżid il-binarju tiegħek b'1%. S'issa ma narax dan joqtol il-frontend. Barra minn hekk, Web Assembly se jaħdem aktar malajr minn Javascript għar-raġuni ovvja - m'għandux għalfejn jiġi parsed.

FI: – Dan għadu punt kontroversjali... Għad m'hemmx implimentazzjoni ta' referenza ta' “Vasma” (Web Assembly) sabiex wieħed ikun jista' jiġġudika mingħajr ambigwità. Kunċettwalment, iva: ilkoll nifhmu li l-binarju għandu jkun aktar mgħaġġel, iżda l-implimentazzjoni attwali tal-istess V8 hija effiċjenti ħafna.

AG: - Iva.

FI: – Il-kumpilazzjoni hemmhekk taħdem tassew friska ħafna u mhux fatt li se jkun hemm vantaġġ kbir.

AG: – Web Assembly huwa magħmul ukoll minn guys kbar.

FI: – Jidhirli li għadu diffiċli biex tiġġudika l-Web Assembly. Kien hemm konversazzjonijiet għal ħafna snin issa, iżda hemm ftit kisbiet reali li jistgħu jinħassu.

AG: - Jista 'jkun. Issa naraw.

FI: – M’għandniex problemi fuq il-backend... Forsi għandna nħallu dawn il-problemi fuq il-frontend? Għaliex tmur hemm?

AG: – Irridu nżommu staff ta' ħaddiema ta' quddiem.

Xi reklami 🙂

Grazzi talli bqajt magħna. Tħobb l-artikoli tagħna? Trid tara aktar kontenut interessanti? Appoġġuna billi tagħmel ordni jew tirrakkomanda lill-ħbieb, Cloud VPS għall-iżviluppaturi minn $4.99, analogu uniku ta 'servers ta' livell ta 'dħul, li ġie ivvintat minna għalik: Il-verità kollha dwar VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps minn $19 jew kif taqsam server? (disponibbli b'RAID1 u RAID10, sa 24 core u sa 40GB DDR4).

Dell R730xd 2 darbiet orħos fiċ-ċentru tad-dejta Equinix Tier IV f'Amsterdam? Hawn biss 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV minn $199 fl-Olanda! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - minn $99! Aqra dwar Kif tibni l-infrastruttura corp. klassi bl-użu ta 'servers Dell R730xd E5-2650 v4 li jiswew 9000 ewro għal ċenteżmu?

Sors: www.habr.com

Żid kumment