Therefore, to code web UI it remains a must.
Life of an ex sysadmin who wants to code a web app: getting depressed
To make the development easier, your friend, who is “web developer” will recommend you to use a marvelous framework.
Depending on the orientation of the wind, the moon or its reading, he will encourage you to use
ember or whatever exotic
With some recommendation from my real friends and from Google, I’ve started an app based on ionic which is based on angular. As I did not know anything about angular, I’ve watched a (very good) introduction and followed the ionic tutorial.
So far so good…
Then I implemented a SSO with Facebook. I wrote a backend in
go to handle the token generation and the used database connection.
I started to code it by hand, until a friend tells me about the angular module Satellizer that was suppose to handle the logic for me.
And it did…. It was suddenly automagic:
Everything was working on my browser. I was happy, So I decided to deploy my app on my iPhone and enjoy the power of Cordova.
That’s when the headache started: There was something wrong on the mobile phone version. A bug!
I tried to debug it, with Xcode, with Safari… The more I was searching, the more I had to dive into the framework. Too many magic in it for something that was, in fine, not a bug 1.
I asked some help from a friend and his first reply was: “which version of angular? Because in version 2 they have changed a lot of concepts”
On top of that, I’ve never been a callback man, I hate them since my X11/Motif programming course. I do like CSP!
Out of the depression!
Ok, I abandoned those tools. But I still want to code my app, and I’m not the kind of guy that easily give up.
Let’s resume my needs:
- I need a MVC, because it’s the most natural way to code web ui today
- MVC is not framework dependent
- A SPA is the good choice for a mobile app and Cordova makes things easy
I’ve digge a little bit and I’ve found this blog post: Do you really want an SPA framework? which leads me to “the solution”:
I will code my model/view/controller from scratch. But as I want to preserve my health and stay away from Javacript, I will code it with something fun: go.
Let’s see an example and implement a very basic routing mechanism relying on a pure js library.
I will code a little page based on bootstrap.
A basic go code
The dynamic part will be coded in pure GO in a file called
main.go and transpiled into javscript code with the help of the
To make things easier, I can add some directives in my go code in the form of a comment:
Therefore I will be able to generate my code directly with a simple call to
go generate and it will produce the
js/app.js file for me.
The structure of the main page is taken from bootstrap’s starter template
Now, I will implement a very basic SPA. It will display three tabs accessible by their names (for demo purpose):
A good SPA needs a good routing system to deal with anchor refs.
There are several implementation of gopherjs based routing mechanism.
The first thing to do is to include the js file at the end of the
Then, to actually implement my adhoc-routing as described in the doc of director.js,
I must implement the
on and the
Once done, I add the routes in my
If I launch the page, I can now click on the links and it will diplay hello in my console.
You can check the full code on this gist
You see that I’ve let the function as
notImplementedYet, but replacing it with a jQuery call is trivial:
Gopherjs is not trivial, but it has the ability to make the web development more structured. I’ve started a web ui from scratch and reach the same goal as the one I reached in javacript in only 2 days (compared to 3 weeks).
You can check the development of the Nhite fronted to watch the progress I will make (or not) with this technology.
1 - Actually, I figured out what the “bug” was later, when I finished the implementation in go and there was no magic anymore in the code. The oauth2 flow I use is “Authorization code”. In this flow, you query the authorization server (here facebook) and send it the client identifier and a redirection URI. In my dev environment this redirection URI is set to “http://localhost". Once the user is logged in (on the Facebook page), the navigation window redirects him in the application at localhost. When running on iOS with cordova the files are served locally (file://,,,) and there is no way to specify a redirect URI that point to file://, therefore the redirect URI must point somewhere else… but in this case, getting the code from the application becomes tricky because of the security policies. I could do a complete blog post about this.