You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tapestry.apache.org by bu...@apache.org on 2014/06/02 21:20:04 UTC
svn commit: r910987 - in /websites/production/tapestry/content:
cache/main.pageCache client-side-javascript.html
Author: buildbot
Date: Mon Jun 2 19:20:03 2014
New Revision: 910987
Log:
Production update by buildbot for tapestry
Added:
websites/production/tapestry/content/client-side-javascript.html
Modified:
websites/production/tapestry/content/cache/main.pageCache
Modified: websites/production/tapestry/content/cache/main.pageCache
==============================================================================
Binary files - no diff available.
Added: websites/production/tapestry/content/client-side-javascript.html
==============================================================================
--- websites/production/tapestry/content/client-side-javascript.html (added)
+++ websites/production/tapestry/content/client-side-javascript.html Mon Jun 2 19:20:03 2014
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+ <!--
+
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<html>
+<head>
+ <meta http-equiv="x-ua-compatible" content="IE=9">
+ <title>
+ Client-Side JavaScript -- Apache Tapestry
+ </title>
+ <link type="text/css" rel="stylesheet" href="/resources/space.css">
+
+
+ <link href="/styles/style.css" rel="stylesheet" type="text/css"/>
+
+</head>
+<body>
+ <div class="wrapper bs">
+
+<div id="navigation"><div class="nav">
+<ul class="alternate" type="square"><li><a shape="rect" href="index.html" title="Index">Home</a></li><li><a shape="rect" href="getting-started.html" title="Getting Started">Getting Started</a></li><li><a shape="rect" href="documentation.html" title="Documentation">Documentation</a></li><li><a shape="rect" href="download.html" title="Download">Download</a></li><li><a shape="rect" href="about.html" title="About">About</a></li><li><a shape="rect" href="community.html" title="Community">Community</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/">Apache</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li><li><a shape="rect" class="external-link" href="http://www.apache.org/foundation/thanks.html">Thanks</a></li></ul>
+</div></div>
+
+<div id="top">
+<div id="smallbanner"><div class="searchbox" style="float:right;margin: .3em 1em .1em 1em">
+<p>
+<span style="color: #999; font-size: 90%">Tapestry docs, issues, wikis & blogs:</span>
+</p><form enctype="application/x-www-form-urlencoded" method="get" action="http://tapestry.apache.org/search.html">
+ <input type="text" name="q">
+ <input type="submit" value="Search">
+</form>
+
+</div>
+
+<div class="emblem" style="float:left"><a shape="rect" href="index.html" title="Index"><span class="image-wrap" style=""><img src="small-banner.data/tapestry_s.png" style="border: 0px solid black"></span></a></div>
+<div class="title" style="float:left; margin: 0 0 0 3em">
+<h1><a shape="rect" name="SmallBanner-PageTitle"></a>Client-Side JavaScript</h1></div></div>
+<div class="clearer"></div>
+</div>
+
+<div class="clearer"></div>
+
+ <div id="breadcrumbs">
+ <a href="index.html">Apache Tapestry</a> > <a href="documentation.html">Documentation</a> > <a href="user-guide.html">User Guide</a> > <a href="client-side-javascript.html">Client-Side JavaScript</a>
+ <a class="edit" title="Edit this page (requires approval -- just ask on the mailing list)" href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=41813137">edit</a>
+ </div>
+
+<div id="content">
+<div id="ConfluenceContent"><p>Perhaps nothing in Tapestry has changed over the years so much as the way client-side JavaScript is supported. From the get go, the goal was to make JavaScript a first-class citizen in the Tapestry world, and make it easy to encapsulate JavaScript within components.</p><p>The <a shape="rect" href="legacy-javascript.html">legacy JavaScript</a> page discusses the earlier approaches; the main feature of Tapestry 5.4 is a total rewrite of all things client-side, with the following goals:</p><ul><li>Break the hard linkage of Tapestry to <a shape="rect" class="external-link" href="http://prototypejs.org/" >Prototype</a> and <a shape="rect" class="external-link" href="http://script.aculo.us/" >Scriptaculous</a>, by introducing an abstraction layer</li><li>Remove the clumsy <code>Tapestry</code> and <code>T5</code> "namespaces"</li><li>Reduce the amount of page-specific JavaScript initialization</li><li>Make it easier to override behavior associated with clien
t elements</li><li>Support CoffeeScript and (potentially) other languages that target JavaScript</li><li>Organize client-side JavaScript using <a shape="rect" href="javascript-modules.html">modules</a></li><li>Make pages load faster</li><li>Integrate <a shape="rect" class="external-link" href="http://getbootstrap.com/" >Bootstrap</a></li><li>Make it easier for rich client libraries such as <a shape="rect" class="external-link" href="http://backbonejs.org/" >Backbone</a> or <a shape="rect" class="external-link" href="https://angularjs.org/" >AngularJS</a> to operate within a page</li><li>Properly document Tapestry's client support</li></ul><h3 id="Client-SideJavaScript-TheOverallVision">The Overall Vision</h3><p>The overall vision for the client-side in Tapestry is encapsulation, at several different levels.</p><p>On the server-side, a Tapestry component (or mixin) will exposes configurable parameters. The component will write DOM elements or attributes, as well as some amo
unt of JavaScript initialization. The encapsulation here allows developers with little or no knowledge of client-side JavaScript to enjoy the benefits (as consumers of components created by developers who are versed in client-side coding and Tapestry components).</p><p>On the client-side, the JavaScript combines with the special markup to produce the behaviors that are desired ... anything from controlling the initial focus field, to performing client-side input field validation, to running complex Ajax workflows.</p><p>Where possible, all of this behavior is driven by <code>data-</code> attributes on the elements, combined with top-level event handlers. On the client side, events are used not only to respond directly to user actions (with "click", "mouseOver", "submit", or other event listeners) but also to allow elements to collaborate in various ways.  For example, input validation is based on triggering a specific custom event on each form control element, and top-level eve
nt handlers can then manage the validation for any number of fields.</p><h3 id="Client-SideJavaScript-Prototypevs.jQuery">Prototype vs. jQuery</h3><p>For several years, it has been obvious that Tapestry "backed the wrong horse" with respect to Prototype and jQuery. When the first code was being laid down in 2007 or 2008, it wasn't so clear that jQuery with its odd abstractions and unfamiliar approach, would go on to conquer the world. Meanwhile, Prototype was very strongly integrated into Ruby on Rails and had first class documentation and books.</p><p>That being said, jQuery may not be the be-all and end-all. Tapestry 5.4 introduces an abstraction layer, that allows many components to write code that doesn't care whether the foundation framework in Prototype or jQuery. This is especially useful during the arduous process of moving Tapestry 5.3 client-side code forward to 5.4.</p><p>If you like jQuery then there's no problem: write your application using just jQuery and you can igno
re a lot of the features in the abstraction layer. Your code will likely be just a bit more efficient.</p><p>If you are building a reusable component or library, writing to the abstraction layer may be worth the effort; it is entirely possible that someone may write a replacement for the abstraction layer that targets your favorite foundation framework, such as ExtJS, MooTools, or something not even known of today.</p><h3 id="Client-SideJavaScript-Heavyvs.Light">Heavy vs. Light</h3><p>Earlier Tapestry JavaScript was <em>heavy</em>. Essentially, each component would write some very specific JavaScript initialization that would include the component's DOM id and many other details. This initialization would reference a function on the <code>T5.inits</code> namespace.</p><p>The function there would typically locate the specific element by its client DOM id, then attach event handlers to the one element. It might also create some form of client-side controller object. There were is
sues due to this: for complex pages (or perhaps even typical pages), the "blob" of JavaScript initialization at the bottom of the page could be quite large.</p><p>The use of individual event handlers meant that Tapestry applications would use more client-side objects that a bespoke jQuery solution ... because the normal approach in jQuery is to attach a single event handler to the document or body that handles any events that bubble up to the top <em>and</em> match a CSS selector.</p><p>In Tapestry 5.4, the goal is to make things <em>light</em>. In most cases, there will not be a specific initialization function; instead a <a shape="rect" href="javascript-modules.html">JavaScript module</a> will be loaded, and it will install one or more top-level event handlers; the elements will have <a shape="rect" class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes" ><code>data-</code> attributes</a> that are used by those top level
handlers to recognize which elements they are responsible for.</p><p>This is more of a full lifecycle approach; there's no danger of </p><p> </p></div>
+</div>
+
+<div class="clearer"></div>
+<div id="footer">
+<div id="footer"><p>Apache Tapestry, Tapestry, Apache, the Apache feather logo, and the Apache Tapestry project logo are trademarks of The Apache Software Foundation.<br clear="none">
+</p><p><script type="text/javascript">
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-400821-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+</script></p><p></p></div>
+</div>
+ <div id="comments_thread"></div>
+ <script type="text/javascript" src="https://comments.apache.org/show_comments.lua?site=tapestry&page=http://tapestry.apache.org/client-side-javascript.html" async="true">
+ </script>
+ <noscript>
+ <iframe width="100%" height="500" src="https://comments.apache.org/iframe.lua?site=tapestry&page=http://tapestry.apache.org/client-side-javascript.html"></iframe>
+ </noscript>
+ </div>
+</body>
+</html>