Presentation showing these elements of plugin framework added in 2009 - 2011 which help us write easier much more sexier web 2.0 plugins. The talk then concentrates on Soy as the new templating mechanism which is getting very popular at Atlassian.
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Better Front-end Development in Atlassian Plugins
1.
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
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
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
57. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
• Client-side speed
21
58. Soy Features
• Simplicity
• Logic and display separation
• Client and server side (Javascript and Java)
• Client-side speed
• Security (auto-escaping)
21
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
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
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
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
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
133. REST API Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
134. REST API Backbone.js
Soy (client) AUI JQuery
Javascript
DOM / Markup
42
135. REST API Backbone.js
Services
Managers Soy (client) AUI JQuery
Javascript
DOM / Markup
42
136. REST API Backbone.js
Services
Managers Soy (client) AUI JQuery
Javascript
DOM / Markup
42
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
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
142. TAKE-AWAYS
“ Atlassian is moving fast to client-side programming.
Technology is there. Are you ready?
”
#atlascamp
46
JIRA 1.x - 3. as a traditional Java web application (no AJAX, quite heavy MVC)\nWebWork\nNo REST support for plugins, now web-resource context\n3 min\n
JIRA 1.x - 3. as a traditional Java web application (no AJAX, quite heavy MVC)\nWebWork\nNo REST support for plugins, now web-resource context\n3 min\n
JIRA 1.x - 3. as a traditional Java web application (no AJAX, quite heavy MVC)\nWebWork\nNo REST support for plugins, now web-resource context\n3 min\n
JIRA 1.x - 3. as a traditional Java web application (no AJAX, quite heavy MVC)\nWebWork\nNo REST support for plugins, now web-resource context\n3 min\n
JIRA 1.x - 3. as a traditional Java web application (no AJAX, quite heavy MVC)\nWebWork\nNo REST support for plugins, now web-resource context\n3 min\n
4 min\n
4 min\n
4 min\n
\n
5\n
7\ntell about servlet filter\n
10\nJoke: who reads Plugin Framework Upgrade Guides or Release Notes\n
caching vs. locale or baseUrl = taken care of by plugin framework on application itself - class WebResourceIntegration and JiraWebResourceIntegration\n12\n
14\n
14\n
14\n
14\n
14\n
15\n
15\n
\n
17\n
17\n
17\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
18\n
\n
\n
20\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
mention that AJS.template is brain dead - just variable substitution, no loops, ifs\nscript type=&#x201D;text/x-template&#x201D;\n22\nask: who knows Soy\n
mention that AJS.template is brain dead - just variable substitution, no loops, ifs\nscript type=&#x201D;text/x-template&#x201D;\n22\nask: who knows Soy\n
mention that AJS.template is brain dead - just variable substitution, no loops, ifs\nscript type=&#x201D;text/x-template&#x201D;\n22\nask: who knows Soy\n
24\n
24\n
24\n
24\n
24\n
24\n
Tell what happens if @param name is missing (exception in runtime), tell about \n
Warning! In Java only simple types can be used like this\n26\n