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

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

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

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.” --

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

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

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

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

Presenter: 9 FreeIPA Architecture Overview

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

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

Presenter: 12 What We Built: Class Diagram

Presenter: 13 What we built: Dialog and Validation

Presenter: 14 Facets: Search

Presenter: 15 Facets: Details

Presenter: 16 Facets: Associations

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(); };

Presenter: 18 Widgets: Line Undo

Presenter: 19 Facets: Change Detection

Presenter: 20 Single Page Flow

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

Presenter: 22 Demonstrations ● Fixtures ● Live Server ● CLI ● WebUI ● curl

Presenter: 23 Any Questions?