Aleksey Grachev: Frontend

Kyiv Go Meetup 2018 yil may:

Aleksey Grachev: Frontend

Moderator: - Hammaga salom! Bu yerda bo'lganingiz uchun tashakkur! Bugun bizda ikkita rasmiy ma'ruzachi bor - Lyosha va Vanya. Vaqtimiz yetarli bo'lsa, yana ikkita bo'ladi. Birinchi ma'ruzachi - Aleksey Grachev, u bizga GopherJS haqida gapirib beradi.

Aleksey Grachev (keyingi o'rinlarda - AG): – Men Go dasturchisiman va Go-da veb-xizmatlarni yozaman. Ba'zan siz frontend bilan shug'ullanishingiz kerak, ba'zan esa unga qo'lda kirishingiz kerak. Men o'z tajribam va Go on frontend bo'yicha tadqiqotlarim haqida gapirmoqchiman.

Afsonaga ko'ra: avval nima uchun biz Go-ni frontendda ishga tushirmoqchimiz, keyin buni qanday qilish mumkinligi haqida gaplashamiz. Ikkita usul mavjud - Web Assembly va GopherJS. Keling, ushbu echimlarning holati qanday va nima qilish mumkinligini ko'rib chiqaylik.

Frontend bilan nima xato?

Frontend bilan hamma narsa yaxshi ekanligiga hamma rozimi?

Aleksey Grachev: Frontend

Sinovlar yetarli emasmi? Sekin qurishmi? Ekotizim? Yaxshi.

Frontendga kelsak, menga frontend ishlab chiqaruvchilardan biri o'z kitobida aytgan iqtibos yoqadi:

Aleksey Grachev: Frontend

Javascriptda tur tizimi mavjud emas. Endi men ish jarayonida duch kelgan muammolarni nomlayman va ular qanday hal qilinishini tushuntiraman.

Umuman tip tizimini Javasript-da tip tizimi deb atash qiyin - ob'ekt turini ko'rsatadigan qatorlar mavjud, lekin aslida bu turlarga hech qanday aloqasi yo'q. Ushbu muammo TypeScript (Javasript-ga qo'shimcha) va Flow (Javascript-dagi statik turdagi tekshiruvchi) da hal qilinadi. Aslida, frontend allaqachon Javascriptdagi yomon turdagi tizim muammosini hal qilish darajasiga yetdi.

Aleksey Grachev: Frontend

Brauzerda standart kutubxona yo'q - brauzerlarda ba'zi o'rnatilgan ob'ektlar va "sehrli" funktsiyalar mavjud. Ammo Javascriptda standart kutubxona yo'q. Bu muammo allaqachon jQuery tomonidan bir marta hal qilingan (hamma jQuery-dan barcha prototiplar, yordamchilar, ishlash uchun zarur bo'lgan funktsiyalar bilan foydalangan). Endi hamma Lodashdan foydalanadi:

Aleksey Grachev: Frontend

Qayta qo'ng'iroq qiling. O'ylaymanki, har bir kishi taxminan 5 yil oldin Javascript kodini ko'rgan va bu qayta qo'ng'iroqlarning aql bovar qilmaydigan murakkabligining "noodle"siga o'xshardi. Endi bu muammo hal qilindi (ES-15 yoki ES-16 chiqarilishi bilan), Javascript-ga va'dalar qo'shildi va har bir kishi bir muncha vaqt osonroq nafas olishi mumkin.

Aleksey Grachev: Frontend

Promice jahannami kelguniga qadar ... Men front-end sanoati qanday boshqarayotganini bilmayman, lekin ular doimo o'zlarini qandaydir g'alati o'rmonga olib boradilar. Va'dalar bilan do'zax qilishga ham muvaffaq bo'ldik. Keyin biz bu muammoni yangi primitiv - async/await qo'shish orqali hal qildik:

Aleksey Grachev: Frontend

Asinxroniya bilan bog'liq muammo hal qilindi. Async/await - bu turli tillarda juda mashhur primitiv. Python va boshqalar shunday yondashuvga ega - bu juda yaxshi. Muammo hal.

Qaysi muammo hal qilinmayapti? Ramkalarning eksponent ravishda ortib borayotgan murakkabligi, ekotizim va dasturlarning o'zi murakkabligi.

Aleksey Grachev: Frontend

  • Javascript sintaksisi biroz g'alati. Biz hammamiz massiv va ob'ektni qo'shish va boshqa hazillar bilan bog'liq muammolarni bilamiz.
  • Javascript ko'p paradigmadir. Bu, ayniqsa, ekotizim juda katta bo'lgan paytda, ayniqsa dolzarb tizimdir:
    • har kim turli uslublarda yozadi - kimdir tuzilmaviy yozadi, kimdir funktsional yozadi, turli ishlab chiquvchilar boshqacha yozadilar;
    • turli paketlardan foydalanganda, turli xil paradigmalardan;
    • Javasript-da funktsional dasturlashda juda ko'p "qiziq" mavjud - rambda kutubxonasi paydo bo'ldi va endi bu kutubxonada yozilgan dasturlarni hech kim o'qiy olmaydi.

  • Bularning barchasi ekotizimga katta ta'sir ko'rsatadi va u aql bovar qilmaydigan darajada o'sdi. Paketlar bir-biriga mos kelmaydi: ba'zilari va'dalarga asoslangan, ba'zilari async/awaitga asoslangan, ba'zilari esa qayta qo'ng'iroqlarga asoslangan. Ular ham turli paradigmalarda yozadilar!
  • Bu loyihani saqlashni qiyinlashtiradi. Agar kodni o'qiy olmasangiz, xato topish qiyin.

Web Assambleyasi nima?

Mozilla Foundation va boshqa bir qator kompaniyalarning jasur yigitlari Web Assembly kabi narsani o'ylab topishdi. Nima bu?

Aleksey Grachev: Frontend

  • Bu ikkilik formatni qo'llab-quvvatlaydigan brauzerga o'rnatilgan virtual mashina.
  • Ikkilik dasturlar u erga etib boradi va deyarli mahalliy tarzda bajariladi, ya'ni brauzer har safar javascript kodining barcha "noodle"larini tahlil qilishi shart emas.
  • Barcha brauzerlar qo'llab-quvvatlashni e'lon qildi.
  • Bu bayt kod bo'lgani uchun siz istalgan til uchun kompilyator yozishingiz mumkin.
  • To'rtta asosiy brauzer allaqachon Web Assambleyasini qo'llab-quvvatlaydi.
  • Tez orada Go'da mahalliy yordam kutamiz. Ushbu yangi arxitektura allaqachon qo'shilgan: GOARCH=wasm GOOS=js (tez orada). Hozircha, men tushunganimdek, u funktsional emas, lekin u albatta Go'da bo'ladi degan bayonot bor.

Endi nima qilish kerak? GopherJS

Bizda Web Assembly-ni qo'llab-quvvatlamasak ham, GopherJS kabi transpiler mavjud.

Aleksey Grachev: Frontend

  • Go kodi "sof" Javascriptga ko'chiriladi.
  • Barcha brauzerlarda ishlaydi - faqat zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadigan yangi xususiyatlar yo'q (bu Vanilla JS, har qanday narsada ishlaydi).
  • Go-da mavjud bo'lgan deyarli hamma narsa, shu jumladan gorutinlar va kanallar... biz sevadigan va biladigan barcha narsalar uchun yordam mavjud.
  • Deyarli butun standart kutubxona qo'llab-quvvatlanadi, brauzerda qo'llab-quvvatlash mantiqiy bo'lmagan paketlar bundan mustasno: tizimli qo'ng'iroqlar, tarmoq shovqinlari (net/http mijozi mavjud, lekin server yo'q va mijoz XMLHttpRequest orqali emulyatsiya qilingan). Umuman olganda, butun standart kutubxona mavjud - bu brauzerda, mana Go'ning stdlib-i, biz uni yaxshi ko'ramiz.
  • Go'dagi butun paket ekotizimini, barcha uchinchi tomon echimlarini (shablonlar va boshqalarni) GopherJS yordamida kompilyatsiya qilish va brauzerda ishga tushirish mumkin.

GopherJS ni olish juda oson – bu oddiy Go paketi. Biz olish uchun boramiz va dasturni yaratish uchun bizda GopherJS buyrug'i bor:

Aleksey Grachev: Frontend

Bu juda kichik salom dunyo...

Aleksey Grachev: Frontend

...Oddiy Go dasturi, oddiy standart kutubxona fmt to'plami va brauzer API-ga kirish uchun Binding Js. Println oxir-oqibat konsol jurnaliga aylantiriladi va brauzer "Salom gophers" deb yozadi! Bu juda oddiy: biz GopherJS quramiz - biz uni brauzerda ishga tushiramiz - hamma narsa ishlaydi!

Ayni paytda sizda nima bor? Bog'lashlar

Aleksey Grachev: Frontend

Barcha mashhur JS ramkalar uchun ulanishlar mavjud:

  • JQuery;
  • Angular.js;
  • Katta ma'lumotlar bilan ishlash va chizish uchun D3.js;
  • React.js;
  • VueJS;
  • hatto Electron-ni qo'llab-quvvatlash mavjud (ya'ni biz allaqachon Electron-da ish stoli ilovalarini yozishimiz mumkin);
  • va eng kulgili narsa WebGL (biz to'liq grafik ilovalar, jumladan, 3D grafika, musiqa va barcha yaxshi narsalar bilan o'yinlar yaratishimiz mumkin);
  • va barcha mashhur javascript ramkalari va kutubxonalariga boshqa ko'plab bog'lashlar.

Doiraviy

  1. GopherJS - Vecty uchun maxsus ishlab chiqilgan veb-ramka mavjud. Bu React.js ning to'liq huquqli analogidir, lekin faqat Go'da, GopherJS ning o'ziga xos xususiyatlari bilan ishlab chiqilgan.
  2. O'yin sumkalari bor (syurpriz!). Men ikkita eng mashhurini topdim:
    • Engo;
    • Ebiten.

Men sizga uning qanday ko'rinishi va Go'da nima yozishingiz mumkinligi haqida bir nechta misollarni ko'rsataman:

Aleksey Grachev: Frontend

Yoki bu variant (men 3D shooterni topa olmadim, lekin u mavjud bo'lishi mumkin):

Aleksey Grachev: Frontend

Men nima taklif qilaman?

Endi front-end sanoati shunday holatdaki, ilgari Javascriptdan yig'lagan barcha tillar u erga shoshilishadi. Endi hamma narsa "Veb yig'ilishlar" ga to'planadi. Gophers sifatida u erda munosib o'rnimizni egallashimiz uchun nima kerak?

Aleksey Grachev: Frontend

Go an'anaviy ravishda bu tizim dasturlash tili deb taxmin qilgan va UI bilan ishlash uchun kutubxonalar deyarli yo'q. Biror narsa bor, lekin u yarmi tashlab qo'yilgan, yarmi ishlamaydi.

Va endi Go'da GopherJS da ishlaydigan UI kutubxonalarini yaratish uchun yaxshi imkoniyat! Siz nihoyat o'zingizning ramkangizni yozishingiz mumkin! Bu siz ramka yozishingiz mumkin bo'lgan vaqt va u birinchilardan biri bo'ladi va erta qabul qilinadi va siz yulduz bo'lasiz (agar u yaxshi ramka bo'lsa).

Go ekotizimida mavjud bo'lgan juda ko'p turli xil paketlarni brauzerning o'ziga xos xususiyatlariga moslashtirishingiz mumkin (masalan, Shablon mexanizmi). Ular allaqachon ishlaydi, siz tarkibni to'g'ridan-to'g'ri brauzerda osongina ko'rsatishingiz uchun qulay bog'lanishlarni amalga oshirishingiz mumkin. Bundan tashqari, siz, masalan, serverda ham, front-endda ham xuddi shu kodni ishlatib, bir xil narsani ko'rsatishi mumkin bo'lgan xizmatni yaratishingiz mumkin - front-end dasturchilarga yoqadigan hamma narsa (faqat Go'da).

Siz o'yin yozishingiz mumkin! Faqat dam olish uchun…

Aytmoqchi bo‘lganim shu edi.

Aleksey Grachev: Frontend

Sizning savollaringiz

Savol (keyingi o'rinlarda Q deb yuritiladi): – Go yoki Js da yozamanmi?

AG: – Siz tartiblarni, kanallarni, tuzilmalarni, o‘rnatishni yozasiz – hammasi Go‘da... Siz biror hodisaga obuna bo‘lasiz, u yerda funksiyani o‘tkazasiz.

Savol: – Demak, “yalang‘och” Jsda yozaman?

AG: - Yo'q, siz Go'da bo'lgani kabi yozasiz va brauzer API-ga ulanasiz (API o'zgarmagan). Xabarlar kanalga yuborilishi uchun siz o'zingizning bog'lanishlaringizni yozishingiz mumkin - bu qiyin emas.

Savol: - Mobil haqida nima deyish mumkin?

AG: - Men aniq ko'rdim: Js ishlaydigan Cordova patchi uchun bog'lanishlar mavjud. React Native-da - bilmayman; ehtimol bor, balki yo'q (Men ayniqsa qiziqmasdim). N-go o'yin mexanizmi ikkala mobil ilovalarni ham qo'llab-quvvatlaydi - ham iOS, ham Android.

Savol: – Veb Assambleya haqida savol. Siqilish va "ziplash" ga qaramasdan, tobora ko'proq joy egallanmoqda ... Biz oldingi dunyoni shu tarzda o'ldirmaymizmi?

AG: – Web Assembly ikkilik format bo‘lib, ikkilik format sukut bo‘yicha yakuniy versiyada matndan ko‘ra ko‘proq bo‘lishi mumkin emas... Siz ish vaqtiga qiziqasiz, lekin bu standart Javascript kutubxonasi mavjud bo‘lmaganda uni tortib olish bilan bir xil, shuning uchun biz bir oz Lodash foydalaning. Lodash qancha oladi, bilmayman.

Savol: - Shubhasiz, ish vaqtidan kamroq ...

AG: – “Sof” Javascriptdami?

Savol: - Ha. Biz uni jo'natishdan oldin siqamiz...

AG: - Lekin bu matn ... Umuman olganda, megabayt juda ko'p ko'rinadi, ammo bu hammasi (sizda butun ish vaqti bor). Keyinchalik, siz o'zingizning biznes mantiqingizni yozasiz, bu sizning binaringizni 1% ga oshiradi. Hozircha men bu frontendni o'ldiradiganini ko'rmayapman. Bundan tashqari, Web Assambleyasi aniq sabablarga ko'ra Javascriptdan tezroq ishlaydi - uni tahlil qilish shart emas.

Savol: – Bu hali ham munozarali masala... “Vasma” (Veb Assambleya) ga hali hech qanday havola yo'q. Kontseptual jihatdan, ha: biz hammamiz ikkilik tezroq bo'lishi kerakligini tushunamiz, ammo ayni V8 ning joriy tatbiq etilishi juda samarali.

AG: - Ha.

Savol: - U erda kompilyatsiya juda zo'r ishlaydi va bu katta ustunlik bo'lishi haqiqat emas.

AG: – Veb Assambleyani ham katta yigitlar qiladi.

Savol: - Menimcha, Web Assambleyani hukm qilish hali ham qiyin. Ko'p yillardan buyon suhbatlar bo'ldi, lekin his qilish mumkin bo'lgan haqiqiy yutuqlar kam.

AG: - Balki. Biz ko'ramiz.

Savol: - Bizda orqa tomonda muammolar yo'q ... Balki biz bu muammolarni frontendda qoldirishimiz kerakmi? Nega u erga boring?

AG: - Biz oldingi safdagi ishchilar shtatini saqlashimiz kerak.

Ba'zi reklamalar 🙂

Biz bilan qolganingiz uchun tashakkur. Bizning maqolalarimiz sizga yoqdimi? Ko'proq qiziqarli tarkibni ko'rishni xohlaysizmi? Buyurtma berish yoki do'stlaringizga tavsiya qilish orqali bizni qo'llab-quvvatlang, 4.99 dollardan boshlab ishlab chiquvchilar uchun bulutli VPS, Siz uchun biz tomonidan ixtiro qilingan boshlang'ich darajadagi serverlarning noyob analogi: VPS (KVM) E5-2697 v3 (6 yadroli) 10GB DDR4 480GB SSD 1Gbps 19 dollardan yoki serverni qanday almashish haqida butun haqiqat? (RAID1 va RAID10, 24 tagacha yadro va 40 Gb gacha DDR4 bilan mavjud).

Amsterdamdagi Equinix Tier IV ma'lumotlar markazida Dell R730xd 2 baravar arzonmi? Faqat shu yerda 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 televizor 199 dollardan Gollandiyada! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - 99 dollardan! Haqida o'qing Infratuzilma korporatsiyasini qanday qurish kerak. bir tiyinga 730 evroga teng Dell R5xd E2650-4 v9000 serverlaridan foydalanish bilan sinf?

Manba: www.habr.com

a Izoh qo'shish