AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis

transcript

Needs more jQueryUsing advanced JavaScript in

Atlassian Plugins

Tuesday, November 2, 2010

Needs more jQueryUsing advanced JavaScript in

Atlassian Plugins

Needs more jQueryUsing jQuery and AUI to create better plugins with less work

AUIAtlassian User Interface

“owie”Atlassian User Interface

AUI Dropdown

AUI Dialog

AUI DialogAUI Forms

AUI Toolbar

AUI Dialog

Not in AUI

AUI Dialog

Not in AUI. Yet.

AUI is driving a lot of our UI innovation.

It can drive yours too.

Who am I?

• Zach Davis

• Front-end Developer

• Integration Team

• San Francisco

What the Atlassian User Interface library is

Why we chose jQuery

Why you should choose AUI

How to use AUI

Where AUI is now

Where AUI is headed

Questions?

What is the Atlassian User Interface library?

“The Atlassian User Interface (AUI) is a set of reusable, cross-browser tested, high-quality JavaScript and CSS UI components. We developed AUI for use in Atlassian applications.”Tuesday, November 2, 2010

?Tuesday, November 2, 2010

less work, more awesome

What AUI provides• Wraps jQuery

• JS components

• JS utilities

• Ready to go CSS

AUI vs AJS

Dialog

Inline Dialog

Dropdown

Why did Atlassian choose jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

“”Tuesday, November 2, 2010

?Tuesday, November 2, 2010

less work, more awesome

Why Atlassian chose jQueryJanuary, 2008

Why should you care?

Consistent look and feel

Ready to use components

Helpful utilities

How do you use AUI?

Dialog

var popup = new AJS.Dialog(400, 200, "my-popup");popup.show( );

Inline Dialog

AJS.InlineDialog(AJS.$("#my-trigger"), 1, "dialog-content.html");

Dropdown

AJS.$("#my-dropdown").dropdown("Standard");

AJS.format

AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);

AJS.format

>> Showing entries 0 - 10 of 11

AJS.format

AJS.format("Showing entries {0} - {1} of {2}", 0, 10, 11);

Keyboard shortcuts

AJS.whenIType("cl").click("#test-click");

Keyboard shortcuts

AJS.whenIType("cl").click("#test-click");

AJS.whenIType("sf").execute(someFunction);

Sounds great...

...but how do I get it in my plugin?

Sounds great...

$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")

...but how do I get it in my plugin?

atlassian-plugin.xml

<web-resource name="Fake plugin resources" key="fake-resources"><dependency>com.atlassian.auiplugin:ajs</dependency><resource type="download" name="fake-plugin.js" location="js/fake-plugin.js"/><resource type="download" name="fake-plugin.css" location="css/fake-plugin.css"/>

</web-resource>

atlassian-plugin.xml

<web-resource name="Fake plugin resources" key="fake-resources"><dependency>com.atlassian.auiplugin:ajs</dependency><resource type="download" name="fake-plugin.js" location="js/fake-plugin.js"/><resource type="download" name="fake-plugin.css" location="css/fake-plugin.css"/>

</web-resource>

fake-plugin.vm

$webResourceManager.requireResource("com.atlassian.example:fake-resources")

How do you use AUI?

Where is AUI now?

• Latest version: 3.2

• All products on AUI 3.x

• Open source http://confluence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation

https://studio.atlassian.com/browse/AJS

Public vs Private Components

Where is AUI headed?

More formalized processes

• Testing

• Builds

• Infrastructure

• Dedicated resources

Community contributions

Community feedback

Questions?

Photo credits

http://www.flickr.com/photos/dmitry-baranovskiy/2378867408/

http://www.flickr.com/photos/cayusa/384187184/

http://www.flickr.com/photos/oskay/437341128/

http://www.flickr.com/photos/rocketlass/2851359961/

http://www.flickr.com/photos/mimk/1350963678/

More information

• Developer Docs: http://confluence.atlassian.com/display/AUI/Atlassian+User+Interface+(AUI)+Developer+Documentation

• Javadocs: http://docs.atlassian.com/aui/3.0/

• Demos: https://studio.atlassian.com/source/browse/~raw,r=HEAD/AJS/trunk/auiplugin/src/demo/index.html (Studio login required)

AtlasCamp 2010: Needs more jQuery - Using advanced Javascript in Atlassian Plugins - Zach Davis

Documents