Client-side Transformations

Client-side Transformations

@johnboxall
@vanjs
march 9 2011

What are client-side transformations?

What are client-side transformations?
Transforming a webpage.
On the client side.

Taking your content...

<html>
<body>
<h1>one</h1>
<h2>two</h2>
<body>
</html>

Taking your content... and remixing it!

<html> <html>
<body> <body>
<h1>one</h1> <h2>two</h2>
<h2>two</h2> <h1>one</h1>
<body> <body>
</html> </html>

Why would you ever want to do this?

Why would you ever want to do this?

Because you make mobile websites!

To make mobile websites we used to do this

PHONE PROXY CONTENT

To make mobile websites we used to do this
• good • bad
• layout control • politics
• resource control • operations

PHONE PROXY CONTENT

Client-side transformations let us do this

JS

PHONE PROXY CONTENT

• good • bad
• layout control • ???
• resource control

JS

PHONE CONTENT

How should we implement layout control?

<html> <html>
<body> <body>
<h1>one</h1> <h2>two</h2>
<h2>two</h2> <h1>one</h1>
<body> <body>
</html> </html>


<html>

<body>

<h1>One</h1>

<h2>Two</h1>

<script type="text/javascript">
$('h2').before('h1');
</script>
</body>

</html>

<html>
<body>
var $body = $('body').hide();
</script>
<h1>One</h1>
<h2>Two</h1>
$(function() {
$('h2').before($('h1'));
$body.show();
});
</script>

</body>
</html>

How can we implement resource control?

<html>

<body>

<script type="text/javascript" src="one.js"></script>

<script type="text/javascript" src="two.js"></script>

</body>

</html>


<html>

<body>




$('[src="one.js"]').before($('[src="two.js"]'));

</script>

</body>

</html>


var $doc = $(document).bind('beforeload', function(e) {
e.preventDefault();
});
</script>

<html>
<body>
var scripts = [];
scripts.push(e.target);
e.preventDefault();
});

$(function() {
$doc.unbind('beforeload');
(function loadScripts() {
var script = scripts.pop();
if (script) $.getScript(script.src, loadScripts);
})();
});
</script>
</body>
</html>

<html>
<body>
var scripts = [];
e.preventDefault();
});

$(function() {
(function loadScript() {
if (script) $.getScript(script.src, loadScript);
})();
});
</script>
</body>
</html>

<html>
<body>
var scripts = [];
e.preventDefault();
});

$(function() {
(function loadScript() {
if (script) $.getScript(script.src, loadScript);
})();
});
</script>
<script type="text/javascript">alert('one');</script>
<script type="text/javascript">alert('two');</script>
</body>
</html>

<html>
<body>
document.write('x3Cnoscript>');
</script>
</noscript>
</body>
</html>

<html>
<body>
document.write('x3Cstyle type="text/x-css">');
</script>
</style>
</body>
</html>

<html>
<body>
document.write('x3Cstyle type="text/x-css">');
</script>
</style>
var $scripts = $($('style').html());
$scripts.reverse();
$('body').append($scripts);
</script>
</body>
</html>

X Layout control

X Resource control

Let’s build a mobile site using CST.

var $content = $($('style').html());

var context = {
'#title': $('h1', $content),
'#price': $(div.price, $content).html(),
'#sizes': (function() {
return $('#size', $content);
})
}

var templateStr = [
'<div id="title"></div>',
'<div id="price"></div>',
'<div id="sizes"></div>'
].join('');

var $transform = $.template(templateStr, context);

$('body').append($transform);

Client-side Transformations
PS. We’re hiring:

http://mobify.me/jobs/
@johnboxall
@vanjs
march 9 2011

Client-side Transformations

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Client-side Transformations

Similar to Client-side Transformations (20)

Recently uploaded

Recently uploaded (20)

Client-side Transformations

Editor's Notes