Kyiv Go Meetup May 2018:
Thawj: - Nyob zoo txhua tus! Ua tsaug rau koj nyob ntawm no! Niaj hnub no peb muaj ob tug neeg hais lus - Lyosha thiab Vanya. Yuav muaj ob qho ntxiv yog tias peb muaj sijhawm txaus. Thawj tus hais lus yog Alexey Grachev, nws yuav qhia peb txog GopherJS.
Alexey Grachev (thov tom ntej - AG): - Kuv yog tus tsim tawm Go, thiab kuv sau cov kev pabcuam web hauv Go. Qee lub sij hawm koj yuav tsum tau nrog rau pem hauv ntej, qee zaum koj yuav tsum nkag mus rau hauv nws manually. Kuv xav tham txog kuv qhov kev paub dhau los thiab kev tshawb fawb hauv Go on the frontend.
Cov lus dab neeg yog qhov no: ua ntej peb yuav tham txog vim li cas peb xav khiav Mus rau pem hauv ntej, ces peb yuav tham txog yuav ua li cas qhov no ua tau. Muaj ob txoj hauv kev - Web Assembly thiab GopherJS. Cia peb saib seb cov xwm txheej ntawm cov kev daws teeb meem no yog dab tsi thiab yuav ua li cas.
Dab tsi tsis ncaj ncees lawm nrog frontend?
Puas yog txhua tus pom zoo tias txhua yam zoo nrog rau pem hauv ntej?
Puas tsis muaj kev xeem txaus? Tsim qeeb? Ecosystem? Zoo.
Hais txog qhov frontend, Kuv nyiam cov nqe lus uas ib tus neeg tsim tawm frontend tau hais hauv nws phau ntawv:
Javascript tsis muaj hom kab ke. Tam sim no kuv yuav sau cov teeb meem uas kuv tau ntsib hauv kuv txoj haujlwm thiab piav qhia lawv yuav daws li cas.
Hom kab ke feem ntau tsis tuaj yeem hu ua hom kab ke hauv Javasript - muaj cov kab uas qhia txog hom khoom, tab sis qhov tseeb qhov no tsis muaj dab tsi ua nrog hom. Qhov teeb meem no tau daws hauv TypeScript (ib qho ntxiv rau Javasript) thiab Flow (tus txheeb xyuas zoo li qub hauv Javascript). Qhov tseeb, lub frontend twb tau mus txog qhov teeb meem ntawm kev daws teeb meem ntawm hom phem hauv Javascript.
Tsis muaj cov tsev qiv ntawv txheem hauv browser li no - muaj qee yam khoom tsim thiab "magic" ua haujlwm hauv browsers. Tab sis hauv Javascript tsis muaj lub tsev qiv ntawv zoo li no. Qhov teeb meem no twb tau daws ib zaug los ntawm jQuery (txhua tus neeg siv jQuery nrog tag nrho cov qauv, tus pab cuam, cov haujlwm uas xav tau los ua haujlwm). Tam sim no txhua tus siv Lodash:
Callback ntuj raug txim. Kuv xav tias txhua tus pom Javascript code txog 5 xyoo dhau los, thiab nws zoo li "noodle" ntawm qhov tsis txaus ntseeg ntawm kev hu rov qab. Tam sim no qhov teeb meem no tau raug daws lawm (nrog rau kev tso tawm ES-15 lossis ES-16), cov lus cog tseg tau ntxiv rau Javascript thiab txhua tus tuaj yeem ua pa yooj yim dua rau ib ntus.
Txog thaum Promice ntuj raug txim los txog ... Kuv tsis paub yuav ua li cas kev lag luam pem hauv ntej tswj hwm, tab sis lawv ib txwm tsav lawv tus kheej mus rau hauv qee lub hav zoov txawv txawv. Peb kuj tswj tau ua ntuj txiag teb tsaus ntawm cov lus cog tseg. Tom qab ntawd peb daws qhov teeb meem no los ntawm kev ntxiv qhov qub qub - async / tos:
Qhov teeb meem nrog asynchrony yog daws. Async/await yog ib qho tseem ceeb tshaj plaws nyob rau hauv ntau yam lus. Python thiab lwm tus muaj txoj hauv kev no - nws zoo heev. Teeb meem daws tau.
Qhov teeb meem twg tsis daws tau? Lub exponentially nce complexity ntawm lub moj khaum, complexity ntawm lub ecosystem thiab cov kev pab cuam lawv tus kheej.
- Javascript syntax yog qhov txawv me ntsis. Peb txhua tus paub txog cov teeb meem nrog kev ntxiv ib qho array thiab ib qho khoom thiab lwm yam lus tso dag.
- Javascript yog multi-paradigm. Qhov no yog ib qho tshwj xeeb nias tam sim no thaum lub ecosystem loj heev:
- txhua leej txhua tus sau nyob rau hauv txawv style - ib co sau structurally, ib co sau functionally, txawv developers sau nyob rau hauv ntau txoj kev;
- los ntawm cov pob khoom sib txawv, cov qauv sib txawv thaum koj siv cov pob sib txawv;
- muaj ntau qhov "kev lom zem" nrog kev ua haujlwm hauv Javasript - lub tsev qiv ntawv rambda tau tshwm sim thiab tam sim no tsis muaj leej twg tuaj yeem nyeem cov ntawv sau hauv lub tsev qiv ntawv no.
- Tag nrho cov no ua rau muaj kev cuam tshuam loj rau ecosystem, thiab nws tau loj hlob zoo kawg. Cov pob khoom tsis sib xws: qee qhov yog raws li cov lus cog tseg, qee qhov yog raws li async / tos, qee qhov yog raws li kev hu rov qab. Lawv kuj sau nyob rau hauv txawv paradigms!
- Qhov no ua rau qhov project nyuaj rau kev tswj xyuas. Nws yog ib qho nyuaj rau nrhiav kab yog tias koj nyeem tsis tau cov cai.
Web Assembly yog dab tsi?
Cov neeg siab tawv los ntawm Mozilla Foundation thiab ntau lub tuam txhab tau tuaj nrog xws li Web Assembly. Qhov no yog dab tsi?
- Qhov no yog lub tshuab virtual ua rau hauv qhov browser uas txhawb nqa binary hom.
- Cov kev pab cuam binary tau muaj thiab raug tua yuav luag ib txwm muaj, uas yog, browser tsis tas yuav txheeb xyuas tag nrho cov "noodles" ntawm javascript code txhua zaus.
- Txhua tus browsers tau tshaj tawm kev txhawb nqa.
- Txij li qhov no yog bytecode, koj tuaj yeem sau ib lub compiler rau txhua hom lus.
- Plaub qhov loj browsers twb xa nrog Web Assembly txhawb nqa.
- Peb cia siab tias yuav muaj kev txhawb nqa ib txwm nyob hauv Go sai sai. Qhov tshiab architecture twb tau ntxiv lawm: GOARCH=wasm GOOS=js (sai). Txog tam sim no, raws li kuv nkag siab nws, nws tsis ua haujlwm, tab sis muaj cov lus hais tias nws yuav twv yuav raug hu hauv Go.
Yuav ua li cas tam sim no? GopherJS
Thaum peb tsis muaj kev txhawb nqa rau Web Assembly, muaj ib qho kev hloov pauv zoo li GopherJS.
- Go code yog transpiled rau "ntshiab" Javascript.
- Khiav hauv txhua qhov browsers - tsis muaj cov yam ntxwv tshiab uas tau txais kev txhawb nqa los ntawm cov browser niaj hnub nkaus xwb (qhov no yog Vanilla JS, uas khiav ntawm txhua yam).
- Muaj kev txhawb nqa yuav luag txhua yam uas Go muaj, suav nrog goroutines thiab channels ... txhua yam peb nyiam thiab paub ntau heev.
- Yuav luag tag nrho cov qauv tsev qiv ntawv tau txais kev txhawb nqa, tshwj tsis yog rau cov pob khoom uas nws ua rau tsis muaj kev nkag siab rau hauv qhov browser: syscall, net kev sib cuam tshuam (muaj net / http tus neeg siv, tab sis tsis muaj server, thiab tus neeg siv khoom yog emulated ntawm XMLHttpRequest). Feem ntau, tag nrho cov tsev qiv ntawv qauv muaj - ntawm no nws yog nyob rau hauv browser, ntawm no yog Go's stdlib, uas peb nyiam.
- Tag nrho pob ecosystem hauv Go, tag nrho cov kev daws teeb meem thib peb (templating, thiab lwm yam) tuaj yeem muab tso ua ke siv GopherJS thiab khiav hauv qhov browser.
GopherJS yooj yim heev kom tau - nws tsuas yog pob Go tsis tu ncua. Peb mus tau, thiab peb muaj GopherJS cov lus txib los tsim daim ntawv thov:
Nov yog lub ntiaj teb me me nyob zoo...
...Ib qho kev pab cuam Go tsis tu ncua, ib lub tsev qiv ntawv tus qauv fmt pob thiab Binding Js kom ncav cuag qhov browser API. Println thaum kawg yuav hloov mus rau console log thiab tus browser yuav sau "Nyob zoo gophers"! Nws yog qhov yooj yim: peb ua GopherJS tsim - peb tso nws hauv browser - txhua yam ua haujlwm!
Tam sim no koj muaj dab tsi? Kev khi
Muaj kev khi rau txhua qhov nrov js moj khaum:
- JQuery;
- Angular.js;
- D3.js rau plotting thiab ua hauj lwm nrog cov ntaub ntawv loj;
- React.js;
- VueJS;
- tseem muaj kev txhawb nqa rau Electron (uas yog, peb tuaj yeem sau cov ntawv thov desktop ntawm Electron);
- thiab qhov lom zem tshaj plaws yog WebGL (peb tuaj yeem ua daim ntawv thov ua tiav, suav nrog kev ua si nrog 3D duab, suab paj nruag thiab txhua yam khoom zoo);
- thiab ntau lwm yam kev khi rau txhua qhov nrov javascript moj khaum thiab cov tsev qiv ntawv.
moj khaum
- Muaj ib lub vev xaib uas twb tau tsim tshwj xeeb rau GopherJS - Vecty. Qhov no yog tag nrho-fledged analogue ntawm React.js, tab sis tsuas yog tsim nyob rau hauv Go, nrog rau qhov tshwj xeeb ntawm GopherJS.
- Muaj cov hnab ua si (xws li!). Kuv pom ob qhov nrov tshaj plaws:
- Yog lawm;
- Ebiten.
Kuv yuav qhia koj ob peb yam piv txwv ntawm nws zoo li cas thiab qhov koj tuaj yeem sau tau hauv Go:
Los yog qhov kev xaiv no (Kuv nrhiav tsis tau 3D tua, tab sis tej zaum nws muaj):
Kuv muab dab tsi?
Tam sim no kev lag luam pem hauv ntej yog nyob rau hauv xws li lub xeev uas tag nrho cov lus uas yav tas los tau quaj los ntawm Javascript yuav maj mus rau ntawd. Tam sim no txhua yam yuav muab tso ua ke rau hauv "Web Assemblies". Peb xav tau dab tsi los coj peb qhov chaw ncaj ncees nyob ntawd ua Gophers?
Go tau ib txwm xav tias nws yog System programming lus, thiab tsis muaj cov tsev qiv ntawv ua haujlwm nrog UI. Muaj qee yam, tab sis nws yog ib nrab tso tseg, ib nrab tsis ua haujlwm.
Thiab tam sim no yog lub sijhawm zoo los ua UI cov tsev qiv ntawv hauv Go uas yuav khiav ntawm GopherJS! Thaum kawg koj tuaj yeem sau koj tus kheej lub moj khaum! Qhov no yog lub sijhawm uas koj tuaj yeem sau lub moj khaum, thiab nws yuav yog ib qho ntawm thawj zaug thiab tau txais kev saws me nyuam ntxov, thiab koj yuav yog lub hnub qub (yog tias nws yog lub hauv paus zoo).
Koj tuaj yeem hloov kho ntau cov pob sib txawv uas twb muaj nyob hauv Go ecosystem rau qhov tshwj xeeb ntawm qhov browser (piv txwv li, Template engine). Lawv yuav ua haujlwm lawm, koj tuaj yeem ua kom yooj yim bindings kom koj tuaj yeem yooj yim muab cov ntsiab lus ncaj qha rau hauv browser. Ntxiv rau, koj tuaj yeem ua tau, piv txwv li, ib qho kev pabcuam uas tuaj yeem ua tib yam ntawm cov neeg rau zaub mov thiab nyob rau pem hauv ntej-kawg, siv tib txoj cai - txhua yam uas cov neeg tsim tawm pem hauv ntej nyiam (tsuas yog tam sim no hauv Mus).
Koj tuaj yeem sau ua si! Tsuas yog kev lom zemβ¦
Qhov ntawd yog txhua yam kuv xav hais.
Lus nug
Lo lus nug (tom qab no hu ua Q): - Kuv puas sau hauv Go lossis Js?
AG: - Koj sau cov xwm txheej, cov channel, cov qauv, kos - txhua yam hauv Go... Koj sau npe rau ib qho kev tshwm sim, dhau qhov ua haujlwm nyob ntawd.
Hauv: β Yog li kuv sau hauv "liab qab" Js?
AG: - Tsis yog, koj sau zoo li hauv Go thiab txuas rau browser API (qhov API tsis tau hloov). Koj tuaj yeem sau koj tus kheej khi kom cov lus xa mus rau channel - nws tsis yooj yim.
Hauv: - Yuav ua li cas txog mobile?
AG: - Kuv twv yuav raug hu pom: muaj kev khi rau Cordova thaj uas Js khiav. Hauv React Native - Kuv tsis paub; tej zaum muaj, tej zaum tsis yog (Kuv tsis txaus siab tshwj xeeb). N-go game engine txhawb nqa ob daim ntawv thov mobile - ob qho tib si iOS thiab Android.
Hauv: - Lus nug txog Web Assembly. Ntau thiab ntau qhov chaw raug coj mus, txawm tias qhov compression thiab "zipping" ... Peb puas yuav tsis tua lub ntiaj teb pem hauv ntej ntawm txoj kev no ntau dua?
AG: - Web Assembly yog hom ntawv binary, thiab binary los ntawm lub neej ntawd tsis tuaj yeem nyob rau hauv qhov kawg tso tawm ntau tshaj li cov ntawv nyeem ... Koj raug rub mus rau lub sijhawm ua haujlwm, tab sis qhov no yog tib yam li rub tawm cov qauv Javascript tsev qiv ntawv thaum nws tsis nyob ntawd, yog li peb siv qee qhov Lodash. Kuv tsis paub ntau npaum li cas Lodash siv.
Hauv: - Pom tseeb tsawg dua lub sijhawm ua haujlwm ...
AG: - Hauv "ntshiab" Javascript?
Hauv: - Yog. Peb compress nws ua ntej xa nws ...
AG: - Tab sis qhov no yog cov ntawv nyeem ... Feem ntau, ib megabyte zoo li ntau, tab sis tag nrho (koj muaj tag nrho cov sijhawm ua haujlwm). Tom ntej no, koj sau koj tus kheej kev lag luam logic, uas yuav nce koj binary los ntawm 1%. Txog tam sim no kuv tsis pom qhov no tua cov frontend. Ntxiv mus, Web Assembly yuav ua hauj lwm sai dua Javascript rau qhov pom tseeb yog vim li cas - nws tsis tas yuav parsed.
Hauv: - Qhov no tseem yog qhov teeb meem tsis sib haum xeeb ... Tseem tsis tau muaj kev siv "Vasma" (Web Assembly) kom ib tus tuaj yeem txiav txim tsis ncaj ncees. Conceptually, yog: peb txhua tus nkag siab tias binary yuav tsum ceev dua, tab sis tam sim no kev siv ntawm tib V8 yog heev npaum.
AG: - Yog.
Hauv: - Muab tso ua ke muaj ua haujlwm txias heev thiab nws tsis yog qhov tseeb tias yuav muaj txiaj ntsig zoo.
AG: - Web Assembly kuj yog tsim los ntawm cov neeg loj.
Hauv: β Nws zoo li kuv tias nws tseem nyuaj rau txiav txim rau Web Assembly. Muaj kev sib tham tau ntau xyoo tam sim no, tab sis muaj qee qhov kev ua tiav tiag tiag uas tuaj yeem xav tau.
AG: - Tej zaum. Peb mam li pom.
Hauv: - Peb tsis muaj teeb meem ntawm lub backend ... Tej zaum peb yuav tsum tso cov teeb meem no rau pem hauv ntej? Vim li cas ho mus qhov ntawd?
AG: - Peb yuav tsum khaws cov neeg ua haujlwm ntawm cov neeg ua haujlwm pem hauv ntej.
Ib co ads π
Ua tsaug uas koj tau nyob nrog peb. Koj puas nyiam peb cov ntawv? Xav pom cov ntsiab lus nthuav ntxiv? Txhawb nqa peb los ntawm kev tso ib qho kev txiav txim lossis qhia rau cov phooj ywg, , ib qho tshwj xeeb analogue ntawm nkag-theem servers, uas tau tsim los ntawm peb rau koj: (muaj nrog RAID1 thiab RAID10, mus txog 24 cores thiab mus txog 40GB DDR4).
Dell R730xd 2x pheej yig dua hauv Equinix Tier IV data center hauv Amsterdam? Tsuas yog nyob ntawm no hauv Netherlands! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - los ntawm $ 99! Nyeem txog
Tau qhov twg los: www.hab.com