Better Front-end Development in Atlassian Plugins
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Better Front-end Development in Atlassian Plugins

on

  • 2,612 views

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

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.

Statistics

Views

Total Views
2,612
Views on SlideShare
2,610
Embed Views
2

Actions

Likes
1
Downloads
16
Comments
2

2 Embeds 2

https://si0.twimg.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @VitorPelizza I haven't personally used Angular.js for developing JIRA plugins, but AFAIK there is nothing which stops you from using it. I would not be surprised if there are some plugins in the ecosystem already doing it.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi!

    First of all, contragulations for the presentation! :)
    Is there any real case using AngularJS to develop Jira plugins?

    Thanks!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • Tell about the story - my gradual \n1 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
  • 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=”text/x-template”\n22\nask: who knows Soy\n
  • mention that AJS.template is brain dead - just variable substitution, no loops, ifs\nscript type=”text/x-template”\n22\nask: who knows Soy\n
  • mention that AJS.template is brain dead - just variable substitution, no loops, ifs\nscript type=”text/x-template”\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
  • \n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • 28\n
  • \n
  • \n
  • \n
  • 30\n
  • \n
  • \n
  • 32\n
  • 32\n
  • \n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 34\n
  • 35\n
  • 36\n
  • 37\n
  • 37\n
  • 36\n
  • \n
  • 38\n
  • 40\n
  • 40\n
  • 40\n
  • 40\n
  • 41\n
  • 41\n
  • 41\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • 42\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Better Front-end Development in Atlassian Plugins Presentation Transcript

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