Alexey Grachev: Go Frontend

Kyiv Go Meetup මැයි 2018:

නායකත්වය: - ආයුබෝවන් සියල්ලටම! මෙහි සිටීම ගැන ඔබට ස්තුතියි! අද අපට නිල කථිකයන් දෙදෙනෙකු සිටී - ලියෝෂා සහ වන්යා. අපිට වෙලාවක් තිබ්බොත් තව දෙන්නෙක් ඉන්නවා. පළමු කථිකයා Alexey Grachev ය, ​​ඔහු GopherJS ගැන අපට කියනු ඇත.

ඇලෙක්සි ග්‍රචෙව් (මින් ඉදිරියට - AG): – මම Go සංවර්ධකයෙක් වන අතර, මම Go හි වෙබ් සේවා ලියන්නෙමි. සමහර විට ඔබට ඉදිරිපස කොටස සමඟ කටයුතු කිරීමට සිදු වේ, සමහර විට ඔබට එය අතින් ඇතුල් විය යුතුය. මට Go on the frontend ගැන මගේ අත්දැකීම් සහ පර්යේෂණ ගැන කතා කිරීමට අවශ්‍යයි.

පුරාවෘත්තය මෙයයි: පළමුව අපි ඉදිරිපසින් Go ධාවනය කිරීමට අවශ්ය වන්නේ මන්දැයි අපි කතා කරමු, පසුව අපි මෙය කළ හැකි ආකාරය ගැන කතා කරමු. ක්‍රම දෙකක් තිබේ - වෙබ් එකලස් කිරීම සහ GopherJS. අපි බලමු මේ විසඳුම්වල තත්ත්‍වය මොකක්ද සහ මොනවද කරන්න පුළුවන් කියලා.

ඉදිරිපස ඇති වැරැද්ද කුමක්ද?

ඉදිරිපස සමඟ සියල්ල හොඳින් බව සියලු දෙනා එකඟද?

ප්‍රමාණවත් පරීක්ෂණ නොමැතිද? මන්දගාමී ගොඩනැගීම? පරිසර පද්ධතිය? හොඳයි.

ඉදිරිපස සම්බන්ධයෙන්, එක් ඉදිරිපස සංවර්ධකයෙකු ඔහුගේ පොතේ පැවසූ උපුටා දැක්වීමට මම කැමතියි:

Javascript වලට ටයිප් සිස්ටම් එකක් නෑ. දැන් මම මගේ කාර්යයේ දී මා මුහුණ දුන් ගැටළු නම් කර ඒවා විසඳන ආකාරය පැහැදිලි කරමි.

සාමාන්‍යයෙන් ටයිප් පද්ධතිය ජාවාස්‍රිප්ට් හි වර්ග පද්ධතියක් ලෙස හැඳින්විය නොහැක - වස්තුවේ වර්ගය දැක්වෙන රේඛා ඇත, නමුත් ඇත්ත වශයෙන්ම මෙය වර්ග සමඟ කිසිදු සම්බන්ධයක් නැත. මෙම ගැටළුව ටයිප්ස්ක්‍රිප්ට් (ජාවාස්‍රිප්ට් වෙත ඇඩෝනයක්) සහ ෆ්ලෝ (ජාවාස්ක්‍රිප්ට් හි ස්ථිතික ආකාරයේ පරීක්ෂකයක්) තුළ විසඳා ඇත. ඇත්ත වශයෙන්ම, ඉදිරිපස කොටස දැනටමත් Javascript හි ඇති නරක ආකාරයේ පද්ධතියක ගැටළුව විසඳීමේ ස්ථානයට පැමිණ ඇත.

බ්‍රවුසරයේ සම්මත පුස්තකාලයක් නොමැත - බ්‍රව්සර්වල සමහර බිල්ට් වස්තු සහ “මැජික්” කාර්යයන් ඇත. නමුත් Javascript හි එවැනි සම්මත පුස්තකාලයක් නොමැත. මෙම ගැටළුව දැනටමත් jQuery විසින් එක් වරක් විසඳා ඇත (සියලුම මූලාකෘති, උපකාරකයින්, වැඩ කිරීමට අවශ්ය වූ කාර්යයන් සමඟ සෑම කෙනෙකුම jQuery භාවිතා කළේය). දැන් හැමෝම Lodash භාවිතා කරයි:

නැවත අමතන්න අපාය. මම හිතන්නේ හැමෝම Javascript කේතය මීට වසර 5 කට පමණ පෙර දැක ඇති අතර, එය ආපසු ඇමතුම්වල ඇදහිය නොහැකි සංකීර්ණත්වයේ "නූඩ්ල්" එකක් මෙන් දිස් විය. දැන් මෙම ගැටළුව විසඳා ඇත (ES-15 හෝ ES-16 නිකුත් කිරීමත් සමඟ), Javascript වෙත පොරොන්දු එකතු කර ඇති අතර සෑම කෙනෙකුටම ටික වේලාවක් පහසුවෙන් හුස්ම ගත හැකිය.

Promice hell පැමිණෙන තුරු ... ඉදිරිපස කර්මාන්තය කළමනාකරණය කරන්නේ කෙසේදැයි මම නොදනිමි, නමුත් ඔවුන් සෑම විටම කිසියම් අමුතු වනාන්තරයකට තල්ලු කරති. අපිත් පොරොන්දු පිට මගුලක් කරගත්තා. පසුව අපි නව ප්‍රාථමිකයක් එකතු කිරීමෙන් මෙම ගැටළුව විසඳා ගත්තෙමු - async/await:

අසමමුහුර්තතාවයේ ගැටළුව විසඳනු ලැබේ. Async/await විවිධ භාෂාවලින් තරමක් ජනප්‍රිය ප්‍රාථමිකයකි. පයිතන් සහ අනෙකුත් අයට මෙම ප්‍රවේශය ඇත - එය ඉතා හොඳයි. ගැටලුව විසඳා ඇත.

නොවිසඳෙන ප්‍රශ්නය කුමක්ද? රාමු වල ඝාතීය ලෙස වැඩිවන සංකීර්ණත්වය, පරිසර පද්ධතියේ සහ වැඩසටහන් වල සංකීර්ණත්වය.

• Javascript syntax ටිකක් අමුතුයි. අපි හැමෝම දන්නවා අරාවක් සහ වස්තුවක් සහ වෙනත් විහිළු එකතු කිරීමේ ගැටළු.
• Javascript යනු බහු සුසමාදර්ශයකි. පරිසර පද්ධතිය ඉතා විශාල වන විට මෙය විශේෂයෙන් තදබල පද්ධතියකි:
  • සෑම කෙනෙකුම විවිධ මෝස්තර වලින් ලියයි - සමහරු ව්‍යුහාත්මකව ලියයි, සමහරු ක්‍රියාකාරීව ලියයි, විවිධ සංවර්ධකයින් විවිධ ආකාරවලින් ලියයි;
  • ඔබ විවිධ පැකේජ භාවිතා කරන විට විවිධ පැකේජ වලින්, විවිධ සුසමාදර්ශයන්;
  • Javasript හි ක්‍රියාකාරී ක්‍රමලේඛනය සමඟ “විනෝදය” ගොඩක් තිබේ - rambda පුස්තකාලය දර්ශනය වූ අතර දැන් කිසිවෙකුට මෙම පුස්තකාලයේ ලියා ඇති වැඩසටහන් කියවිය නොහැක.

• මේ සියල්ල පරිසර පද්ධතියට විශාල බලපෑමක් ඇති කරන අතර එය ඇදහිය නොහැකි ලෙස වර්ධනය වී ඇත. පැකේජ එකිනෙක නොගැලපේ: සමහරක් පොරොන්දු මත පදනම් වේ, සමහරක් async/wait මත පදනම් වේ, සමහරක් ආපසු ඇමතුම් මත පදනම් වේ. ඔවුන් ද විවිධ සුසමාදර්ශවලින් ලියයි!
• මේ නිසා ව්‍යාපෘතිය නඩත්තු කිරීමට අපහසු වේ. ඔබට කේතය කියවීමට නොහැකි නම් දෝෂයක් සොයා ගැනීම අපහසුය.

වෙබ් එකලස් කිරීම යනු කුමක්ද?

මොසිල්ලා පදනමේ සහ තවත් සමාගම් ගණනාවක නිර්භීත පුද්ගලයින් වෙබ් එකලස් කිරීම වැනි දෙයක් ඉදිරිපත් කළහ. මේ කුමක් ද?

• මෙය ද්විමය ආකෘතියට සහය දක්වන බ්‍රවුසරයේ ගොඩනගා ඇති අතථ්‍ය යන්ත්‍රයකි.
• ද්විමය වැඩසටහන් එහි පැමිණ දේශීයව පාහේ ක්‍රියාත්මක වේ, එනම්, බ්‍රවුසරයට සෑම විටම ජාවාස්ක්‍රිප්ට් කේතයේ සියලුම “නූඩ්ල්ස්” විග්‍රහ කිරීමට අවශ්‍ය නොවේ.
• සියලුම බ්‍රව්සර් සහාය ප්‍රකාශ කර ඇත.
• මෙය bytecode එකක් බැවින් ඔබට ඕනෑම භාෂාවක් සඳහා සම්පාදකයක් ලිවිය හැක.
• ප්‍රධාන බ්‍රව්සර් හතරක් දැනටමත් වෙබ් එකලස් කිරීමේ සහාය ඇතිව නැව්ගත කර ඇත.
• අපි ඉක්මනින් Go හි ස්වදේශික සහාය බලාපොරොත්තු වෙමු. මෙම නව ගෘහ නිර්මාණ ශිල්පය දැනටමත් එකතු කර ඇත: GOARCH=wasm GOOS=js (ඉක්මනින්). මෙතෙක්, මට තේරෙන පරිදි, එය ක්රියාකාරී නොවේ, නමුත් එය අනිවාර්යයෙන්ම Go හි ඇති බවට ප්රකාශයක් තිබේ.

දැන් මොකද කරන්නේ? GopherJS

Web Assembly සඳහා සහය නොමැති අතර, GopherJS වැනි සම්ප්‍රේෂකයක් ඇත.

• Go කේතය "පිරිසිදු" Javascript බවට පරිවර්තනය වේ.
• සියලුම බ්‍රව්සර් වල ධාවනය වේ - නවීන බ්‍රව්සර් මගින් පමණක් සහාය දක්වන නව විශේෂාංග නොමැත (මෙය වැනිලා JS, ඕනෑම දෙයක් මත ක්‍රියාත්මක වේ).
• Goroutines සහ channels ඇතුළුව Go සතුව ඇති සෑම දෙයකටම පාහේ සහය ඇත... අපි බොහෝ සේ ආදරය කරන සහ දන්නා සියල්ල.
• බ්‍රවුසරයේ සහය දැක්වීම තේරුමක් නැති පැකේජ හැරුණු විට සම්පූර්ණ සම්මත පුස්තකාලයටම සහය දක්වයි: syscal, net අන්තර්ක්‍රියා (net/http සේවාදායකයක් ඇත, නමුත් සේවාදායකයක් නොමැත, සහ සේවාලාභියා XMLHttpRequest හරහා අනුකරණය කරනු ලැබේ). පොදුවේ ගත් කල, සම්පූර්ණ සම්මත පුස්තකාලය තිබේ - මෙන්න එය බ්‍රවුසරයේ ඇත, මෙන්න අපි ආදරය කරන Go's stdlib.
• Go හි ඇති සම්පූර්ණ පැකේජ පරිසර පද්ධතිය, සියලුම තුන්වන පාර්ශ්ව විසඳුම් (සැකසීම, ආදිය) GopherJS භාවිතයෙන් සම්පාදනය කර බ්‍රවුසරයේ ධාවනය කළ හැක.

GopherJS ලබා ගැනීම ඉතා පහසුයි - එය සාමාන්‍ය Go පැකේජයක් පමණි. අපි ලබා ගන්නෙමු, සහ යෙදුම ගොඩනැගීමට අපට GopherJS විධානයක් ඇත:

මේක පුංචි හලෝ ලෝකයක්...

... සාමාන්‍ය Go වැඩසටහනක්, සාමාන්‍ය සම්මත පුස්තකාල fmt පැකේජයක් සහ Binding Js බ්‍රවුසර API වෙත ළඟා වීමට. Println අවසානයේ console log බවට පරිවර්තනය වන අතර බ්‍රවුසරය "Hello gophers" ලෙස ලියයි! එය ඉතා සරලයි: අපි GopherJS ගොඩනඟමු - අපි එය බ්‍රවුසරයේ දියත් කරමු - සියල්ල ක්‍රියාත්මක වේ!

මේ මොහොතේ ඔබ සතුව ඇත්තේ කුමක්ද? බැඳීම්

සියලුම ජනප්‍රිය js රාමු සඳහා බන්ධන තිබේ:

• JQuery;
• Angular.js;
• විශාල දත්ත සැලසුම් කිරීම සහ වැඩ කිරීම සඳහා D3.js;
• React.js;
• VueJS;
• ඉලෙක්ට්‍රෝන සඳහා සහය පවා ඇත (එනම්, අපට දැනටමත් ඉලෙක්ට්‍රෝන මත ඩෙස්ක්ටොප් යෙදුම් ලිවිය හැකිය);
• හා හාස්‍යජනකම දෙය නම් WebGL (අපට ත්‍රිමාණ ග්‍රැෆික්ස්, සංගීතය සහ සියලු හොඳ දේවල් සහිත ක්‍රීඩා ඇතුළුව සම්පූර්ණ ග්‍රැෆික් යෙදුම් සෑදිය හැක);
• සහ සියලුම ජනප්‍රිය ජාවාස්ක්‍රිප්ට් රාමු සහ පුස්තකාල වෙත තවත් බොහෝ බැඳීම්.

රාමුව

1. GopherJS - Vecty සඳහා විශේෂයෙන් සකස් කරන ලද වෙබ් රාමුවක් දැනටමත් ඇත. මෙය React.js හි සම්පූර්ණ ප්‍රතිසමයක් වන නමුත් GopherJS හි විශේෂතා සමඟින් Go හි පමණක් වර්ධනය විය.
2. ක්රීඩා බෑග් ඇත (පුදුම!). මට වඩාත්ම ජනප්‍රිය දෙක හමු විය:
   • එන්ගෝ;
   • එබිටන්.

එය පෙනෙන ආකාරය සහ ඔබට දැනටමත් Go හි ලිවිය හැකි දේ පිළිබඳ උදාහරණ කිහිපයක් මම ඔබට පෙන්වන්නම්:

හෝ මෙම විකල්පය (මට 3D වෙඩික්කරුවෙකු සොයා ගැනීමට නොහැකි විය, නමුත් සමහර විට එය පවතී):

මම ඉදිරිපත් කරන්නේ කුමක්ද?

දැන් ඉදිරිපස කර්මාන්තය කෙතරම් තත්වයක පවතීද යත්, කලින් ජාවාස්ක්‍රිප්ට් වලින් කෑගැසූ සියලුම භාෂා එහි වේගයෙන් දිව යනු ඇත. දැන් සෑම දෙයක්ම "වෙබ් එකලස් කිරීම්" ලෙස සම්පාදනය කරනු ලැබේ. Gophers ලෙස එහි නිසි තැන ගැනීමට අපට අවශ්‍ය වන්නේ කුමක්ද?

Go සම්ප්‍රදායිකව උපකල්පනය කර ඇත්තේ එය පද්ධති ක්‍රමලේඛන භාෂාවක් වන අතර, UI සමඟ වැඩ කිරීම සඳහා ප්‍රායෝගිකව පුස්තකාල නොමැත. යමක් ඇත, නමුත් එය අඩක් අතහැර දමා ඇත, අඩක් ක්‍රියාකාරී නොවේ.

GopherJS මත ධාවනය වන Go හි UI පුස්තකාල සෑදීමට දැන් හොඳ අවස්ථාවක්! ඔබට අවසානයේ ඔබේම රාමුවක් ලිවිය හැකිය! ඔබට රාමුවක් ලිවිය හැකි කාලය මෙය වන අතර, එය පළමු එකක් වන අතර ඉක්මනින් දරුකමට හදා ගැනීමක් වනු ඇත, ඔබ තරුවක් වනු ඇත (එය හොඳ රාමුවක් නම්).

දැනටමත් Go පරිසර පද්ධතියේ ඇති විවිධ පැකේජ ඔබට බ්‍රවුසරයේ විශේෂතා වලට අනුගත විය හැක (උදාහරණයක් ලෙස, Template engine). ඒවා දැනටමත් ක්‍රියාත්මක වනු ඇත, ඔබට පහසු බන්ධන සෑදිය හැකි අතර එමඟින් ඔබට පහසුවෙන් බ්‍රවුසරයේ අන්තර්ගතය ලබා දිය හැකිය. ඊට අමතරව, ඔබට, උදාහරණයක් ලෙස, එකම කේතය භාවිතා කරමින්, සේවාදායකයේ සහ ඉදිරිපස කෙළවරේ එකම දේ ලබා දිය හැකි සේවාවක් සෑදිය හැකිය - ඉදිරිපස-අන්ත සංවර්ධකයින් වැනි සියල්ල (දැන් Go හි පමණි).

ඔබට ක්රීඩාවක් ලිවිය හැකිය! හුදෙක් විනෝදය සඳහා…

මට කියන්න ඕන වුනේ එච්චරයි.

ඔබගේ ප්රශ්න

ප්‍රශ්නය (මෙතැන් සිට Q ලෙස හැඳින්වේ): - මම ලියන්නේ Go හෝ Js වලින්ද?

AG: - ඔබ චර්යාවන්, නාලිකා, ව්‍යුහයන්, කාවැද්දීම - Go හි සෑම දෙයක්ම ලියයි... ඔබ සිදුවීමකට දායක වී, එහි කාර්යයක් සමත් වේ.

බී: - ඉතින් මම ලියන්නේ "නිරුවත්" Js වලින්ද?

AG: – නැත, ඔබ Go හි මෙන් ලියා බ්‍රවුසර API වෙත සම්බන්ධ වන්න (API වෙනස් වී නැත). ඔබට ඔබේම බැඳීම් ලිවිය හැකි අතර එමඟින් නාලිකාවට පණිවිඩ යවනු ලැබේ - එය අපහසු නැත.

බී: - ජංගම දුරකථන ගැන කුමක් කිව හැකිද?

AG: - මම අනිවාර්යයෙන්ම දැක්කා: Js ධාවනය කරන Cordova පැච් සඳහා බන්ධන තිබේ. ප්‍රතික්‍රියා ස්වදේශීය භාෂාවෙන් - මම නොදනිමි; සමහර විට එහි ඇත, සමහර විට නැත (මම විශේෂයෙන් උනන්දු වූයේ නැත). N-go ක්‍රීඩා එන්ජිම ජංගම යෙදුම් දෙකටම සහය දක්වයි - iOS සහ Android යන දෙකම.

බී: - වෙබ් එකලස් කිරීම පිළිබඳ ප්රශ්නය. සම්පීඩනය සහ "සිප් කිරීම" නොතකා, වැඩි වැඩියෙන් ඉඩ ලබා ගනී ... අපි මේ ආකාරයෙන් ඉදිරිපස ලෝකය මරා නොදමන්නෙමුද?

AG: – වෙබ් එකලස් කිරීම ද්විමය ආකෘතියක් වන අතර, පෙරනිමියෙන් ද්විමය පෙළට වඩා අවසන් නිකුතුවේ තිබිය නොහැක... ඔබ ධාවන කාලය වෙත ඇදී යයි, නමුත් මෙය සම්මත ජාවාස්ක්‍රිප්ට් පුස්තකාලය නොමැති විට එය ඇදගෙන යාම හා සමාන වේ, එබැවින් අපි සමහර Lodash භාවිතා කරන්න. Lodash කීයක් ගන්නවද දන්නේ නෑ.

බී: - පැහැදිලිවම ධාවන කාලයට වඩා අඩුයි...

AG: - "පිරිසිදු" Javascript තුළ?

බී: - ඔව්. අපි එය යැවීමට පෙර එය සම්පීඩනය කරමු ...

AG: - නමුත් මෙය පෙළයි ... පොදුවේ, මෙගාබයිට් එකක් බොහෝ සේ පෙනේ, නමුත් එපමණයි (ඔබට සම්පූර්ණ ධාවන කාලය ඇත). ඊළඟට, ඔබ ඔබේම ව්‍යාපාර තර්කයක් ලියන්න, එය ඔබේ ද්විමය 1% කින් වැඩි කරයි. මේ වන තෙක් මම මෙය ඉදිරිපෙළ මරා දමන බවක් නොපෙනේ. එපමණක් නොව, පැහැදිලි හේතුව නිසා වෙබ් එකලස් කිරීම Javascript වඩා වේගයෙන් ක්‍රියා කරයි - එය විග්‍රහ කිරීමට අවශ්‍ය නොවේ.

බී: – මෙය තවමත් මතභේදාත්මක කරුණකි... කෙනෙකුට නිසැකව විනිශ්චය කළ හැකි වන පරිදි “වස්මා” (වෙබ් එකලස් කිරීම) පිළිබඳ කිසිදු යොමු ක්‍රියාවක් තවමත් නොමැත. සංකල්පමය වශයෙන්, ඔව්: ද්විමය වේගවත් විය යුතු බව අපි සියල්ලෝම තේරුම් ගනිමු, නමුත් එම V8 හි වත්මන් ක්‍රියාත්මක කිරීම ඉතා කාර්යක්ෂම වේ.

AG: - ඔව්.

බී: - එහි සම්පාදනය ඇත්තෙන්ම ඉතා සිසිල්ව ක්‍රියා කරන අතර විශාල වාසියක් ඇති බව සත්‍යයක් නොවේ.

AG: – Web Assembly හදන්නෙත් ලොකු අය.

බී: - වෙබ් එකලස් කිරීම විනිශ්චය කිරීම තවමත් අපහසු බව මට පෙනේ. දැනට වසර ගණනාවක් තිස්සේ සංවාද ඇති නමුත් සැබෑ ජයග්‍රහණ දැනිය හැක්කේ ස්වල්පයකි.

AG: - සමහර විට. අපි බලමු.

බී: - අපට පසුපෙළේ ගැටළු නොමැත ... සමහර විට අපි මෙම ගැටළු ඉදිරිපසින් තැබිය යුතුද? ඇයි එහෙ යන්නෙ?

AG: - අපි පෙරටුගාමී සේවකයින්ගේ කාර්ය මණ්ඩලයක් තබා ගත යුතුයි.

සමහර දැන්වීම් 🙂

අප සමඟ රැඳී සිටීම ගැන ඔබට ස්තුතියි. ඔබ අපේ ලිපි වලට කැමතිද? වඩාත් රසවත් අන්තර්ගතය බැලීමට අවශ්‍යද? ඇණවුමක් කිරීමෙන් හෝ මිතුරන්ට නිර්දේශ කිරීමෙන් අපට සහාය වන්න, $4.99 සිට සංවර්ධකයින් සඳහා cloud VPS, ඔබ වෙනුවෙන් අප විසින් නිර්මාණය කරන ලද ප්‍රවේශ මට්ටමේ සේවාදායකයන්ගේ අද්විතීය ප්‍රතිසමයක්: VPS (KVM) E5-2697 v3 (6 Cores) 10GB DDR4 480GB SSD 1Gbps ගැන සම්පූර්ණ සත්‍යය $19 සිට හෝ සේවාදායකයක් බෙදා ගන්නේ කෙසේද? (RAID1 සහ RAID10, cores 24 දක්වා සහ 40GB DDR4 දක්වා ඇත).

Dell R730xd ඇම්ස්ටර්ඩෑම් හි Equinix Tier IV දත්ත මධ්‍යස්ථානයේ 2 ගුණයක් ලාභදායීද? මෙතන විතරයි 2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100 TV $199 සිට නෙදර්ලන්තයේ! Dell R420 - 2x E5-2430 2.2Ghz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB - $99 සිට! ගැන කියවන්න යටිතල පහසුකම් සංස්ථාව ගොඩනගන්නේ කෙසේද? සතයක් සඳහා යුරෝ 730 ක් වටිනා Dell R5xd E2650-4 v9000 සේවාදායකය භාවිතා කරන පන්තිය?

මූලාශ්රය: www.habr.com