Cancelling / reverting changes to models in angular.

Right up front I’m going to say that i haven’t found the right answer to this problem. Yet.

outline

Add undo or save abilities to edits on a model in Angular.

I have two templates which bind to my model. The edit template and the view template. When in the view the data is bound essentially one way and there is no problem. For edit, angular has some great binding that reacts to change events and sets the model value to the current value of the input. This is a key aspect of the angular frame work, and in a lot of places, this data-binding is really useful, except if you not sure you want to keep those changes.

the two way binding will overwrite the original model with the new changes and then the original values are gone. so how do i implement a cancel/revet button?

things i have tried already

‘get’ the model again from a saved point. This involves making a request to the server for the original model value. Its expensive both in network & time, so doesn’t lead to a great user experience. Also this breaks for things not yet stored on the server.

copy & change. Take a copy of the model, edit that and push the changes back on save. The failure here is that with an async system like javascript, my model might not be fully loaded at the point i want to copy, and even if it is, how do i reflect changes to the original in my ‘editing’ copy?

cacheing the model on each ‘save’ which allows me to get the original value back if my edit are cancelled. Still changes to the original from another source need to be re-cached.

 

so im ata a loss. for now. ill write back if i find a suitable answer.

 

Advertisements

Porting AppFog command line util to Node.js

Recently i tried to explain to a fellow developer how to update our server hosted by AppFog PaaS, everything in our process is development so its not all that great (yet) and hopefully i will eventually have time to improve & automate this, but for now here it is.

  • Built the Client side app in flash builder
  • Checkout the latest stable Node.JS server app code
  • Copy the bin-output dir of client code inside the server’s dir structure
  • Use the AppFog CLI to update the ‘dev’ version
  • conform this is working ok for a couple of weeks
  • clone to ‘production’

As i said, possibly not the neatest solution, but its what we are currently doing.

Since i develop the server using the wonderful Cloud9 the awkward part of the process is uploading the bin-output to c9’s workspace so i can update using the af util. This new dev will be deploying from an OSX machine which we shall say is ‘fresh’ no OSX homebrew etc, and for now thats the way i want to keep it. Seeing as a fresh OSX Lion machine does not have a version of ruby high enough for AppFog CLI to run, the port to Node.js was born (yes i know they will need to install this too but whatever)

So AppFog CLI and AppFog API were both born and so far have about 24 hrs work between them. I’ve separated this mini project into two parts as hopefully the appfog-api (npm link) will allow others to build automated deployment/monitoring etc into their own apps.

So please npm install af and let me know how you get on with it. Currently this lib is at a very early stage with just the ‘get’ functions but hopefully by V1.0 i should have implemented the bare minimum of af update, af push, and af stat

Expanding on some ideas

A friend of mine has been thinking about home automation recently, and this got me thinking about a few things but mainly, what would be some good concepts for the infrastructure of such a network of devices.

So whats important?

Easy to set up – technically minded people tend to overlook this aspect or worse yet, misunderstand the true meaning of easy set-up. Wi-Fi pairing is only now becoming a skill that most people are comfortable with, so if we are to have a network of devices that report back to the internet through your home internet connection then we will need to have some very clever programs to enable all this setup with as close to plug and play as possible.

Dynamic – any infrastructure is going to have to be able to deal with the dynamic nature of the standard home network/router internet connection. This will be an assign IP to the router and then local assigned IP’s for devices within the house

Simple –  If we are going to implement this on embedded devices the concepts have to have a very low overhead for computation & throughput

Proven – As with most things, its probably already been done quite well, so take some of these lessons and build on them.

The underlying functionality of a home automation ‘node’ is pretty simple, report measurements or switch outputs. The interesting thing comes when we start trying to have a system that can navigate complex network infrastructures (like the whole web, plus the LAN its part of) and report this information back to a server. Maybe we would like the ability to re-route this information to a different server, or multiple outlets.

Client – Developing Units of Sound online

continued on from Developing Units of Sound Online

Client side choices are some of the hardest for any prospective Web Application, there are a myriad of browsers, versions of browsers, networking infrastructures etc etc that can affect your client and therefor your end user experience. Javascript engines are all slightly different from Firefox to Chrome to Opera and arguably worst Internet explorer, so how can I as a developer cope with all these differences? Especially i wont be able to commit even 20% of my time to this project  (its on top of a normal 9-5 remember).

 Standardization

the only way to deal with this problem is to use some tool which will iron out all of these idiosyncrasies with each browser and give me a level playing field. There are a few Javascript libraries written for this purpose but the winner in this for a long time has been flash. Flash is actually its own run-time environment but is very well supported by all the major browsers and for my purposes will level the playing field perfectly. This does throw some spanners in the works for later on, especially with mobile development.

Framework

Before being opensourced Adobe was push Flex as a flexable framework which would compile down to AS3 and run inside the flash run time environment. So without too much thought and investigation this is what i started to develop in and so far all my experiences have been great. Nine times out of Ten when i start to tackle a problem which is complex and not breaking into smaller sections very well i find that with a bit of reading the functionality is already implemented or partially implemented but under a different ‘name’.

Developing Units of Sound online

To begin with, some background Units of Sound is a online port of an existing windows native program, and currently has an install base of around 5000 users all in the UK. To allow expansion to other countries and other platforms as well as to out run limitations with the old program (written in a non longer supported language) I am helping move this program to a Flex application which will be capable of running entirely in browser.

 

Architecture in my mind is what drives the majority of high level decisions including ‘do we even need our own server?’ this sounds like an obvious question but after some thought about the operation of the program i found that 95% of it was statically served and run entirely in the client.

The KISS principle is something I think about a lot when undertaking tasks of this nature. The UOS team is made up of two developers and in all likelihood will never be made up of any more, once written the program will change very little, there will be the bare minimum of documentation and the scale will most  likely never top 30-40K users. Bearing this in mind its more important that bugs can be found easily, code can be stopped and stepped through and that what each function and section is trying to achieve is obvious.

My latest conundrum comes the previously mentioned question ‘Do we even need our own server?’  Flex is a very powerful language, it allows us to make http calls and use other third party SaaS type API’s E.G Amazon Web Services S3 or Rackspace Cloudfiles, why not just use these to do the small amount of storing required? we could even find a company to host our database, server our static content from storage providers and we are 100% ‘serverless’ (serverless as in we dont have to write any server side code).  But this architectural decision does have downsides, first and most obviously is we loose control of that area of our program and therefore User Experience. With a realitively small number of users its important to provide an excellent user experience. We would loose a few other things:

  •  custom request hooks
  • analytics becomes harder
  • unforseen functionality might be limited
  • caching not under out control
  • easy of access to our ‘own’ data

My decision was not a light one, the simple approach of no server to deal with is very aluring, but in the end the unknows and out-of-our-control’s are too many so we will stick with a traditional approach and run our own server. Next post, Technology

The dreaded scaling word

As part of UOS online lessons need to be able to upload small sound clips from the client to the server. These clips are aprox 300k in size and can be sent a received reasonably quickly. So some Node.JS later i have a serve which will receive and server sound clips. Happy days.

Image

Anyone would think that the hard part is over as i have got the functionality i need up and running. but this is the internet and Im going to have to think about what happens when several users are pushing data back and forth to the server and how that will impact on storage space on my server and traffic. each of which will have there very real world costs from a hosting company.

ImageImage

For now I’m not even thinking about traffic costs but purely storage.

Each user must complete 150 reading lessons with an average of lets say 3 blocks of 5 words per lesson. so over the entive course the user will upload 300k * 5 * 3 * 150 =  675Mbytes of data. The average course takes a year so roughly 675 / 365 = 1.8 ish Mb a day. (this is spreading out the load over all days even though a large number of days will be zero traffic, holidays etc)

although they will upload 675 Mb of data we will only be holding a window of say 20Mb of data per student so:

Traffic — 1.8Mb/day/user

Storage — 20Mb/user

with roughly 5000 active users of UOS we could maybe expect a 5th of these to convert to online in the next year, so:

Traffic — 1.8Gb/day

Storage — 20Gb

This is starting to look dangerous, what happens when we catch up with users all online and even grow the total users to say 10000?

Traffic — 540Gb/month

Storage — 200Gb

this just shows how a relitively small ammount of code pushed over the network and stored on a server ver soon adds up when you start thinking about users in the thousands.

Cloud9 & RasPi Pt2

Following on : After completely blowing away my SD card i created another one this time installing Node 0.8.1 with these instructions and source mint installs with no problems at all.

On-to the next problem, libxml. libxml is an npm package which i believe wraps the libxml Debian package with node bindings. There is a flag set in the build command line ‘-msse2’ which is incompatible with the ARM architecture, this is known about but not yet fixed https://github.com/ajaxorg/node-libxml/issues/7

so to counter this i think i have to try and build libxml beforehand and then run the cloud9 install scrip again.

StackEx conversation