better front-end development in atlassian plugins

Tuesday, April 3, 2012

The road from back-end to front-end programming

Wojciech SeligaJIRA Development Team Lead, AtlassianCo-founder, Spartez

Better front-end development in Atlassian plugins

2Tuesday, April 3, 2012

• 4+ years with Atlassian• 6+ years doing Atlassian plugin development:

• JIRA Importers Plugin

• JIRA Drag & Drop Attachments Plugin

• JIRA Mail Plugin

• ScreenSnipe for JIRA, ScreenSnipe for Confluence ...

• Veteran of old-school web development (Java)

About me

A bit of history

• 2002 - 2006 - Awesome UI, Web 1.0

A bit of history

• 2002 - 2006 - Awesome UI, Web 1.0WebWork, XWork, JSP, Velocity, Freemarker

A bit of history

• 2006 - 2009 - Features, features, features!

A bit of history

• 2006 - 2009 - Features, features, features!Mostly back-end technologies

A bit of history

• 2006 - 2009 - Features, features, features!Mostly back-end technologies

• 2009 - now - new Atlassian UI, Web 2.0+

A bit of history

• Confluence 3.0+, JIRA 3.13.5+• Forms, Controls, Tabs, Inline Dialogs, ..., AJS

Evolution Step 1 - AUI

• Plugin Framework v2 only (JIRA 4+, Confluence 3.1+)• Easier AJAX for plugin developers unleashed

Evolution Step 2 - REST

<rest key="helloWorldRest" path="/helloworld" version="1.0"> <description>Hello world sample.</description></rest>

• World of Java annotations (Jersey)

@Path ("priority")@AnonymousAllowed@Consumes ({ MediaType.APPLICATION_JSON })@Produces ({ MediaType.APPLICATION_JSON })public class PriorityResource { // injected dependencies and the constructor here ... @GET @Path ("{id}") public Response getPriority(@PathParam ("id") final String id){ final Priority priority = constManager.getPriorityObject(id); if (priority == null) { throw new NotFoundWebException(ErrorCollection.of( i18n.getText("rest.priority.error.not.found", id))); }

return Response.ok(PriorityJsonBean.fullBean(priority, baseUrls)) .cacheControl(never()).build(); }}

injectable JS & CSS + REST = WIN

• Confluence 2.10+, JIRA 4.2+• Easy resource injection to popular destinations• Easy to define own contexts

Evolution Step 3 (2010)web resource contexts

<web-resource key="quick-edit-issue"> <context>jira.view.issue</context> <context>jira.navigator.advanced</context> <context>jira.navigator.simple</context>

</web-resource>

Evolution Step 4 (2010)web-resource-transformer

<web-resource-transformer key="my-key" class="fqcn.must.implement.WebResourceTransformer"/>

Evolution Step 4 (2010)web-resource-transformer

<web-resource-transformer key="my-key" class="fqcn.must.implement.WebResourceTransformer"/>

public interface WebResourceTransformer { DownloadableResource transform(Element configElement, ResourceLocation location, String filePath, DownloadableResource nextResource);}

web-resource-transformers

• I18n

• I18n• L&F

• I18n• L&F• context path

• I18n• L&F• context path• SASS, LESS

• I18n• L&F• context path• SASS, LESS• Soy

hello.world=Hello Worldfrom.atlascamp=from AtlasCamp {0}

i18n resource file defined in atlassian-plugin.xml

I18N - web resource transformation definition

<web-resource key="our-key"> <dependency>com.atlassian.auiplugin:ajs</dependency> <transformation extension="js"> <transformer key="jsI18n"/> </transformation> <resource type="download" name="filename.js" location="path/to/filename.js"/></web-resource>

I18N transformation

var helloText = AJS.I18n.getText("hello.world") + " " + AJS.I18n.getText("from.atlascamp", 2012)

I18N transformation

var helloText = "Hello World" + " " + AJS.format("from AtlasCamp {0}", 2012)

Times of Hacking

JQuery

Prototype

underscore.js Javascript hacks

JQuery JQuery

JQueryJQuery

Javascript hacks

JQuery

underscore.js

freestyle AJAX

JQuery JQuery

JQuery

Javascript hacks

JQuery

JQueryJQuery

JQuery

JQueryJQuery

JQuery JQuery

Javascript hacksJQueryJQuery

JQuery

JQuery JQuery

JQuery

underscore.js

Javascript hacks

JQuery

It's all too easy to create JavaScript applications

that end up as tangled piles of jQuery selectors and

callbacks, all trying frantically to keep data in sync

between the HTML UI, your JavaScript logic, and

the database on your server. For rich client-side

applications, a more structured approach is often

helpful..

Introduction to Backbone.js”

Evolution Step 5 (2011)

Structure on the client side

For speed, beauty and maintainability

• SproutCore• Sammy.js• Spine.js• Cappucino• Javascript MVC

• Ember.js• Angular.js• Batman.js• Mustache• Handlebars

More structured approach in JS

• Soy (Google Closure Templates)

• Backbone.js

• Backbone.jsM

• Backbone.jsMV

• Backbone.js

Our Road to Soy

• AJS.template

Our Road to Soy

• AJS.template• Mustache

Our Road to Soy

• AJS.template• Mustache• Soy

Our Road to Soy

Soy Features

• Simplicity

Soy Features

• Simplicity• Logic and display separation

Soy Features

• Simplicity• Logic and display separation• Client and server side (Javascript and Java)

Soy Features

• Simplicity• Logic and display separation• Client and server side (Javascript and Java)• Client-side speed

Soy Features

• Simplicity• Logic and display separation• Client and server side (Javascript and Java)• Client-side speed• Security (auto-escaping)

Soy Features

• Simplicity• Logic and display separation• Client and server side (Javascript and Java)• Client-side speed• Security (auto-escaping)• Battle-tested by Google

Soy Features

Soy - Example

{namespace examples.simple}/** * Greets a person using "Hello" by default. * @param name The name of the person. * @param? greetingWord Optional greeting word to use instead of "Hello". */{template .helloName} {if not $greetingWord} Hello {$name}! {else} {$greetingWord} {$name}! {/if}{/template}

Soy Syntax - Types

Type Examples

null null

Boolean false, true

Integer 123, -857, 0x123

Float 0.5, 123.0, 10.1e4

String 'Atlassian', '', 'foo-bar'

List [], [1, 'two', 3, [4, 'five']]

Map [:], ['key': 'value', 'key2': 'value2']

Soy Syntax - Operators

• - (unary) not• * / %• + - (binary)• < > <= >=• == !=• and• or• ?: (ternary)

Soy - Commands

• {template}{/template}

Soy - Commands

• {template}{/template}• {literal}{/literal}

Soy - Commands

• {template}{/template}• {literal}{/literal}• {print <expression>}

Soy - Commands

• {template}{/template}• {literal}{/literal}• {print <expression>}• {<expression>}

Soy - Commands

• {template}{/template}• {literal}{/literal}• {print <expression>}• {<expression>}• {if <expression>},

{elseif}, {else}, {/if}

Soy - Commands

• {foreach}, {ifempty}, {/foreach}

Soy - Commands

• {foreach}, {ifempty}, {/foreach}• {for}, {/for}

Soy - Commands

• {foreach}, {ifempty}, {/foreach}• {for}, {/for}• {call}, {/call}, {param}, {/param}

Soy - Commands

• {foreach}, {ifempty}, {/foreach}• {for}, {/for}• {call}, {/call}, {param}, {/param}• {sp}, {\n}, {lb}, {rb}

Soy - Commands

Soy - defining variables

26Keep business logic away from view!

Not Supported!Tuesday, April 3, 2012

•{getText('i18n-key', ....)

•{contextPath}

•{$data|truncate:30}

Useful functions

Soy Javascript Compilation

{namespace JIRA.Templates.Demo}/*** Simplest Hello world demo* @param name*/{template .helloWorld}<div>Hello World, {$name}</div>{/template}

// This file was automatically generated from demo.soy.// Please don't edit this file by hand.

if (typeof JIRA == 'undefined') { var JIRA = {}; }if (typeof JIRA.Templates == 'undefined') { JIRA.Templates = {}; }if (typeof JIRA.Templates.Demo == 'undefined') { JIRA.Templates.Demo = {}; }

JIRA.Templates.Demo.helloWorld = function(opt_data, opt_sb) { var output = opt_sb || new soy.StringBuilder(); output.append('<div>Hello World, ',

soy.$$escapeHtml(opt_data.name), '</div>'); return opt_sb ? '' : output.toString();};

// This file was automatically generated from demo.soy.// Please don't edit this file by hand.

if (typeof JIRA == 'undefined') { var JIRA = {}; }if (typeof JIRA.Templates == 'undefined') { JIRA.Templates = {}; }if (typeof JIRA.Templates.Demo == 'undefined') { JIRA.Templates.Demo = {}; }

JIRA.Templates.Demo.helloWorld = function(opt_data, opt_sb) { var output = opt_sb || new soy.StringBuilder(); output.append('<div>Hello World, ',

soy.$$escapeHtml(opt_data.name), '</div>'); return opt_sb ? '' : output.toString();};

• implicit by default to HTML escaping• {namespace com.example autoescape="XXX"}

XXX may be true, false, contextual• disable for a single case with {$templateData|noAutoescape}

• sanitized data

Auto-escaping

Contextual Auto-escaping

/** * @param name */{template .helloWorld autoescape="contextual"}<a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a>{/template}

{“name”: "><script>alert(\"x&xx\")</script>"}

<a href="/Demo?name=%3E%3Cscript%3Ealert%28%22x%26xx%22%29%3C%2Fscript%3E" onclick="var x = '\x3e\x3cscript\x3ealert(\x22x\x26xx\x22)\x3c\/script\x3e'">><script>alert("x&xx")</script></a>

• JIRA (gadgets, new project administration, mails, ...)• GreenHopper• PAC• ...

Soy @ Atlassian

Soy and Atlassian Plugins

<web-resource key="my-key">

• Atlassian Plugin Framework favours Velocity• SoyTemplateRenderer/SoyTemplateRendererProvider • DefaultVelocityContextProvider (jira-core)• SoyData, SoyDataList, SoyDataMap,

SoyData.createFromExistingData()

Server-side Soy

Soy - Coding Example

• {call} in Soy• web-resource <dependency>

Soy - Template Library

Backbone.js

• Event-driven• Models• Views (responsible for keeping markup in sync with

model)

Backbone.js

Our story with backbone.js

• Version/Component/People management in JIRA (Ignite) - 2011

• JIRA Importers Plugin, JIRA Mail Plugin - 2011

• JIRA Importers Plugin, JIRA Mail Plugin - 2011• RAB - 2011

• JIRA Importers Plugin, JIRA Mail Plugin - 2011• RAB - 2011• GH RapidBoard, New Issue Nav - 2011, 2012

Why Backbone

backbone.js

JIRA is a backbone

Why Backbone

backbone.js

JIRA is a backbone

Why Backbone

backbone.js

Why Backbone.js

• Small

Why Backbone.js

• Small• Flexible

Why Backbone.js

• Small• Flexible• Does not impose any templating technologies

Why Backbone.js

• Small• Flexible• Does not impose any templating technologies• Well documented

Why Backbone.js

• Small• Flexible• Does not impose any templating technologies• Well documented• Popular

Why Backbone.js

• Small• Flexible• Does not impose any templating technologies• Well documented• Popular• Liked by us

Why Backbone.js

DOM / Markup

Javascript

DOM / Markup

Javascript

DOM / Markup

Javascript

JQuery

DOM / Markup

Javascript

JQuery

DOM / Markup

Javascript

JQueryAUI

DOM / Markup

Javascript

JQueryAUI

DOM / Markup

Javascript

JQueryAUI

DOM / Markup

Javascript

JQueryAUI

DOM / Markup

Soy (client)

Javascript

JQueryAUI

DOM / Markup

Soy (client)

Javascript

JQueryAUI

DOM / Markup

Soy (client)

Javascript

JQueryAUI

DOM / Markup

Soy (client)

Javascript

JQueryAUI

Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

REST API Backbone.js

DOM / Markup

Soy (client)

Javascript

JQueryAUI

DOM / Markup

Soy (client)

Javascript

JQueryAUI

ServicesManagers

DOM / Markup

Soy (client)

Javascript

JQueryAUI

ServicesManagers

• Easier, more powerful and efficient web resource transformations

• Better support for Soy on the server side (like Velocity or FreeMarker)

• (?) Dynamic injection of needed resources on-the-fly (inline dialogs)

Possible Future

Looking back...

2.5 years ago...

Looking back...

most of this stuff was not possible2.5 years ago...

Don’t underestimate the power of the client-side

programming. Time to learn Javascript and

related frameworks, you old Java fellow

Master Joda, Javascript convert

”“

#atlascamp

TAKE-AWAYS

Atlassian is moving fast to client-side programming.

Technology is there. Are you ready?“ ”

Thank you!

better front-end development in atlassian plugins

i18n i18n resource file

web resource contexts

evolution step

jira importers plugin

contexts jira

atlassian plugin development

easy resource injection

aui conuence

Technology

agile @ atlassian

must-have plugins for confluence & jira - atlassian summit...

continuous deployment for atlassian plugins - atlascamp 2011

atlassian plugins 3: Новая платформа -...

atlassian įrankis „ confluence “

1. atlassian intellij connector€¦ · 16/06/2009 · 1....

from the atlassian labs: fedex champions - atlassian summit...

agile com atlassian

atlassian overview

devops - atlassian

managing requirements - atlassian community cologne ·...

atlassian integration...

go, go, gadgets: building gadgets for atlassian products -...

building atlassian plugins with groovy - atlassian summit...

atlassian produkty

atlassian integration...

1. atlassian connector for...

avono atlassian unite_lightning_talk_final

december 2010 atlassian user group: atlassian presentation

new confluence plugins from bitvoodoo at atlassian user...