slash2009/XWMM — pull request #54 by fyfe (2014-02-25 19:27:49+00:00)
Title: A possible re-write using angularjs

I had a play around with [AngularJS](http://angularjs.org/) and [Bootstrap](http://getbootstrap.com/) as a possible alternative to [ExtJS](http://www.sencha.com/products/extjs/) for powering XWMM.

For those that want to see it NOW I've created a [demo release](https://github.com/fyfe/XWMM/releases/tag/angularjs-demo) which has a pre-built XBMC add-on attached for anyone that wants to try it out, all feedback is welcome.

I've taken a slightly different approach with this re-write, rather than trying to duplicate what we've got at the moment I started with a clean slate. The big difference between the [ExtJS4 re-write]() and this one is I've been able to use [WebSockets](http://wiki.xbmc.org/index.php?title=JSON-RPC_API#WebSocket). This allows real 2 way communication between XBMC and XWMM. So if XBMC makes a change to the library (e.g. adds a movie during a library update) it will send out a notification which XWMM can listen for and update the web page accordingly. It also means XWMM gets confirmation a change was successful when it saves changes, currently we just hope for the best when saving changes.

To see the 2 way communication in action:
1. Open up XWMM in a browser
2. On XBMC delete a movie from your library
3. Notice it's been removed in XWMM
4. On XWMM select Library > Update
5. Notice a library update is triggered on XWMM, the deleted movie should be re-added
6. Notice it's been added back to XWMM

If you open the developer console in your browser you can also see the communication between XBMC and XWMM.

As far as how it looks, I've just thrown something together at the moment I've not had much of a chance to dive into [Bootstrap](http://getbootstrap.com/) to see what's possible. This was the one big upside of ExtJS, it provided a good library of conventional UI components. The downside was it could be very difficult to get them to work the way we wanted them to work.

Other highlights:
* **Documentation** As tedious as it is I've made an effort to try and document all the javascript with the aim of hopefully making it easier for others to work out how things work.
* **Build Tools** I've used [Grunt](http://gruntjs.com/), this is used to automate various development tasks, the main one at the moment being compiling the templates and combining and optimizing the javascript and css files.

As a side note this pull request is more a request for feedback than a request for this to be merged at the moment.

#53