optimize a HTML5/js single-page-application

We've built a responsive HTML5/javascript webapp using the knockout.js framework. It supports: - display size: 4.5"+, 800x480px+ - desktop browsers: Google Chrome 44+, Mozilla Firefox 31+, Internet Explorer 11 (Windows 7 and 8.1) and Edge (Windows 10), Apple Safari 8 (OS X 10.10) - mobile devices: safari on iOS 8.0+, chrome on Android 4.4+, IE on WP8.1+ The webapp tracks an object which contains a list of activities and within each activity there is one or more challenges. Its main issues are: 1. [visual design] the hierarchy of information is too deep, making the low-level objects (the challenges) difficult to reach 2. [usability] it reloads the whole object whenever we change any of the subobjects, causing flicker and loss of status 3. [testability] we cannot test the frontend viewmodel; we'd love to be able to run browserless tests with mocha using the node interpreter We are looking for refactorings and redesigns that address one or more of the above issues. Just specify clearly in your bid how you plan to attack this problem and the scope of your work. It is OK to add new library dependencies, provided they have substantial benefits and introduce limited risks. It is OK to replace knockout.js with something else you're proficient in. It is not OK to introduce new useless dependencies. To make it easy for you to understand what this is all about, we provide an anonymized version of the webapp, where we have stripped the actual AJAX calls (the sendReceiveData function in [login to view URL] just returns a static JSON). To test it, unzip the attachment, cd to the resulting spa directory then launch chrome like this: cd spa chrome --allow-file-access-from-files [login to view URL] If we start this project, we'll give you access to the actual source code repo which is different (so don't start working on the anonymized version !). The API is like this: - GET /api/group/<id> (returns the entire JSON; that is mocked in the sendReceiveData function in js/[login to view URL] with some static JSON) - PUT /api/group/<id> (returns the groupid of the updated group) - POST /api/groupactivity (returns the groupactivity id of the new groupactivity) - PUT /api/groupactivity/<id> (returns groupactivityid of the updated groupactivity) - POST /api/challenge (returns the challenge id of the new challenge) - PUT /api/challenge/<id> (returns the challenge id of the updated challenge) ATM are not yet using these endpoints but they are available: - GET /api/groupactivity/<id> (returns the JSON for the group activity) - GET /api/challenge/<id> (returns the JSON for the challenge)