AngularJS port discussion

[anant-singh]

After my discussion with @neelabhg and @angrave, we had decided that if feasible I should first present a prototype or just a POC of a possible port of our current codebase to AngularJS. My initial arguments for going for such major overhaul was:

• It is has a complete MVVM application structure with services, controllers and modules.
• One stop solution instead of multiple libraries, such as knockout for 2-way data binding, router.js for routing, jquery for ui etc.
• Dependency injection.
• Easily unit-testable.
• Huge community support in terms of libraries and plug-ins.

So far in the past three weeks, I have been able to come with a prototype with an initial experimental layout. Also, the comprehensively designed features and elements in the current version made the port much easier in terms of taking care of small annoyances such as build configurations, editor configurations and providing a basic application structure.

A development version of the prototype can be accessed at http://sys.anantsingh.me

Features of the prototype:

• Breaking the current application into modules that can exist and maintained independently.
• Code was written strictly following the angular style guide presented here.
• The current UI/UX is based on googles' new material design guidelines.
• Updated version of jor1k with a non-canvas based terminal using term.js.
• Also the terminal is now an independent window which can be hidden and dragged around.
• Lessons integrated into a collapsible sidebar.
• A new build system in gulp.

Features to be implemented:

• Finishing the editor area with all the tools and status messages from the previous version.
• All the components have yet to be linked to other i.e editor <-> jor1k <-> lessons.
• Porting some of the recent additions in the current codebase.
• Adding a navigation bar on the left.
• A unified search bar for searching man-pages or video (up for discussion)
• A user dashboard for to show preferences and also course progress.
• A splash screen to handle loading and initialization of every component before giving control to the user.
• Configuring the build process to work similarly to our current build system.
• Fixing general bugs in UI.
• Unit tests and modular analytics on each module separately.

The timeline on porting the rest of the features which already exist should be quicker, thanks to the originally efficient structure of the code most of the current modules are converted quite easily into angular services. Also, creating the new UI has been quicker because I have so far been able to directly copy small UI-components and code segments into my port with minor modifications which worked seamlessly.

Also, @neelabhg I wanted to request a new repository in cs-education for this port. So that I can commit my code into it.

@cs-education/uiuc-cs-senior-project-2014 Feel free to express your ideas and opinions on this.

Thanks to @neelabhg for helping with understanding most of the current code and also with the jor1k update.

[neelabhg]

Work on this has stopped. We have decided to use Knockout components instead, as we already use Knockout. See #122.