Kyiv Go Meetup Me 2018:
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?
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:
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.
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:
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.
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:
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.
- 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?
- 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.
- 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:
Isit la se tankou yon ti bonjou mond ...
...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
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
- 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.
- 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:
Oswa opsyon sa a (mwen pa t 'jwenn yon tirè 3D, men petèt li egziste):
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"?
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.
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,
Dell R730xd 2 fwa pi bon mache nan sant done Equinix Tier IV nan Amstèdam? Sèlman isit la
Sous: www.habr.com