her.esy.fun/src/Scratch/en/blog/2010-07-05-Cappuccino-and-W.../index.html

191 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>YBlog - Cappuccino vs jQuery</title>
<meta name="keywords" content="Cappuccino, iPhone, web, javascript, jQuery, Cocoa, programming" />
<link rel="shortcut icon" type="image/x-icon" href="../../../../Scratch/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/y.css" />
<link rel="stylesheet" type="text/css" href="/css/legacy.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="../../../../Scratch/img/about/FlatAvatar@2x.png" />
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- IndieAuth -->
<link href="https://twitter.com/yogsototh" rel="me">
<link href="https://github.com/yogsototh" rel="me">
<link href="mailto:yann.esposito@gmail.com" rel="me">
<link rel="pgpkey" href="../../../../pubkey.txt">
</head>
<body lang="en" class="article">
<div id="content">
<div id="header">
<div id="choix">
<span id="choixlang">
<a href="../../../../Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/">French</a>
</span>
<span class="tomenu"><a href="#navigation">↓ Menu ↓</a></span>
<span class="flush"></span>
</div>
</div>
<div id="titre">
<h1>Cappuccino vs jQuery</h1>
</div>
<div class="flush"></div>
<div id="afterheader" class="article">
<div class="corps">
<div class="intro">
<p><abbr class="sc" title="Too long; didn't read">tl;dr</abbr>:</p>
<ul>
<li>Tried to make <a href="http://yannesposito.com/softwares/ypassword">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>
<li>Ill give a try to Dashcode 3.</li>
</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">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">
<p>If you dont mind about what does my widget and just want to know how the two frameworkcompare, you should go 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 <code class="ruby">hash(masterPassword+domainName)</code></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>
<div class="sourceCode" id="cb1"><pre class="sourceCode ruby"><code class="sourceCode ruby"><a class="sourceLine" id="cb1-1" title="1">domainName=domaine_Name_Of_URL(url)</a>
<a class="sourceLine" id="cb1-2" title="2">hash=sha1( masterPassword + leakedTimes + domainName )</a>
<a class="sourceLine" id="cb1-3" title="3"><span class="kw">if</span> ( kind == <span class="st">'base64'</span> )</a>
<a class="sourceLine" id="cb1-4" title="4"> hash=base64(hash)</a>
<a class="sourceLine" id="cb1-5" title="5"><span class="kw">end</span></a>
<a class="sourceLine" id="cb1-6" title="6"><span class="kw">return</span> hash[<span class="dv">0</span>..maxlength]</a></code></pre></div>
<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>
<li>etc…</li>
</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>
<p>First, Id like to say Cappuccino applications look simply awesome. 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. If you dont know anything about Cocoa, I suggest you to look at it. 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<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a> 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>
<p>Some things I didnt like:</p>
<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>
<li>It doesnt work on iPhone.</li>
<li>It weighted 11MB to deploy.</li>
<li>It weight 1.3MB to load.</li>
</ul>
<p>I didnt use bindings because I believe they are not ready by now.</p>
<h2 id="jquery">jQuery</h2>
<p>The jQuery version of YPassword is not as finished as the Cappuccino one. Because, there is no <em>slider</em> directly with jQuery. Id have to use jQueryUI. And I believe, using it will make the application weight far more than the today 106KB.</p>
<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”<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a>.</p>
<p>I dont have too much to say about the jQuery version. But this was way more <em>low level</em> programming than Cappuccino.</p>
<h2 id="my-conclusion">My conclusion</h2>
<p>If you want to make an iPhone compatible web application just dont use Cappuccino yet. 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>
<p>Finally, to terminate my web version of my widget, Ill give a try to Dashcode 3. It seems to be a good alternative to create web widgets. I dont know if Dashcode 3 is portable on non webkit browser. But if it is, it could be the end of projects like Cappuccino and Sproutcore.</p>
<section class="footnotes">
<hr />
<ol>
<li id="fn1"><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="#fnref1" class="footnote-back"></a></p></li>
<li id="fn2"><p>I dont 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="#fnref2" class="footnote-back"></a></p></li>
</ol>
</section>
</div>
<div id="afterarticle">
<div id="social">
<a href="/rss.xml" target="_blank" rel="noopener noreferrer nofollow" class="social">RSS</a>
·
<a href="https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/%20via%20@yogsototh" target="_blank" rel="noopener noreferrer nofollow" class="social">Tweet</a>
·
<a href="http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2010-07-05-Cappuccino-and-Web-applications/" target="_blank" rel="noopener noreferrer nofollow" class="social">FB</a>
<br />
<a class="message" href="../../../../Scratch/en/blog/Social-link-the-right-way/">These social sharing links preserve your privacy</a>
</div>
<div id="navigation">
<a href="../../../../">Home</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/blog">Blog</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/softwares">Softwares</a>
<span class="sep">¦</span>
<a href="../../../../Scratch/en/about">About</a>
</div>
<div id="totop"><a href="#header">↑ Top ↑</a></div>
<div id="bottom">
<div>
Published on 2010-07-05
</div>
<div>
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
</div>
<div>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Yann Esposito©</a>
</div>
<div>
Done with
<a href="http://www.vim.org" target="_blank" rel="noopener noreferrer nofollow"><strike>Vim</strike></a>
<a href="http://spacemacs.org" target="_blank" rel="noopener noreferrer nofollow">spacemacs</a>
<span class="pala">&amp;</span>
<a href="http://nanoc.ws" target="_blank" rel="noopener noreferrer nofollow"><strike>nanoc</strike></a>
<a href="http://jaspervdj.be/hakyll" target="_blank" rel="noopener noreferrer nofollow">Hakyll</a>
</div>
<hr />
<div style="max-width: 100%">
<a href="https://cardanohub.org">
<img src="../../../../Scratch/img/ada-logo.png" class="simple" style="height: 16px;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
</a>
<code style="display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>