Алексей Грачев: Frontend

Kyiv Go Meetup 2018 жылдың мамыры:

Алексей Грачев: Frontend

Модератор: - Бәріңе сәлем! Осы жерде болғаныңызға рахмет! Бүгін бізде екі ресми спикер бар - Лёша мен Ваня. Уақытымыз жетсе тағы екеуі болады. Бірінші спикер - Алексей Грачев, ол бізге GopherJS туралы айтып береді.

Алексей Грачев (бұдан әрі – AG): – Мен Go әзірлеушісімін және Go бағдарламасында веб-қызметтерді жазамын. Кейде фронтпен жұмыс істеуге тура келеді, кейде оған қолмен кіру керек. Мен Go on frontend бойынша тәжірибем мен зерттеулерім туралы айтқым келеді.

Аңыз мынада: алдымен біз Go қолданбасын неліктен фронтенд іске қосқымыз келетіні туралы сөйлесеміз, содан кейін мұны қалай жасауға болатыны туралы сөйлесеміз. Екі жол бар - Web Assembly және GopherJS. Осы шешімдердің күйі қандай және не істеуге болатынын көрейік.

Фронтпен не болды?

Фронтпен бәрі жақсы дегенмен бәрі келіседі ме?

Алексей Грачев: Frontend

Тесттер жеткіліксіз бе? Баяу құрылыс? Экожүйе? Жақсы.

Фронтпен байланысты, маған фронтенді әзірлеушілердің бірі өз кітабында айтқан дәйексөз ұнады:

Алексей Грачев: Frontend

Javascript-те типтік жүйе жоқ. Енді мен жұмыс барысында кездескен мәселелерді атап, олардың қалай шешілетінін түсіндіремін.

Жалпы типтік жүйені Javasript-те типтік жүйе деп атауға болмайды - нысанның түрін көрсететін жолдар бар, бірақ іс жүзінде бұл түрлерге ешқандай қатысы жоқ. Бұл мәселе TypeScript (Javasript қосымшасы) және Flow (Javascript тіліндегі статикалық типті тексеру құралы) арқылы шешілген. Шындығында, frontend Javascript-те нашар типті жүйе мәселесін шешуге жетті.

Алексей Грачев: Frontend

Браузерде стандартты кітапхана жоқ - браузерлерде кейбір кірістірілген нысандар мен «сиқырлы» функциялар бар. Бірақ Javascript-те стандартты кітапхана жоқ. Бұл мәселе jQuery арқылы бір рет шешілді (барлығы жұмыс істеу үшін қажет барлық прототиптермен, көмекшілермен, функциялармен jQuery пайдаланды). Енді барлығы Lodash пайдаланады:

Алексей Грачев: Frontend

Қайта қоңырау шалу тозақ. Менің ойымша, барлығы Javascript кодын шамамен 5 жыл бұрын көрді және ол кері қоңыраулардың керемет күрделілігінің «кеспесі» сияқты көрінді. Енді бұл мәселе шешілді (ES-15 немесе ES-16 шығарылымымен), Javascript-ке уәделер қосылды және барлығы біраз уақытқа жеңіл дем алады.

Алексей Грачев: Frontend

Promice тозағы келгенше ... Мен алдыңғы қатарлы индустрияның қалай басқаратынын білмеймін, бірақ олар әрқашан біртүрлі джунглиге барады. Біз де уәделер бойынша тозақ жасай алдық. Содан кейін біз бұл мәселені жаңа примитив қосу арқылы шештік - async/await:

Алексей Грачев: Frontend

Асинхрония мәселесі шешілді. Async/await - бұл әртүрлі тілдердегі өте танымал примитив. Python және басқаларында бұл тәсіл бар - бұл өте жақсы. Мәселе шешілді.

Қандай мәселе шешілмейді? Фреймворктардың экспоненциалды түрде өсіп келе жатқан күрделілігі, экожүйенің және бағдарламалардың күрделілігі.

Алексей Грачев: Frontend

  • Javascript синтаксисі біраз оғаш. Массив пен нысанды және басқа да әзілдерді қосу мәселелері бәрімізге белгілі.
  • Javascript – көп парадигма. Бұл экожүйе өте үлкен болған кезде, әсіресе өзекті жүйе:
    • әркім әртүрлі стильде жазады - кейбіреулер құрылымдық түрде жазады, кейбіреулер функционалды түрде жазады, әртүрлі әзірлеушілер әртүрлі жолдармен жазады;
    • әртүрлі бумаларды пайдаланған кезде әртүрлі бумалардан, әртүрлі парадигмалардан;
    • Javasript-те функционалдық бағдарламалаудың көптеген «қызықтары» бар - rambda кітапханасы пайда болды және қазір бұл кітапханада жазылған бағдарламаларды ешкім оқи алмайды.

  • Мұның бәрі экожүйеге үлкен әсер етеді және ол керемет өсті. Пакеттер бір-бірімен үйлеспейді: кейбіреулері уәделерге негізделген, кейбіреулері асинхронды/күтуге негізделген, кейбіреулері кері қоңырауларға негізделген. Олар да әртүрлі парадигмаларда жазады!
  • Бұл жобаны қолдауды қиындатады. Кодты оқи алмасаңыз, қатені табу қиын.

Web Assembly дегеніміз не?

Mozilla Foundation және басқа да бірқатар компаниялардың батыл жігіттері Web Assembly сияқты нәрсені ойлап тапты. Бұл не?

Алексей Грачев: Frontend

  • Бұл екілік пішімді қолдайтын шолғышқа орнатылған виртуалды машина.
  • Екілік бағдарламалар сонда жетеді және жергілікті түрде орындалады, яғни браузерге JavaScript кодының барлық «кеспелерін» әр уақытта талдаудың қажеті жоқ.
  • Барлық браузерлер қолдауды жариялады.
  • Бұл байт код болғандықтан, кез келген тілге компилятор жазуға болады.
  • Төрт негізгі браузер қазірдің өзінде Web Assembly қолдауымен жеткізіледі.
  • Жақында Go қолданбасында жергілікті қолдау күтеміз. Бұл жаңа архитектура қосылып қойған: GOARCH=wasm GOOS=js (жақында). Әзірге, менің түсінуімше, ол функционалды емес, бірақ ол Go-да міндетті түрде болады деген мәлімдеме бар.

Енді не істеу керек? GopherJS

Бізде Web Assembly қолдауы болмаса да, GopherJS сияқты транспилер бар.

Алексей Грачев: Frontend

  • Go коды «таза» Javascript-ке көшіріледі.
  • Барлық браузерлерде жұмыс істейді - тек заманауи браузерлер қолдайтын жаңа мүмкіндіктер жоқ (бұл кез келген нәрседе жұмыс істейтін Vanilla JS).
  • Go қолданбасының барлығына дерлік қолдау бар, соның ішінде горутиндер мен арналар... біз жақсы көретін және білетін барлық нәрсе.
  • Браузерде қолдау көрсету мағынасы жоқ пакеттерді қоспағанда, бүкіл стандартты кітапханаға дерлік қолдау көрсетіледі: syscall, желілік өзара әрекеттесу (net/http клиенті бар, бірақ сервер жоқ және клиент XMLHttpRequest арқылы эмуляцияланған). Жалпы алғанда, стандартты кітапхананың барлығы қол жетімді - міне, ол браузерде, міне, біз жақсы көретін Go stdlib.
  • Go бағдарламасындағы бүкіл пакеттік экожүйені, барлық үшінші тарап шешімдерін (үлгілеу, т.б.) GopherJS көмегімен құрастыруға және браузерде іске қосуға болады.

GopherJS алу өте оңай – бұл жай ғана Go пакеті. Біз алуға барамыз және бізде қосымшаны құру үшін GopherJS пәрмені бар:

Алексей Грачев: Frontend

Бұл кішкентай сәлем әлемі...

Алексей Грачев: Frontend

...Кәдімгі Go бағдарламасы, кәдімгі стандартты кітапхана fmt бумасы және браузер API интерфейсіне жету үшін Binding Js. Println ақырында консоль журналына түрлендіріледі және браузер «Hello gophers» деп жазады! Бұл қарапайым: біз GopherJS құрастырамыз – оны браузерде іске қосамыз – бәрі жұмыс істейді!

Қазіргі уақытта сізде не бар? Байланыстар

Алексей Грачев: Frontend

Барлық танымал JS фреймворктері үшін байланыстырулар бар:

  • JQuery;
  • Angular.js;
  • Үлкен деректермен сызба құру және жұмыс істеу үшін D3.js;
  • React.js;
  • VueJS;
  • тіпті Electron үшін қолдау бар (яғни біз Electron-да жұмыс үстелі қосымшаларын жаза аламыз);
  • және ең қызықтысы - WebGL (біз толық графикалық қосымшаларды, соның ішінде 3D графикасы бар ойындарды, музыканы және барлық жақсы нәрселерді жасай аламыз);
  • және барлық танымал JavaScript фреймворктары мен кітапханаларына көптеген басқа байланыстырулар.

негіздемелік

  1. GopherJS - Vecty үшін арнайы әзірленген веб фреймворк бар. Бұл React.js толыққанды аналогы, бірақ GopherJS ерекшеліктерімен тек Go бағдарламасында әзірленген.
  2. Ойын сөмкелері бар (тосын сый!). Мен ең танымал екеуін таптым:
    • Энго;
    • Эбитен.

Мен сізге оның қалай көрінетінінің және Go қолданбасында не жазуға болатынының бірнеше мысалын көрсетемін:

Алексей Грачев: Frontend

Немесе бұл опция (3D түсіру құралын таба алмадым, бірақ ол бар болуы мүмкін):

Алексей Грачев: Frontend

Мен не ұсынамын?

Енді алдыңғы қатарлы индустрия Javascript-тен бұрын айқайлаған барлық тілдер сол жерге асығатын күйде. Енді барлығы «Веб-ассамблеяларға» жинақталады. Гоферлер ретінде ол жерде лайықты орын алу үшін бізге не қажет?

Алексей Грачев: Frontend

Go дәстүрлі түрде бұл жүйелік бағдарламалау тілі деп есептеді және UI-мен жұмыс істеуге арналған кітапханалар іс жүзінде жоқ. Бірдеңе бар, бірақ ол жартылай тастанды, жартылай жұмыс істемейді.

Енді GopherJS жүйесінде жұмыс істейтін Go бағдарламасында UI кітапханаларын жасаудың жақсы мүмкіндігі! Ақырында сіз өзіңіздің шеңберіңізді жаза аласыз! Бұл фреймворк жазуға болатын уақыт, және ол алғашқылардың бірі болып, ерте қабылданады және сіз жұлдыз боласыз (егер ол жақсы жақтау болса).

Сіз Go экожүйесінде бұрыннан бар көптеген әртүрлі пакеттерді шолғыштың ерекшеліктеріне бейімдей аласыз (мысалы, Үлгі механизмі). Олар қазірдің өзінде жұмыс істейді, мазмұнды тікелей шолғышта оңай көрсете алатындай ыңғайлы байлаулар жасай аласыз. Сонымен қатар, сіз, мысалы, серверде және алдыңғы жағында бірдей нәрсені көрсете алатын қызмет жасай аласыз, сол кодты пайдалана аласыз - фронтальды әзірлеушілерге ұнайтын барлық нәрсе (тек қазір Go-да).

Сіз ойын жаза аласыз! Тек көңіл көтеру үшін…

Менің айтқым келгені осы болды.

Алексей Грачев: Frontend

Сіздің сұрақтарыңыз

Сұрақ (бұдан әрі – Q): – Мен Go немесе Js тілінде жазамын ба?

AG: – Сіз режимдерді, арналарды, құрылымдарды, ендіруді – барлығын Go бағдарламасында жазасыз... Оқиғаға жазыласыз, сол жерде функцияны өткізесіз.

Q: – Сонда мен «жалаңаш» Js деп жазамын ба?

AG: – Жоқ, сіз Go бағдарламасындағыдай жазасыз және API браузеріне қосыласыз (API өзгерген жоқ). Хабарлар арнаға жіберілу үшін сіз өзіңіздің байланыстыруларыңызды жаза аласыз - бұл қиын емес.

Q: – Ұялы телефон ше?

AG: – Мен анық көрдім: Js іске қосатын Cordova патчына арналған байлаулар бар. React Native бағдарламасында - білмеймін; мүмкін бар, мүмкін жоқ (мені ерекше қызықтырған жоқпын). N-go ойын қозғалтқышы мобильді қолданбалардың екеуін де қолдайды - iOS және Android екеуі де.

Q: – Веб-ассамблея туралы сұрақ. Сығымдау мен «сығуға» қарамастан, барған сайын көбірек орын алып жатыр... Біз алдыңғы әлемді осылайша өлтірмейміз бе?

AG: – Web Assembly – екілік пішім және әдепкі бойынша екілік соңғы шығарылымда мәтіннен артық бола алмайды... Сіз орындалу уақытына тартылдыңыз, бірақ бұл стандартты Javascript кітапханасы жоқ кезде оны сүйреп апарумен бірдей, сондықтан біз біраз Lodash пайдаланыңыз. Лодаштың қанша алатынын білмеймін.

Q: – Жұмыс уақытынан аз екені анық...

AG: – «Таза» Javascript-те ме?

Q: - Иә. Жібермес бұрын оны қысамыз...

AG: – Бірақ бұл мәтін... Жалпы, мегабайт көп сияқты көрінеді, бірақ бұл бәрі (сізде толық жұмыс уақыты бар). Әрі қарай, сіз өзіңіздің бизнес логикаңызды жазасыз, ол екілік мәнді 1% арттырады. Әзірге мен бұл фронтенді өлтіретінін көрмеймін. Сонымен қатар, Web Assembly Javascript-ке қарағанда тезірек жұмыс істейді, себебі анық - оны талдаудың қажеті жоқ.

Q: – Бұл әлі де даулы мәселе... Біржақты пікір айту үшін «Vasma» (Веб-Ассамблея) әзірге ешқандай анықтамалық енгізу жоқ. Тұжырымдама бойынша, иә: біз бәріміз екілік жылдамырақ болуы керек екенін түсінеміз, бірақ дәл сол V8-нің қазіргі орындалуы өте тиімді.

AG: - Ия.

Q: – Онда құрастыру өте керемет жұмыс істейді және үлкен артықшылық болатыны шындық емес.

AG: – Веб ассамблеяны да ірі жігіттер жасайды.

Q: – Менің ойымша, веб-ассамблеяға баға беру әлі де қиын сияқты. Көп жылдар бойы әңгіме болды, бірақ сезілетін нақты жетістіктер аз.

AG: - Мүмкін. Біз көреміз.

Q: – Бізде серверде проблемалар жоқ... Мүмкін бұл проблемаларды фронтендте қалдыру керек пе? Онда неге бару керек?

AG: – Біз алдыңғы қатардағы жұмысшылар штатын ұстауымыз керек.

Кейбір жарнамалар 🙂

Бізбен бірге болғандарыңызға рахмет. Сізге біздің мақалалар ұнайды ма? Қызықты мазмұнды көргіңіз келе ме? Тапсырыс беру немесе достарыңызға ұсыну арқылы бізге қолдау көрсетіңіз, әзірлеушілерге арналған бұлтты VPS $4.99, Сіз үшін біз ойлап тапқан бастапқы деңгейдегі серверлердің бірегей аналогы: VPS (KVM) E5-2697 v3 (6 ядросы) 10 ГБ DDR4 480 ГБ SSD 1 Гбит/с 19 доллардан немесе серверді қалай бөлісуге болатыны туралы барлық шындық? (RAID1 және RAID10, 24 ядроға дейін және 40 ГБ DDR4 дейін қол жетімді).

Dell R730xd Амстердамдағы Equinix Tier IV деректер орталығында 2 есе арзан ба? Тек осында 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6 ГГц 14C 64 ГБ DDR4 4x960 ГБ SSD 1 Гбит/с 100 теледидар 199 доллардан бастап Нидерландыда! Dell R420 - 2x E5-2430 2.2 ГГц 6C 128 ГБ DDR3 2x960 ГБ SSD 1 Гбит/с 100 ТБ - 99 доллардан бастап! туралы оқыңыз Инфрақұрылымдық корпорацияны қалай құруға болады. бір тиынға 730 еуро тұратын Dell R5xd E2650-4 v9000 серверлерін қолданатын класс?

Ақпарат көзі: www.habr.com

пікір қалдыру