Alexey Grachev: Lakaw sa Frontend

Kyiv Go Meetup Mayo 2018:

Alexey Grachev: Lakaw sa Frontend

Nanguna: - Kumusta tanan! Salamat sa imong pag-anhi dinhi! Karon kami adunay duha ka opisyal nga mamumulong - Lyosha ug Vanya. Adunay duha pa kung adunay igong oras. Ang unang mamumulong mao si Alexey Grachev, siya mosulti kanato mahitungod sa GopherJS.

Alexey Grachev (pagkahuman niini - AG): – Usa ko ka developer sa Go, ug nagsulat ko og mga serbisyo sa web sa Go. Usahay kinahanglan nimo nga atubangon ang frontend, usahay kinahanglan nimo nga mosulod niini nga mano-mano. Gusto nakong hisgutan ang akong kasinatian ug panukiduki sa Go on the frontend.

Ang leyenda mao kini: una kita maghisgot kon nganong gusto nato nga modagan Go sa frontend, unya kita maghisgot kon sa unsang paagi kini mahimo. Adunay duha ka paagi - Web Assembly ug GopherJS. Atong tan-awon kung unsa ang kahimtang sa kini nga mga solusyon ug kung unsa ang mahimo.

Unsay problema sa frontend?

Mouyon ba ang tanan nga maayo ang tanan sa frontend?

Alexey Grachev: Lakaw sa Frontend

Dili ba igo nga mga pagsulay? Hinay nga pagtukod? Ecosystem? Maayo.

Mahitungod sa frontend, ganahan ko sa kinutlo nga giingon sa usa sa mga nag-develop sa frontend sa iyang libro:

Alexey Grachev: Lakaw sa Frontend

Ang Javascript walay type nga sistema. Karon akong hinganlan ang mga problema nga akong nasugatan sa dagan sa akong trabaho ug ipasabut kung giunsa kini pagsulbad.

Ang tipo nga sistema sa kinatibuk-an halos dili matawag nga tipo nga sistema sa Javasript - adunay mga linya nga nagpaila sa tipo sa butang, apan sa tinuud wala kini kalabotan sa mga tipo. Nasulbad kini nga problema sa TypeScript (usa ka add-on sa Javasript) ug Flow (usa ka static-type checker sa Javascript). Sa tinuud, ang frontend nakaabot na sa punto sa pagsulbad sa problema sa usa ka dili maayo nga sistema sa tipo sa Javascript.

Alexey Grachev: Lakaw sa Frontend

Walay standard library sa browser nga ingon niana - adunay pipila ka mga built-in nga mga butang ug "magic" functions sa mga browser. Apan sa Javascript walay standard nga librarya nga ingon niana. Kini nga problema nasulbad na sa makausa pinaagi sa jQuery (ang tanan migamit sa jQuery uban sa tanan nga mga prototype, mga katabang, mga gimbuhaton nga gikinahanglan sa pagtrabaho). Karon ang tanan naggamit sa Lodash:

Alexey Grachev: Lakaw sa Frontend

Callback impyerno. Sa akong hunahuna ang tanan nakakita sa Javascript code mga 5 ka tuig na ang milabay, ug kini sama sa usa ka "noodle" sa usa ka talagsaon nga pagkakuti sa mga callback. Karon kini nga problema nasulbad na (uban ang pagpagawas sa ES-15 o ES-16), ang mga saad gidugang sa Javascript ug ang tanan makaginhawa nga dali sa makadiyot.

Alexey Grachev: Lakaw sa Frontend

Hangtud niabot ang Promice hell... Wala ko kahibalo kung giunsa pagdumala sa front-end nga industriya, pero kanunay nilang gimaneho ang ilang kaugalingon ngadto sa pipila ka katingad-an nga lasang. Nakahimo usab kami sa paghimo sa impyerno sa mga saad. Dayon among gisulbad kini nga problema pinaagi sa pagdugang og bag-ong primitive - async/wait:

Alexey Grachev: Lakaw sa Frontend

Nasulbad na ang problema sa asynchrony. Ang Async/wait kay usa ka sikat nga primitive sa lain-laing lengguwahe. Ang Python ug uban pa adunay kini nga pamaagi - kini maayo. Nasulbad ang problema.

Unsang problema ang wala masulbad? Ang paspas nga pagtaas sa pagkakomplikado sa mga balangkas, ang pagkakomplikado sa ekosistema ug ang mga programa mismo.

Alexey Grachev: Lakaw sa Frontend

  • Ang syntax sa Javascript medyo katingad-an. Kitang tanan nahibal-an ang mga problema sa pagdugang sa usa ka array ug usa ka butang ug uban pang mga komedya.
  • Ang Javascript kay multi-paradigm. Kini usa ka labi ka dinalian nga sistema karon kung ang ekosistema dako kaayo:
    • ang tanan nagsulat sa lain-laing mga estilo - ang uban nagsulat structurally, ang uban nagsulat functionally, lain-laing mga developers nagsulat sa lain-laing mga paagi;
    • gikan sa lainlaing mga pakete, lainlaing mga paradigma kung mogamit ka lainlaing mga pakete;
    • adunay daghan nga "makalingaw" nga adunay functional programming sa Javasript - ang rambda library nagpakita ug karon walay usa nga makabasa sa mga programa nga gisulat niini nga librarya.

  • Kining tanan nakahatag ug dakong epekto sa ekosistema, ug kini mitubo nga talagsaon. Ang mga pakete dili uyon sa usag usa: ang uban gibase sa mga saad, ang uban gibase sa async/paghulat, ang uban gibase sa mga callback. Nagsulat usab sila sa lainlaing mga paradigma!
  • Kini nakapalisud sa pagmentinar sa proyekto. Lisod mangita ug bug kung dili nimo mabasa ang code.

Unsa ang Web Assembly?

Ang mga maisog nga mga lalaki gikan sa Mozilla Foundation ug daghang uban pang mga kompanya nag-abut sa usa ka butang sama sa Web Assembly. Unsa man ni?

Alexey Grachev: Lakaw sa Frontend

  • Kini usa ka virtual nga makina nga gitukod sa browser nga nagsuporta sa binary format.
  • Ang binary nga mga programa moabut didto ug gipatuman hapit sa lumad, nga mao, ang browser dili kinahanglan nga mag-parse sa tanan nga mga "noodles" sa javascript code matag higayon.
  • Ang tanan nga mga browser nagpahayag sa suporta.
  • Tungod kay kini bytecode, mahimo kang magsulat og compiler alang sa bisan unsang pinulongan.
  • Upat ka dagkong mga browser gipadala na uban ang suporta sa Web Assembly.
  • Kami nagpaabut sa lumad nga suporta sa Go sa dili madugay. Kining bag-ong arkitektura gidugang na: GOARCH=wasm GOOS=js (sa dili madugay). Sa pagkakaron, sa akong nasabtan, dili kini functional, apan adunay usa ka pamahayag nga kini siguradong anaa sa Go.

Unsay buhaton karon? GopherJS

Samtang wala kami suporta alang sa Web Assembly, adunay usa ka transpiler sama sa GopherJS.

Alexey Grachev: Lakaw sa Frontend

  • Ang Go code gibalhin ngadto sa "pure" nga Javascript.
  • Nagdagan sa tanan nga mga browser - wala’y bag-ong mga bahin nga gisuportahan lamang sa mga modernong browser (kini ang Vanilla JS, nga nagdagan sa bisan unsang butang).
  • Adunay suporta sa halos tanan nga naa ni Go, lakip ang mga goroutine ug mga channel... tanan nga atong gihigugma ug nahibal-an pag-ayo.
  • Hapit ang tibuok nga standard nga librarya gisuportahan, gawas niadtong mga pakete nga wala'y kahulogan sa pagsuporta sa browser: syscall, net interactions (adunay net/http client, apan walay server, ug ang kliyente gisundog pinaagi sa XMLHttpRequest). Sa kinatibuk-an, ang tibuok nga standard library anaa - ania kini sa browser, ania ang stdlib ni Go, nga among gihigugma.
  • Ang tibuok package nga ekosistema sa Go, ang tanang third-party nga mga solusyon (templating, ug uban pa) mahimong i-compile gamit ang GopherJS ug ipadagan sa browser.

Ang GopherJS dali ra kaayo makuha - kini usa ra ka regular nga pakete sa Go. Kita moadto sa pagkuha, ug kita adunay usa ka GopherJS sugo sa pagtukod sa aplikasyon:

Alexey Grachev: Lakaw sa Frontend

Kini usa ka gamay nga hello nga kalibutan ...

Alexey Grachev: Lakaw sa Frontend

...Usa ka regular nga programa sa Go, usa ka regular nga standard library fmt package ug Binding Js aron maabot ang browser API. Ang Println sa kadugayan makombertir sa console log ug ang browser mosulat og "Hello gophers"! Ingon ana ka yano: gihimo namon ang pagtukod sa GopherJS - gilunsad namon kini sa browser - ang tanan molihok!

Unsay naa nimo karon? Mga pagbugkos

Alexey Grachev: Lakaw sa Frontend

Adunay mga pagbugkos alang sa tanan nga sikat nga js frameworks:

  • JQuery;
  • Angular.js;
  • D3.js alang sa pagplano ug pagtrabaho uban sa dagkong datos;
  • React.js;
  • VueJS;
  • naa pa gani suporta para sa Electron (sa ato pa, masulat na nato ang desktop applications sa Electron);
  • ug ang labing kataw-anan mao ang WebGL (makahimo kami og mga full-graphic nga aplikasyon, lakip ang mga dula nga adunay 3D graphics, musika ug tanan nga mga maayong butang);
  • ug daghang uban pang mga binding sa tanan nga sikat nga javascript frameworks ug librarya.

Framework

  1. Adunay usa ka web framework na naugmad ilabi na alang sa GopherJS - Vecty. Kini usa ka hingpit nga analogue sa React.js, apan naugmad lamang sa Go, nga adunay mga detalye sa GopherJS.
  2. Adunay mga dula nga bag (sorpresa!). Akong nakit-an ang duha nga labing popular:
    • Engo;
    • Ebiten.

Ipakita ko kanimo ang pipila ka mga pananglitan kung unsa kini hitsura ug kung unsa ang mahimo nimong isulat sa Go:

Alexey Grachev: Lakaw sa Frontend

O kini nga kapilian (wala ko makit-an ang usa ka 3D shooter, apan tingali kini anaa):

Alexey Grachev: Lakaw sa Frontend

Unsa ang akong gitanyag?

Karon ang industriya sa unahan naa sa ingon nga kahimtang nga ang tanan nga mga sinultian nga kaniadto naghilak gikan sa Javascript magdali didto. Karon ang tanan matipon sa "Web Assemblies". Unsa ang kinahanglan naton nga makuha ang atong angay nga lugar didto ingon mga Gopher?

Alexey Grachev: Lakaw sa Frontend

Tradisyonal nga gihunahuna ni Go nga kini usa ka System programming language, ug halos wala’y mga librarya alang sa pagtrabaho kauban ang UI. Adunay usa ka butang, apan kini katunga nga gibiyaan, ang katunga dili magamit.

Ug karon usa ka maayong higayon sa paghimo sa mga librarya sa UI sa Go nga modagan sa GopherJS! Sa katapusan mahimo nimong isulat ang imong kaugalingon nga balangkas! Kini ang panahon nga mahimo nimong isulat ang usa ka balangkas, ug kini mahimong usa sa una ug makakuha og sayo nga pagsagop, ug mahimo ka usa ka bituon (kung kini usa ka maayo nga balangkas).

Mahimo nimong ipahiangay ang daghang lainlaing mga pakete nga naa na sa ekosistema sa Go sa mga detalye sa browser (pananglitan, Template engine). Motrabaho na sila, makahimo ka og sayon ​​​​nga pagbugkos aron dali nimo mahatag ang sulod nga direkta sa browser. Dugang pa, mahimo nimo, pananglitan, usa ka serbisyo nga makahatag sa parehas nga butang sa server ug sa front-end, gamit ang parehas nga code - tanan nga gusto sa mga developer sa unahan (karon lang sa Go).

Makasulat ka ug dula! Lingaw-lingaw lang...

Kana ra ang gusto nakong isulti.

Alexey Grachev: Lakaw sa Frontend

Ang imong mga pangutana

Pangutana (pagkahuman gitawag nga Q): – Nagsulat ba ko sa Go o Js?

AG: – Gisulat nimo ang mga rutina, mga channel, istruktura, pag-embed - tanan sa Go... Nag-subscribe ka sa usa ka panghitabo, nagpasa usa ka function didto.

SA: – Busa nagsulat ko sa “hubo” nga Js?

AG: – Dili, nagsulat ka nga daw sa Go ug sumpay sa browser API (ang API wala mausab). Mahimo nimong isulat ang imong kaugalingon nga mga pagbugkos aron ang mga mensahe ipadala sa channel - dili kini lisud.

SA: – Unsa ang bahin sa mobile?

AG: - Nakita gyud nako: adunay mga pagbugkos alang sa patch sa Cordova nga gipadagan ni Js. Sa React Native - Wala ko kahibalo; tingali adunay, tingali wala (dili kaayo ko interesado). Ang N-go game engine nagsuporta sa duha ka mobile applications - iOS ug Android.

SA: - Pangutana bahin sa Web Assembly. Dugang ug dugang nga luna ang gikuha, bisan pa sa compression ug "zipping" ... Dili ba nato patyon ang front-end nga kalibutan niining paagiha nga labaw pa?

AG: - Ang Web Assembly usa ka binary nga format, ug ang binary sa default dili mahimong sa katapusan nga pagpagawas labaw pa sa teksto ... Nadani ka sa runtime, apan parehas kini sa pagguyod sa standard nga librarya sa Javascript kung wala kini, mao nga kami gamita ang pipila ka Lodash. Wala ko kahibalo kung pila ang gikuha ni Lodash.

SA: - Dayag nga mas ubos kaysa runtime ...

AG: - Sa "puro" nga Javascript?

SA: - Oo. Among gi-compress kini sa dili pa ipadala...

AG: - Apan kini usa ka teksto ... Sa kinatibuk-an, ang usa ka megabyte ingon og daghan, apan kana ang tanan (naa nimo ang tibuok runtime). Sunod, gisulat nimo ang imong kaugalingon nga lohika sa negosyo, nga magdugang sa imong binary sa 1%. Sa pagkakaron wala pa nako makita nga kini pagpatay sa frontend. Dugang pa, ang Web Assembly molihok nga mas paspas kaysa Javascript alang sa klaro nga hinungdan - dili kinahanglan nga ma-parse.

SA: – Kini usa gihapon ka kontrobersyal nga punto... Wala pa'y bisan unsang pakisayran nga pagpatuman sa "Vasma" (Web Assembly) aron ang usa makahukom nga dili klaro. Sa konsepto, oo: kitang tanan nakasabut nga ang binary kinahanglan nga mas paspas, apan ang kasamtangan nga pagpatuman sa samang V8 episyente kaayo.

AG: - Oo.

SA: - Ang pag-compile didto maayo kaayo ug kini dili usa ka kamatuoran nga adunay usa ka dako nga bentaha.

AG: – Ang Web Assembly gihimo usab sa mga dagkong tawo.

SA: – Para nako lisud gihapon ang paghukom sa Web Assembly. Adunay mga panag-istoryahanay sa daghang mga tuig na karon, apan adunay pipila ka tinuod nga mga kalampusan nga mabati.

AG: - Tingali. Atong tan-awon.

SA: - Wala kami'y mga problema sa backend... Tingali kinahanglan natong ibilin kini nga mga problema sa frontend? Nganong moadto didto?

AG: - Kinahanglan nga magtipig kami usa ka kawani sa mga trabahante sa front-line.

Pipila ka mga ad 🙂

Salamat sa pagpabilin kanamo. Ganahan ka ba sa among mga artikulo? Gusto nga makakita og mas makapaikag nga sulod? Suportahi kami pinaagi sa pag-order o pagrekomenda sa mga higala, cloud VPS alang sa mga developers gikan sa $4.99, usa ka talagsaon nga analogue sa mga entry-level server, nga giimbento namo alang kanimo: Ang tibuok kamatuoran bahin sa VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps gikan sa $19 o unsaon pagpaambit sa usa ka server? (anaa sa RAID1 ug RAID10, hangtod sa 24 ka mga core ug hangtod sa 40GB DDR4).

Dell R730xd 2 ka beses nga mas barato sa Equinix Tier IV data center sa Amsterdam? Dinhi lang 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV gikan sa $199 sa Netherlands! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - gikan sa $99! Basaha ang mahitungod sa Unsaon pagtukod sa infrastructure corp. klase sa paggamit sa Dell R730xd E5-2650 v4 server nga nagkantidad ug 9000 euros sa usa ka sentimos?

Source: www.habr.com

Idugang sa usa ka comment