1. Presenter: 1 FreeIPA WebUI : An Approach for Single Page Applications Sr. Software Engineer Red Hat Inc. 04/18/2011

2. Presenter: 2 Agenda ● ►Overview ● What We Used ● What We Built ● Demonstrations

3. Presenter: 3 Historical Context ● 2001: ● Browser Wars ● Avoid Javascript,CSS ● 2005: ● Javascript (more) standarized ● AJAX ● 2009: ● Python vs. Java vs. Ruby vs... ● FreeIPA 1.0 WebUI

4. Presenter: 4 Single Page Application “all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or partial changes are performed loading new code on demand from web servers, usually driven by user actions. The page does not automatically reload during user interaction with the application, nor does control transfer to another page.” --http://en.wikipedia.org/wiki/Single_page_application

5. Presenter: 5 Why we chose Single Page over Server Side: ● Consistent: Same Business Logic as CLI ● Simple: Think in one language ● Flexible: Speed of UI Development ● Secure: No new Windows of Attack ● Scalable: Offload rendering from the server ● Responsive: Only fetch new data

6. Presenter: 6 Agenda ● Overview ● ►What We Used ● What We Built ● Demonstrations

7. Presenter: 7 What we used: Runtime Elements ● Javascript: ● the good parts ● Equality of Annoyance ● JSON ● JQuery/JQuery.UI ● BBQ

8. Presenter: 8 What we used: IPA Server Side ● JSON-RPC ● Metadata ● Plugins ● Attributes ● Validation ● Labels ● Additional Internationalization

9. Presenter: 9 FreeIPA Architecture Overview

10. Presenter: 10 What we used: Development Tools ● Firebug: Javascript debugger in Firefox ● QUnit: Unit testing framework ● Javascript Lint (JSL) ● cURL ● Selenium ● Fixtures

11. Presenter: 11 Agenda ● Overview ● What We Used ● ►What We Built ● How We Developed ● Demonstrations

12. Presenter: 12 What We Built: Class Diagram

13. Presenter: 13 What we built: Dialog and Validation

14. Presenter: 14 Facets: Search

15. Presenter: 15 Facets: Details

16. Presenter: 16 Facets: Associations

17. Presenter: 17 DSL: Entity Definition IPA.entity_factories.hostgroup = function() { return IPA.entity_builder(). entity('hostgroup'). search_facet({columns:['cn','description'], add_fields:['cn','description']}). details_facet({sections:[{ name:'identity', label: IPA.messages.objects.hostgroup.identity, fields:['cn','description'] }]}). association_facet({ name: 'memberof_hostgroup', associator: IPA.serial_associator }). standard_association_facets(). build(); };

18. Presenter: 18 Widgets: Line Undo

19. Presenter: 19 Facets: Change Detection

20. Presenter: 20 Single Page Flow

21. Presenter: 21 Agenda ● Overview ● What We Used ● What We Built ● ►Demonstrations

22. Presenter: 22 Demonstrations ● Fixtures http://admiyo.fedorapeople.org/ipa/ui/http://admiyo.fedorapeople.org/ipa/ui/ ● Live Server ● CLI ● WebUI ● curl

23. Presenter: 23 Any Questions?