{"id":71628,"date":"2020-02-27T08:51:24","date_gmt":"2020-02-27T05:51:24","guid":{"rendered":"https:\/\/prohoster.info\/blog\/aleksej-grachyov-go-frontend"},"modified":"2020-03-03T16:14:16","modified_gmt":"2020-03-03T13:14:16","slug":"aleksej-grachyov-go-frontend","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sl\/blog\/administrirovanie\/aleksej-grachyov-go-frontend","title":{"rendered":"Aleksiej Gra\u010dev: Go Frontend","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p>Kyiv Go Meetup May 2018:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/9974ab1db5347a41e4ec5110c3d2ef56.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n<b>\u0412\u0435\u0434\u0443\u0449\u0438\u0439:<\/b> \u2013 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0432\u044b \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c! \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u0434\u0432\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0438\u043a\u0435\u0440\u0430 \u2013 \u041b\u0451\u0448\u0430 \u0438 \u0412\u0430\u043d\u044f. \u0411\u0443\u0434\u0435\u0442 \u0435\u0449\u0451 \u0434\u0432\u0430, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0445\u0432\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u0438\u043a\u0435\u0440 \u2013 \u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432, \u043e\u043d \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c \u043e GopherJS.<\/p>\n<p><b>\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432 (\u0434\u0430\u043b\u0435\u0435 \u2013 \u0410\u0413):<\/b> \u2013 \u042f \u2013 Go-\u0434\u0435\u0432\u0435\u043b\u043e\u043f\u0435\u0440, \u0438 \u044f \u043f\u0438\u0448\u0443 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043d\u0430 Go. \u041f\u043e\u0440\u043e\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c, \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u043b\u0430\u0437\u0438\u0442\u044c \u0442\u0443\u0434\u0430 \u0440\u0443\u0447\u043a\u0430\u043c\u0438. \u0425\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0441\u0432\u043e\u0451\u043c \u043e\u043f\u044b\u0442\u0435 \u0438 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 Go \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435.<\/p>\n<p>\u041b\u0435\u0433\u0435\u043d\u0434\u0430 \u0442\u0430\u043a\u0430\u044f: \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c Go \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435, \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0443\u0442\u0438 \u2013 Web Assembly \u0438 GopherJS. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0432 \u043a\u0430\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u044d\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h3>\u0427\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0441 frontend-\u043e\u043c?<\/h3>\n<p>\n\u0412\u0441\u0435 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u044b, \u0447\u0442\u043e \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e \u0441 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c?<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/065119e699053306072b1d7aa3183b34.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u0422\u0435\u0441\u0442\u043e\u0432 \u043c\u0430\u043b\u043e? \u041c\u0435\u0434\u043b\u0435\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430? \u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430? \u0425\u043e\u0440\u043e\u0448\u043e.<\/p>\n<p>\u041f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043c\u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0446\u0438\u0442\u0430\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043a\u0430\u0437\u0430\u043b \u043e\u0434\u0438\u043d \u0438\u0437 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043a\u043d\u0438\u0433\u0435:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/e69eba4fc073c0b59789859c94ba29f2.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u0412 Javascript \u043d\u0435\u0442 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0438\u043f\u043e\u0432. \u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0431\u0443\u0434\u0443 \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0441\u044f \u043f\u043e \u0445\u043e\u0434\u0443 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0438\u0445 \u0440\u0435\u0448\u0430\u044e\u0442.<\/p>\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0443 \u0442\u0438\u043f\u043e\u0432 \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u0440\u0443\u0434\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0442\u0438\u043f\u043e\u0432 \u0432 Javascript \u2013 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u0438\u043f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043a \u0442\u0438\u043f\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u044f. \u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0435\u043d\u0430 \u0432 TypeScript (\u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043d\u0430\u0434 Javascript) \u0438 Flow (static-checker \u0442\u0438\u043f\u043e\u0432 \u0432 Javascript). \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0443\u0436\u0435 \u0434\u043e\u0448\u0451\u043b \u0434\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0442\u0438\u043f\u043e\u0432 \u0432 Javascript.<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/257542cbfd2e316fbe0a0033056fff6f.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u0439 \u043d\u0435\u0442 \u2013 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438 \u00ab\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041d\u043e \u044f \u0432 Javascript \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442. \u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0430 jQuery (\u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 jQuery \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430\u043c\u0438, \u0445\u0435\u043b\u043f\u0435\u0440\u0430\u043c\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b). \u0421\u0435\u0439\u0447\u0430\u0441 \u0436\u0435 \u0432\u0441\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Lodash:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/4eae8a8f19776028bd88fe8f7a751605.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nCallback hell. \u0414\u0443\u043c\u0430\u044e, \u0432\u0441\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u043a\u043e\u0434 \u043d\u0430 Javascript \u0433\u0434\u0435-\u0442\u043e 5 \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434, \u0438 \u043e\u043d \u0431\u044b\u043b \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u00ab\u043b\u0430\u043f\u0448\u0443\u00bb \u0438\u0437 \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0433\u043e \u0445\u0438\u0442\u0440\u043e\u0441\u043f\u043b\u0435\u0442\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u043e\u0432. \u0421\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0440\u0435\u0448\u0435\u043d\u0430 (\u0441 \u0432\u044b\u0445\u043e\u0434\u043e\u043c ES-15 \u0438\u043b\u0438 ES-16), \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 Javascript \u043f\u0440\u043e\u043c\u0438\u0441\u044b (promises) \u0438 \u0432\u0441\u0435\u043c \u0441\u0442\u0430\u043b\u043e \u0434\u044b\u0448\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0433\u0447\u0435 \u043d\u0430 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f.<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/96c574a880ad97e0802ae3006a60cee6.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u041f\u043e\u043a\u0430 \u043d\u0435 \u043f\u0440\u0438\u0448\u0451\u043b Promise hell\u2026 \u041d\u0435 \u0437\u043d\u0430\u044e, \u043a\u0430\u043a \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0438\u043d\u0434\u0443\u0441\u0442\u0440\u0438\u044f \u0443\u043c\u0443\u0434\u0440\u044f\u0435\u0442\u0441\u044f, \u043d\u043e \u043e\u043d\u0438 \u0432\u0441\u0451 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u043e\u043d\u044f\u044e\u0442 \u0441\u0435\u0431\u044f \u0432 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0434\u0435\u0431\u0440\u0438. \u0423\u043c\u0443\u0434\u0440\u0438\u043b\u0438\u0441\u044c \u0438 \u043d\u0430 \u00ab\u043f\u0440\u043e\u043c\u0438\u0441\u0430\u0445\u00bb \u0441\u0434\u0435\u043b\u0430\u0442\u044c hell. \u041f\u043e\u0442\u043e\u043c \u0440\u0435\u0448\u0438\u043b\u0438 \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432 \u2013 async\/await:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/7c0679babbea4583de924292893d805c.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nProblem with asynchronicity is resolved. Async\/await is a fairly popular primitive in various languages. Python and others have such an approach \u2013 it is quite good. The problem is solved.<\/p>\n<p>What problem remains unsolved? The exponentially increasing complexity of frameworks, the complexity of the ecosystem, and the programs themselves.<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/617fbc72e9e059bf608a48c84c5328f9.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<ul>\n<li>The syntax of Javascript is a bit strange. We all know the issues with adding arrays and objects and other quirks.<\/li>\n<li>Javascript is multiparadigm. This is particularly relevant now, as the ecosystem is very large:\n<ul>\n<li>everyone writes in different styles \u2013 some write structurally, others write functionally, different developers write differently;<\/li>\n<li>from different packages, different paradigms emerge when you use various packages;<\/li>\n<li>there's a lot of 'fun' with functional programming in Javascript \u2013 the library ramda appeared, and now no one can read programs written in that library.<\/li>\n<\/ul>\n<p>\n<\/li>\n<li>This all has a big impact on the ecosystem, and it has grown tremendously. Packages are incompatible with each other: some use promises, some use async\/await, and some use callbacks. Also, they write in different paradigms!<\/li>\n<li>This leads to the project being difficult to maintain. It's hard to find bugs if you can't read the code.<\/li>\n<\/ul>\n<p><\/p>\n<h3>What is Web Assembly?<\/h3>\n<p>\nBrave folks from the Mozilla Foundation and several other companies have come up with something called Web Assembly. What is it?<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/9ca5b1e0b7646ec7d6fa751d77780b41.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<ul>\n<li>It's a built-in virtual machine in the browser that supports a binary format.<\/li>\n<li>Binary programs are run there almost natively, meaning the browser doesn't have to parse all that 'noodles' of javascript code every time.<\/li>\n<li>All browsers have declared support.<\/li>\n<li>Since this is bytecode, you can write a compiler for any language.<\/li>\n<li>The four main browsers already come with support for Web Assembly.<\/li>\n<li>Soon, we expect native support in Go. Such a new architecture has already been added: GOARCH=wasm GOOS=js (soon). For now, as I understand, it's not functional, but there's a statement that it will definitely be in Go.<\/li>\n<\/ul>\n<p><\/p>\n<h3>What should we do now? GopherJS<\/h3>\n<p>\nWhile we don't have support for Web Assembly, there is a transpiler called GopherJS.<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/067c1b605b220c4aeed103915daacca4.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<ul>\n<li>Code in Go is transpiled into 'pure' Javascript.<\/li>\n<li>It runs in all browsers \u2013 there are no new features that are only supported in modern browsers (this is Vanilla JS, which runs on anything).<\/li>\n<li>Podpiramo skoraj vse, kar je v Go, vklju\u010dno z gorutinami in kanali... \u2013 vse, kar imamo radi in kar poznamo.<\/li>\n<li>Skoraj celotna standardna knji\u017enica je podprta, razen tistih paketov, katerih podpora v brskalniku nima smisla: syscall, omre\u017ene interakcije (imamo net\/http klienta, a stre\u017enika ni, klient pa se emulira preko XMLHttpRequest). Na splo\u0161no je celotna standardna knji\u017enica na voljo \u2013 tukaj je v brskalniku, tukaj je stdlib Go, ki jo imamo radi.<\/li>\n<li>Vsa ekosistema paketa v Go, vse tretje re\u0161itve (templating in druge) lahko prenesemo s pomo\u010djo GopherJS in to za\u017eenemo v brskalniku.<\/li>\n<\/ul>\n<p>\nPridobitev GopherJS je zelo enostavna \u2013 to je obi\u010dajen Go paket. Naredimo go get, in imamo ukaz GopherJS za gradnjo aplikacije:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/4f96f9e437b532f9cb1a4f960a621293.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nTukaj je tak majhen hello world...<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/e4b56385a6cac97fc75b09584da1bfbb.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n...Obi\u010dajna Go aplikacija, obi\u010dajen paket fmt iz standardne knji\u017enice in Binding Js, da dostopamo do API-ja brskalnika. Println se na koncu pretvori v console log in brskalnik izpi\u0161e \"Pozdravljeni gopherji\"! Tako preprosto: naredimo GopherJS build \u2013 za\u017eenemo v brskalniku \u2013 vse deluje!<\/p>\n<h3>Kaj imamo trenutno? Bindings<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/6adbc1f604580c3878775c45174444a2.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nObstajajo bindings za vse priljubljene js-okvirje:<\/p>\n<ul>\n<li>JQuery;<\/li>\n<li>Angular.js;<\/li>\n<li>D3.js za ustvarjanje grafov in delo z velikimi podatki;<\/li>\n<li>React.js;<\/li>\n<li>VueJS;<\/li>\n<li>tudi podpira Electron (torej lahko \u017ee zdaj pi\u0161emo namizne aplikacije na \"Elektronu\");<\/li>\n<li>in kar je najzanimivej\u0161e \u2013 to je WebGL (lahko delamo polno grafi\u010dne aplikacije, vklju\u010dno z igrami s 3D grafiko, glasbo in vsemi dodatki);<\/li>\n<li>in \u0161e veliko drugih bindings za vse priljubljene javascript okvirje in knji\u017enice.<\/li>\n<\/ul>\n<p><\/p>\n<h3>Okvir<\/h3>\n<p><\/p>\n<ol>\n<li>Obstoji \u017ee razviti spletni okvir namenjen posebej za GopherJS \u2013 Vecty. To je popoln analog React.js, vendar razvit na Go, z zna\u010dilnostmi GopherJS.<\/li>\n<li>Ima tudi igralne okvirje (presenetljivo!). Na\u0161el sem dva najbolj priljubljena:\n<ul>\n<li>Engo;<\/li>\n<li>Ebiten.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>\nPrika\u017eem vam nekaj primerov, kako to izgleda in kaj je \u017ee mogo\u010de napisati na Go:<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/53365146c12b320fbf05334bdc6a79e5.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAli torej taka mo\u017enost (nisem na\u0161el 3D strelca, a morda obstaja):<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/b1c0a9d6d91ad8a10a9b784cd8c7b1d0.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Kaj predlagam?<\/h3>\n<p>\nTrenutno je industrija frontenda v takem stanju, da se bodo vsi jeziki, ki so prej jokali zaradi Javascript, zdaj pognali tja. Zdaj se bodo vsi kompilirali v \"Web Assembly\". Kaj potrebujemo, da se tam dostojno uveljavimo kot \"gopherji\"?<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/32c4a03f7a31def833942af6e59c70cb.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nV Go tradicionalno velja, da je to - sistemski programski jezik, in prakti\u010dno ni nobenih knji\u017enic za delo z uporabni\u0161kim vmesnikom. Nekaj je, a je napol pozabljeno, napol nefunkcionalno.<\/p>\n<p>In tako \u2013 odli\u010den trenutek za ustvarjanje UI knji\u017enic v Go, ki se bodo zagnale na GopherJS! Kon\u010dno lahko napi\u0161ete svoj okvir! Pri\u0161el je \u010das, ko lahko napi\u0161ete okvir, in bo eden prvih ter pridobil zgodnje sprejemanje, vi pa boste zvezda (\u010de bo to dober okvir).<\/p>\n<p>Adaptirati je mogo\u010de ogromno razli\u010dnih paketov, ki \u017ee obstajajo v Go ekosistemu, na specifi\u010dne spletne brskalnike (na primer, predloge). Ti \u017ee delujejo, lahko pa naredimo udobne ovitke, da bo enostavno renderirati vsebino neposredno v brskalniku. Poleg tega lahko naredimo na primer storitev, ki zna renderirati isto tako na stre\u017eniku in na sprednjem delu, pri \u010demer se uporablja ista koda \u2013 vse, kar front-end razvijalci imajo radi (zdaj pa\u010d v Go).<\/p>\n<p>Lahko napi\u0161ete igro! Samo za zabavo\u2026<\/p>\n<p>To je vse z moje strani.<\/p>\n<p><img decoding=\"async\" alt=\"Aleksiej Gra\u010dev: Go Frontend\" src=\"\/wp-content\/uploads\/2020\/02\/ba08e0e65de0898e4f53abd00abb6dab.jpeg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<\/p>\n<h3>Vpra\u0161anja<\/h3>\n<p>\n<b>Vpra\u0161anje (naprej \u2013 V):<\/b> \u2013 Ali pi\u0161em v Go ali v Js?<\/p>\n<p><b>AG:<\/b> \u2013 Pi\u0161e\u0161 v Go rutine, kanale, strukture, vgradnjo \u2013 vse... Prijavlja\u0161 se na dogodek, prena\u0161a\u0161 tja funkcijo.<\/p>\n<p><b>V:<\/b> \u2013 Torej pi\u0161em v 'golem' Js?<\/p>\n<p><b>AG:<\/b> \u2013 Ne, pi\u0161e\u0161 nekako v Go in se povezuje\u0161 z API-jem brskalnika (API se pri tem ni spremenil). Lahko napi\u0161e\u0161 svoje ovitke, da sporo\u010dila prihajajo v kanal \u2013 to ni te\u017eko.<\/p>\n<p><b>V:<\/b> \u2013 Kaj pa mobilne naprave?<\/p>\n<p><b>AG:<\/b> \u2013 O\u010ditno sem videl: obstajajo vezave za patch Cordova, ki jih Js za\u017eene. V React Native \u2013 ne vem; morda so, morda niso (nisem se preve\u010d zanimal). Igralni motor N-go podpira tudi mobilne aplikacije \u2013 tako iOS kot Android.<\/p>\n<p><b>V:<\/b> \u2013 Vpra\u0161anje o Web Assembly. Prostor zaseda vse ve\u010d, kljub stiskanju, 'zipanju'... Ali ne bomo na ta na\u010din \u0161e bolj uni\u010dili svet frontenda?<\/p>\n<p><b>AG:<\/b> \u2013 Web Assembly \u2013 to je binarni format, in binarni po privzetku ne more biti v kon\u010dnem izidu ve\u010dji kot tekst... Potegne vas runtime, a to je enako kot potegniti standardno JavaScript knji\u017enico, ko je ni, zato uporabljamo kak\u0161en Lodash. Ne vem, koliko prostora vzame Lodash.<\/p>\n<p><b>V:<\/b> \u2013 O\u010ditno manj, kot runtime\u2026<\/p>\n<p><b>AG:<\/b> \u2013 Na '\u010distem' JavaScriptu?<\/p>\n<p><b>V:<\/b> \u2013 Da. Stisnemo ga, preden ga po\u0161ljemo\u2026<\/p>\n<p><b>AG:<\/b> \u2013 To, vendar, je besedilo\u2026 Na splo\u0161no, megabai so kar precej\u0161nji, ampak to je vse (ima\u0161 cel runtime). Potem napi\u0161e\u0161 svojo poslovno logiko, ki bo pove\u010dala tvoj binary za 1 %. Zaenkrat ne vidim, da bi to uni\u010dilo frontend. \u0160e posebej, ker bo Web Assembly deloval hitreje kot Javascript iz o\u010ditnega razloga \u2013 ni ga treba parsat.<\/p>\n<p><b>V:<\/b> \u2013 To je \u0161e vedno sporen trenutek\u2026 Ni \u0161e nekak\u0161ne standardne implementacije \u201eVasm\u201c (Web Assembly), da bi lahko nedvoumno sodili. Konceptualno \u2013 ja: vsi razumemo, da bi moral biti binary hitrej\u0161i, vendar je trenutna implementacija istega V8 zelo u\u010dinkovita.<\/p>\n<p><b>AG:<\/b> \u2013 Da.<\/p>\n<p><b>V:<\/b> \u2013 Komplilacija tam deluje res zelo dobro in ni nujno, da bo velika prednost.<\/p>\n<p><b>AG:<\/b> \u2013 Web Assembly tudi veliko mo\u010dnih vplivne\u017eev dela.<\/p>\n<p><b>V:<\/b> \u2013 Zdi se mi, da je \u0161e vedno te\u017eko presoditi o Web Assembly. Koliko let \u017ee govorimo, pa je resni\u010dnih dose\u017ekov, ki jih lahko otipamo, malo.<\/p>\n<p><b>AG:<\/b> \u2013 Morda. Bomo videli.<\/p>\n<p><b>V:<\/b> \u2013 Nimamo te\u017eav na backendu\u2026 Morda bi te te\u017eave pustili na frontendu? Zakaj se sploh spu\u0161\u010dati tja?<\/p>\n<p><b>AG:<\/b> \u2013 Moramo imeti ekipo frontend razvijalcev.<\/p>\n<p><center><div class=\"youtube-placeholder\" data-id=\"xF2xUKIk2MQ\" onclick=\"loadVideo(this)\">\r\n        <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/xF2xUKIk2MQ\/hqdefault.jpg\" alt=\"Predvajaj video\" loading=\"lazy\" width=\"480\" height=\"360\" style=\"width:100%;height:auto;\">\r\n        <div class=\"play-button\"><\/div>\r\n    <\/div><\/center><\/p>\n<h3>Malo reklame \ud83d\ude42<\/h3>\n<p>\nHvala \u0161to ostajete s nama. Da li vam se svi\u0111aju na\u0161i \u010dlanci? \u017delite li videti vi\u0161e zanimljivih materijala? Podr\u017eite nas tako \u0161to \u0107ete naru\u010diti ili preporu\u010diti prijateljima, <noindex><a rel=\"nofollow\" href=\"https:\/\/ua-hosting.company\/cloudvps\/nl\">obla\u010dni VPS za programere od $4.99<\/a><\/noindex>, <b>jedinstveni ekvivalent entry-level servera koji smo stvorili za vas:<\/b> <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/company\/ua-hosting\/blog\/347386\/\">Sve \u0161to treba da znate o VPS (KVM) E5-2697 v3 (6 jezgara) 10GB DDR4 480GB SSD 1Gbps od $19 ili kako pravilno deliti server?<\/a><\/noindex> (options available with RAID1 and RAID10, up to 24 cores and up to 40GB DDR4).<\/p>\n<p><b>Dell R730xd je dvostruko jeftiniji u Equinix Tier IV data centru u Amsterdamu?<\/b> Only with us <b><noindex><a rel=\"nofollow\" href=\"https:\/\/ua-hosting.company\/serversnl\">2 x Intel TetraDeca-Core Xeon 2x E5-2697v3 2.6GHz 14C 64GB DDR4 4x960GB SSD 1Gbps 100TB from $199<\/a><\/noindex> in the Netherlands! <b>Dell R420 \u2014 2x E5-2430 2.2GHz 6C 128GB DDR3 2x960GB SSD 1Gbps 100TB \u2014 from $99!<\/b><\/b> Read about how <noindex><a rel=\"nofollow\" href=\"https:\/\/habr.com\/company\/ua-hosting\/blog\/329618\/\">to build a corporate-class infrastructure using Dell R730xd E5-2650 v4 servers costing 9000 euros for pennies?<\/a><\/noindex><br \/>\n<br \/>Izvor: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/ua-hosting\/blog\/489636\/\">habr.com<\/a> <\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>Kyiv Go Meetup May 2018: \u0412\u0435\u0434\u0443\u0449\u0438\u0439: \u2013 \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0432\u044b \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c! \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0443 \u043d\u0430\u0441 \u0434\u0432\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u0438\u043a\u0435\u0440\u0430 \u2013 \u041b\u0451\u0448\u0430 \u0438 \u0412\u0430\u043d\u044f. \u0411\u0443\u0434\u0435\u0442 \u0435\u0449\u0451 \u0434\u0432\u0430, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0445\u0432\u0430\u0442\u0438\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u0438\u043a\u0435\u0440 \u2013 \u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432, \u043e\u043d \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c \u043e GopherJS. \u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432 (\u0434\u0430\u043b\u0435\u0435 \u2013 \u0410\u0413): \u2013 \u042f \u2013 Go-\u0434\u0435\u0432\u0435\u043b\u043e\u043f\u0435\u0440, \u0438 \u044f \u043f\u0438\u0448\u0443 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0438\u0441\u044b [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":71629,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-71628","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Kyiv Go Meetup May 2018: \u0412\u0435\u0434\u0443\u0449\u0438\u0439: \u2013 \u0412\u0441\u0435\u043c.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/sl\/blog\/administrirovanie\/aleksej-grachyov-go-frontend\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"sl_SI\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432: Go Frontend | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"Kyiv Go Meetup May 2018: \u0412\u0435\u0434\u0443\u0449\u0438\u0439: \u2013 \u0412\u0441\u0435\u043c.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/sl\/blog\/administrirovanie\/aleksej-grachyov-go-frontend\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-02-27T05:51:24+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-03-03T13:14:16+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Aleksij Gra\u010dev: Go Frontend | ProHoster","description":"Kyiv Go Meetup maj 2018: Voditelj: \u2013 Vsi.","canonical_url":"https:\/\/prohoster.info\/sl\/blog\/administrirovanie\/aleksej-grachyov-go-frontend","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sl_SI","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0413\u0440\u0430\u0447\u0451\u0432: Go Frontend | ProHoster","og:description":"Kyiv Go Meetup May 2018: \u0412\u0435\u0434\u0443\u0449\u0438\u0439: \u2013 \u0412\u0441\u0435\u043c.","og:url":"https:\/\/prohoster.info\/sl\/blog\/administrirovanie\/aleksej-grachyov-go-frontend","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2020-02-27T05:51:24+00:00","article:modified_time":"2020-03-03T13:14:16+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"71628","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":null,"breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 18:58:26","updated":"2022-09-27 20:58:26","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts\/71628","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/comments?post=71628"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts\/71628\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/media\/71629"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/media?parent=71628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/categories?post=71628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/tags?post=71628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}