June 24th, 2008 PLEASE FORWARD
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tips, Tricks, News and Reviews for Web Coders
by Kevin Yank (techtimes@sitepoint.com)
Read the HTML version of this newsletter, with graphics, at:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=195
Note: This newsletter is supported solely by advertisers like the
one below. We stand 100% behind every ad that we run. If you ever
have a problem with a company that advertises here please contact
us and we will try to get it resolved. -- Kevin Yank
IN THIS ISSUE - - - - - - - - - - - - - - - - - - - - - - - - - -
- Introduction
- SproutCore: JavaScript Applications
- New Technical Articles
- Techy Forum Threads
- More Techy Blog Entries
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Our web developer customers can sleep at night.
Your job is building great websites for your clients. Lying awake at
night wondering if those sites are accessible is not.
That's why we maintain Fully Redundant Network Operations Center
capabilities from two cities 24/7/365. So you can impress your clients
and still get some shut-eye.
Find out why 3.1 million websites call The Planet home.
Dedicated servers start at just $89:
http://www.eztrackz.com/tracking.aspx?id=85813
INTRODUCTION - - - - - - - - - - - - - - - - - - - - - - - - - -
One of the unexpected gems at the recent Apple Worldwide
Developer Conference (WWDC) in San Francisco was the session on
SproutCore [1], a JavaScript framework for building web
applications with desktop-style rich user interfaces.
Apple's interest in SproutCore is tied in with its
recently-announced MobileMe [2] service (see Tech Times #193
[3]), which features a slick suite of web apps that provide
mobile access to email, calendars, address books, and photo
galleries.
In this issue, Tech Times co-editor Andrew Tetlaw takes a
hands-on look at SproutCore, how it works, and how it fits into
the landscape of other Rich Internet Application (RIA) platforms
out there.
Meanwhile, I'm working with the development team here at
SitePoint HQ on an all-new layout for the front page of
sitepoint.com [4]. As usual, getting the layout to work in
Internet Explorer 6 involved roughly the same amount of work as
it did for all other browsers combined. More than once, I
considered giving IE6 support the boot -- after all, our
audience is tech-savvy and likely to have an up-to-date browser,
right?
Well, despite signs that IE is on its way to extinction [5] at
SitePoint, IE6 still represents 13% of our audience, so I put in
the extra time to get it working. Some judicious application of
hasLayout [6] did the trick in the end, as usual.
As it turns out, someone at Apple wasn't quite so patient,
because the SproutCore-powered MobileMe web apps won't work in
IE6! [7] SproutCore itself does support IE6, and word from the
development team [8] is that it will continue to do so for
awhile yet.
So here's the question: what factors determine whether it's
worth investing the extra time and effort to keep a web app
working in IE6?
[1] <http://www.sproutcore.com/>
[2] <http://www.apple.com/mobileme/>
[3] <http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=193>
[4] <http://www.sitepoint.com/>
[5] <http://www.sitepoint.com/blogs/2008/06/19/internet-explorer-extinct-by-2013>
[6] <http://reference.sitepoint.com/css/haslayout>
[7] <http://www.37signals.com/svn/posts/1072-apples-mobileme-drops-support-for-ie-6>
[8] <http://groups.google.com/group/sproutcore/browse_thread/thread/2ad79d08c3ffbe6b>
SPROUTCORE: JAVASCRIPT APPLICATIONS - - - - - - - - - - - - - - -
Revealed by Apple at the recent WWDC [1] as the basis of the
MobileMe web applications, is the newest member of the
JavaScript framework fraternity: SproutCore [2]. I'm pretty sure
that if I told you SproutCore was yet another JavaScript
framework for creating rich browser application interfaces,
you'd prefer to scrub your eyeballs with steel wool than keep
reading. Don't head off just yet though, because SproutCore is
quite different from other frameworks and worth taking a look
at.
SproutCore is an open source framework for creating
desktop-style applications that run in the browser using only
HTML, CSS and JavaScript. You first create your application
within a local development environment and then use the
SproutCore build tools to compile the application in to a set of
static files you can place on your web server. The term 'thick
client' has been coined by SproutCore's lead developer, Charles
Jolley, to describe SproutCore's approach. SproutCore
applications are totally independent of any server-side
technology. The whole application runs in the browser; the only
interaction with the server is to save or load data via Ajax.
When I say, 'creating applications' I mean sophisticated,
model-view-controller style application design, inspired by
Apple's Cocoa [3]. In practice, it feels like you're building a
full-featured Ruby on Rails application -- the build tools are
written in Ruby and use Rails-like features such as generators.
Models and controllers are written in JavaScript and views are
written in Erubis [4], a high performing implementation of
Embedded Ruby.
HOW IT WORKS
Here's a very simple demonstration of how it works. I recommend
doing the hello world tutorial [5] on the SproutCore site if you
want to see more.
After installing the build tools via the RubyGems system, you
begin a new application by typing the command:
sproutcore hello_goodbye
replacing hello_goodbye with the name of your application. This
will generate a directory with the same name as your application
and all the required files to make your application run locally.
[1] <http://developer.apple.com/wwdc/>
[2] <http://www.sproutcore.com/>
[3] <http://developer.apple.com/cocoa/>
[4] <http://www.kuwata-lab.com/erubis/>
[5] <http://www.sproutcore.com/documentation/hello-world-tutorial/>
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Get everything you need to learn JavaScript from scratch in my book -
Simply JavaScript
* 400+ pages packed with full color examples
* Hundreds of clear illustrations
* JavaScript for the real world!
* Only $39.95!
Perfect for the JavaScript novice, this book will teach you JavaScript
with unprecedented clarity, featuring loads of color illustrations and
advice on how to use JavaScript the right way in the real world.
ORDER YOURSELF A COPY NOW!
https://sitepoint.com/bookstore/go/109/cf0b72
* Get a FREE JavaScript poster with every book purchase of Simply
JavaScript (worth $9.95)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CONTROLLERS AND VIEWS
To be able to do anything interesting you'll need a controller
-- a JavaScript object that manages your application logic. You
can use the built-in generator by typing in the following
command from your project's root directory:
sc-gen controller hello_goodbye/app
This will generate the application controller called
HelloGoodbye.appController. You wire up the interface elements of
your application using bindings and observers. Let's modify our
controller by adding a greeting property:
HelloGoodbye.appController = SC.Object.create(
{
greeting: "Hello World!"
});
Then we'll add some view helpers to the default view file: a
label view and a button view:
<%= label_view :my_label,
:tag => 'h1', :bind => { :value =>
'HelloGoodbye.appController.greeting' } %>
<%= button_view
:toggle_button, :title => 'Change Greeting',
:action => 'HelloGoodbye.appController.toggleGreeting' %>
Starting the included Mongrel web server by entering the command
sc-server
from the project's root directory, will allow you to
load the project in your browser at
http://localhost:4020/hello_goodbye. You'll see a h1 element
with the text "Hello World!" and a "Change Greeting" button.
http://www.sitepoint.com/blogs/wp-content/uploads/2008/06/sproutcore_hello_goodbye.jpg
The text content of the label view has been bound to the greeting
property of the controller. If you change the value of greeting
using the SproutCore API:
HelloGoodbye.appController.set('greeting', 'Goodbye World!');
the text within the heading will miraculously change as well.The
:action property of the button view indicates the controller
method that will be called when the button is clicked. We'll add
that method to our controller:
HelloGoodbye.appController = SC.Object.create(
{
greeting: "Hello World!",
toggleGreeting: function() {
var currentGreeting = this.get('greeting');
var newGreeting = (currentGreeting === 'Hello World!') ?
'Goodbye World!' : 'Hello World!';
this.set('greeting', newGreeting);
}
});
If you refresh the page in your browser, clicking the button
should toggle the text within the h1 element between "Hello
World!" and "Goodbye World!". You may notice this is achieved
without us having to write any DOM manipulation code in
JavaScript at all.
DEPLOYING YOUR APPLICATION
Once you're ready to deploy, all you need to do is run the
following command from within your project's root directory:
sc-build
This will create a directory containing static files
that you can move to your web server.
Our trivial example above is converted to the following html:
<h1 id="my_label" class="sc-label-view my_label"></h1>
<a title="Change Greeting" id="toggle_button"
class="sc-button-view button regular normal toggle_button">
<span class="button-inner">
<span class="label">Change Greeting</span>
</span>
</a>
In addition to the HTML, you'll also find all the JavaScript
code required to run the application.
FINAL THOUGHTS
Looking at the generated source, it's clear SproutCore is an
application framework in the truest sense: ignore the generated
HTML, the end product will look and feel like a desktop
application. For a web standards fan like myself, browser-based,
desktop-style applications are always a hard sell. I prefer the
restful, semantic-markup based, document-centric approach that
lets browsers act like browsers. You know: bookmarks and
history, right-click > Open in new tab, the sanctity and purity
of the hyperlink. It seems inevitable though, that the browser,
as an application platform, will be pushed as far as it can go.
I can't help recalling Joel on Software [1] predicted something
like this might come along.
As a JavaScript fan I'm impressed; the interface performance is
excellent. SproutCore raises the bar for what JavaScript can do
in the browser. On a recent Audible Ajax [2] Jolley talked about
how a SproutCore application has only 6 event handlers.
SproutCore uses event delegation to determine which element in
the body was the target of the event. I'm certain that there are
many other JavaScript gems to be mined from the SproutCore
codebase. The SproutCore blog already contains some great posts
[3].
What about accessibility? How will assistive technologies treat
the HTML generated by SproutCore? I doubt screen readers that
are compatible with standard HTML forms, but otherwise designed
to interpret a web page as a document, will have any chance of
making sense of it. Perhaps, in the future, standards like the
WAI Accessible Rich Internet Applications [4] specification will
eventually come to the rescue. I'll be interested to see the
approach Apple takes for MobileMe.
Despite my concerns, I can certainly appreciate how Apple has
chosen an open source technology that is browser based and
requires no plugins as the basis for their online applications.
In my mind, this beats the pants off the alternative technology
stacks from Adobe and Microsoft.
Add your comment to the blog entry:
SproutCore: JavaScript Applications [5]
by Andrew Tetlaw
Technically Speaking: Web Tech Blog
[1] <http://www.joelonsoftware.com/items/2007/09/18.html>
[2] <http://ajaxian.com/archives/audible-ajax-episode-27-sproutcore-with-charles-jolley>
[3] <http://www.sproutcore.com/2008/05/28/understanding-the-ie-dom/>
[4] <http://www.w3.org/TR/2008/WD-wai-aria-20080204/>
[5] <http://www.sitepoint.com/blogs/2008/06/25/sproutcore-javascript-applications/>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
That's all for this issue -- thanks for reading! I'll see you
next week.
Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times
SPONSOR'S MESSAGE - - - - - - - - - - - - - - - - - - - - - - - -
Understand & solve your user experience problems with TechSmith's UX
solutions.
Morae 2: Usability Re-Imagined.
UserVue: Real users, real feedback.
User experience made simple, adaptable and affordable.
TechSmith's UX solutions are just a click away.
NEW TECHNICAL ARTICLES - - - - - - - - - - - - - - - - - - - - -
Test Driven Development: Are You Test-infected?
by Chris Corbyn
You're a good programmer -- no, a great programmer -- so your
code doesn't have bugs, ever. Right? I thought not. In this
article, Chris explains why you should be writing your tests
before you write your code, and shows you how to fully embrace a
Test Driven Development process.
http://www.sitepoint.com/article/1651
Firefox 3: What's New, What's Hot, and What's Not
by Fabio Cevasco
It's Firefox 3 Download Day! To celebrate the latest release of
everyone's favorite open source browser, Fabio takes you through
the ins and the outs of what's new in Firefox 3.
http://www.sitepoint.com/article/1649
TECHY FORUM THREADS - - - - - - - - - - - - - - - - - - - - - - -
Skype 4.0 Does Video
<http://www.sitepoint.com/forums/showthread.php?threadid=554670>
It's CSS Theme Week ... A New (Old) CSS Tutorial Every Day!
<http://www.sitepoint.com/forums/showthread.php?threadid=555601>
CAPTCHA insanity?
<http://www.sitepoint.com/forums/showthread.php?threadid=548798>
MORE TECHY BLOG ENTRIES - - - - - - - - - - - - - - - - - - - - -
Web Tech Blog: TECHNICALLY SPEAKING
Dust-Me Selectors: Now Compatible With Firefox 3! (1 comment)
http://www.sitepoint.com/blogs/2008/06/24/dust-me-selectors-version-21/
Internet Explorer Extinct By 2013? (53 comments)
http://www.sitepoint.com/blogs/2008/06/19/internet-explorer-extinct-by-2013/
WebDU Day 1: AIR, Ajax, CS4 and a little bit of usability)
http://www.sitepoint.com/blogs/2008/06/19/webdu-day-1-air-ajax-cs4-and-a-little-bit-of-usability/
JavaScript & CSS Blog: STYLISH SCRIPTING
CSS Theme Week: More CSS Tutorials Than You Can Handle! (4
comments)
http://www.sitepoint.com/blogs/2008/06/23/css-theme-week-more-css-than-you-can-handle/
ColdFusion Blog: INFUSED
The Week in ColdFusion: 11–17 June: ColdFusion 9 sneak peak
leaks)
http://www.sitepoint.com/blogs/2008/06/20/the-week-in-coldfusion-11%e2%80%9317-june-coldfusion-9-sneak-peak-leaks/
Usability Blog: USABILITY 2.0
Reddit's Flawed CAPTCHA: Adding Insult To Injury (21 comments)
http://www.sitepoint.com/blogs/2008/06/18/reddits-flawed-captcha-adding-insult-to-injury/
ADVERTISING INFORMATION - - - - - - - - - - - - - - - - - - - - -
Find out what thousands of savvy Internet marketers already know:
email newsletter advertising works! (You're reading an email ad
now, aren't you?)
Find out how to get YOUR sponsorship ad in this newsletter and
reach 95,000+ opt-in subscribers! Check out
http://www.sitepoint.com/mediakit/ for details, or email us at
mailto:adinfo@sitepoint.com
HELP YOUR FRIENDS OUT - - - - - - - - - - - - - - - - - - - - - -
People you care about can take charge of their Website by
effectively using the information and resources available on the
Internet. Help them learn how - forward them a copy
of this week's SitePoint Tech Times.
ADDRESSES - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Send suggestions and comments to:
techtimes@sitepoint.com
To subscribe, send a blank email to:
subscribe@sitepoint.com
The Archives are located at:
http://www.sitepoint.com/newsletter/archives.php
The SitePoint Tech Times is hosted by SparkList:
http://www.sitepoint.com/newsletters/sparklist/
The SitePoint Tech Times is (c) 1998-2008 SitePoint Pty. Ltd. All
Rights Reserved. No part of this Newsletter may be reproduced in
whole or in part without written permission. All guest articles
are copyright their respective owners and are reproduced with
permission.
SitePoint Pty. Ltd.
48 Cambridge Street
Collingwood, VIC 3066
AUSTRALIA
You are currently subscribed to The SitePoint Tech Times as:
ignoble.experiment@arconati.us
To change the email address that you currently subscribe with:
http://sitepoint.com/newsletter/manage.php
To switch to the HTML version of this newsletter:
<http://sitepoint.com/newsletter/htmlplease.php?email=ignoble.experiment@arconati.us>
To leave this list:
<http://sitepoint.sparklist.com/u?id=2266608.e57363ef99c8b59c8667cca2fd106cbe&n=T&l=techtimes&o=2155708>
Do Not Reply to this email to unsubscribe.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
No comments:
Post a Comment
Keep a civil tongue.