Better front-end development in Atlassian plugins

Better front-end development
in Atlassian plugins
The road from back-end to front-end programming

Wojciech Seliga
JIRA Development Team Lead, Atlassian
Co-founder, Spartez
2
Tuesday, April 3, 2012

About me
• 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 Conﬂuence ...

• Veteran of old-school web development (Java)
3

A bit of history

4

A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0

4

A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
WebWork, XWork, JSP, Velocity, Freemarker

4

A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
• 2006 - 2009 - Features, features, features!

4

A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
Mostly back-end technologies

4

A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
Mostly back-end technologies
• 2009 - now - new Atlassian UI, Web 2.0+

4

Evolution Step 1 - AUI
• Conﬂuence 3.0+, JIRA 3.13.5+
• Forms, Controls, Tabs, Inline Dialogs, ..., AJS

5

Evolution Step 2 - REST
• Plugin Framework v2 only (JIRA 4+, Conﬂuence 3.1+)
• Easier AJAX for plugin developers unleashed

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

• World of Java annotations (Jersey)

6

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

7

injectable JS & CSS
+ REST = WIN

8

Evolution Step 3 (2010)
web resource contexts
• Conﬂuence 2.10+, JIRA 4.2+
• Easy resource injection to popular destinations
• Easy to deﬁne own contexts
<web-resource key="quick-edit-issue">
<context>jira.view.issue</context>
<context>jira.navigator.advanced</context>
<context>jira.navigator.simple</context>

</web-resource>
9

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

10

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

10

web-resource-transformers

11

• I18n

11

• I18n
• L&F

11

• I18n
• L&F
• context path

11

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

11

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

11

I18N

12

I18N

i18n resource file defined in atlassian-plugin.xml
hello.world=Hello World
from.atlascamp=from AtlasCamp {0}

12

I18N - web resource
transformation deﬁnition

13

I18N - web resource
transformation deﬁnition
<resource name="ourname" type="i18n"
location="path/to/i18n/properties/file/no/ext"/>

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

13

I18N transformation

14

I18N transformation

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

14

I18N transformation

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

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

14

Times of Hacking

15

Times of Hacking
Javascript hacks
freestyle AJAX
JQuery Javascript hacks
JQuery JQuery JQuery
JQuery
JQuery JQuery
JQuery
Javascript hacks JQuery JQuery JQuery JQuery
JQuery
JQuery
underscore.js Javascript hacks
JQuery JQuery Prototype
JQuery JQuery JQuery JQuery
Javascript hacks
JQuery Javascript hacks underscore.js
JQuery freestyle AJAX JQuery
underscore.js 15
Tuesday, April 3, 2012 JQu

“
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

16


Structure on the client side

17



For speed, beauty and maintainability

17



For speed, beauty and maintainability

FTW
17

More structured approach in JS
• Backbone.js • Ember.js
• SproutCore • Angular.js
• Sammy.js • Batman.js
• Spine.js • Mustache
• Cappucino • Handlebars
• Javascript MVC • Soy (Google Closure Templates)
18


• Backbone.js
• Soy (Google Closure Templates)

19


• Backbone.js

MV C
19


M Backbone.js
•

VC
19


M Backbone.js
•
V

C
19


M Backbone.js C
•
V

19



19

Our Road to Soy

20

Our Road to Soy
• AJS.template

20

Our Road to Soy
• AJS.template
• Mustache

20

Our Road to Soy
• AJS.template
• Mustache
• Soy

20

Soy Features

21

Soy Features
• Simplicity

21

Soy Features
• Simplicity
• Logic and display separation

21

Soy Features
• Simplicity
• Client and server side (Javascript and Java)

21

Soy Features
• Simplicity
• Client-side speed

21

Soy Features
• Simplicity
• Security (auto-escaping)

21

Soy Features
• Simplicity
• Security (auto-escaping)
• Battle-tested by Google
21

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}
22

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, 'ﬁve']]
Map [:], ['key': 'value', 'key2': 'value2']

23

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

24

Soy - Commands

25

Soy - Commands
• {template}{/template}

25

Soy - Commands
• {literal}{/literal}

25

Soy - Commands
• {print <expression>}

25

Soy - Commands
• {<expression>}

25

Soy - Commands
• {<expression>}
• {if <expression>},
{elseif}, {else}, {/if}

25

Soy - Commands
• {template}{/template} • {foreach}, {ifempty}, {/foreach}
• {<expression>}

25

Soy - Commands
• {literal}{/literal} • {for}, {/for}
• {<expression>}

25

Soy - Commands
• {print <expression>} • {call}, {/call}, {param}, {/param}
• {<expression>}

25

Soy - Commands
• {print <expression>} • {call}, {/call}, {param}, {/param}
• {<expression>} • {sp}, {n}, {lb}, {rb}

25

Soy - deﬁning variables

26

Soy - deﬁning variables

Not Supported!
Keep business logic away from view! 26

Useful functions
• {getText('i18n-key', ....)
• {contextPath}
• {$data|truncate:30}

27

Soy Javascript Compilation

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

28

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

29

Auto-escaping
• 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

30

Contextual Auto-escaping

31

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

31

/**
* @param name
*/
{/template}

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

31

/**
* @param name
*/
{/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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'">
><script>alert("x&xx")</script></a>

31

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

32

Soy and Atlassian Plugins
<web-resource key="my-key">

<transformation extension="soy">
<transformer key="soyTransformer"/>
</transformation>

<resource type="download" name="my-name.js"
location="path/to/my/template.soy"/>
</web-resource>

33

Server-side Soy
• Atlassian Plugin Framework favours Velocity
• SoyTemplateRenderer/SoyTemplateRendererProvider
• DefaultVelocityContextProvider (jira-core)
• SoyData, SoyDataList, SoyDataMap,
SoyData.createFromExistingData()

34

Soy - Coding Example

35

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

36

Backbone.js

37

Backbone.js
• Event-driven
• Models
• Views (responsible for keeping markup in sync with
model)

38

Our story with backbone.js

39

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

39

(Ignite) - 2011
• JIRA Importers Plugin, JIRA Mail Plugin - 2011

39

(Ignite) - 2011
• RAB - 2011

39

(Ignite) - 2011
• RAB - 2011
• GH RapidBoard, New Issue Nav - 2011, 2012

39

Why Backbone

40

Why Backbone

backbone.js

40

Why Backbone

backbone.js

JIRA is a backbone

40

Why Backbone

JIRA is a backbone
backbone.js

40

Why Backbone.js

41

Why Backbone.js
• Small

41

Why Backbone.js
• Small
• Flexible

41

Why Backbone.js
• Small
• Flexible
• Does not impose any templating technologies

41

Why Backbone.js
• Small
• Flexible
• Well documented

41

Why Backbone.js
• Small
• Flexible
• Well documented
• Popular

41

Why Backbone.js
• Small
• Flexible
• Well documented
• Popular
• Liked by us
41

DOM / Markup

42

Javascript

DOM / Markup

42

JQuery

Javascript

DOM / Markup

42

AUI JQuery

Javascript

DOM / Markup

42

Soy (client) AUI JQuery

Javascript

DOM / Markup

42

Backbone.js


Javascript

DOM / Markup

42

REST API Backbone.js


Javascript

DOM / Markup

42

REST API Backbone.js

Services
Managers Soy (client) AUI JQuery

Javascript

DOM / Markup

42

Possible Future
• Easier, more powerful and efﬁcient web resource
transformations
• Better support for Soy on the server side (like Velocity
or FreeMarker)
• (?) Dynamic injection of needed resources on-the-ﬂy
(inline dialogs)

43

Looking back...

44

Looking back...

2.5 years ago...

44

Looking back...

2.5 years ago...
most of this stuff was not possible

44

“ 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

45

TAKE-AWAYS

“ Atlassian is moving fast to client-side programming.
Technology is there. Are you ready?
”
#atlascamp

46

Thank you!


Better front-end development in Atlassian plugins

More Related Content

What's hot (20)

Similar to Better front-end development in Atlassian plugins (20)

More from Atlassian (20)

Recently uploaded (20)

Better front-end development in Atlassian plugins