Introduce AngularJS as Frontend Javascript Framework

Registered by Jiri Tomasek

AngularJS and specifically it's directives are a suitable solution to develop UI features and unify/organize frontend javascript code in Horizon.

Blueprint information

Status:
Complete
Approver:
David Lyle
Priority:
Medium
Drafter:
Jiri Tomasek
Direction:
Needs approval
Assignee:
Jordan OMara
Definition:
Approved
Series goal:
Accepted for icehouse
Implementation:
Implemented
Milestone target:
milestone icon 2014.1
Started by
David Lyle
Completed by
David Lyle

Related branches

Sprints

Whiteboard

On November 11th, we submitted a patch to introduce AngularJS into
Horizon [1]. We believe AngularJS adds a lot of value to Horizon.

First, AngularJS allows us to write HTML templates for interactive
elements instead of doing jQuery-based DOM manipulation. This allows
the JavaScript layer to focus on business logic, provides easy to
write JavaScript testing that focuses on the concern (e.g. business
logic, template, DOM manipulation), and eases the on-boarding for new
developers working with the JavaScript libraries.

Second, AngularJS is not an all or nothing solution and integrates
with the existing Django templates. For each feature that requires
JavaScript, we can write a self-contained directive to handle the DOM,
a template to define our view and a controller to contain the business
logic. Then, we can add this directive to the existing template. To
see an example in action look at _workflow_step_update_member.html
[2]. It can also be done incrementally - this isn't an all-or-nothing
approach with a massive front-end time investment, as the Angular
components can be introduced over time.

Finally, the initial work to bring AngularJS to Horizon provides a
springboard to remove the "DOM Database" (i.e. hidden-divs) used on
the membership page (and others). Instead of abusing the DOM, we can
instead expose an API for membership data, add an AngularJS resource
(i.e. reusable representation of API entities) for the API. The data
can then be loaded data asynchronously and allow the HTML to focus on
expressing a semantic representation of the data to the user.

Please give our patch a try! You can find the interactions on
Domains/Groups, Flavors/Access(this form does not seem to work in
current master or on my patch) and Projects/Users&Groups. You should
notice that it behaves...exactly the same!

We look forward to your feedback.
Jordan O'Mara & Jirka Tomasek

Further discussion on topic is available in openstack-dev list archives [3]

[1] [https://review.openstack.org/#/c/55901/]
[2] [https://github.com/jsomara/horizon/blob/angular2/horizon/templates/horizon/common/_workflow_step_update_members.html]
[3] http://lists.openstack.org/pipermail/openstack-dev/2013-November/018629.html

Gerrit topic: https://review.openstack.org/#q,topic:bp/angularjs-javascript-frontend-framework,n,z

Addressed by: https://review.openstack.org/57329
    AngularJS + base horizon module

(?)

Work Items

This blueprint contains Public information 
Everyone can see this information.