0
Tuesday, April 3, 2012
Better front-end development               in Atlassian plugins                The road from back-end to front-end program...
About me                • 4+ years with Atlassian                • 6+ years doing Atlassian plugin development:           ...
A bit of history                                  4Tuesday, April 3, 2012
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,...
A bit of history                • 2002 - 2006 - Awesome UI, Web 1.0                         WebWork, XWork, JSP, Velocity,...
A bit of history                • 2002 - 2006 - Awesome UI, Web 1.0                         WebWork, XWork, JSP, Velocity,...
A bit of history                • 2002 - 2006 - Awesome UI, Web 1.0                         WebWork, XWork, JSP, Velocity,...
Evolution Step 1 - AUI                • Confluence 3.0+, JIRA 3.13.5+                • Forms, Controls, Tabs, Inline Dialog...
Evolution Step 1 - AUI                • Confluence 3.0+, JIRA 3.13.5+                • Forms, Controls, Tabs, Inline Dialog...
Evolution Step 1 - AUI                • Confluence 3.0+, JIRA 3.13.5+                • Forms, Controls, Tabs, Inline Dialog...
Evolution Step 1 - AUI                • Confluence 3.0+, JIRA 3.13.5+                • Forms, Controls, Tabs, Inline Dialog...
Evolution Step 2 - REST                • Plugin Framework v2 only (JIRA 4+, Confluence 3.1+)                • Easier AJAX f...
@Path ("priority")    @AnonymousAllowed    @Consumes ({ MediaType.APPLICATION_JSON })    @Produces ({ MediaType.APPLICATIO...
injectable JS & CSS               + REST = WIN                                     8Tuesday, April 3, 2012
Evolution Step 3 (2010)               web resource contexts                • Confluence 2.10+, JIRA 4.2+                • E...
Evolution Step 4 (2010)               web-resource-transformer                 <web-resource-transformer key="my-key"     ...
Evolution Step 4 (2010)               web-resource-transformer                 <web-resource-transformer key="my-key"     ...
web-resource-transformers                                           11Tuesday, April 3, 2012
web-resource-transformers                • I18n                                           11Tuesday, April 3, 2012
web-resource-transformers                • I18n                • L&F                                           11Tuesday, ...
web-resource-transformers                • I18n                • L&F                • context path                        ...
web-resource-transformers                • I18n                • L&F                • context path                • SASS, ...
web-resource-transformers                • I18n                • L&F                • context path                • SASS, ...
I18N                         12Tuesday, April 3, 2012
I18N                         i18n resource file defined in atlassian-plugin.xml                                hello.world...
I18N - web resource               transformation definition                                          13Tuesday, April 3, 2012
I18N - web resource               transformation definition         <resource name="ourname" type="i18n"               loca...
I18N transformation                                     14Tuesday, April 3, 2012
I18N transformation                    var helloText = AJS.I18n.getText("hello.world") + " "                         + AJS...
I18N transformation                    var helloText = AJS.I18n.getText("hello.world") + " "                         + AJS...
I18N transformation                    var helloText = AJS.I18n.getText("hello.world") + " "                         + AJS...
Times of Hacking                                  15Tuesday, April 3, 2012
Times of Hacking             Javascript hacks                                                                            f...
“                         Its all too easy to create JavaScript applications                         that end up as tangle...
Evolution Step 5 (2011)                         Structure on the client side                                              ...
Evolution Step 5 (2011)                              Structure on the client side                         For speed, beaut...
Evolution Step 5 (2011)                              Structure on the client side                         For speed, beaut...
More structured approach in JS                • Backbone.js      • Ember.js                • SproutCore       • Angular.js...
More structured approach in JS                         • Backbone.js                         • Soy (Google Closure Templat...
More structured approach in JS                         • Backbone.js                         • Soy (Google Closure Templat...
More structured approach in JS                         M Backbone.js                          •                          •...
More structured approach in JS                         M Backbone.js                          •                           ...
More structured approach in JS                         M Backbone.js C                          •                         ...
More structured approach in JS                         • Backbone.js                         • Soy (Google Closure Templat...
More structured approach in JS                         • Soy (Google Closure Templates)                                   ...
More structured approach in JS                                                19Tuesday, April 3, 2012
Our Road to Soy                                 20Tuesday, April 3, 2012
Our Road to Soy                • AJS.template                                 20Tuesday, April 3, 2012
Our Road to Soy                • AJS.template                • Mustache                                 20Tuesday, April 3...
Our Road to Soy                • AJS.template                • Mustache                • Soy                              ...
Soy Features                              21Tuesday, April 3, 2012
Soy Features                • Simplicity                               21Tuesday, April 3, 2012
Soy Features                • Simplicity                • Logic and display separation                                    ...
Soy Features                • Simplicity                • Logic and display separation                • Client and server ...
Soy Features                • Simplicity                • Logic and display separation                • Client and server ...
Soy Features                • Simplicity                • Logic and display separation                • Client and server ...
Soy Features                • Simplicity                • Logic and display separation                • Client and server ...
Soy - Example        {namespace examples.simple}        /**         * Greets a person using "Hello" by default.         * ...
Soy Syntax - Types                          Type                  Examples                           null                 ...
Soy Syntax - Operators                         •   - (unary) not                         •   * / %                        ...
Soy - Commands                                25Tuesday, April 3, 2012
Soy - Commands                     • {template}{/template}                                               25Tuesday, April ...
Soy - Commands                     • {template}{/template}                     • {literal}{/literal}                      ...
Soy - Commands                     • {template}{/template}                     • {literal}{/literal}                     •...
Soy - Commands                     • {template}{/template}                     • {literal}{/literal}                     •...
Soy - Commands                     • {template}{/template}                     • {literal}{/literal}                     •...
Soy - Commands                     • {template}{/template}     • {foreach}, {ifempty}, {/foreach}                     • {l...
Soy - Commands                     • {template}{/template}     • {foreach}, {ifempty}, {/foreach}                     • {l...
Soy - Commands                     • {template}{/template}     • {foreach}, {ifempty}, {/foreach}                     • {l...
Soy - Commands                     • {template}{/template}     • {foreach}, {ifempty}, {/foreach}                     • {l...
Soy - defining variables                                         26Tuesday, April 3, 2012
Soy - defining variables                                         26Tuesday, April 3, 2012
Soy - defining variables                  Not Supported!                         Keep business logic away from view!   26Tu...
Useful functions                     • {getText(i18n-key, ....)                     • {contextPath}                     • ...
Soy Javascript Compilation                         {namespace JIRA.Templates.Demo}                         /**            ...
28Tuesday, April 3, 2012
29Tuesday, April 3, 2012
// This file was automatically generated from demo.soy.       // Please dont edit this file by hand.       if (typeof JIRA...
// This file was automatically generated from demo.soy.       // Please dont edit this file by hand.       if (typeof JIRA...
Auto-escaping                     • implicit by default to HTML escaping                     • {namespace com.example auto...
Contextual Auto-escaping                                          31Tuesday, April 3, 2012
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Contextual Auto-escaping                    /**                     * @param name                     */                  ...
Soy @ Atlassian                • JIRA (gadgets, new project administration, mails, ...)                • GreenHopper      ...
Soy and Atlassian Plugins            <web-resource key="my-key">                         <transformation extension="soy"> ...
Server-side Soy                • Atlassian Plugin Framework favours Velocity                • SoyTemplateRenderer/SoyTempl...
Soy - Coding Example                                      35Tuesday, April 3, 2012
Soy - Template Library                     • {call} in Soy                     • web-resource <dependency>                ...
Backbone.js                                       37Tuesday, April 3, 2012
Backbone.js                     • Event-driven                     • Models                     • Views (responsible for k...
Our story with backbone.js                                            39Tuesday, April 3, 2012
Our story with backbone.js                • Version/Component/People management in JIRA                  (Ignite) - 2011  ...
Our story with backbone.js                • Version/Component/People management in JIRA                  (Ignite) - 2011  ...
Our story with backbone.js                • Version/Component/People management in JIRA                  (Ignite) - 2011  ...
Our story with backbone.js                • Version/Component/People management in JIRA                  (Ignite) - 2011  ...
Why Backbone                              40Tuesday, April 3, 2012
Why Backbone                         backbone.js                                       40Tuesday, April 3, 2012
Why Backbone                            backbone.js                         JIRA is a backbone                            ...
Why Backbone                         JIRA is a backbone                                   backbone.js                     ...
Why Backbone.js                                 41Tuesday, April 3, 2012
Why Backbone.js                • Small                                 41Tuesday, April 3, 2012
Why Backbone.js                • Small                • Flexible                                 41Tuesday, April 3, 2012
Why Backbone.js                • Small                • Flexible                • Does not impose any templating technolog...
Why Backbone.js                • Small                • Flexible                • Does not impose any templating technolog...
Why Backbone.js                • Small                • Flexible                • Does not impose any templating technolog...
Why Backbone.js                • Small                • Flexible                • Does not impose any templating technolog...
42Tuesday, April 3, 2012
DOM / Markup                                        42Tuesday, April 3, 2012
Javascript                         DOM / Markup                                                 42Tuesday, April 3, 2012
Javascript                         DOM / Markup                                                 42Tuesday, April 3, 2012
JQuery                                    Javascript                         DOM / Markup                                 ...
JQuery                                    Javascript                         DOM / Markup                                 ...
AUI                JQuery                                     Javascript                         DOM / Markup             ...
AUI                JQuery                                     Javascript                         DOM / Markup             ...
AUI                JQuery                                     Javascript                         DOM / Markup             ...
AUI                JQuery                                     Javascript                         DOM / Markup             ...
Soy (client)         AUI                JQuery                                                    Javascript              ...
Soy (client)         AUI                JQuery                                                    Javascript              ...
Soy (client)         AUI                JQuery                                                    Javascript              ...
Backbone.js                         Soy (client)         AUI                JQuery                                        ...
Backbone.js                         Soy (client)         AUI                JQuery                                        ...
Backbone.js                         Soy (client)         AUI                JQuery                                        ...
Backbone.js                         Soy (client)         AUI                JQuery                                        ...
Backbone.js                         Soy (client)         AUI                JQuery                                        ...
REST API                       Backbone.js                           Soy (client)         AUI                JQuery       ...
REST API                       Backbone.js                           Soy (client)         AUI                JQuery       ...
REST API                       Backbone.js                Services                Managers   Soy (client)         AUI     ...
REST API                       Backbone.js                Services                Managers   Soy (client)         AUI     ...
Possible Future                • Easier, more powerful and efficient web resource                  transformations         ...
Looking back...                                 44Tuesday, April 3, 2012
Looking back...               2.5 years ago...                                  44Tuesday, April 3, 2012
Looking back...               2.5 years ago...               most of this stuff was not possible                          ...
“    Don’t underestimate the power of the client-side                         programming. Time to learn Javascript and   ...
TAKE-AWAYS                 “       Atlassian is moving fast to client-side programming.                         Technology...
Thank you!Tuesday, April 3, 2012
Upcoming SlideShare
Loading in...5
×

Better front-end development in Atlassian plugins

3,387

Published on

Traditionally the UI of Atlassian plugins have been based on a typical old-school MVC frameworks (webwork, Struts) with little dynamic behaviour. But no more! JIRA Team Lead Wociech Seliga will show you have to develop sexier and more user-friendly plugins based on a modern stack using AUI, Soy templates, Backbone.js and friends.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,387
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Better front-end development in Atlassian plugins"

  1. 1. Tuesday, April 3, 2012
  2. 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 2Tuesday, April 3, 2012
  3. 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) 3Tuesday, April 3, 2012
  4. 4. A bit of history 4Tuesday, April 3, 2012
  5. 5. A bit of history • 2002 - 2006 - Awesome UI, Web 1.0 4Tuesday, April 3, 2012
  6. 6. A bit of history • 2002 - 2006 - Awesome UI, Web 1.0 WebWork, XWork, JSP, Velocity, Freemarker 4Tuesday, April 3, 2012
  7. 7. A bit of history • 2002 - 2006 - Awesome UI, Web 1.0 WebWork, XWork, JSP, Velocity, Freemarker • 2006 - 2009 - Features, features, features! 4Tuesday, April 3, 2012
  8. 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 4Tuesday, April 3, 2012
  9. 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+ 4Tuesday, April 3, 2012
  10. 10. Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5Tuesday, April 3, 2012
  11. 11. Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5Tuesday, April 3, 2012
  12. 12. Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5Tuesday, April 3, 2012
  13. 13. Evolution Step 1 - AUI • Confluence 3.0+, JIRA 3.13.5+ • Forms, Controls, Tabs, Inline Dialogs, ..., AJS 5Tuesday, April 3, 2012
  14. 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) 6Tuesday, April 3, 2012
  15. 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(); } } 7Tuesday, April 3, 2012
  16. 16. injectable JS & CSS + REST = WIN 8Tuesday, April 3, 2012
  17. 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> 9Tuesday, April 3, 2012
  18. 18. Evolution Step 4 (2010) web-resource-transformer <web-resource-transformer key="my-key" class="fqcn.must.implement.WebResourceTransformer"/> 10Tuesday, April 3, 2012
  19. 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); } 10Tuesday, April 3, 2012
  20. 20. web-resource-transformers 11Tuesday, April 3, 2012
  21. 21. web-resource-transformers • I18n 11Tuesday, April 3, 2012
  22. 22. web-resource-transformers • I18n • L&F 11Tuesday, April 3, 2012
  23. 23. web-resource-transformers • I18n • L&F • context path 11Tuesday, April 3, 2012
  24. 24. web-resource-transformers • I18n • L&F • context path • SASS, LESS 11Tuesday, April 3, 2012
  25. 25. web-resource-transformers • I18n • L&F • context path • SASS, LESS • Soy 11Tuesday, April 3, 2012
  26. 26. I18N 12Tuesday, April 3, 2012
  27. 27. I18N i18n resource file defined in atlassian-plugin.xml hello.world=Hello World from.atlascamp=from AtlasCamp {0} 12Tuesday, April 3, 2012
  28. 28. I18N - web resource transformation definition 13Tuesday, April 3, 2012
  29. 29. 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> 13Tuesday, April 3, 2012
  30. 30. I18N transformation 14Tuesday, April 3, 2012
  31. 31. I18N transformation var helloText = AJS.I18n.getText("hello.world") + " " + AJS.I18n.getText("from.atlascamp", 2012) 14Tuesday, April 3, 2012
  32. 32. I18N transformation var helloText = AJS.I18n.getText("hello.world") + " " + AJS.I18n.getText("from.atlascamp", 2012) 14Tuesday, April 3, 2012
  33. 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) 14Tuesday, April 3, 2012
  34. 34. Times of Hacking 15Tuesday, April 3, 2012
  35. 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 15Tuesday, April 3, 2012 JQu
  36. 36. “ Its 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 16Tuesday, April 3, 2012
  37. 37. Evolution Step 5 (2011) Structure on the client side 17Tuesday, April 3, 2012
  38. 38. Evolution Step 5 (2011) Structure on the client side For speed, beauty and maintainability 17Tuesday, April 3, 2012
  39. 39. Evolution Step 5 (2011) Structure on the client side For speed, beauty and maintainability FTW 17Tuesday, April 3, 2012
  40. 40. 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) 18Tuesday, April 3, 2012
  41. 41. More structured approach in JS • Backbone.js • Soy (Google Closure Templates) 19Tuesday, April 3, 2012
  42. 42. More structured approach in JS • Backbone.js • Soy (Google Closure Templates) MV C 19Tuesday, April 3, 2012
  43. 43. More structured approach in JS M Backbone.js • • Soy (Google Closure Templates) VC 19Tuesday, April 3, 2012
  44. 44. More structured approach in JS M Backbone.js • V • Soy (Google Closure Templates) C 19Tuesday, April 3, 2012
  45. 45. More structured approach in JS M Backbone.js C • V • Soy (Google Closure Templates) 19Tuesday, April 3, 2012
  46. 46. More structured approach in JS • Backbone.js • Soy (Google Closure Templates) 19Tuesday, April 3, 2012
  47. 47. More structured approach in JS • Soy (Google Closure Templates) 19Tuesday, April 3, 2012
  48. 48. More structured approach in JS 19Tuesday, April 3, 2012
  49. 49. Our Road to Soy 20Tuesday, April 3, 2012
  50. 50. Our Road to Soy • AJS.template 20Tuesday, April 3, 2012
  51. 51. Our Road to Soy • AJS.template • Mustache 20Tuesday, April 3, 2012
  52. 52. Our Road to Soy • AJS.template • Mustache • Soy 20Tuesday, April 3, 2012
  53. 53. Soy Features 21Tuesday, April 3, 2012
  54. 54. Soy Features • Simplicity 21Tuesday, April 3, 2012
  55. 55. Soy Features • Simplicity • Logic and display separation 21Tuesday, April 3, 2012
  56. 56. Soy Features • Simplicity • Logic and display separation • Client and server side (Javascript and Java) 21Tuesday, April 3, 2012
  57. 57. Soy Features • Simplicity • Logic and display separation • Client and server side (Javascript and Java) • Client-side speed 21Tuesday, April 3, 2012
  58. 58. Soy Features • Simplicity • Logic and display separation • Client and server side (Javascript and Java) • Client-side speed • Security (auto-escaping) 21Tuesday, April 3, 2012
  59. 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 21Tuesday, April 3, 2012
  60. 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} 22Tuesday, April 3, 2012
  61. 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] 23Tuesday, April 3, 2012
  62. 62. Soy Syntax - Operators • - (unary) not • * / % • + - (binary) • < > <= >= • == != • and • or • ?: (ternary) 24Tuesday, April 3, 2012
  63. 63. Soy - Commands 25Tuesday, April 3, 2012
  64. 64. Soy - Commands • {template}{/template} 25Tuesday, April 3, 2012
  65. 65. Soy - Commands • {template}{/template} • {literal}{/literal} 25Tuesday, April 3, 2012
  66. 66. Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} 25Tuesday, April 3, 2012
  67. 67. Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} 25Tuesday, April 3, 2012
  68. 68. Soy - Commands • {template}{/template} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25Tuesday, April 3, 2012
  69. 69. Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25Tuesday, April 3, 2012
  70. 70. Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25Tuesday, April 3, 2012
  71. 71. Soy - Commands • {template}{/template} • {foreach}, {ifempty}, {/foreach} • {literal}{/literal} • {for}, {/for} • {print <expression>} • {call}, {/call}, {param}, {/param} • {<expression>} • {if <expression>}, {elseif}, {else}, {/if} 25Tuesday, April 3, 2012
  72. 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} 25Tuesday, April 3, 2012
  73. 73. Soy - defining variables 26Tuesday, April 3, 2012
  74. 74. Soy - defining variables 26Tuesday, April 3, 2012
  75. 75. Soy - defining variables Not Supported! Keep business logic away from view! 26Tuesday, April 3, 2012
  76. 76. Useful functions • {getText(i18n-key, ....) • {contextPath} • {$data|truncate:30} 27Tuesday, April 3, 2012
  77. 77. Soy Javascript Compilation {namespace JIRA.Templates.Demo} /** * Simplest Hello world demo * @param name */ {template .helloWorld} <div>Hello World, {$name}</div> {/template} 28Tuesday, April 3, 2012
  78. 78. 28Tuesday, April 3, 2012
  79. 79. 29Tuesday, April 3, 2012
  80. 80. // This file was automatically generated from demo.soy. // Please dont 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(); }; 29Tuesday, April 3, 2012
  81. 81. // This file was automatically generated from demo.soy. // Please dont 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(); }; 29Tuesday, April 3, 2012
  82. 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 30Tuesday, April 3, 2012
  83. 83. Contextual Auto-escaping 31Tuesday, April 3, 2012
  84. 84. Contextual Auto-escaping /** * @param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31Tuesday, April 3, 2012
  85. 85. Contextual Auto-escaping /** * @param name */ {template .helloWorld autoescape="contextual"} <a href="/Demo?name={$name}" onclick="var x = {$name}">{$name}</a> {/template} 31Tuesday, April 3, 2012
  86. 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>"} 31Tuesday, April 3, 2012
  87. 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> 31Tuesday, April 3, 2012
  88. 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> 31Tuesday, April 3, 2012
  89. 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> 31Tuesday, April 3, 2012
  90. 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> 31Tuesday, April 3, 2012
  91. 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> 31Tuesday, April 3, 2012
  92. 92. Soy @ Atlassian • JIRA (gadgets, new project administration, mails, ...) • GreenHopper • PAC • ... 32Tuesday, April 3, 2012
  93. 93. 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> 33Tuesday, April 3, 2012
  94. 94. Server-side Soy • Atlassian Plugin Framework favours Velocity • SoyTemplateRenderer/SoyTemplateRendererProvider • DefaultVelocityContextProvider (jira-core) • SoyData, SoyDataList, SoyDataMap, SoyData.createFromExistingData() 34Tuesday, April 3, 2012
  95. 95. Soy - Coding Example 35Tuesday, April 3, 2012
  96. 96. Soy - Template Library • {call} in Soy • web-resource <dependency> 36Tuesday, April 3, 2012
  97. 97. Backbone.js 37Tuesday, April 3, 2012
  98. 98. Backbone.js • Event-driven • Models • Views (responsible for keeping markup in sync with model) 38Tuesday, April 3, 2012
  99. 99. Our story with backbone.js 39Tuesday, April 3, 2012
  100. 100. Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 39Tuesday, April 3, 2012
  101. 101. Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 39Tuesday, April 3, 2012
  102. 102. Our story with backbone.js • Version/Component/People management in JIRA (Ignite) - 2011 • JIRA Importers Plugin, JIRA Mail Plugin - 2011 • RAB - 2011 39Tuesday, April 3, 2012
  103. 103. 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 39Tuesday, April 3, 2012
  104. 104. Why Backbone 40Tuesday, April 3, 2012
  105. 105. Why Backbone backbone.js 40Tuesday, April 3, 2012
  106. 106. Why Backbone backbone.js JIRA is a backbone 40Tuesday, April 3, 2012
  107. 107. Why Backbone JIRA is a backbone backbone.js 40Tuesday, April 3, 2012
  108. 108. Why Backbone.js 41Tuesday, April 3, 2012
  109. 109. Why Backbone.js • Small 41Tuesday, April 3, 2012
  110. 110. Why Backbone.js • Small • Flexible 41Tuesday, April 3, 2012
  111. 111. Why Backbone.js • Small • Flexible • Does not impose any templating technologies 41Tuesday, April 3, 2012
  112. 112. Why Backbone.js • Small • Flexible • Does not impose any templating technologies • Well documented 41Tuesday, April 3, 2012
  113. 113. Why Backbone.js • Small • Flexible • Does not impose any templating technologies • Well documented • Popular 41Tuesday, April 3, 2012
  114. 114. Why Backbone.js • Small • Flexible • Does not impose any templating technologies • Well documented • Popular • Liked by us 41Tuesday, April 3, 2012
  115. 115. 42Tuesday, April 3, 2012
  116. 116. DOM / Markup 42Tuesday, April 3, 2012
  117. 117. Javascript DOM / Markup 42Tuesday, April 3, 2012
  118. 118. Javascript DOM / Markup 42Tuesday, April 3, 2012
  119. 119. JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  120. 120. JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  121. 121. AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  122. 122. AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  123. 123. AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  124. 124. AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  125. 125. Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  126. 126. Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  127. 127. Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  128. 128. Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  129. 129. Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  130. 130. Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  131. 131. Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  132. 132. Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  133. 133. REST API Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  134. 134. REST API Backbone.js Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  135. 135. REST API Backbone.js Services Managers Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  136. 136. REST API Backbone.js Services Managers Soy (client) AUI JQuery Javascript DOM / Markup 42Tuesday, April 3, 2012
  137. 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) 43Tuesday, April 3, 2012
  138. 138. Looking back... 44Tuesday, April 3, 2012
  139. 139. Looking back... 2.5 years ago... 44Tuesday, April 3, 2012
  140. 140. Looking back... 2.5 years ago... most of this stuff was not possible 44Tuesday, April 3, 2012
  141. 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 45Tuesday, April 3, 2012
  142. 142. TAKE-AWAYS “ Atlassian is moving fast to client-side programming. Technology is there. Are you ready? ” #atlascamp 46Tuesday, April 3, 2012
  143. 143. Thank you!Tuesday, April 3, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×