Modern web development workflow with AngularJS - Adolfo Benedetti¶

Tags: django

(We’re using AngularJS in a couple of Django projects, so I decided to go to an AngularJS meeting in Haarlem, the Netherlands. This is a summary of the second talk.)

Adolfo’s talk is about structuring your web projects with Yeoman and Maven. Yeoman is build by the same team as AngularJS, so he started looking at how to integrate it with his Java-based workflow.

On the backend, you can control your environment pretty fine. On the frontend, it is much harder. Or at least it is way less often done in a controlled way.

He mentioned git flow as the ideal way to manage your source code. (Personal note: I find it too heavyweight to my taste; simple branching from master with pull requests is often enough for smaller teams).

Maven provides developers with ways to manager builds, reports, documentation, installation and so on.

Ok, in his demo he set up some java project with archetype, jersey and other things I never heard about. He fired up an IDE and copied code around and used java and ran some script. And switched between 5 windows. Summary: I’m thanking God on my knees tonight that I’m using Python. The code was butt-ugly. And I was expecting an AngularJS talk, not a java one.

Good point however: he copy/pasted a testcase into the project, too, so he did test driven development. He even ran the tests before committing the code: good! That’s something I’ve still got to teach to some of my colleagues.

He then started to set up a frontend in mostly the same way with Grunt and Yo scaffolds. A huge directory structure ensued.

Now, how to integrate maven and yeoman? There seem to be three options:

• Consider frontend and backend as complete separate entities.

• Don’t use modern tooling.

• Call grunt as an executable from maven. (There’s a plugin for that.)

He uses the last option now, but he thinks the first one is best.

A good source of information is a recent blog entry about javascript package management and maven. (Note: my colleague next to me said that article was his basis for the structuring he’s doing on our own javascript dependency management). Basically: don’t store your javascript dependencies’ source code in your own repository. Use the available dependency management tools.

Some tips for tools:

• A nice thing to look at for AngularJS test driven development: the angular scenario runner. It has great intergration with Angular and it is based on top of webdriver.

• Debugging AngularJS is nice in Batarang, a webinspector extension for Chrome.

• Chrome as such also has good functionality for working with AngularJS. Updating items live based on changes in your javascript files. A bit like Brett Victor’s “inventing on principle” talk. Live coding and live feedback.

Note: if I read what I wrote down I notice I’m not terriby enthousiastic. One thing was the presentation itself. Lots of java terminology that was assumed known, which IMO isn’t a good assumption for an AngularJS meeting. A second thing was the big amount of generated code. I have and use code generators, too, but this looked a bit excessive. Perhaps it is just my unfamiliarity with IDEs and Java projects and big javascript projects. Thirdly there was hardly any AngularJS in the presentation. I didn’t walk 20 minutes through drenching rain for this. So…