Tapestry 5.4: In The Pipeline

© 2012 Howard M. Lewis Ship Tapestry 5.4: In The
Pipeline Howard M. Lewis Ship [email protected] @hlship

It's All About JavaScript

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

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

JavaScript in 5.3 <input type="text" id="email" …/> JSONObject spec =
new JSONObject("id", id, validateURL, …); javaScriptSupport.addInitializerCall("checkEmail", spec); T5.extendInitializers({ checkEmail: function(spec) { $(spec.id).on("change", function (event) { … }); } });

JavaScript: Less is Always More!

Asynchronous Module Deﬁnition JavaScript Modules – for browsers Modules deﬁne
dependencies Dependencies loaded asynchronously RequireJS – http://requirejs.org

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

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

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

JavaScript: Less is Always More! (part two)

CoffeeScript CoffeeScript ➠ ❝… a little language that compiles into
JavaScript❞ Concise and readable Optional parenthesis Implicit returns Concise function deﬁnitions Great ﬁt with Underscore!

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 });

CoffeeScript: Deﬁning 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; });

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(…);

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

Prototype ➠ jQuery jQuery jQuery- Speciﬁc Abstraction Layer (core/spi) Agnostic
Prototype Prototype- Speciﬁc

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 ﬁnish soon, for December release

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 ﬁelds

… 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

Thanks!

Tapestry 5.4: In The Pipeline

Tapestry 5.4: In The Pipeline

Howard M. Lewis Ship

More Decks by Howard M. Lewis Ship

Other Decks in Technology

Featured

Transcript

© 2012 Howard M. Lewis Ship Tapestry 5.4: In The

It's All About JavaScript

Aggregation / Minimization Stacks Scalable structure: JavaScriptSupport T5.initializer Real encapsulation

Why Tapestry JavaScript Support Sucks T5.initializers Simple things require "heavy"

JavaScript in 5.3 <input type="text" id="email" …/> JSONObject spec =

JavaScript: Less is Always More!

Asynchronous Module Deﬁnition JavaScript Modules – for browsers Modules deﬁne

AMD define(["core/spi", "core/console"], function(spi, console) { … return { foo:

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

Module style Modules seem to be shorter, easier Parallel loading

JavaScript: Less is Always More! (part two)

CoffeeScript CoffeeScript ➠ ❝… a little language that compiles into

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

CoffeeScript: Deﬁning Functions (x,y) -> x * y function (x,

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,

Modules + HTML5 data- attributes <body> … <input type="text" data-validate-url="…"

Prototype ➠ jQuery jQuery jQuery- Speciﬁc Abstraction Layer (core/spi) Agnostic

Also in 5.4 (hopefully!) Built-in Twitter Bootstrap stylesheets! Extensible Dashboard

Things you've missed since 5.1 Page singletons Many performance enhancements

… but wait, there's more! @ActivationRequestParameter – automates onActivate() /

Thanks!