Wojciech Seliga, profile picture
Uploaded byWojciech Seliga
KEY, PPTX4,078 views

Better Front-end Development in Atlassian Plugins

The document outlines the evolution of front-end development in Atlassian plugins, highlighting the transition from back-end technologies to modern web-based frameworks. It discusses the introduction of various tools and methodologies including AUI, REST, web resource contexts, and Soy templates, which enhance the user interface and interaction. The presentation emphasizes structured approaches to JavaScript development and the benefits of modern frameworks for maintainability and speed.

Embed presentation

Download as KEY, PPTX
1 / 143
2 / 143
3 / 143
4 / 143
5 / 143
6 / 143
7 / 143
8 / 143
9 / 143
10 / 143
11 / 143
12 / 143
13 / 143
14 / 143
15 / 143
16 / 143
17 / 143
18 / 143
19 / 143
20 / 143
21 / 143
22 / 143
23 / 143
24 / 143
25 / 143
26 / 143
27 / 143
28 / 143
29 / 143
30 / 143
31 / 143
32 / 143
33 / 143
34 / 143
35 / 143
36 / 143
37 / 143
38 / 143
39 / 143
40 / 143
41 / 143
42 / 143
43 / 143
44 / 143
45 / 143
46 / 143
47 / 143
48 / 143
49 / 143
50 / 143
51 / 143
52 / 143
53 / 143
54 / 143
55 / 143
56 / 143
57 / 143
58 / 143
59 / 143
60 / 143
61 / 143
62 / 143
63 / 143
64 / 143
65 / 143
66 / 143
67 / 143
68 / 143
69 / 143
70 / 143
71 / 143
72 / 143
73 / 143
74 / 143
75 / 143
76 / 143
77 / 143
78 / 143
79 / 143
80 / 143
81 / 143
82 / 143
83 / 143
84 / 143
85 / 143
86 / 143
87 / 143
88 / 143
89 / 143
90 / 143
91 / 143
92 / 143
93 / 143
94 / 143
95 / 143
96 / 143
97 / 143
98 / 143
99 / 143
100 / 143
101 / 143
102 / 143
103 / 143
104 / 143
105 / 143
106 / 143
107 / 143
108 / 143
109 / 143
110 / 143
111 / 143
112 / 143
113 / 143
114 / 143
115 / 143
116 / 143
117 / 143
118 / 143
119 / 143
120 / 143
121 / 143
122 / 143
123 / 143
124 / 143
125 / 143
126 / 143
127 / 143
128 / 143
129 / 143
130 / 143
131 / 143
132 / 143
133 / 143
134 / 143
135 / 143
136 / 143
137 / 143
138 / 143
139 / 143
140 / 143
141 / 143
142 / 143
143 / 143
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
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
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 WebWork, XWork, JSP, Velocity, Freemarker • 2006 - 2009 - Features, features, features! 4
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
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
Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
Evolution Step 2 - REST • Plugin Framework v2 only (JIRA 4+, Confluence 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 • Confluence 2.10+, JIRA 4.2+ • Easy resource injection to popular destinations • Easy to define 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
Evolution Step 4 (2010) web-resource-transformer <web-resource-transformer key="my-key" class="fqcn.must.implement.WebResourceTransformer"/> 10
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); } 10
web-resource-transformers 11
web-resource-transformers • I18n 11
web-resource-transformers • I18n • L&F 11
web-resource-transformers • I18n • L&F • context path 11
web-resource-transformers • I18n • L&F • context path • SASS, LESS 11
web-resource-transformers • 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 definition 13
I18N - web resource transformation definition <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) 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 JQuery JQuery JQuery JQuery JQuery JQuery Prototype JQuery JQuery JQuery JQuery JQuery JQuery JQuery Javascript hacks JQuery Javascript hacks underscore.js JQuery JQuery JQuery JQuery freestyle AJAX JQuery JQuery JQuery JQuery underscore.js 15
“ 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
Evolution Step 5 (2011) Structure on the client side 17
Evolution Step 5 (2011) Structure on the client side For speed, beauty and maintainability 17
Evolution Step 5 (2011) Structure on the client side 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
More structured approach in JS • Backbone.js • Soy (Google Closure Templates) 19
More structured approach in JS • Backbone.js • Soy (Google Closure Templates) MV C 19
More structured approach in JS M Backbone.js • • Soy (Google Closure Templates) VC 19
More structured approach in JS M Backbone.js • V • Soy (Google Closure Templates) C 19
More structured approach in JS M Backbone.js C • V • Soy (Google Closure Templates) 19
More structured approach in JS • Backbone.js • Soy (Google Closure Templates) 19
More structured approach in JS • Soy (Google Closure Templates) 19
More structured approach in JS 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 • Logic and display separation • Client and server side (Javascript and Java) 21
Soy Features • Simplicity • Logic and display separation • Client and server side (Javascript and Java) • Client-side speed 21
Soy Features • Simplicity • Logic and display separation • Client and server side (Javascript and Java) • Client-side speed • Security (auto-escaping) 21
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
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, 'five']] 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 • {template}{/template} • {literal}{/literal} 25
Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} 25
Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} 25
Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {call}, {/call}, {param}, {/param} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {call}, {/call}, {param}, {/param} • {<expression>} • {sp}, {n}, {lb}, {rb} • {if <expression>}, {elseif}, {else}, {/if} 25
Soy - defining variables 26
Soy - defining variables 26
Soy - defining 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
28
29
// 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
// 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
Contextual Auto-escaping /** * @param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31
Contextual Auto-escaping /** * @param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31
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>"} 31
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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</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
Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 39
Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 39
Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 • RAB - 2011 39
Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 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 • Does not impose any templating technologies • Well documented 41
Why Backbone.js • Small • Flexible • Does not impose any templating technologies • Well documented • Popular 41
Why Backbone.js • Small • Flexible • Does not impose any templating technologies • Well documented • Popular • Liked by us 41
42
DOM / Markup 42
Javascript DOM / Markup 42
Javascript DOM / Markup 42
JQuery Javascript DOM / Markup 42
JQuery Javascript DOM / Markup 42
AUI JQuery Javascript DOM / Markup 42
AUI JQuery Javascript DOM / Markup 42
AUI JQuery Javascript DOM / Markup 42
AUI JQuery Javascript DOM / Markup 42
Soy (client) AUI JQuery Javascript DOM / Markup 42
Soy (client) AUI JQuery Javascript DOM / Markup 42
Soy (client) AUI JQuery Javascript DOM / Markup 42
Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
REST API Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
REST API Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
REST API Backbone.js Services Managers Soy (client) AUI JQuery Javascript DOM / Markup 42
REST API Backbone.js Services Managers Soy (client) AUI JQuery Javascript DOM / Markup 42
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
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!

More Related Content

PDF
Wicket 10 years and beyond
byMartijn Dashorst
 
PPTX
JavaFX Versus HTML5 - JavaOne 2014
byRyan Cuprak
 
PDF
Whats up with wicket 8 and java 8
byMartijn Dashorst
 
PDF
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
byBaruch Sadogursky
 
PDF
The State of Wicket
byMartijn Dashorst
 
PDF
Better front-end development in Atlassian plugins
byAtlassian
 
PDF
Java EE 8: On the Horizon
byJosh Juneau
 
PDF
AtlasCamp 2012 - Testing JIRA plugins smarter with TestKit
byWojciech Seliga
 
Wicket 10 years and beyond
byMartijn Dashorst
 
JavaFX Versus HTML5 - JavaOne 2014
byRyan Cuprak
 
Whats up with wicket 8 and java 8
byMartijn Dashorst
 
Wicket Presentation @ AlphaCSP Java Web Frameworks Playoff 2008
byBaruch Sadogursky
 
The State of Wicket
byMartijn Dashorst
 
Better front-end development in Atlassian plugins
byAtlassian
 
Java EE 8: On the Horizon
byJosh Juneau
 
AtlasCamp 2012 - Testing JIRA plugins smarter with TestKit
byWojciech Seliga
 

What's hot

PPTX
Advanced #6 clean architecture
byVitali Pekelis
 
PDF
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
byMatt Raible
 
PPTX
Spring boot Introduction
byJeevesh Pandey
 
PPTX
Top 50 java ee 7 best practices [con5669]
byRyan Cuprak
 
PDF
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
byMatt Raible
 
PDF
Developing Modern Java Web Applications with Java EE 7 and AngularJS
byShekhar Gulati
 
PDF
Web application development using Play Framework (with Java)
bySaeed Zarinfam
 
PPTX
Node.js Development with Apache NetBeans
byRyan Cuprak
 
PDF
JMP402 Master Class: Managed beans and XPages: Your Time Is Now
byRussell Maher
 
PPT
Wicket Introduction
byEyal Golan
 
PDF
Migrating Beyond Java 8
byDaliaAboSheasha
 
PDF
Apache Wicket: 10 jaar en verder - Martijn Dashorst
byNLJUG
 
PDF
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
byWO Community
 
PDF
[English version] JavaFX and Web Integration
byKazuchika Sekiya
 
PDF
JavaOne 2017 - JNoSQL: The Definitive Solution for Java and NoSQL Database [C...
byLeonardo De Moura Rocha Lima
 
PDF
What's New in Spring 3.1
byMatt Raible
 
PDF
JavaCro'15 - Java EE 8 - An instant snapshot - David Delabassee
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
PDF
JavaOne 2017 - Choosing a NoSQL API and Database to Avoid Tombstones and Drag...
byLeonardo De Moura Rocha Lima
 
PDF
DataFX - JavaOne 2013
byHendrik Ebbers
 
PDF
JavaOne 2011: Migrating Spring Applications to Java EE 6
byBert Ertman
 
Advanced #6 clean architecture
byVitali Pekelis
 
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...
byMatt Raible
 
Spring boot Introduction
byJeevesh Pandey
 
Top 50 java ee 7 best practices [con5669]
byRyan Cuprak
 
Java Web Application Security with Java EE, Spring Security and Apache Shiro ...
byMatt Raible
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
byShekhar Gulati
 
Web application development using Play Framework (with Java)
bySaeed Zarinfam
 
Node.js Development with Apache NetBeans
byRyan Cuprak
 
JMP402 Master Class: Managed beans and XPages: Your Time Is Now
byRussell Maher
 
Wicket Introduction
byEyal Golan
 
Migrating Beyond Java 8
byDaliaAboSheasha
 
Apache Wicket: 10 jaar en verder - Martijn Dashorst
byNLJUG
 
Beyond Fluffy Bunny. How I leveraged WebObjects in my lean startup.
byWO Community
 
[English version] JavaFX and Web Integration
byKazuchika Sekiya
 
JavaOne 2017 - JNoSQL: The Definitive Solution for Java and NoSQL Database [C...
byLeonardo De Moura Rocha Lima
 
What's New in Spring 3.1
byMatt Raible
 
JavaCro'15 - Java EE 8 - An instant snapshot - David Delabassee
byHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
JavaOne 2017 - Choosing a NoSQL API and Database to Avoid Tombstones and Drag...
byLeonardo De Moura Rocha Lima
 
DataFX - JavaOne 2013
byHendrik Ebbers
 
JavaOne 2011: Migrating Spring Applications to Java EE 6
byBert Ertman
 

Similar to Better Front-end Development in Atlassian Plugins

PDF
jQuery-1-Ajax
byguestcf600a
 
PDF
Front-End Frameworks: a quick overview
byDiacode
 
PDF
JQuery-Tutorial
bytutorialsruby
 
PDF
What's this jQuery? Where it came from, and how it will drive innovation
byMarakana Inc.
 
PDF
Write Less Do More
byRemy Sharp
 
PDF
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
bytutorialsruby
 
PDF
Kann JavaScript elegant sein?
byjbandi
 
PDF
Web2.0 with jQuery in English
byLau Bech Lauritzen
 
PDF
handout-05b
bytutorialsruby
 
PDF
handout-05b
bytutorialsruby
 
PDF
Week 05 Web, App and Javascript_Brandon, S.H. Wu
byAppUniverz Org
 
PPTX
Women Who Code, Ground Floor
byKatie Weiss
 
PDF
jQuery-3-UI
byguestcf600a
 
PDF
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-3-UI.pptx
bytutorialsruby
 
PDF
jQuery-3-UI
byguestcf600a
 
PDF
jQuery Introduction
byArwid Bancewicz
 
PDF
JQuery Mobile
byMatthew McCullough
 
PDF
An Introduction to Sencha Touch
byJames Pearce
 
PDF
Making Rich Internet Applications Accessible Through jQuery
byAEGIS-ACCESSIBLE Projects
 
PDF
SilverStripe CMS JavaScript Refactoring
byIngo Schommer
 
jQuery-1-Ajax
byguestcf600a
 
Front-End Frameworks: a quick overview
byDiacode
 
JQuery-Tutorial
bytutorialsruby
 
What's this jQuery? Where it came from, and how it will drive innovation
byMarakana Inc.
 
Write Less Do More
byRemy Sharp
 
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-1-Ajax.pptx
bytutorialsruby
 
Kann JavaScript elegant sein?
byjbandi
 
Web2.0 with jQuery in English
byLau Bech Lauritzen
 
handout-05b
bytutorialsruby
 
handout-05b
bytutorialsruby
 
Week 05 Web, App and Javascript_Brandon, S.H. Wu
byAppUniverz Org
 
Women Who Code, Ground Floor
byKatie Weiss
 
jQuery-3-UI
byguestcf600a
 
Microsoft PowerPoint - &lt;b>jQuery&lt;/b>-3-UI.pptx
bytutorialsruby
 
jQuery-3-UI
byguestcf600a
 
jQuery Introduction
byArwid Bancewicz
 
JQuery Mobile
byMatthew McCullough
 
An Introduction to Sencha Touch
byJames Pearce
 
Making Rich Internet Applications Accessible Through jQuery
byAEGIS-ACCESSIBLE Projects
 
SilverStripe CMS JavaScript Refactoring
byIngo Schommer
 

More from Wojciech Seliga

PDF
Ten lessons I painfully learnt while moving from software developer
to entrep...
byWojciech Seliga
 
PDF
How to impress your boss and your customer in a modern software development c...
byWojciech Seliga
 
PDF
Sprzedawanie własnego biznesu IT - Confitura 2023.pdf
byWojciech Seliga
 
PDF
Jak być zarąbistym developerem w oczach szefa i ... klienta
byWojciech Seliga
 
PDF
Escaping Test Hell - ACCU 2014
byWojciech Seliga
 
PDF
Escaping Test Hell - Our Journey - XPDays Ukraine 2013
byWojciech Seliga
 
PDF
Escaping Automated Test Hell - One Year Later
byWojciech Seliga
 
PDF
5-10-15 years of Java developer career - Warszawa JUG 2015
byWojciech Seliga
 
PDF
Devoxx Poland 2015: 5-10-15 years with Java
byWojciech Seliga
 
PDF
How to be Awesome at a Java Developer Job Interview (Confitura 2012, Polish)
byWojciech Seliga
 
PDF
SFI 2017 Plantacje Programistów (Developers Plantations) - Colonialism in XXI...
byWojciech Seliga
 
PDF
10 bezcennych lekcji dla software developera stającego się szefem firmy
byWojciech Seliga
 
PDF
Ten lessons I painfully learnt while moving from software developer to entrep...
byWojciech Seliga
 
PDF
Developer plantations - colonialism of XXI century (GeeCON 2017)
byWojciech Seliga
 
PDF
Software Developer Career Unplugged - GeeCon 2013
byWojciech Seliga
 
PDF
Software Development Innovation in Practice - 33rd Degree 2014
byWojciech Seliga
 
PDF
Spartez Open Day March 13th 2015
byWojciech Seliga
 
PDF
Confitura 2013 Software Developer Career Unplugged
byWojciech Seliga
 
PDF
Innowacja w praktyce - Infoshare 2014
byWojciech Seliga
 
PDF
InfoShare 2012 efektywne przeglądy kodu w zespołach agile [Polish]
byWojciech Seliga
 
Ten lessons I painfully learnt while moving from software developer
to entrep...
byWojciech Seliga
 
How to impress your boss and your customer in a modern software development c...
byWojciech Seliga
 
Sprzedawanie własnego biznesu IT - Confitura 2023.pdf
byWojciech Seliga
 
Jak być zarąbistym developerem w oczach szefa i ... klienta
byWojciech Seliga
 
Escaping Test Hell - ACCU 2014
byWojciech Seliga
 
Escaping Test Hell - Our Journey - XPDays Ukraine 2013
byWojciech Seliga
 
Escaping Automated Test Hell - One Year Later
byWojciech Seliga
 
5-10-15 years of Java developer career - Warszawa JUG 2015
byWojciech Seliga
 
Devoxx Poland 2015: 5-10-15 years with Java
byWojciech Seliga
 
How to be Awesome at a Java Developer Job Interview (Confitura 2012, Polish)
byWojciech Seliga
 
SFI 2017 Plantacje Programistów (Developers Plantations) - Colonialism in XXI...
byWojciech Seliga
 
10 bezcennych lekcji dla software developera stającego się szefem firmy
byWojciech Seliga
 
Ten lessons I painfully learnt while moving from software developer to entrep...
byWojciech Seliga
 
Developer plantations - colonialism of XXI century (GeeCON 2017)
byWojciech Seliga
 
Software Developer Career Unplugged - GeeCon 2013
byWojciech Seliga
 
Software Development Innovation in Practice - 33rd Degree 2014
byWojciech Seliga
 
Spartez Open Day March 13th 2015
byWojciech Seliga
 
Confitura 2013 Software Developer Career Unplugged
byWojciech Seliga
 
Innowacja w praktyce - Infoshare 2014
byWojciech Seliga
 
InfoShare 2012 efektywne przeglądy kodu w zespołach agile [Polish]
byWojciech Seliga
 

Recently uploaded

PDF
AI Star Keynote on Artificial Intelligence. OnWorld. OffWorld. InWorld
byAlison B. Lowndes
 
PDF
Vibe Coding vs. Spec-Driven Development [Free Meetup]
byHaim Michael
 
PDF
Agentic Automation for Testers – A Hands-On Deep Dive
byUiPathCommunity
 
PDF
Generative AI in UiPath: Mastering the Generative Extractor for Intelligent D...
byDianaGray10
 
PDF
Generative AI in 2026: Hype, Bubble, Winter or The Real Deal?
byDr. Tathagat Varma
 
PDF
Igniting the Future: Copilot trends, agentic transformation and product roadm...
byUni Systems S.M.S.A.
 
PDF
Tracing the Thread: Decoding the Decision-Making Process with GraphRAG
byEnterprise Knowledge
 
PDF
The Future of Search: Why LLM Optimization Matters for Every Website
byav0763436
 
PDF
Safeguarding AI-Based Financial Infrastructure
bysleepandremedies
 
PDF
How Mobile Apps Are Shaping the Future of Digital Innovation
byWilliam Taylor
 
PPTX
Combining Induction and Transduction for Abstract Reasoning.pptx
byallen578468
 
PDF
Accelerating Responsible AI Adoption in Public Sector and Private Organizations.
bysleepandremedies
 
PDF
Incident Response Planning with a Foundation Model
byKim Hammar
 
PPTX
Ritesh_kumar_Aatmanirbhar Bharat: Make in India, Make for the World.pptx
byriteshrkgs2008
 
PDF
Top 7 Manufacturing Software for Small Businesses Boosting Growth in 2025
byEnvertis Software Solutions
 
PDF
Greetings All Students Update 3 by Mia Corp
by©LDMMIA, ©Reiki Yoga
 
PDF
Ransomware_Resilience_Strategic_Playbook.pdf
byAfonso Henrique Rodrigues Alves
 
PDF
Recursive Self Improvement vs Continuous Learning
byBob Marcus
 
PDF
Top Cybersecurity Threats 2025 Guide by Sureshdas
byPrintersassist
 
PDF
8 LLM Surveys https://tinyurl.com/bdz8e6fp
byBob Marcus
 
AI Star Keynote on Artificial Intelligence. OnWorld. OffWorld. InWorld
byAlison B. Lowndes
 
Vibe Coding vs. Spec-Driven Development [Free Meetup]
byHaim Michael
 
Agentic Automation for Testers – A Hands-On Deep Dive
byUiPathCommunity
 
Generative AI in UiPath: Mastering the Generative Extractor for Intelligent D...
byDianaGray10
 
Generative AI in 2026: Hype, Bubble, Winter or The Real Deal?
byDr. Tathagat Varma
 
Igniting the Future: Copilot trends, agentic transformation and product roadm...
byUni Systems S.M.S.A.
 
Tracing the Thread: Decoding the Decision-Making Process with GraphRAG
byEnterprise Knowledge
 
The Future of Search: Why LLM Optimization Matters for Every Website
byav0763436
 
Safeguarding AI-Based Financial Infrastructure
bysleepandremedies
 
How Mobile Apps Are Shaping the Future of Digital Innovation
byWilliam Taylor
 
Combining Induction and Transduction for Abstract Reasoning.pptx
byallen578468
 
Accelerating Responsible AI Adoption in Public Sector and Private Organizations.
bysleepandremedies
 
Incident Response Planning with a Foundation Model
byKim Hammar
 
Ritesh_kumar_Aatmanirbhar Bharat: Make in India, Make for the World.pptx
byriteshrkgs2008
 
Top 7 Manufacturing Software for Small Businesses Boosting Growth in 2025
byEnvertis Software Solutions
 
Greetings All Students Update 3 by Mia Corp
by©LDMMIA, ©Reiki Yoga
 
Ransomware_Resilience_Strategic_Playbook.pdf
byAfonso Henrique Rodrigues Alves
 
Recursive Self Improvement vs Continuous Learning
byBob Marcus
 
Top Cybersecurity Threats 2025 Guide by Sureshdas
byPrintersassist
 
8 LLM Surveys https://tinyurl.com/bdz8e6fp
byBob Marcus
 

Better Front-end Development in Atlassian Plugins

  • 2.
    Better front-end development inAtlassian 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
  • 4.
    A bit ofhistory 4
  • 5.
    A bit ofhistory • 2002 - 2006 - Awesome UI, Web 1.0 4
  • 6.
    A bit ofhistory • 2002 - 2006 - Awesome UI, Web 1.0 WebWork, XWork, JSP, Velocity, Freemarker 4
  • 7.
    A bit ofhistory • 2002 - 2006 - Awesome UI, Web 1.0 WebWork, XWork, JSP, Velocity, Freemarker • 2006 - 2009 - Features, features, features! 4
  • 8.
    A bit ofhistory • 2002 - 2006 - Awesome UI, Web 1.0 WebWork, XWork, JSP, Velocity, Freemarker • 2006 - 2009 - Features, features, features! Mostly back-end technologies 4
  • 9.
    A bit ofhistory • 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
  • 10.
    Evolution Step 1- AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
  • 11.
    Evolution Step 1- AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
  • 12.
    Evolution Step 1- AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
  • 13.
    Evolution Step 1- AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5
  • 14.
    Evolution Step 2- REST • Plugin Framework v2 only (JIRA 4+, Confluence 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
  • 15.
    @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
  • 16.
    injectable JS &CSS + REST = WIN 8
  • 17.
    Evolution Step 3(2010) web resource contexts • Confluence 2.10+, JIRA 4.2+ • Easy resource injection to popular destinations • Easy to define 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
  • 18.
    Evolution Step 4(2010) web-resource-transformer <web-resource-transformer key="my-key" class="fqcn.must.implement.WebResourceTransformer"/> 10
  • 19.
    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); } 10
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
    web-resource-transformers • I18n • L&F •context path • SASS, LESS 11
  • 25.
    web-resource-transformers • I18n • L&F •context path • SASS, LESS • Soy 11
  • 26.
  • 27.
    I18N i18n resource file defined in atlassian-plugin.xml hello.world=Hello World from.atlascamp=from AtlasCamp {0} 12
  • 28.
    I18N - webresource transformation definition 13
  • 29.
    I18N - webresource transformation definition <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
  • 30.
  • 31.
    I18N transformation var helloText= AJS.I18n.getText("hello.world") + " " + AJS.I18n.getText("from.atlascamp", 2012) 14
  • 32.
    I18N transformation var helloText= AJS.I18n.getText("hello.world") + " " + AJS.I18n.getText("from.atlascamp", 2012) 14
  • 33.
    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
  • 34.
  • 35.
    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 JQuery JQuery JQuery JQuery JQuery JQuery Prototype JQuery JQuery JQuery JQuery JQuery JQuery JQuery Javascript hacks JQuery Javascript hacks underscore.js JQuery JQuery JQuery JQuery freestyle AJAX JQuery JQuery JQuery JQuery underscore.js 15
  • 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
  • 37.
    Evolution Step 5(2011) Structure on the client side 17
  • 38.
    Evolution Step 5(2011) Structure on the client side For speed, beauty and maintainability 17
  • 39.
    Evolution Step 5(2011) Structure on the client side For speed, beauty and maintainability FTW 17
  • 40.
    More structured approachin JS • Backbone.js • Ember.js • SproutCore • Angular.js • Sammy.js • Batman.js • Spine.js • Mustache • Cappucino • Handlebars • Javascript MVC • Soy (Google Closure Templates) 18
  • 41.
    More structured approachin JS • Backbone.js • Soy (Google Closure Templates) 19
  • 42.
    More structured approachin JS • Backbone.js • Soy (Google Closure Templates) MV C 19
  • 43.
    More structured approachin JS M Backbone.js • • Soy (Google Closure Templates) VC 19
  • 44.
    More structured approachin JS M Backbone.js • V • Soy (Google Closure Templates) C 19
  • 45.
    More structured approachin JS M Backbone.js C • V • Soy (Google Closure Templates) 19
  • 46.
    More structured approachin JS • Backbone.js • Soy (Google Closure Templates) 19
  • 47.
    More structured approachin JS • Soy (Google Closure Templates) 19
  • 48.
  • 49.
  • 50.
    Our Road toSoy • AJS.template 20
  • 51.
    Our Road toSoy • AJS.template • Mustache 20
  • 52.
    Our Road toSoy • AJS.template • Mustache • Soy 20
  • 53.
  • 54.
  • 55.
    Soy Features • Simplicity •Logic and display separation 21
  • 56.
    Soy Features • Simplicity •Logic and display separation • Client and server side (Javascript and Java) 21
  • 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 {namespaceexamples.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
  • 61.
    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'] 23
  • 62.
    Soy Syntax -Operators • - (unary) not • * / % • + - (binary) • < > <= >= • == != • and • or • ?: (ternary) 24
  • 63.
  • 64.
    Soy - Commands •{template}{/template} 25
  • 65.
    Soy - Commands •{template}{/template} • {literal}{/literal} 25
  • 66.
    Soy - Commands •{template}{/template} • {literal}{/literal} • {print <expression>} 25
  • 67.
    Soy - Commands •{template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} 25
  • 68.
    Soy - Commands •{template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
  • 69.
    Soy - Commands •{template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
  • 70.
    Soy - Commands •{template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
  • 71.
    Soy - Commands •{template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {call}, {/call}, {param}, {/param} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25
  • 72.
    Soy - Commands •{template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {call}, {/call}, {param}, {/param} • {<expression>} • {sp}, {n}, {lb}, {rb} • {if <expression>}, {elseif}, {else}, {/if} 25
  • 73.
    Soy - definingvariables 26
  • 74.
    Soy - definingvariables 26
  • 75.
    Soy - definingvariables Not Supported! Keep business logic away from view! 26
  • 76.
    Useful functions •{getText('i18n-key', ....) • {contextPath} • {$data|truncate:30} 27
  • 77.
    Soy Javascript Compilation {namespace JIRA.Templates.Demo} /** * Simplest Hello world demo * @param name */ {template .helloWorld} <div>Hello World, {$name}</div> {/template} 28
  • 78.
  • 79.
  • 80.
    // This filewas 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 filewas 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 bydefault 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
  • 83.
  • 84.
    Contextual Auto-escaping /** *@param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31
  • 85.
    Contextual Auto-escaping /** *@param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31
  • 86.
    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>"} 31
  • 87.
    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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
  • 88.
    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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
  • 89.
    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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
  • 90.
    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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
  • 91.
    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 = 'x3ex3cscriptx3ealert(x22xx26xxx22)x3c/scriptx3e'"> &gt;&lt;script&gt;alert(&quot;x&amp;xx&quot;)&lt;/script&gt;</a> 31
  • 92.
    Soy @ Atlassian •JIRA (gadgets, new project administration, mails, ...) • GreenHopper • PAC • ... 32
  • 93.
    Soy and AtlassianPlugins <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
  • 94.
    Server-side Soy • AtlassianPlugin Framework favours Velocity • SoyTemplateRenderer/SoyTemplateRendererProvider • DefaultVelocityContextProvider (jira-core) • SoyData, SoyDataList, SoyDataMap, SoyData.createFromExistingData() 34
  • 95.
    Soy - CodingExample 35
  • 96.
    Soy - TemplateLibrary • {call} in Soy • web-resource <dependency> 36
  • 97.
  • 98.
    Backbone.js • Event-driven • Models •Views (responsible for keeping markup in sync with model) 38
  • 99.
    Our story withbackbone.js 39
  • 100.
    Our story withbackbone.js • Version/Component/People management in JIRA (Ignite) - 2011 39
  • 101.
    Our story withbackbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 39
  • 102.
    Our story withbackbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 • RAB - 2011 39
  • 103.
    Our story withbackbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 • RAB - 2011 • GH RapidBoard, New Issue Nav - 2011, 2012 39
  • 104.
  • 105.
    Why Backbone backbone.js 40
  • 106.
    Why Backbone backbone.js JIRA is a backbone 40
  • 107.
    Why Backbone JIRA is a backbone backbone.js 40
  • 108.
  • 109.
  • 110.
  • 111.
    Why Backbone.js • Small •Flexible • Does not impose any templating technologies 41
  • 112.
    Why Backbone.js • Small •Flexible • Does not impose any templating technologies • Well documented 41
  • 113.
    Why Backbone.js • Small •Flexible • Does not impose any templating technologies • Well documented • Popular 41
  • 114.
    Why Backbone.js • Small •Flexible • Does not impose any templating technologies • Well documented • Popular • Liked by us 41
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
    JQuery Javascript DOM / Markup 42
  • 120.
    JQuery Javascript DOM / Markup 42
  • 121.
    AUI JQuery Javascript DOM / Markup 42
  • 122.
    AUI JQuery Javascript DOM / Markup 42
  • 123.
    AUI JQuery Javascript DOM / Markup 42
  • 124.
    AUI JQuery Javascript DOM / Markup 42
  • 125.
    Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 126.
    Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 127.
    Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 128.
    Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 129.
    Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 130.
    Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 131.
    Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 132.
    Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42
  • 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
  • 138.
  • 139.
  • 140.
    Looking back... 2.5 yearsago... most of this stuff was not possible 44
  • 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
  • 143.

Editor's Notes