Aleksey Qraçov: Get Frontend

Kyiv Go Meetup May 2018:

Aleksey Qraçov: Get Frontend

Qurğuşun: - Hamıya salam! Burada olduğunuz üçün təşəkkür edirik! Bu gün bizim iki rəsmi spikerimiz var - Lyoşa və Vanya. Əgər kifayət qədər vaxtımız olsa, daha ikisi olacaq. İlk məruzəçi Aleksey Qraçovdur, o, bizə GopherJS haqqında məlumat verəcək.

Aleksey Qraçov (bundan sonra – AG): – Mən Go tərtibatçısıyam və Go-da veb xidmətləri yazıram. Bəzən ön hissə ilə məşğul olmalısan, bəzən əl ilə daxil olmalısan. Mən Go on frontend ilə bağlı təcrübəm və araşdırmam haqqında danışmaq istəyirəm.

Əfsanə belədir: əvvəlcə Go-nu niyə frontenddə işə salmaq istədiyimizi danışacağıq, sonra bunun necə edilə biləcəyini danışacağıq. İki yol var - Web Assembly və GopherJS. Bu həllərin vəziyyətinin nə olduğunu və nə edilə biləcəyini görək.

Frontenddə nə problem var?

Hər kəs frontend ilə hər şeyin yaxşı olduğu ilə razılaşır?

Aleksey Qraçov: Get Frontend

Kifayət qədər test yoxdur? Yavaş tikinti? Ekosistem? Yaxşı.

Frontendlə bağlı olaraq, frontend tərtibatçılarından birinin kitabında dediyi sitatı bəyənirəm:

Aleksey Qraçov: Get Frontend

Javascript-in tip sistemi yoxdur. İndi işim zamanı qarşılaşdığım problemlərin adlarını çəkəcəyəm və onların necə həll olunduğunu izah edəcəyəm.

Ümumilikdə tip sistemini Javasript-də çətin ki tip sistemi adlandırmaq olar - obyektin tipini göstərən sətirlər var, amma əslində bunun növlərlə heç bir əlaqəsi yoxdur. Bu problem TypeScript (Javasript-ə əlavə) və Flow (Javascript-də statik tipli yoxlayıcı) proqramlarında həll olunur. Əslində, frontend Javascript-də pis tipli sistem problemini həll etmək nöqtəsinə artıq çatmışdır.

Aleksey Qraçov: Get Frontend

Brauzerdə standart kitabxana yoxdur - brauzerlərdə bəzi daxili obyektlər və "sehrli" funksiyalar var. Lakin Javascript-də belə standart kitabxana yoxdur. Bu problem artıq bir dəfə jQuery tərəfindən həll edilib (hamı jQuery-dən bütün prototiplər, köməkçilər, işləmək üçün lazım olan funksiyalarla istifadə edirdi). İndi hər kəs Lodash-dan istifadə edir:

Aleksey Qraçov: Get Frontend

Geri zəng cəhənnəm. Düşünürəm ki, hər kəs Javascript kodunu təxminən 5 il əvvəl görmüşdü və bu, geri çağırışların inanılmaz mürəkkəbliyinin “əriştəsi” kimi görünürdü. İndi bu problem həll edildi (ES-15 və ya ES-16-nın buraxılması ilə), Javascript-ə vədlər əlavə edildi və hər kəs bir müddət daha rahat nəfəs ala bilər.

Aleksey Qraçov: Get Frontend

Promice cəhənnəmi gələnə qədər... Mən qabaqcıl sənayenin necə idarə etdiyini bilmirəm, lakin onlar həmişə özlərini qəribə cəngəlliyə aparırlar. Biz də vədlərlə cəhənnəmə düçar olduq. Sonra yeni primitiv - async/await əlavə edərək bu problemi həll etdik:

Aleksey Qraçov: Get Frontend

Asinxroniya ilə bağlı problem həll olunur. Async/await müxtəlif dillərdə kifayət qədər populyar primitivdir. Python və başqalarının bu yanaşması var - bu olduqca yaxşıdır. Problem həll edildi.

Hansı problem həll olunmur? Çərçivələrin eksponent olaraq artan mürəkkəbliyi, ekosistemin və proqramların özlərinin mürəkkəbliyi.

Aleksey Qraçov: Get Frontend

  • Javascript sintaksisi bir az qəribədir. Massiv və obyekt əlavə etmək və digər zarafatlarla bağlı problemləri hamımız bilirik.
  • Javascript çox paradiqmadır. Bu, hazırda ekosistem çox böyük olduqda xüsusilə aktual bir sistemdir:
    • hər kəs fərqli üslubda yazır - bəziləri struktur olaraq yazır, bəziləri funksional yazır, müxtəlif tərtibatçılar fərqli yazır;
    • müxtəlif paketlərdən istifadə etdiyiniz zaman fərqli paradiqmalardan;
    • Javasript-də funksional proqramlaşdırma ilə çox "əyləncəli" var - rambda kitabxanası meydana çıxdı və indi bu kitabxanada yazılmış proqramları heç kim oxuya bilməz.

  • Bütün bunlar ekosistemə böyük təsir göstərir və o, inanılmaz dərəcədə artıb. Paketlər bir-biri ilə uyğun gəlmir: bəziləri vədlərə əsaslanır, bəziləri async/await-ə əsaslanır, bəziləri isə geri çağırışlara əsaslanır. Onlar da müxtəlif paradiqmalarda yazırlar!
  • Bu, layihənin saxlanmasını çətinləşdirir. Kodu oxuya bilmirsinizsə, səhv tapmaq çətindir.

Veb Assambleyası nədir?

Mozilla Fondunun və bir sıra digər şirkətlərin cəsur adamları Web Assembly kimi bir şey hazırladılar. Bu nədir?

Aleksey Qraçov: Get Frontend

  • Bu, ikili formatı dəstəkləyən brauzerə quraşdırılmış virtual maşındır.
  • Binar proqramlar oraya çatır və demək olar ki, yerli olaraq icra olunur, yəni brauzer hər dəfə javascript kodunun bütün “əriştələrini” təhlil etməyə ehtiyac duymur.
  • Bütün brauzerlər dəstək elan etdi.
  • Bu bayt kodu olduğundan istənilən dil üçün kompilyator yaza bilərsiniz.
  • Dörd əsas brauzer artıq Web Assembly dəstəyi ilə göndərilir.
  • Tezliklə Go-da yerli dəstək gözləyirik. Bu yeni arxitektura artıq əlavə edilib: GOARCH=wasm GOOS=js (tezliklə). Hələ ki, başa düşdüyüm kimi, funksional deyil, ancaq Go-da olacağına dair bir ifadə var.

İndi nə etməli? GopherJS

Veb Assambleyasını dəstəkləməsək də, GopherJS kimi bir transpiler var.

Aleksey Qraçov: Get Frontend

  • Go kodu "saf" Javascript-ə köçürülür.
  • Bütün brauzerlərdə işləyir - yalnız müasir brauzerlər tərəfindən dəstəklənən yeni funksiyalar yoxdur (bu, hər hansı bir şeydə işləyən Vanilla JS-dir).
  • Go-da demək olar ki, hər şey, o cümlədən goroutinlər və kanallar üçün dəstək var... sevdiyimiz və çox bildiyimiz hər şey.
  • Brauzerdə dəstəkləməyin mənasız olduğu paketlər istisna olmaqla, demək olar ki, bütün standart kitabxana dəstəklənir: syscall, net qarşılıqlı əlaqə (net/http müştəri var, lakin server yoxdur və müştəri XMLHttpRequest vasitəsilə təqlid edilir). Ümumiyyətlə, bütün standart kitabxana mövcuddur - burada o, brauzerdədir, burada bizim sevdiyimiz Go-nun stdlib-i var.
  • Go-da bütün paket ekosistemi, bütün üçüncü tərəf həlləri (şablonlaşdırma və s.) GopherJS istifadə edərək tərtib edilə və brauzerdə işlədilə bilər.

GopherJS-i əldə etmək çox asandır - bu, sadəcə olaraq adi Go paketidir. Biz əldə edirik və tətbiqi qurmaq üçün GopherJS əmrimiz var:

Aleksey Qraçov: Get Frontend

Bu, belə kiçik bir salam dünyasıdır ...

Aleksey Qraçov: Get Frontend

...Daimi Go proqramı, adi standart kitabxana fmt paketi və brauzer API-yə çatmaq üçün Binding Js. Println nəhayət konsol jurnalına çevriləcək və brauzer “Salam gophers” yazacaq! Bu qədər sadədir: biz GopherJS qururuq – onu brauzerdə işə salırıq – hər şey işləyir!

Hazırda nə var? Bağlamalar

Aleksey Qraçov: Get Frontend

Bütün məşhur js çərçivələri üçün bağlamalar var:

  • JQuery;
  • Angular.js;
  • Böyük verilənlərlə işləmək və işləmək üçün D3.js;
  • React.js;
  • VueJS;
  • hətta Electron üçün dəstək var (yəni biz artıq Electron-da masa üstü proqramlar yaza bilərik);
  • və ən gülməlisi isə WebGL-dir (biz 3D qrafikalı oyunlar, musiqi və bütün gözəlliklər daxil olmaqla, tam qrafik proqramlar hazırlaya bilərik);
  • və bütün məşhur javascript çərçivələrinə və kitabxanalarına bir çox digər bağlamalar.

Çərçivə

  1. Artıq xüsusi olaraq GopherJS - Vecty üçün hazırlanmış veb çərçivə var. Bu, React.js-in tam hüquqlu analoqudur, lakin GopherJS-in xüsusiyyətləri ilə yalnız Go-da işlənib hazırlanmışdır.
  2. Oyun çantaları var (sürpriz!). Ən populyar ikisini tapdım:
    • Ənqo;
    • Ebiten.

Mən sizə bunun nəyə bənzədiyinə və artıq Go-da nə yaza bildiyinizə dair bir neçə nümunə göstərəcəyəm:

Aleksey Qraçov: Get Frontend

Və ya bu seçim (3D atıcı tapa bilmədim, amma bəlkə də mövcuddur):

Aleksey Qraçov: Get Frontend

Mən nə təklif edirəm?

İndi front-end sənayesi elə bir vəziyyətdədir ki, əvvəllər Javascript-dən ağlayan bütün dillər ora tələsəcək. İndi hər şey “Veb Assambleyalar”a yığılacaq. Gophers olaraq orada layiqli yerimizi tutmaq üçün bizə nə lazımdır?

Aleksey Qraçov: Get Frontend

Go ənənəvi olaraq onun Sistem proqramlaşdırma dili olduğunu güman edirdi və UI ilə işləmək üçün praktiki olaraq heç bir kitabxana yoxdur. Bir şey var, amma yarı tərk edilmiş, yarı işlək vəziyyətdə deyil.

İndi Go-da GopherJS-də işləyəcək UI kitabxanaları yaratmaq üçün yaxşı şansdır! Nəhayət, öz çərçivənizi yaza bilərsiniz! Bu, bir çərçivə yaza biləcəyiniz vaxtdır və bu, ilklərdən biri olacaq və erkən övladlığa götürüləcək və bir ulduz olacaqsınız (əgər yaxşı bir çərçivədirsə).

Siz artıq Go ekosistemində olan bir çox müxtəlif paketləri brauzerin xüsusiyyətlərinə uyğunlaşdıra bilərsiniz (məsələn, Şablon mühərriki). Onlar artıq işləyəcək, siz rahat bağlamalar edə bilərsiniz ki, məzmunu birbaşa brauzerdə asanlıqla göstərə biləsiniz. Üstəlik, siz, məsələn, eyni koddan istifadə edərək, həm serverdə, həm də front-enddə eyni şeyi göstərə bilən bir xidmət yarada bilərsiniz - front-end tərtibatçılarının bəyəndiyi hər şeyi (yalnız indi Go-da).

Oyun yaza bilərsiniz! Sadəcə əylənmək üçün…

Bütün demək istədiyim bu idi.

Aleksey Qraçov: Get Frontend

Suallar

Sual (bundan sonra Q adlandırılacaq): – Go və ya Js ilə yazıram?

AG: – Siz rejimləri, kanalları, strukturları, yerləşdirməni yazırsınız – hər şeyi Go-da... Siz hadisəyə abunə olursunuz, orada bir funksiya keçirsiniz.

IN: – Yəni “çılpaq” Js-də yazıram?

AG: – Xeyr, siz Go-da yazırsınız və brauzer API-yə qoşulursunuz (API dəyişməyib). Mesajların kanala göndərilməsi üçün öz bağlamalarınızı yaza bilərsiniz - bu çətin deyil.

IN: - Bəs mobil?

AG: – Mən mütləq gördüm: Js işlətdiyi Cordova yaması üçün bağlamalar var. React Native-də - bilmirəm; bəlkə də var, bəlkə də yox (xüsusilə maraqlanmadım). N-go oyun mühərriki həm mobil proqramları - həm iOS, həm də Android-i dəstəkləyir.

IN: – Veb Assambleyası haqqında sual. Sıxılmaya və “ziplənməyə” baxmayaraq, getdikcə daha çox yer tutur... Biz bu şəkildə ön dünyanı daha da öldürməyəcəyikmi?

AG: – Veb Assambleyası ikili formatdır və ikili standart olaraq son buraxılışda mətndən çox ola bilməz... Siz icra müddətinə cəlb olunursunuz, lakin bu, standart Javascript kitabxanası orada olmadıqda onu çıxarmaqla eynidir, ona görə də biz bir az Lodash istifadə edin. Lodaşın nə qədər pul götürdüyünü bilmirəm.

IN: – Aydındır ki, iş vaxtından azdır...

AG: – “Saf” Javascript-də?

IN: - Bəli. Göndərməzdən əvvəl onu sıxışdırırıq...

AG: – Amma bu mətndir... Ümumiyyətlə, bir meqabayt çox görünür, amma hamısı budur (bütün iş vaxtınız var). Sonra, öz biznes məntiqinizi yazırsınız, bu da binarınızı 1% artıracaq. İndiyə qədər mən bunun cəbhəni öldürdüyünü görmürəm. Üstəlik, Web Assambleyası aydın səbəbə görə Javascript-dən daha sürətli işləyəcək - onu təhlil etmək lazım deyil.

IN: – Bu, hələ də mübahisəli məqamdır... Birmənalı mühakimə yürütmək üçün “Vasma”nın (Veb Assambleya) istinad tətbiqi hələ yoxdur. Konseptual olaraq, bəli: biz hamımız başa düşürük ki, binar daha sürətli olmalıdır, lakin eyni V8-in cari tətbiqi çox səmərəlidir.

AG: - Bəli.

IN: – Orada tərtibat həqiqətən çox gözəl işləyir və böyük bir üstünlük olacağı faktı deyil.

AG: – Veb Assambleyası da böyük adamlar tərəfindən hazırlanır.

IN: – Mənə elə gəlir ki, Veb Assambleyasını mühakimə etmək hələ də çətindir. Artıq neçə illərdir ki, söhbətlər gedir, amma hiss oluna biləcək real nailiyyətlər azdır.

AG: - Ola bilər. Görərik.

IN: – Backenddə problemimiz yoxdur... Bəlkə bu problemləri frontenddə qoyaq? Niyə ora getsinlər?

AG: – Biz cəbhəçilərdən ibarət kadr saxlamalıyıq.

Bəzi reklamlar 🙂

Bizimlə qaldığınız üçün təşəkkür edirik. Məqalələrimiz xoşunuza gəlirmi? Daha maraqlı məzmun görmək istəyirsiniz? Sifariş verməklə və ya dostlarınıza tövsiyə etməklə bizə dəstək olun, developers üçün bulud VPS 4.99 dollardan, Sizin üçün bizim tərəfimizdən icad edilmiş giriş səviyyəli serverlərin unikal analoqu: VPS (KVM) E5-2697 v3 (6 nüvəli) 10GB DDR4 480GB SSD 1Gbps haqqında 19 dollardan bütün həqiqət və ya serveri necə paylaşmaq olar? (RAID1 və RAID10, 24 nüvəyə qədər və 40 GB DDR4 ilə mövcuddur).

Dell R730xd Amsterdamdakı Equinix Tier IV məlumat mərkəzində 2 dəfə ucuzdur? Yalnız burada 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV 199$-dan başlayan qiymətlərlə Hollandiyada! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - 99 dollardan! haqqında oxuyun İnfrastruktur korporasiyasını necə qurmaq olar. bir qəpik üçün 730 avro dəyərində Dell R5xd E2650-4 v9000 serverlərinin istifadəsi ilə sinif?

Mənbə: www.habr.com

Добавить комментарий