Alexey Grachev: Mandehana Frontend

Kyiv Go Meetup Mey 2018:

Alexey Grachev: Mandehana Frontend

mpandamina: - Salama daholo! Misaotra anao tonga eto! Ankehitriny dia manana mpandahateny ofisialy roa - Lyosha sy Vanya. Mbola hisy roa indray raha manam-potoana. Ny mpandahateny voalohany dia Alexey Grachev, hilaza amintsika momba ny GopherJS izy.

Alexey Grachev (avy eo - AG): – Mpamorona ny Go aho, ary manoratra serivisy tranonkala amin'ny Go. Indraindray tsy maintsy miatrika ny frontend ianao, indraindray tsy maintsy miditra amin'ny tanana. Te hiresaka momba ny traikefako sy ny fikarohana nataoko momba ny Go on frontend aho.

Ny angano dia izao: aloha isika dia hiresaka momba ny antony tiantsika hihazakazaka Mandehana eo amin'ny frontend, avy eo dia hiresaka momba ny fomba hanaovana izany. Misy fomba roa - Web Assembly sy GopherJS. Andeha hojerentsika hoe inona ny satan'ireo vahaolana ireo ary inona no azo atao.

Inona no tsy mety amin'ny frontend?

Manaiky ve ny rehetra fa tsara ny zava-drehetra amin'ny frontend?

Alexey Grachev: Mandehana Frontend

Tsy ampy ve ny fitsapana? Miadana ny fananganana? Ecosystem? tsara.

Momba ny frontend, tiako ilay teny nambaran'ny iray amin'ireo mpamorona frontend ao amin'ny bokiny:

Alexey Grachev: Mandehana Frontend

Tsy manana rafitra karazana ny Javascript. Ankehitriny dia holazaiko ireo olana sendra ahy nandritra ny asako ary hazavaiko ny fomba famahana izany.

Ny rafitra karazana amin'ny ankapobeny dia tsy azo antsoina hoe rafitra karazana amin'ny Javasript - misy andalana manondro ny karazana zavatra, fa raha ny marina dia tsy misy ifandraisany amin'ny karazana izany. Ity olana ity dia voavaha amin'ny TypeScript (fanampiny amin'ny Javasript) sy Flow (mpandinika karazana statika amin'ny Javascript). Raha ny marina, ny frontend dia efa tonga amin'ny famahana ny olan'ny rafitra karazana ratsy amin'ny Javascript.

Alexey Grachev: Mandehana Frontend

Tsy misy tranomboky manara-penitra ao amin'ny navigateur toy izany - misy zavatra naorina sy "majika" ao amin'ny navigateur. Saingy amin'ny Javascript dia tsy misy tranomboky mahazatra toy izany. Ity olana ity dia efa voavaha indray mandeha tamin'ny jQuery (nampiasa jQuery daholo ny rehetra miaraka amin'ireo prototypes, mpanampy, fiasa ilaina amin'ny asa). Mampiasa Lodash izao ny rehetra:

Alexey Grachev: Mandehana Frontend

Callback helo. Heveriko fa samy nahita ny kaody Javascript tokony ho 5 taona lasa izay ny rehetra, ary toy ny “pôtô” amin'ny fahasarotam-pandrenesana tsy mampino. Ankehitriny dia voavaha io olana io (miaraka amin'ny famoahana ny ES-15 na ES-16), ny fampanantenana dia nampiana tamin'ny Javascript ary afaka miaina mora kokoa ny rehetra mandritra ny fotoana fohy.

Alexey Grachev: Mandehana Frontend

Mandra-pahatongan'ny Promice hell ... Tsy fantatro ny fomba fitantanana ny indostrian'ny front-end, fa mitondra ny tenany any anaty ala hafahafa foana izy ireo. Nahavita nanao helo tamin’ny fampanantenana koa izahay. Avy eo dia namaha ity olana ity izahay tamin'ny fampidirana primitive vaovao - async/wait:

Alexey Grachev: Mandehana Frontend

Voavaha ny olana amin'ny asynchrony. Async/await dia tena malaza malaza amin'ny fiteny samihafa. Python sy ny hafa dia manana an'io fomba io - tena tsara. Voavaha ny olana.

Inona no olana tsy voavaha? Ny fahasarotan'ny rafitra mitombo, ny fahasarotan'ny tontolo iainana ary ny programa mihitsy.

Alexey Grachev: Mandehana Frontend

  • Somary hafahafa ny syntax Javascript. Fantatsika rehetra ny olana amin'ny fampidirana array sy zavatra ary vazivazy hafa.
  • Javascript dia multiparadigma. Ity dia rafitra tena maika tokoa amin'izao fotoana izao rehefa lehibe ny tontolo iainana:
    • samy manoratra amin'ny fomba samy hafa ny tsirairay - ny sasany manoratra ara-drafitra, ny sasany manoratra amin'ny fomba fiasa, ny mpamorona samihafa dia manoratra amin'ny fomba samihafa;
    • avy amin'ny fonosana samihafa, paradigma samihafa rehefa mampiasa fonosana samihafa ianao;
    • be dia be ny "mahafinaritra" miaraka amin'ny programa miasa ao amin'ny Javasript - niseho ny tranomboky rambda ary tsy misy afaka mamaky programa voasoratra ao amin'ity tranomboky ity.

  • Izany rehetra izany dia misy fiantraikany lehibe eo amin'ny tontolo iainana, ary nitombo tsy mampino. Ny fonosana dia tsy mifanaraka amin'ny tsirairay: ny sasany dia mifototra amin'ny fampanantenana, ny sasany dia mifototra amin'ny async / miandry, ny sasany dia mifototra amin'ny antso miverina. Manoratra amin'ny paradigma samihafa koa izy ireo!
  • Izany no mahatonga ny tetikasa ho sarotra ny fikojakojana. Sarotra ny mahita bug raha tsy afaka mamaky ny code ianao.

Inona no atao hoe Web Assembly?

Ireo lehilahy be herim-po avy amin'ny Mozilla Foundation sy ny orinasa maromaro hafa dia namorona zavatra toy ny Web Assembly. Inona ity?

Alexey Grachev: Mandehana Frontend

  • Izy io dia milina virtoaly natsangana ao anaty navigateur izay manohana ny endrika binary.
  • Tonga any ny programa binary ary saika vita amin'ny fomba voajanahary, izany hoe, ny navigateur dia tsy mila manara-maso ny "noodles" rehetra amin'ny code javascript.
  • Ny navigateur rehetra dia nanambara fanohanana.
  • Satria ity dia bytecode, afaka manoratra compiler ho an'ny fiteny rehetra ianao.
  • Efa misy navigateur lehibe efatra miaraka amin'ny fanohanan'ny Web Assembly.
  • Manantena fanohanana teratany ao amin'ny Go tsy ho ela izahay. Ity maritrano vaovao ity dia efa nampiana: GOARCH=wasm GOOS=js (tsy ho ela). Hatreto, raha ny fahazoako azy dia tsy miasa izy io, fa misy ny filazana fa tena ho ao amin'ny Go.

Inona no atao izao? GopherJS

Na dia tsy manana fanohanana amin'ny Web Assembly aza izahay, dia misy transpiler toa an'i GopherJS.

Alexey Grachev: Mandehana Frontend

  • Ny kaody Go dia nadika ho Javascript "pure".
  • Mihazakazaka amin'ny navigateur rehetra - tsy misy endri-javatra vaovao izay tohanan'ny navigateur maoderina ihany (izany no Vanilla JS, izay mandeha amin'ny zavatra rehetra).
  • Saika misy fanohanana ho an'ny zavatra rehetra ananan'i Go, ao anatin'izany ny goroutine sy ny fantsona... izay rehetra tiantsika sy fantatsika.
  • Saika ny tranomboky manara-penitra manontolo no tohanana, afa-tsy ireo fonosana izay tsy misy dikany ny tohana ao amin'ny navigateur: syscall, net interactions (misy mpanjifa net/http, fa tsy misy mpizara, ary ny mpanjifa dia alaina amin'ny XMLHttpRequest). Amin'ny ankapobeny dia misy ny tranomboky manara-penitra iray manontolo - eto amin'ny navigateur, eto ny stdlib an'i Go, izay tiantsika.
  • Ny tontolon'ny fonosana manontolo ao amin'ny Go, ny vahaolana avy amin'ny antoko fahatelo rehetra (templating, sns.) dia azo angonina amin'ny alàlan'ny GopherJS ary mandeha amin'ny navigateur.

Tena mora azo ny GopherJS - fonosana Go mahazatra fotsiny izy io. Mandeha maka izahay, ary manana baiko GopherJS hananganana ny fampiharana:

Alexey Grachev: Mandehana Frontend

Izao tontolo izao salama kely...

Alexey Grachev: Mandehana Frontend

...Programa mandeha mahazatra, fonosana fmt tranomboky mahazatra mahazatra ary Binding Js mba hahatongavana amin'ny API navigateur. Ny Println dia hovana ho log console ary hanoratra hoe "Hello gophers" ny navigateur! Tsotra izany: manao GopherJS izahay - atomboka amin'ny navigateur izany - mandeha ny zava-drehetra!

Inona no anananao amin'izao fotoana izao? Famatorana

Alexey Grachev: Mandehana Frontend

Misy fatorana ho an'ny rafitra js malaza rehetra:

  • JQuery;
  • Angular.js;
  • D3.js amin'ny teti-dratsy sy miasa miaraka amin'ny angona lehibe;
  • React.js;
  • VueJS;
  • misy aza ny fanohanana ny Electron (izany hoe efa afaka manoratra applications desktop amin'ny Electron);
  • ary ny tena mampihomehy dia ny WebGL (afaka manao rindranasa feno sary isika, anisan'izany ny lalao misy sary 3D, mozika ary ny zava-tsoa rehetra);
  • ary famatorana maro hafa amin'ny rafitra sy tranomboky javascript malaza rehetra.

Framework

  1. Misy rafitra web efa novolavolaina manokana ho an'ny GopherJS - Vecty. Ity dia analogue feno an'ny React.js, saingy novolavolaina tao amin'ny Go ihany, miaraka amin'ny mombamomba ny GopherJS.
  2. Misy kitapo lalao (surprise!). Hitako ny roa malaza indrindra:
    • Engo;
    • Ebiten.

Hasehoko anao ohatra roa momba ny endriny sy ny efa azonao soratana ao amin'ny Go:

Alexey Grachev: Mandehana Frontend

Na ity safidy ity (tsy nahita mpitifitra 3D aho, fa angamba misy izany):

Alexey Grachev: Mandehana Frontend

Inona no atolotro?

Amin'izao fotoana izao ny indostrian'ny farany dia ao anatin'ny toe-javatra toy izany fa ny fiteny rehetra izay nitomany teo aloha tamin'ny Javascript dia hihazakazaka any. Ankehitriny dia hatambatra ao amin'ny "Web Assemblies" ny zava-drehetra. Inona no ilaintsika haka ny toerana sahaza antsika ho Gophers?

Alexey Grachev: Mandehana Frontend

Nihevitra i Go fa fiteny fandaharana System izy io, ary saika tsy misy tranomboky miasa amin'ny UI. Misy zavatra, fa ny antsasany nilaozana, ny antsasany tsy miasa.

Ary izao dia fotoana tsara hanaovana tranomboky UI ao amin'ny Go izay handeha amin'ny GopherJS! Afaka manoratra ny rafitrao manokana ianao amin'ny farany! Izao no fotoana ahafahanao manoratra framework, ary ho iray amin'ireo voalohany sy hahazo fananganana aloha, ary ho kintana ianao (raha rafitra tsara izany).

Azonao atao ny mampifanaraka ireo fonosana maro samihafa izay efa ao amin'ny ecosystem Go amin'ny mombamomba ny navigateur (ohatra, motera Template). Efa hiasa izy ireo, afaka manao fatorana mety ianao mba hahafahanao mamadika mora foana ny atiny amin'ny navigateur. Fanampin'izay, azonao atao, ohatra, ny serivisy afaka manome zavatra mitovy amin'ny mpizara sy eo amin'ny sisiny aloha, amin'ny fampiasana kaody mitovy - izay rehetra tian'ny mpamorona eo aloha (ao amin'ny Go fotsiny izao).

Afaka manoratra lalao ianao! Fialam-boly fotsiny...

Izay ihany no tiako holazaina.

Alexey Grachev: Mandehana Frontend

Ny fanontanianao

Fanontaniana (antsoina hoe Q): – Manoratra amin'ny Go sa Js ve aho?

AG: – Manoratra fomba fanao, fantsona, rafitra, fametahana – ny zava-drehetra ao amin'ny Go ianao... Misoratra anarana hetsika iray ianao, mandalo asa iray any.

IN: – Ka manoratra amin'ny Js "miboridana" aho?

AG: – Tsia, manoratra toy ny ao amin'ny Go ianao ary mifandray amin'ny navigateur API (tsy niova ny API). Azonao atao ny manoratra ny fatoranao manokana mba handefasana hafatra amin'ny fantsona - tsy sarotra izany.

IN: – Ahoana ny amin’ny finday?

AG: – Hitako tokoa: misy fatorana ho an'ny patch Cordova izay ataon'i Js. Ao amin'ny React Native - Tsy fantatro; mety misy, mety tsy (tsy liana loatra aho). Ny motera lalao N-go dia manohana ny fampiharana finday roa - na iOS na Android.

IN: - Fanontaniana momba ny Web Assembly. Mihabetsaka ny habaka alaina, na dia eo aza ny famoretana sy ny “zip”... Moa ve isika tsy hamono izao tontolo izao amin'ny fomba toy izany bebe kokoa?

AG: – Web Assembly dia format binary, ary ny binary amin'ny alàlan'ny default dia tsy afaka ao amin'ny famoahana farany mihoatra noho ny lahatsoratra... Voasarika ho amin'ny fotoana fandehanana ianao, saingy mitovy amin'ny fisintonana ny tranomboky Javascript mahazatra rehefa tsy eo izy io, ka izahay mampiasa Lodash sasany. Tsy haiko hoe ohatrinona no lasan'i Lodash.

IN: - Mazava ho azy fa latsaka noho ny fotoana fandehanana...

AG: - Amin'ny Javascript "madio"?

IN: - Eny. Ampidirinay mialoha ny fandefasana azy...

AG: – Fa lahatsoratra ity ... Amin'ny ankapobeny, ny megabyte dia toa be dia be, fa izay ihany (manana ny fotoana rehetra ianao). Manaraka, manoratra ny lojikan'ny orinasanao manokana ianao, izay hampitombo ny binary anao amin'ny 1%. Hatreto dia tsy hitako izay famonoana ny frontend. Ambonin'izany, ny Web Assembly dia hiasa haingana kokoa noho ny Javascript noho ny antony mazava - tsy mila hosokajiana izany.

IN: – Mbola hevitra mampiady hevitra ihany izany... Tsy mbola misy ny fampiharana ny “Vasma” (Web Assembly) ahafahana mitsara mazava. Raha ny hevitra, eny: isika rehetra dia mahafantatra fa ny binary dia tokony ho haingana kokoa, fa ny fampiharana amin'izao fotoana izao ny V8 mitovy dia tena mahomby.

AG: - Eny.

IN: - Ny fanangonana ao dia miasa tena mahafinaritra ary tsy zava-misy fa hisy tombony lehibe.

AG: – Web Assembly dia ataon'ny olon-dehibe ihany koa.

IN: – Toa mbola sarotra amiko ny mitsara ny Web Assembly. Efa an-taonany maro izao no nisy ny resaka, saingy vitsy ny tena zava-bita azo tsapain-tanana.

AG: - Angamba. Ho hitantsika eo.

IN: – Tsy manana olana amin'ny lamosina isika... Angamba tokony hamela ireo olana ireo eo amin'ny lafiny anoloana? Nahoana no mandeha any?

AG: – Tsy maintsy mitazona mpiasan'ny mpiasa eo aloha isika.

Ny doka sasany 🙂

Misaotra anao nijanona niaraka taminay. Tianao ve ny lahatsoratray? Te-hahita votoaty mahaliana kokoa? Tohano izahay amin'ny fametrahana baiko na fanolorana amin'ny namana, cloud VPS ho an'ny mpamorona manomboka amin'ny $4.99, analogue tsy manam-paharoa amin'ny mpizara ambaratonga fidirana, izay noforoninay ho anao: Ny marina rehetra momba ny VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps avy amin'ny $19 na ahoana no hizarana mpizara? (misy miaraka amin'ny RAID1 sy RAID10, hatramin'ny 24 cores ary hatramin'ny 40GB DDR4).

Dell R730xd 2x mora kokoa amin'ny foibe data Equinix Tier IV any Amsterdam? Eto ihany 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV manomboka amin'ny $199 any Holandy! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - manomboka amin'ny $99! Vakio ny momba ny Ahoana ny fananganana infrastructure corp. kilasy amin'ny fampiasana mpizara Dell R730xd E5-2650 v4 mitentina 9000 euros amin'ny denaria iray?

Source: www.habr.com

Add a comment