<p>I've been switching from js frameworks like react/inferno to a template engine that compiles to go because they seem to be much faster. I'm using hero template (not sure if I'm gonna switch to valaya's template), but I'm not sure if they come with js support at all. Give the following example:</p>
<p><code><button onclick="triggerGoFunc()">Log out</button></code></p>
<p>How can I make tags like <code>onclick</code>, <code>onhover</code> and so on to trigger a function in go? Since I'm comming from js background, it will take some time to use go instead. As a newbie there's some thing I'd like to know:</p>
<ol>
<li>Is there a template/library that helps use go with html instead of html with go?</li>
<li>What template do you like to work with and why?</li>
<li>Are there templates that provide efficient working with javascript as well?</li>
</ol>
<p>Hoping to hear for your experience with templating. Some friend of mine told me that I should stick with js frameworks, but working in js with html seems to be much slower than html with js inside.</p>
<hr/>**评论：**<br/><br/>neoasterisk: <pre><p>The idea of templates is that you calculate the data you need to show on the page on the server and then you "throw" the data inside the template in the form of a Go struct. Then you print the data you need by using <code>{{ . }}</code> and if you need to print the struct field Name then you use <code>{{ .Name }}</code>.</p>
<p>You can also do more advanced stuff by creating custom functions that will allow you to transform that data in the template. Assuming your struct has a Names field which is a <code>[]string</code>.</p>
<pre><code>fns = template.FuncMap{
"join": strings.Join,
}
</code></pre>
<p>Then you can use the function name like this: <code>{{join .Names ", "}}</code></p>
<p>I wrote an example to demonstrate: <a href="https://play.golang.org/p/MIqD3A11Dm" rel="nofollow">https://play.golang.org/p/MIqD3A11Dm</a></p>
<p>Your question about running a Go function onclick is not what you want. This is supposed to run a javascript function on the client. If you really want to use onclick to fire a Go function on the server then you could make on click fire a Javascript function which would make an AJAX call to the Go server to run the Go function.</p>
<p>If you would like to use templates then I'd recommend to stick to the standard library <code>html/template</code>.</p>
<p>If you would like to not use templates then you should build the API in Go then use a JS framework like React, Polymer, Vue etc. to display the data that the Go API returns on the frontend. This will keep everything separated.</p></pre>shark1337: <pre><p>Thank, but the api idea is a killer one. Let's find an workaround! Let's say that I have a go struct declared in my html template that holds some variables like loggedIn, color, etc. Is it possible to make the onclick tag to change for example the value of the variable? That would be much better in this case ;)</p></pre>jerf: <pre><blockquote>
<p>Let's say that I have a go struct declared in my html template that holds some variables like loggedIn, color, etc. Is it possible to make the onclick tag to change for example the value of the variable?</p>
</blockquote>
<p>Do you mean that when the user clicks on a thing, you want the color to change on the client side? Or are you actually asking for values within Go structs to change when the template is rendered, that is, that the act of rendering a Go template causes arbitrary modifications to Go data structures in the time period while the HTML template is being rendered and has not yet even been sent to the user?</p>
<p>I am currently trying to diagnose whether you've got an unclear understanding of what is on the server vs. what is on the client. Is your previous JS experience with Meteor by any chance, or some other framework that prides itself on hiding the difference? (As opposed to something like React, which does not try to bridge the gap.)</p></pre>shark1337: <pre><p>I'm coming from react js. In React you got something like state where you kept all the dynamic data there. I'm looking to make a struct that keeps all the state and modifity with onclick, onhover events ;)</p></pre>neoasterisk: <pre><blockquote>
<p>I'm looking to make a struct that keeps all the state and modifity with onclick, onhover events ;)</p>
</blockquote>
<p>This is done on client side aka with Javascript. Create a js object with some fields and change them up with events. If you do not want to do it manually then use a framework to do it automatically for you.</p>
<p>A Go template is a server side template aka it is rendered on the server. Once it is rendered and served to the client, the server can't do any changes to it. The rest of the modifications have to be done on client side with Javascript.</p></pre>Uncaffeinated: <pre><p>If you really want to use Go on the client side, you might be able to hack something together with gopher.js. However, I wouldn't recommend it, since you lose most of the benefits of Go that way and it's a bit of a square peg/round hole situation.</p></pre>yami_odymel: <pre><p>If you are trying to render the templates with Go, then you would have to handle the click event with some libraries like: jQuery, Zepto.js in the client-side, then send the AJAX request to your server.</p>
<p>But since people are using React.js or Vue.js nowadays, I don't see why you should use a template engine (server-side render), it'll make you hard to maintain the code and the structure in the future (if you are writing a large project).</p>
<p>I would suggest you to head back and use React.js (or Vue.js), so you can easily to separate the front-end and the back-end, and make your Golang server as an purely API server. (That only cares about the functions, not views.)</p></pre>thewhitetulip: <pre><p>It seems like you are interested in building an app using http API with a JS framework as the front end, in that case, the html page uses VueJS and you'll use Vue's functions to click a button, I have written an app using Go as backend and Vue as frontend, read that code and you'll get your answers <a href="https://github.com/thewhitetulip/Tasks-vue" rel="nofollow">https://github.com/thewhitetulip/Tasks-vue</a></p>
<p>If you are interested in learning VueJS, then you can read my tutorial here: <a href="https://github.com/thewhitetulip/intro-to-vuejs" rel="nofollow">https://github.com/thewhitetulip/intro-to-vuejs</a></p>
<p>in detail:</p>
<p>when you have a function in Go like "store data into db", you wrap that beyond an HTTP API, that would be "PUT /insert name=sherlock&value=somethingelse", then you use a frontend framework to call the http api and change the html page dynamically.</p>
<p>You aren't supposed to use onclick, if you need to use them, then either you are using the framework incorrectly <em>or</em> the framework you have chosen isn't really framework.</p>
<p>There is absolutely no need to pre-compile templates, they aren't that slow, there are plenty of optimizations you can do later, but the first focus should be in <em>building</em> something, only after you have a correctly working version should you think about optimizing the app.</p></pre>shark1337: <pre><p>Wow thank you! I really like the way vue2 is built, but I enjoy working with react. There's also preact and inferno that seems to be much faster than vue2, but I'll look into your git reps ;)</p></pre>thewhitetulip: <pre><p>You are very welcome :-)</p>
<p>I struggled a lot while learning VueJS that's why I started writing that guide. Vue is so simple that you can write an app within one week, vue is fast when you consider "developer time", if it takes one month to learn something else and that something else is 10% faster in computer times, I'd take Vue anytime, it might not be the fastest in computer time, but it is in my time and dev time is more costlier than computer time.</p>
<p>Plus, I have learned my lesson to not stick to some tech just because I love it, I used to write python scripts earlier for things that I now use Bash for, the right tool should be used for the right action :)</p></pre>shark1337: <pre><p>Vue is hot for sure, difinitly better than react. There's also an ui library from ebay open source that seems to do even better ;). Take a look here, I think that's the best choice and it has state manager out of the box</p>
<p><a href="http://markojs.com/" rel="nofollow">http://markojs.com/</a></p></pre>thewhitetulip: <pre><p>Vue is hot and easier than react, I don't know if it is better. Thanks for sharing the link but I'll stick with Vue, these days having a better software <em>and</em> an active community is better than best software no community.</p></pre>xiegeo: <pre><p>I have no idea what is a "template engine that compiles to go", can you add a few links?</p></pre>shark1337: <pre><p>Throw a look here <a href="https://github.com/SlinSo/goTemplateBenchmark" rel="nofollow">https://github.com/SlinSo/goTemplateBenchmark</a></p></pre>shovelpost: <pre><p>Premature optimization is the root of all evil. Stop worrying about speed before you have to. Use the standard library template engine and you'll be fine.</p></pre>shark1337: <pre><p>This! Thank you man!</p></pre>ROFLLOLSTER: <pre><p>How easy is it to compose templates in the stdlib template package? That's one thing I thought it was missing when I looked at it, but I might have just missed it.</p></pre>
