Building a desktop app with HTTP::Engine, SQLite and jQuery

Building a desktop app with HTTP::Engine, SQLite & jQuery

Tatsuhiko MiyagawaYAPC::NA 2009 Pittsburgh

Wednesday, June 24, 2009

Tatsuhiko Miyagawa



Software Engineer, TypePad


cpan: MIYAGAWA


Acme-DateTime-Duration-Numeric Acme-Module-Authors Acme-Sneeze Acme-Sneeze-JP Apache-ACEProxy Apache-AntiSpam Apache-Clickable Apache-CustomKeywords Apache-DefaultCharset Apache-GuessCharset Apache-JavaScript-

DocumentWrite Apache-No404Proxy Apache-Profiler Apache-Session-CacheAny Apache-Session-Generate-ModUniqueId Apache-Session-Generate-ModUsertrack Apache-Session-PHP Apache-Session-Serialize-YAML Apache-Singleton Apache-StickyQuery Archive-Any-Create Attribute-Profiled Attribute-Protected Attribute-Unimplemented Bundle-Sledge CGI-

Untaint-email CPAN-Mini-Growl Catalyst-Plugin-Authentication-Credential-AOL Catalyst-Plugin-Authentication-Credential-OpenID Catalyst-Plugin-JSONRPC Catalyst-View-JSON Catalyst-View-Jemplate Class-DBI-AbstractSearch Class-DBI-

Extension Class-DBI-Pager Class-DBI-Replication Class-DBI-SQLite Class-DBI-View Class-Trigger Convert-Base32 Convert-DUDE Convert-RACE Data-YUID Date-Japanese-Era Date-Range-Birth DateTime-Span-Birthdate Device-KeyStroke-Mobile Dunce-time Email-Find Email-Valid-Loose Encode-DoubleEncodedUTF8 Encode-First Encode-JP-Mobile Encode-JavaScript-

UCS Encode-Punycode File-Find-Rule-Digest File-Spotlight Geo-Coder-Google HTML-AutoPagerize HTML-Entities-ImodePictogram HTML-RelExtor HTML-ResolveLink HTML-Selector-XPath HTML-XSSLint HTTP-MobileAgent HTTP-ProxyPAC HTTP-Server-Simple-Authen HTTP-Server-Simple-Bonjour IDNA-Punycode Inline-Basic Inline-TT JSON-Syck

Kwiki-Emoticon Kwiki-Export Kwiki-Footnote Kwiki-OpenSearch Kwiki-OpenSearch-Service Kwiki-TypeKey Kwiki-URLBL LWP-UserAgent-Keychain Lingua-JA-Hepburn-Passport Log-Dispatch-Config Log-Dispatch-DBI MSIE-MenuExt Mac-

Macbinary Mail-Address-MobileJp Mail-ListDetector-Detector-Fml Module-Install-Repository Net-DAAP-Server-AAC Net-IDN-Nameprep Net-IPAddr-Find Net-Twitter-OAuth Net-YahooMessenger NetAddr-IP-Find P2P-Transmission-Remote PHP-Session POE-Component-Client-AirTunes POE-Component-Client-Lingr POE-Component-YahooMessenger Path-

Class-URI Plagger RPC-XML-Parser-LibXML Template-Plugin-Clickable Template-Plugin-Comma Template-Plugin-FillInForm Template-Plugin-HTML-Template Template-Plugin-JavaScript Template-Plugin-MobileAgent Template-Plugin-ResolveLink

Template-Plugin-Shuffle Template-Provider-Encoding Term-Encoding Term-TtyRec Test-Synopsis Text-Emoticon Text-Emoticon-GoogleTalk Text-Emoticon-MSN Text-Emoticon-Yahoo Text-MessageFormat TheSchwartz-Simple Time-Duration-Parse Time-Duration-ja URI-Find-UTF8 URI-git URI-tag URI-urn-uuid Video-Subtitle-SRT WWW-Baseball-NPB WWW-Blog-Metadata-MobileLinkDiscovery WWW-Blog-Metadata-OpenID WWW-Blog-Metadata-OpenSearch WWW-Cache-Google

WWW-Mechanize-AutoPager WWW-Mechanize-DecodedContent WWW-NicoVideo-Download WWW-OpenSearch WWW-Shorten-RevCanonical WWW-Shorten-Simple Web-Scraper Web-oEmbed WebService-Bloglines WebService-ChangesXml WebService-Google-Suggest WebService-Lingr XML-Atom XML-Atom-Lifeblog XML-Atom-Stream XML-

Liberal XML-OPML-LibXML abbreviation autobox-DateTime-Duration capitalization plagger


twitter.com/miyagawa(Slides will be linked. Follow me!)


Remedie


remediecode.orgSlides/Video in OSDC.TW


http://remediecode.org

http://remediecode.org




Desktop GUI apps


MFC/.NETVisual C++, VB


wxWidgets


Objective-CCocoa

(PyObjC/RubyCocoa)


Adobe AIR


I’m a Perl guywho knows JavaScript.


Web Developers!Wednesday, June 24, 2009

Web app!


“Web 2.0 iPhone App”Steve Jobs at WWDC 2007



PhoneGapWednesday, June 24, 2009

HTML5geolocation, videos

local storage


HTML5 = Future??? = 2009


micro Web app = 2009


(2 min Demo video)Wednesday, June 24, 2009

How I built this





“The most important project in Perl recently”

- jrockway


Based on Catalyst::Engine


Ruby’s RackPython’s WSGI


use HTTP::Engine;my $engine = HTTP::Engine‐>new( interface => { module => 'ServerSimple', args => { host => 'localhost', port => 9898, }, request_handler => \&handle_request,});

$engine‐>run;


sub handle_request { my $req = shift; return HTTP::Engine::Response‐>new( body => “Hello World”, );}


Standalone, ServerSimple, POE, FastCGI, mod_perl


Desktop app:ServerSimple

POE (non-blocking)


Serve static files(HTML/CSS/JS)


sub handle_request { my($self, $req) = @_;

my $path = $req‐>path; my $res = HTTP::Engine::Response‐>new;

if ($path =~ s!^/static/!!) { $self‐>serve_static_file($path, $req, $res); };

return $res;}


use Path::Class;sub serve_static_file { my($self, $path, $req, $res) = @_;

my $root = $self‐>conf‐>{root}; my $file = file($root, "static", $path);

my $size = ‐s _; my $mtime = (stat(_))[9]; my $ext = ($file =~ /\.(\w+)$/)[0]; $res‐>content_type( MIME::Types‐>new‐>mimeTypeOf($ext) || "text/plain" ); # ... open my $fh, "<:raw", $file or die "$file: $!"; $res‐>headers‐>header('Last‐Modified' => HTTP::Date::time2str($mtime)); $res‐>headers‐>header('Content‐Length' => $size); $res‐>body( join '', <$fh> );}


See Also:HTTP::Engine::Middleware::Static


Implement Ajaxbackend actions(JSON-REST)


sub handle_request { my($self, $req) = @_;

my $path = $req‐>path;

my $res = HTTP::Engine::Response‐>new;

if ($path =~ s!^/rpc/!!) { $self‐>dispatch_rpc($path, $req, $res); }}


sub dispatch_rpc { my($self, $path, $req, $res) = @_;

my @class = split '/', $path; my $method = pop @class; die "Access to non‐public methods" if $method =~ /^_/;

my $rpc_class = $self‐>load_rpc_class(\@class); my $rpc = $rpc_class‐>new( conf => $self‐>conf ); my $result = eval { $rpc‐>$method($req, $res) };

unless ( $res‐>body ) { $res‐>status(200); $res‐>content_type("application/json; charset=utf‐8"); $res‐>body( Remedie::JSON‐>encode($result) ); }}


Problem (1):Dirty API routing


Path::Router, Path::Dispatcher,HTTP::Dispatcher, JSORB


Problem (2):Vulnerable (CSRF)


AuthenticationSpecial Headers

Switch to JSONRPC


Bonjour(based on HTTP::Server::Simple::Bonjour)


Auto DiscoveryShare subscriptions






SQL DB choices


MySQL/PostgreSQLGood for Web apps.


SQLite:file-based, type-less

Transactional


SQLite:best for desktop apps


SQLite for desktop:Firefox, Mail.app, iCal


End-users don’t want to run *SQL server


Bonus:Easy backup,

Dropbox sync


DB Schema


You don’t need DBA.Make it simple, flexible and extensible.


Remedie schemaFew indexes

JSON key-values


CREATE TABLE channel ( id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, type INTEGER NOT NULL, parent INTEGER NOT NULL, ident TEXT NOT NULL, name TEXT NOT NULL, props TEXT);

CREATE UNIQUE INDEX channel_ident ON channel (ident);


CREATE TABLE item ( id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, channel_id INTEGER NOT NULL, type INTEGER NOT NULL, ident TEXT NOT NULL, name TEXT NOT NULL, status INTEGER NOT NULL, props TEXT);

CREATE INDEX item_status ON item (status)

CREATE UNIQUE INDEX item_ident ON item (channel_id, ident);


Key-Value is HOT


CouchDB, MongoDBTokyoTyrant(Need servers though)


SQLite for Key-Value


ORM?


Anything you like.


DBIx::ClassRose::DB::Object


Rose::DB::Object(I wanted some excuse)


See Also:KiokuDB


KiokuDBDBI / SQLite backend

Key-Value JSPON





Just use normal HTMLand CSS to design UI


Manipulate DOM$.ajax to do Ajax


DOM Manipulation sucks.


jQuery.flydom


$("#channel‐pane").createAppend( 'div', { className: 'channel‐header', id: 'channel‐header‐' + channel.id }, [ 'div', { className: 'channel‐header‐thumb' }, [ 'img', { src: "/static/images/feed.png", alt: channel.name }, null ], ]);


jQuery.hotkeys


$(document).bind(‘keydown’, ‘shift+n’, function(ev){ // ‘N’ is entered});


jQuery.contextMenu



jQuery.corners



$.event.trigger$(document).bind


jQuery UI


Fancy stufflike Drag & Drop


jQuery.blockUIjQuery.scrollTojQuery.jgrowl





More like“Desktop app”


Client-Server


Web Client as “app”


Site Specific Browser


FluidPrism



CustomizeUserscripts / Userstyles


Fluid hooksGrowl integration

Dock menu



Client-ServerDecoupled via APIs


More ClientsMore “Views”


iPhone




120 lines of HTML/JSusing iUI project


Server as “app”


Packaging a server


local::libbuild & install all deps


Also:Shipwright


PlatypusMake .app


Download .zip, copy .app to /Applications, Run it.


Also:github.com/miyagawa/perl-app-builder


Summary

• micro web server as a desktop app

• HTTP::Engine, JSONRPC and router

• SQLite to store key-value

• jQuery plugins to enable desktop UIs

• More tools to make it really “.app”


That’s it!Questions?


Thank you!twitter.com/miyagawa


Business

Building a desktop app with HTTP::Engine, SQLite and jQuery