ES6 and Angular + a little GoLang

This post really documents the checkpoint in my experiments with GoLang and Frontend development.  As some people might know that I’ve been playing around with application structure, languages and approaches for a while.

My GoLang AngularJS and ES6 Todo App over at GitHub – it’s the reference for the rest of this post.

File Layout

Some quick to points, general directory structure:

 1go-angular-es6/
 2    - main.go    # Primary entry point
 3    - app/       # The GoLang application 
 4    - client/    # ES6 code libraries and html
 5      - app.html    # the main template
 6      - bootstrap/   # Bootstrap CSS
 7      - components/  # bower loaded components (JS Libraries)
 8      - partials/    # HTML fragments
 9      - app/         # ES6/Angular code
10         - app.es6     #  Angular App - used for ES6 imports
11         - main.es6    #  Main entry point
12         - controllers #  Angular Controllers
13         - services    #  Angular Services
14    - conf/      # abstracted configuration
15    - static/    # (not in GitHub) the output from building the client dir

One general note is that I haven’t found an idiomatic directory structure for GoLang application development.  IMHO “app” should be the handlers and have a model/conf directory.  Still a work in progress.

While this is an ES6 experiment, I did look at TypeScript for a bit and while I like it due to being a typed language which should reduce a class of errors. I did have to wonder about is the cost of building the type definition files for projects worthwhile?  In a large organization I could see that this would pay dividends, but not clear from the get go.

What’s good about ES6

For past projects I’ve used CoffeeScript, since that is the standard which Tubular uses for projects and it’s always good to keep your mind working.  Plus as a Python/C programmer at heart I do find the CoffeeScript syntax where the parens are optional occasionally a bit hard to parse.

Top 3 likes of ES6

1. classes
2. import
3. “=>” for functions

While it might be possible to go on, I haven’t had the chance to really fully exercise the language for my little ToDo app.  With the first two items the real need of CoffeeScript is diminished and allows you to program to the standard.

General App Structure

This is where preference starts showing up.  How to structure a good AngularJS application.  I’m sure there is some conventions that I’m not following, either through ignorance or rebelliousness.  The biggest area where I think application standards are interesting is routing.

What I think is important is the ability to say in your main.es6 file:

1import './controllers/todo'

Then to have todo contain:

 1app.config(($stateProvider) => {
 2    $stateProvider
 3        .state('app.todo', {
 4            url: '/todo',
 5            authenticate: true,
 6            views: {
 7                'content@app': {
 8                    template: require('../../partials/todo.html'),
 9                }
10            }
11        });
12})
13
14app.controller('TodoController', class TodoController {
15   // ... more code here ...
16})

This way you’re having the routing next to the controller, rather than having a massive route.es6 file which documents the whole application.

Note:  You’ll see that I also make use of browserify to load HTML into the controllers directly.  This makes it really easy to compress the whole application into a solid Single Page Application.

Conclusion

I think ES6 is a good framework for building out AngularJS applications. The general problem is application structure, which is always a combination of personal preferences and habits.  That said, the Grunt flow with Babel and ES6 is easy to setup and make the code much cleaner.