Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

A possible re-write using angularjs #54

Closed
wants to merge 54 commits into
from

Conversation

Projects
None yet
2 participants
Contributor

fyfe commented Feb 25, 2014

I had a play around with AngularJS and Bootstrap as a possible alternative to ExtJS for powering XWMM.

For those that want to see it NOW I've created a demo release 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. 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 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, 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

Contributor

un1versal commented Feb 25, 2014

I cant comment on development side, except I heard good things about websockets. Will test and see how it goes on my fake xbmc vm setup.

Fantastic to see you in action :)

Contributor

un1versal commented Feb 26, 2014

Its responsive, and can definitely see potential in this, the websockets made the only change possible in demo, almost instant xwmm and xbmc, have you considered jquery? or something else to make it websocket friendlier?

@fyfe.

I was having a look at jquery + grunt + websockets this guy on this repo is great with jquery and one day along time ago he wrote a demo web interface for xbmc but noone was interested in helping him. see him at https://github.com/fearphage

fyfe added some commits Dec 10, 2013

Initial commit of movies (big) cleanup.
I've created it as a seperate folder for now. Once it's complete it
will all be moved into more logical folders.
Clean up the XBMC add-on files.
* Add a license file
* Clean up whitespace and formating
* Conform to XBMC's add-on rules
Add vendor libraries.
* Angular JS 1.2.13
* Bootstrap 3.1.1
* jQuery 2.1.0
* Modernizr 2.7.1
Create a basic Grunt project.
* Setup Grunt to automate some of the development tasks
* Add some instructions to README.md
* Add a .gitignore
* Move some files around

@fyfe fyfe closed this Jun 28, 2014

@fyfe fyfe deleted the fyfe:rewrite-using-angularjs branch Jun 28, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment