[openstack-dev] [Horizon] Introduction of AngularJS in membership workflow

Ladislav Smola lsmola at redhat.com
Tue Nov 12 08:35:36 UTC 2013

+1000 Excellent

I am really excited about having a heavily tested proper client-side 
layer. This
is very needed, given that amount of javascript in Horizon is rising. 
The hacked
together libraries in JQuery, that are there now are very hard to orient 
in and will
be hard to maintain in the future.

Not sure what the Horizon consensus will be, but I would recommend writing
new libraries only in Angularjs with proper tests. In the meantime we 
can practise
Angularjs by rewriting the existing stuff. I am really looking forward 
to picking
something to rewrite. :-)

Also I am not sure how the Horizon community feels about 'syntax sugar' 
for Javascript and Angular. But from my experience, using Coffeescript 
and Sugarjs
makes programming in Javascript and Angular a fairy tale (you know, 
rainbows and
unicorns everywhere you look). :-D

Thanks for working on this.


On 11/11/2013 08:21 PM, Jordan OMara wrote:
> Hello Horizon!
> 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
> [1] [https://review.openstack.org/#/c/55901/] [2] 
> [https://github.com/jsomara/horizon/blob/angular2/horizon/templates/horizon/common/_workflow_step_update_members.html]
> _______________________________________________
> OpenStack-dev mailing list
> OpenStack-dev at lists.openstack.org
> http://lists.openstack.org/cgi-bin/mailman/listinfo/openstack-dev

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstack.org/pipermail/openstack-dev/attachments/20131112/478ef107/attachment.html>

More information about the OpenStack-dev mailing list