Tapestry 5.4: In The Pipeline

Presented to the cool folks at iFactory.

Transcript

1. © 2012 Howard M. Lewis Ship
   Tapestry 5.4: In The Pipeline
   Howard M. Lewis Ship
   hlship@gmail.com
   @hlship
   

   View Slide

2. It's All
   About
   JavaScript
   

   View Slide

3. Aggregation / Minimization
   Stacks
   Scalable structure:
   JavaScriptSupport
   T5.initializer
   Real encapsulation inside components
   Full page vs. Ajax consistency
   Why Tapestry JavaScript
   Support Rocks
   

   View Slide

4. Why Tapestry JavaScript
   Support Sucks
   T5.initializers
   Simple things require "heavy" structure
   T5 namespace / Tapestry namespace – what a mess!
   Prototype dependency … where's jQuery?
   Too much based on Prototype's Class
   Requires a lot of monkey patching to customize
   

   View Slide

5. JavaScript in 5.3
   
   JSONObject spec = new JSONObject("id", id,
   validateURL, …);
   javaScriptSupport.addInitializerCall("checkEmail", spec);
   T5.extendInitializers({
   checkEmail: function(spec) {
   $(spec.id).on("change", function (event) { … });
   }
   });
   

   View Slide

6. JavaScript: Less is
   Always More!
   

   View Slide

7. Asynchronous Module Definition
   JavaScript Modules – for browsers
   Modules define dependencies
   Dependencies loaded asynchronously
   RequireJS – http://requirejs.org
   

   View Slide

8. AMD
   define(["core/spi", "core/console"],
   function(spi, console) {
   …
   return {
   foo: function() { … },
   bar: function() { … }
   };
   });
   Hygenic Function (for
   hiding private variables
   and functions)
   Properties
   exported by this
   module
   

   View Slide

9. AMD
   core/spi
   http://localhost:8080/assets/thx1138/modules/core/spi.js
   classpath:META-INF/modules/core/spi.js
   

   View Slide

10. Module style
    Modules seem to be shorter, easier
    Parallel loading of dependencies ➠ faster page load
    Implicit hygenic functions to hide private properties &
    functions
    Nice avoidance of globals
    Easy to monkey patch
    Tapestry can override an entire module
    

    View Slide

11. JavaScript: Less is
    Always More!
    (part two)
    

    View Slide

12. CoffeeScript
    CoffeeScript
    ➠ ❝… a little language that compiles into JavaScript❞
    Concise and readable
    Optional parenthesis
    Implicit returns
    Concise function definitions
    Great fit with Underscore!
    

    View Slide

13. CoffeeScript: Invoking Functions
    $(".x-cancel").tooltip "hide" $(".x-cancel").tooltip("hide")
    collection.add new Quiz(originalModel),
    at: 0
    collection.add(new Quiz(originalModel), {
    at: 0
    });
    

    View Slide

14. CoffeeScript: Defining Functions
    (x,y) -> x * y
    function (x, y) {
    return x * y;
    }
    isBlank = (str) ->
    _.isNull(str) or
    _.isUndefined(str) or
    str.trim() is ""
    function isBlank(str) {
    return _.isNull(str) ||
    _.isUndefined(str) ||
    str.trim() === "";
    }
    _.map list, (x) -> 2 * x _.map(list, function(x) {
    return 2 * x;
    });
    

    View Slide

15. AMD + CoffeeScript
    app/mymodule
    http://localhost:8080/assets/thx1138/modules/app/mymodule.js
    classpath:META-INF/modules/app/mymodule.coffee
    define ["core/spi", "core/console"],
    (spi, console) ->
    …
    foo: (-> …)
    bar: (-> …)
    javaScriptSupport.require("app/mymodule").invoke("foo").with(…);
    

    View Slide

16. Modules + HTML5 data- attributes
    
    …
    
    markupWriter.attributes("data-validate-url", …);
    javaScriptSupport.require("app/validations");
    define ["core/spi"],
    (spi) ->
    spi.domReady ->
    spi.body().on "change", "[data-validate-url]",
    (event) -> …
    

    View Slide

17. Prototype ➠ jQuery
    jQuery
    jQuery-
    Specific
    Abstraction Layer (core/spi)
    Agnostic
    Prototype
    Prototype-
    Specific
    

    View Slide

18. Also in 5.4 (hopefully!)
    Built-in Twitter Bootstrap stylesheets!
    Extensible Dashboard page
    Modules aggregated into stacks
    LESS and/or SASS support
    Cometd or WebSocket support
    … plus lots of little stuff
    … whatever we can finish soon, for December release
    

    View Slide

19. Things you've missed since 5.1
    Page singletons
    Many performance enhancements
    Improved meta-programming with Plastic
    Live reloading in the services layer
    JavaScript / CSS minimization
    Kaptcha support
    HTML5 support
    Non-private component fields
    

    View Slide

20. … but wait, there's more!
    @ActivationRequestParameter – automates
    onActivate() / onPassivate()
    @RequestParameter
    Full HTML exception report for failed Ajax requests
    MultiZoneUpdate ➠ AjaxResponseRenderer service
    Underscore.js
    Tree component
    Skinning / Theming support
    User Alerts
    

    View Slide

21. Thanks!
    

    View Slide