2011-04-20 12:29:01 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "Cappuccino, iPhone, web, javascript, jQuery, Cocoa, programming" >
2011-04-20 13:56:52 +00:00
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
2011-04-20 12:29:01 +00:00
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomen" / >
2011-04-20 13:56:52 +00:00
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Cappuccino ou jQuery ?" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Cappuccino vs jQuery" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
2011-04-20 12:29:01 +00:00
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
< title > Cappuccino vs jQuery< / title >
< / head >
2011-10-18 22:30:00 +00:00
< body lang = "en" class = "article" >
2011-04-20 12:29:01 +00:00
< script type = "text/javascript" > / / < ! [ C D A T A [
2011-04-20 13:56:52 +00:00
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "loading..." / > < / div > ');
2011-04-20 12:29:01 +00:00
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" onclick = "setLanguage('fr')" > en Français< / a >
2011-04-20 12:29:01 +00:00
< / div >
2011-09-28 16:05:55 +00:00
< div class = "flush" > < / div >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "titre" >
< h1 >
Cappuccino vs jQuery
< / h1 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< div class = "intro" >
2011-09-02 11:40:34 +00:00
< p > < abbr class = "sc" title = "Too long; didn't read" > tl;dr< / abbr > :< / p >
2011-04-20 12:29:01 +00:00
< ul >
< li > Tried to make < a href = "http://yannesposito.com/Softwares/YPassword.html" > YPassword< / a > in jQuery and with Cappuccino.< / li >
< li > Cappuccino nice in desktop browser but 1.4MB, not compatible with iPhone.< / li >
< li > jQuery not as nice as the Cappuccino version but 106KB. iPhone compatible.< / li >
2012-01-20 13:41:44 +00:00
< li > I’ ll give a try to Dashcode 3.< / li >
2011-04-20 12:29:01 +00:00
< / ul >
< / div >
< hr / >
< div class = "intro" >
< p > Before start, I must say I know Cappuccino and jQuery are no more comparable than Cocoa and the C++ standard library. One is oriented for user interface while the other is and helper for low level programming.
Nonetheless I used these two to make the same web application. This is why I compare the experience I had with each of them for this specific task.< / p >
< / div >
< p > I made a web version of my dashboard widget < a href = "http://yannesposito.com/Softwares/YPassword.html" > YPassword< / a > .
It is a simple widget to manage your online password with a < em > strong< / em > security and with a totally portable way. It is not intended to replace a < em > keychain< / em > .
It is more a password generator.< / p >
< p > The first was made from the code of my dashboard widget and with some jQuery.
You can try it < a href = "http://yannesposito.com/YPassword.old" > here< / a > .
I then made a second version with the < a href = "http://cappuccino.org" > Cappuccino< / a > . You can try it < a href = "http://yannesposito.com/YPassword" > here< / a > .< / p >
< h2 id = "what-this-widget-do" > What this widget do?< / h2 >
< div class = "intro" >
2012-01-20 13:41:44 +00:00
< p > If you don’ t mind about what does my widget and just want to know how the two frameworkcompare, you should go
2011-04-20 12:29:01 +00:00
directly to the < a href = "#cappuccino" > next part< / a > .< / p >
< / div >
< p > I manage my password on many site with a simple method.
I remember a strong master password. And my password is mainly
< pre class="twilight"> < span class = "Entity" > hash< / span > (masterPassword< span class = "Keyword" > +< / span > domainName)
< /pre> < / p >
< p > In reality I need a bit more informations to create a password:< / p >
< ul >
< li > A master password,< / li >
< li > an URL,< / li >
< li > a maximal password length,< / li >
< li > the kind of output base64 or hexadecimal,< / li >
< li > how many times my password could have leaked.< / li >
< / ul >
< p > The result password is this:< / p >
< pre class = "twilight" >
domainName< span class = "Keyword" > =< / span > < span class = "Entity" > domaine_Name_Of_URL< / span > (url)
hash< span class = "Keyword" > =< / span > < span class = "Entity" > sha1< / span > ( masterPassword < span class = "Keyword" > +< / span > leakedTimes < span class = "Keyword" > +< / span > domainName )
< span class = "Keyword" > if< / span > ( kind < span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > base64< span class = "String" > '< / span > < / span > )
hash< span class = "Keyword" > =< / span > < span class = "Entity" > base64< / span > (hash)
< span class = "Keyword" > end< / span >
< span class = "Keyword" > return< / span > hash[< span class = "Constant" > 0< / span > ..maxlength]
< / pre >
< p > In fact depending of websites, some give some strange constraint to your password: < / p >
< ul >
< li > minimal length, < / li >
< li > maximal length,< / li >
< li > must not contain a special character, < / li >
< li > must contain a special character, < / li >
2012-01-20 13:41:44 +00:00
< li > etc…< / li >
2011-04-20 12:29:01 +00:00
< / ul >
< p > And if you want to change your password the < em > leak number< / em > is here for that.
All informations such as user name, maximal length can be stored in a public file. The only real secret is the master password.< / p >
< p > If you want to know even more details you can always look at some of my old blog entries: < / p >
< ul >
< li > < a href = "http://yannesposito.com/YBlog/Computer/Entr%C3%A9es/2008/7/30_Easy%2C_secure_and_portable_password_management_system.html" > simple portable password management< / a > < / li >
< li > < a href = "http://yannesposito.com/YBlog/Computer/Entrées/2009/3/15_Shorter_Password_with_the_same_efficiency.html" > base64< / a > < / li >
< li > < a href = "http://yannesposito.com/YBlog/Computer/Entr%C3%A9es/2009/4/11_Be_able_to_change_your_password.html" > change your password< / a > < / li >
< / ul >
< h2 id = "cappuccino" > Cappuccino< / h2 >
2012-01-20 13:41:44 +00:00
< p > First, I’ d like to say Cappuccino applications look simply awesome.
2011-04-20 12:29:01 +00:00
It is like having a Cocoa application in your web browser.
And this is < em > great< / em > .< / p >
< p > I also must admit I enjoyed making my application with Cappuccino.
It is like programming for an iPhone application.
If you are a bit familiar with Cocoa, you feel at home.
2012-01-20 13:41:44 +00:00
If you don’ t know anything about Cocoa, I suggest you to look at it.
2011-04-20 12:29:01 +00:00
This is a really < em > great< / em > framework to make User Interface.
I am not a specialist, but I have done some MFC, java Swing< sup id = "fnref:1" > < a href = "#fn:1" rel = "footnote" > 1< / a > < / sup > and WXWindows User Interfaces (some years ago).
And I must say, Cocoa is far better than those.< / p >
< p > Cappuccino is a great web application oriented development.
But there was also some drawbacks< / p >
< p > Things I liked:< / p >
< ul >
< li > It looks great< / li >
< li > It was fun to program< / li >
< li > It was like programming a Mac application< / li >
< li > I could have done the User Interface using < a href = "http://developer.apple.com/technologies/tools/xcode.html" > Interface Builder< / a > .< / li >
< / ul >
2012-01-20 13:41:44 +00:00
< p > Some things I didn’ t like:< / p >
2011-04-20 12:29:01 +00:00
< ul >
< li > I made some time to understand how to handle the < code > onChange< / code > on the text fields.< / li >
< li > Documentation lacked a bit of organisation.< / li >
2012-01-20 13:41:44 +00:00
< li > It doesn’ t work on iPhone.< / li >
2011-04-20 12:29:01 +00:00
< li > It weighted 11MB to deploy.< / li >
< li > It weight 1.3MB to load.< / li >
< / ul >
2012-01-20 13:41:44 +00:00
< p > I didn’ t use bindings because I believe they are not ready by now.< / p >
2011-04-20 12:29:01 +00:00
< h2 id = "jquery" > jQuery< / h2 >
2012-01-20 13:41:44 +00:00
< p > The jQuery version of YPassword is not as finished as the Cappuccino one. Because, there is no < em > slider< / em > directly with jQuery. I’ d have to use jQueryUI. And I believe, using it will make the application weight far more than the today 106KB.< / p >
2011-04-20 12:29:01 +00:00
2012-01-20 13:41:44 +00:00
< p > To make this version I simply copied my widget source code and adapted it. It was straightforward. But jQuery is not an < em > application oriented framework< / em > . It is more a “< em > dark side< / em > javascript animation framework”< sup id = "fnref:2" > < a href = "#fn:2" rel = "footnote" > 2< / a > < / sup > .< / p >
2011-04-20 12:29:01 +00:00
2012-01-20 13:41:44 +00:00
< p > I don’ t have too much to say about the jQuery version. But this was way more < em > low level< / em > programming than Cappuccino.< / p >
2011-04-20 12:29:01 +00:00
< h2 id = "my-conclusion" > My conclusion< / h2 >
2012-01-20 13:41:44 +00:00
< p > If you want to make an iPhone compatible web application just don’ t use Cappuccino yet.
2011-04-20 12:29:01 +00:00
If you want to make < em > simple< / em > application like mine, I also believe, Cappuccino is a bit too much.< / p >
< p > If you want to make a complex web oriented application, Cappuccino is a great choice.
But you may have some difficulties to begin programming with it.< / p >
2012-01-20 13:41:44 +00:00
< p > Finally, to terminate my web version of my widget, I’ ll give a try to Dashcode 3.
2011-04-20 12:29:01 +00:00
It seems to be a good alternative to create web widgets.
2012-01-20 13:41:44 +00:00
I don’ t know if Dashcode 3 is portable on non webkit browser.
2011-04-20 12:29:01 +00:00
But if it is, it could be the end of projects like Cappuccino and Sproutcore.< / p >
< hr / > < div class = "footnotes" >
< ol >
< li id = "fn:1" >
2012-01-20 13:41:44 +00:00
< p > If you are interested you can take a look at < a href = "http://labh-curien.univ-st-etienne.fr/informatique/SEDiL/" > SEDiL< / a > . I am proud of the tree drawing view made from scratch.< a href = "#fnref:1" rev = "footnote" > ↩ < / a > < / p >
2011-04-20 12:29:01 +00:00
< / li >
< li id = "fn:2" >
2012-01-20 13:41:44 +00:00
< p > I don’ t want to feel like a < em > troll< / em > I use jQuery to make some < em > dark side< / em > animation on this blog. But the javascript on my blog is not needed except for commenting.< a href = "#fnref:2" rev = "footnote" > ↩ < / a > < / p >
2011-04-20 12:29:01 +00:00
< / li >
< / ol >
< / div >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomen" >
Subscribe
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Comments< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > comments< / h2 >
< noscript >
You must enable javascript to comment.
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
2011-04-20 13:56:52 +00:00
var idcomments_post_id = '/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/';
2011-04-20 12:29:01 +00:00
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
2011-04-20 13:56:52 +00:00
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
2011-04-20 12:29:01 +00:00
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
2011-04-20 13:56:52 +00:00
< ul > < li > < a href = "/Scratch/en/" > Home< / a > < / li >
< li > < a href = "/Scratch/en/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/en/softwares/" > Softwares< / a > < / li >
< li > < a href = "/Scratch/en/about/" > About< / a > < / li > < / ul >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
previous entries
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-06-19-jQuery-popup-the-easy-way/" > < span class = "nicer" > «< / span > jQuery popup the easy way< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-06-17-hide-yourself-to-analytics/" > < span class = "nicer" > «< / span > Hide Yourself to your Analytics< / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "previous_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-06-17-track-events-with-google-analytics/" > < span class = "nicer" > «< / span > Track Events with Google Analytics< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div id = "next_articles" >
next entries
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-07-07-CSS-rendering-problems-by-navigator/" > Do not use CSS gradient with Chrome < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-07-31-New-style-after-holidays/" > New style after holidays < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< div class = "next_article" >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/blog/2010-07-09-Indecidabilities/" > Undecidabilities (part 1) < span class = "nicer" > »< / span > < / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/" > Copyright ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
Created: 07/05/2010
2011-09-06 06:59:30 +00:00
Modified: 09/02/2011
2011-04-20 12:29:01 +00:00
< / div >
< div >
Entirely done with
< a href = "http://www.vim.org" > Vim< / a >
and
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
2011-04-20 13:56:52 +00:00
< a href = "/Scratch/en/validation/" > Validation< / a >
2011-04-20 12:29:01 +00:00
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
2011-04-20 13:56:52 +00:00
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/en/blog/feed/feed.xml" > [rss]< / a >
2011-04-20 12:29:01 +00:00
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >