The document discusses the evolution of front-end development in Atlassian plugins, from early frameworks like WebWork and JSP to more modern approaches using REST, AUI, and JavaScript frameworks like Backbone.js and Soy. It covers how plugins can now use techniques like dependency injection, web resources, internationalization transforms, and templating to build more structured and maintainable client-side code.
2. 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
3. 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 Confluence ...
• Veteran of old-school web development (Java)
3
Tuesday, April 3, 2012
5. A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
4
Tuesday, April 3, 2012
6. A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
WebWork, XWork, JSP, Velocity, Freemarker
4
Tuesday, April 3, 2012
7. A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
WebWork, XWork, JSP, Velocity, Freemarker
• 2006 - 2009 - Features, features, features!
4
Tuesday, April 3, 2012
8. A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
WebWork, XWork, JSP, Velocity, Freemarker
• 2006 - 2009 - Features, features, features!
Mostly back-end technologies
4
Tuesday, April 3, 2012
9. A bit of history
• 2002 - 2006 - Awesome UI, Web 1.0
WebWork, XWork, JSP, Velocity, Freemarker
• 2006 - 2009 - Features, features, features!
Mostly back-end technologies
• 2009 - now - new Atlassian UI, Web 2.0+
4
Tuesday, April 3, 2012
36. “
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
Tuesday, April 3, 2012
37. Evolution Step 5 (2011)
Structure on the client side
17
Tuesday, April 3, 2012
38. Evolution Step 5 (2011)
Structure on the client side
For speed, beauty and maintainability
17
Tuesday, April 3, 2012
39. Evolution Step 5 (2011)
Structure on the client side
For speed, beauty and maintainability
FTW
17
Tuesday, April 3, 2012
54. Soy Features
• Simplicity
21
Tuesday, April 3, 2012
55. Soy Features
• Simplicity
• Logic and display separation
21
Tuesday, April 3, 2012
56. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
21
Tuesday, April 3, 2012
57. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
• Client-side speed
21
Tuesday, April 3, 2012
58. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
• Client-side speed
• Security (auto-escaping)
21
Tuesday, April 3, 2012
59. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
• Client-side speed
• Security (auto-escaping)
• Battle-tested by Google
21
Tuesday, April 3, 2012
60. 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
Tuesday, April 3, 2012
80. // 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
Tuesday, April 3, 2012
81. // 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
Tuesday, April 3, 2012
82. 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
Tuesday, April 3, 2012
110. Why Backbone.js
• Small
• Flexible
41
Tuesday, April 3, 2012
111. Why Backbone.js
• Small
• Flexible
• Does not impose any templating technologies
41
Tuesday, April 3, 2012
112. Why Backbone.js
• Small
• Flexible
• Does not impose any templating technologies
• Well documented
41
Tuesday, April 3, 2012
113. Why Backbone.js
• Small
• Flexible
• Does not impose any templating technologies
• Well documented
• Popular
41
Tuesday, April 3, 2012
114. Why Backbone.js
• Small
• Flexible
• Does not impose any templating technologies
• Well documented
• Popular
• Liked by us
41
Tuesday, April 3, 2012
117. Javascript
DOM / Markup
42
Tuesday, April 3, 2012
118. Javascript
DOM / Markup
42
Tuesday, April 3, 2012
119. JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
120. JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
121. AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
122. AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
123. AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
124. AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
125. Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
126. Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
127. Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
128. Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
129. Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
130. Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
131. Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
132. Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
133. REST API Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
134. REST API Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
135. REST API Backbone.js
Services
Managers Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
136. REST API Backbone.js
Services
Managers Soy (client) AUI JQuery
Javascript
DOM / Markup
42
Tuesday, April 3, 2012
137. Possible Future
• 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)
43
Tuesday, April 3, 2012
140. Looking back...
2.5 years ago...
most of this stuff was not possible
44
Tuesday, April 3, 2012
141. “ 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
Tuesday, April 3, 2012
142. TAKE-AWAYS
“ Atlassian is moving fast to client-side programming.
Technology is there. Are you ready?
”
#atlascamp
46
Tuesday, April 3, 2012