SlideShare a Scribd company logo
1 of 131
Download to read offline
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
      YAPC::Asia 2009 Tokyo Sep. 11
Interested in code?
Come down to front.
       (fonts are small)
Tatsuhiko Miyagawa
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
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
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
       YAPC::NA 2009 Pittsburgh
Desktop GUI apps
MFC/.NET
Visual C++,VB
wxWidgets
Objective-C
    Cocoa
(PyObjC/RubyCocoa)
Adobe AIR
I’m a Perl guy
who knows JavaScript.
Web Developers!
Web app!
“Web 2.0 iPhone App”
Steve Jobs at WWDC 2007
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
PhoneGap
HTML5
geolocation, videos
   local storage
HTML5 = Future
  ??? = 2009
micro Web app = 2009
(Demo)
New in 0.6.x
Performance
    non-blocking, multi-tasking
libxml based parsing everywhere
Comet messaging
parallel downloads, iPhone remotes
How I built this
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
      YAPC::Asia 2009 Tokyo Sep. 11
HTTP::Engine
web servers abstraction
Based on
Catalyst::Engine
Will be replaced by
 PSGI and Plack
But will be supported
   and can still be useful
to write micro webservers
package MyApp;

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

1;
Interface::PSGI
   Yappo++
Plack compatible:
CGI, ServerSimple, Mojo, Prefork
 ReverseHTTP, FastCGI, Apache
> plackup MyApp
  -i ServerSimple
use Plack::Loader;
my $impl = PlackLoader->load(‘AnyEvent’, @ARGV);
$impl->run(“MyApp”);
Desktop app:
 AnyEvent
  psgi.async
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:
Plack::Middleware::Static (?)
Implement Ajax
backend 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)
Authentication
  Special Headers
Switch to JSONRPC
Bonjour
(can be Plack middleware?)
Auto Discovery
Share subscriptions
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Workers
Comet messaging
use Coro;
use Coro::Channel;
my $queue = Coro::Channel->new;

sub start_workers {
  my($class, $numbers) = @_;
  for (1..$number) {
     async { $class->work_channel while 1 };
  }
}

sub queue_channel {
  my $class = shift;
  my($channel_id, $conf, $opts) = @_;
  $queue->put([ $channel_id, $conf, $opts ]);
}

sub work_channel {
  my $class = shift;
  my $job = $queue->get; # blocks
  my($channel_id, $conf, $opts) = @$job;

    # update channel
}
use Coro;
use Coro::Channel;
my $queue = Coro::Channel->new;

sub start_workers {
  my($class, $numbers) = @_;
  for (1..$number) {
     async { $class->work_channel while 1 };
  }
}

sub queue_channel {
  my $class = shift;
  my($channel_id, $conf, $opts) = @_;
  $queue->put([ $channel_id, $conf, $opts ]);
}

sub work_channel {
  my $class = shift;
  my $job = $queue->get; # blocks
  my($channel_id, $conf, $opts) = @$job;

    # update channel
}
# Worker
use Remedie::PubSub;

sub update_channel {
  my($class, $channel) = @_;
  # update channel ...
  async {
    Remedie::PubSub->broadcast(@events)
  };
}
package Remedie::PubSub;
use Coro;
use Coro::Signal;
my %channels; # id => Coro::Channel

sub broadcast {
  my($class, @events) = @_;
  for my $event (@events) {
     # who is listening?
     for my $queue (values %channels) {
        $queue->put($event);
     }
  }
}
# from HTTP::Engine app
# /rpc/events/poll?s={clientID}
sub poll {
   my($self, $req, $res) = @_;
   my $session = $req->param(‘s’);
   my $events = Remedie::PubSub->wait(
     $session, 55, # timeout
   );
   return $events || [];
}
package Remedie::PubSub;
sub wait {
  my($class, $session, $timeout) = @_;
  my $sweeper = async {
     # check timeout
  };
  $signal->wait;

    my @events;
    push @events, $queue->get
     while $queue->size > 0;

    return @events;
}
See also:
Stardust
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
      YAPC::Asia 2009 Tokyo Sep. 11
SQL DB choices
MySQL/PostgreSQL
Great 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 schema
   Few 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, MongoDB
   TokyoTyrant
   (Need servers though)
SQLite for Key-Value
ORM?
Anything you like.
DBIx::Class
Rose::DB::Object
Rose::DB::Object
 (I wanted some excuse)
See Also:
KiokuDB
KiokuDB
DBI / SQLite backend
 Key-Value JSPON
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
      YAPC::NA 2011 Tokyo Sep. 11
Just use normal HTML
 and 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
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
jQuery.corners
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
$.event.trigger
$(document).bind
Integrate with Comet
# /rpc/remote/command?command={javascript code}
sub command {
   my($self, $req, $res) = @_;
   async {
      Remedie::PubSub->broadcast({
          type => “command”,
          command => $req->param(‘command’),
      });
   };

    return { success => 1 };
}
# remedie.js using jquery.ev
$.ev.handlers.command = function(ev) {
  try { eval(ev.command) } catch(e) { alert(e) };
};
$.ev.handlers.trigger_event = function(ev) {
  $.event.trigger(ev.event, ev);
};
# iPhone HTML
$.ajax({
  url: “/rpc/remote/command”,
  type: ‘post’,
  data: {
    command:
     ‘remedie.showChannel(remedie.channels[‘ +
     channel.id + ‘])]
  },
  success: function(r) { }
});
jQuery UI
Fancy stuff
like Drag & Drop
jQuery.blockUI
jQuery.scrollTo
 jQuery.jgrowl
Building a desktop app with
HTTP::Engine, SQLite & jQuery
          Tatsuhiko Miyagawa
      YAPC::NA 2011 Tokyo Sep. 11
More like
“Desktop app”
Client-Server
Web Client as “app”
Site Specific Browser
Fluid
Prism
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Customize
Userscripts / Userstyles
Fluid hooks
Growl integration
  Dock menu
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Client-Server
Decoupled via APIs
More Clients
More “Views”
iPhone
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery
120 lines of HTML/JS
  using iUI project
Server as “app”
Packaging a server
local::lib
build & install all deps
Also:
Shipwright
Platypus
Make .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
• Coro worker and Comet
• 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

More Related Content

What's hot

Psgi Plack Sfpm
Psgi Plack SfpmPsgi Plack Sfpm
Psgi Plack Sfpmsom_nangia
 
PSGI and Plack from first principles
PSGI and Plack from first principlesPSGI and Plack from first principles
PSGI and Plack from first principlesPerl Careers
 
A reviravolta do desenvolvimento web
A reviravolta do desenvolvimento webA reviravolta do desenvolvimento web
A reviravolta do desenvolvimento webWallace Reis
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversTatsuhiko Miyagawa
 
Inside Bokete: Web Application with Mojolicious and others
Inside Bokete:  Web Application with Mojolicious and othersInside Bokete:  Web Application with Mojolicious and others
Inside Bokete: Web Application with Mojolicious and othersYusuke Wada
 
Operation Oriented Web Applications / Yokohama pm7
Operation Oriented Web Applications / Yokohama pm7Operation Oriented Web Applications / Yokohama pm7
Operation Oriented Web Applications / Yokohama pm7Masahiro Nagano
 
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkKeeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkJeremy Kendall
 
Asynchronous programming patterns in Perl
Asynchronous programming patterns in PerlAsynchronous programming patterns in Perl
Asynchronous programming patterns in Perldeepfountainconsulting
 
Perl web frameworks
Perl web frameworksPerl web frameworks
Perl web frameworksdiego_k
 
Keeping it small: Getting to know the Slim micro framework
Keeping it small: Getting to know the Slim micro frameworkKeeping it small: Getting to know the Slim micro framework
Keeping it small: Getting to know the Slim micro frameworkJeremy Kendall
 
Lightweight Webservices with Sinatra and RestClient
Lightweight Webservices with Sinatra and RestClientLightweight Webservices with Sinatra and RestClient
Lightweight Webservices with Sinatra and RestClientAdam Wiggins
 
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015The worst Ruby codes I’ve seen in my life - RubyKaigi 2015
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015Fernando Hamasaki de Amorim
 
Using Sinatra to Build REST APIs in Ruby
Using Sinatra to Build REST APIs in RubyUsing Sinatra to Build REST APIs in Ruby
Using Sinatra to Build REST APIs in RubyLaunchAny
 
Ruby HTTP clients comparison
Ruby HTTP clients comparisonRuby HTTP clients comparison
Ruby HTTP clients comparisonHiroshi Nakamura
 
Practical Testing of Ruby Core
Practical Testing of Ruby CorePractical Testing of Ruby Core
Practical Testing of Ruby CoreHiroshi SHIBATA
 

What's hot (20)

Psgi Plack Sfpm
Psgi Plack SfpmPsgi Plack Sfpm
Psgi Plack Sfpm
 
Modern Perl
Modern PerlModern Perl
Modern Perl
 
PSGI/Plack OSDC.TW
PSGI/Plack OSDC.TWPSGI/Plack OSDC.TW
PSGI/Plack OSDC.TW
 
PSGI and Plack from first principles
PSGI and Plack from first principlesPSGI and Plack from first principles
PSGI and Plack from first principles
 
A reviravolta do desenvolvimento web
A reviravolta do desenvolvimento webA reviravolta do desenvolvimento web
A reviravolta do desenvolvimento web
 
Plack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and serversPlack perl superglue for web frameworks and servers
Plack perl superglue for web frameworks and servers
 
Inside Bokete: Web Application with Mojolicious and others
Inside Bokete:  Web Application with Mojolicious and othersInside Bokete:  Web Application with Mojolicious and others
Inside Bokete: Web Application with Mojolicious and others
 
Developing apps using Perl
Developing apps using PerlDeveloping apps using Perl
Developing apps using Perl
 
Operation Oriented Web Applications / Yokohama pm7
Operation Oriented Web Applications / Yokohama pm7Operation Oriented Web Applications / Yokohama pm7
Operation Oriented Web Applications / Yokohama pm7
 
Keeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro frameworkKeeping it small - Getting to know the Slim PHP micro framework
Keeping it small - Getting to know the Slim PHP micro framework
 
Sinatra for REST services
Sinatra for REST servicesSinatra for REST services
Sinatra for REST services
 
Asynchronous programming patterns in Perl
Asynchronous programming patterns in PerlAsynchronous programming patterns in Perl
Asynchronous programming patterns in Perl
 
Perl web frameworks
Perl web frameworksPerl web frameworks
Perl web frameworks
 
Mojo as a_client
Mojo as a_clientMojo as a_client
Mojo as a_client
 
Keeping it small: Getting to know the Slim micro framework
Keeping it small: Getting to know the Slim micro frameworkKeeping it small: Getting to know the Slim micro framework
Keeping it small: Getting to know the Slim micro framework
 
Lightweight Webservices with Sinatra and RestClient
Lightweight Webservices with Sinatra and RestClientLightweight Webservices with Sinatra and RestClient
Lightweight Webservices with Sinatra and RestClient
 
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015The worst Ruby codes I’ve seen in my life - RubyKaigi 2015
The worst Ruby codes I’ve seen in my life - RubyKaigi 2015
 
Using Sinatra to Build REST APIs in Ruby
Using Sinatra to Build REST APIs in RubyUsing Sinatra to Build REST APIs in Ruby
Using Sinatra to Build REST APIs in Ruby
 
Ruby HTTP clients comparison
Ruby HTTP clients comparisonRuby HTTP clients comparison
Ruby HTTP clients comparison
 
Practical Testing of Ruby Core
Practical Testing of Ruby CorePractical Testing of Ruby Core
Practical Testing of Ruby Core
 

Viewers also liked

Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Tatsuhiko Miyagawa
 
Network Programming With Anyevent
Network Programming With AnyeventNetwork Programming With Anyevent
Network Programming With AnyeventPedro Melo
 
Carton CPAN dependency manager
Carton CPAN dependency managerCarton CPAN dependency manager
Carton CPAN dependency managerTatsuhiko Miyagawa
 
No Hugging, No Learning
No Hugging, No LearningNo Hugging, No Learning
No Hugging, No LearningOlaf Alders
 
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012Hiroshi Shibamura
 

Viewers also liked (7)

Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011Deploying Plack Web Applications: OSCON 2011
Deploying Plack Web Applications: OSCON 2011
 
CPAN Realtime feed
CPAN Realtime feedCPAN Realtime feed
CPAN Realtime feed
 
Network Programming With Anyevent
Network Programming With AnyeventNetwork Programming With Anyevent
Network Programming With Anyevent
 
Carton CPAN dependency manager
Carton CPAN dependency managerCarton CPAN dependency manager
Carton CPAN dependency manager
 
ZeroMQ in PHP
ZeroMQ in PHPZeroMQ in PHP
ZeroMQ in PHP
 
No Hugging, No Learning
No Hugging, No LearningNo Hugging, No Learning
No Hugging, No Learning
 
Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012Wight: Phantom’s Perl friend - YAPC::Asia 2012
Wight: Phantom’s Perl friend - YAPC::Asia 2012
 

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

Psgi Plack Sfpm
Psgi Plack SfpmPsgi Plack Sfpm
Psgi Plack Sfpmwilburlo
 
Going crazy with Node.JS and CakePHP
Going crazy with Node.JS and CakePHPGoing crazy with Node.JS and CakePHP
Going crazy with Node.JS and CakePHPMariano Iglesias
 
Flask and Angular: An approach to build robust platforms
Flask and Angular:  An approach to build robust platformsFlask and Angular:  An approach to build robust platforms
Flask and Angular: An approach to build robust platformsAyush Sharma
 
Using and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareUsing and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareAlona Mekhovova
 
Express Presentation
Express PresentationExpress Presentation
Express Presentationaaronheckmann
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsMike Subelsky
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)Igor Bronovskyy
 
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websitesBurn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websitesLindsay Holmwood
 
Socket applications
Socket applicationsSocket applications
Socket applicationsJoão Moura
 
How to build a High Performance PSGI/Plack Server
How to build a High Performance PSGI/Plack Server How to build a High Performance PSGI/Plack Server
How to build a High Performance PSGI/Plack Server Masahiro Nagano
 
Bootstrat REST APIs with Laravel 5
Bootstrat REST APIs with Laravel 5Bootstrat REST APIs with Laravel 5
Bootstrat REST APIs with Laravel 5Elena Kolevska
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasminePaulo Ragonha
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxTPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxJirat Kijlerdpornpailoj
 
Talkaboutlithium
TalkaboutlithiumTalkaboutlithium
Talkaboutlithiumnoppoman722
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 

Similar to Remedie: Building a desktop app with HTTP::Engine, SQLite and jQuery (20)

Psgi Plack Sfpm
Psgi Plack SfpmPsgi Plack Sfpm
Psgi Plack Sfpm
 
Going crazy with Node.JS and CakePHP
Going crazy with Node.JS and CakePHPGoing crazy with Node.JS and CakePHP
Going crazy with Node.JS and CakePHP
 
REST API for your WP7 App
REST API for your WP7 AppREST API for your WP7 App
REST API for your WP7 App
 
Flask and Angular: An approach to build robust platforms
Flask and Angular:  An approach to build robust platformsFlask and Angular:  An approach to build robust platforms
Flask and Angular: An approach to build robust platforms
 
Using and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middlewareUsing and scaling Rack and Rack-based middleware
Using and scaling Rack and Rack-based middleware
 
Rack Middleware
Rack MiddlewareRack Middleware
Rack Middleware
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
 
SproutCore and the Future of Web Apps
SproutCore and the Future of Web AppsSproutCore and the Future of Web Apps
SproutCore and the Future of Web Apps
 
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
09 - express nodes on the right angle - vitaliy basyuk - it event 2013 (5)
 
Intro to Rack
Intro to RackIntro to Rack
Intro to Rack
 
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websitesBurn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
 
Socket applications
Socket applicationsSocket applications
Socket applications
 
How to build a High Performance PSGI/Plack Server
How to build a High Performance PSGI/Plack Server How to build a High Performance PSGI/Plack Server
How to build a High Performance PSGI/Plack Server
 
Bootstrat REST APIs with Laravel 5
Bootstrat REST APIs with Laravel 5Bootstrat REST APIs with Laravel 5
Bootstrat REST APIs with Laravel 5
 
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 
TPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and FluxTPSE Thailand 2015 - Rethinking Web with React and Flux
TPSE Thailand 2015 - Rethinking Web with React and Flux
 
Silex Cheat Sheet
Silex Cheat SheetSilex Cheat Sheet
Silex Cheat Sheet
 
Silex Cheat Sheet
Silex Cheat SheetSilex Cheat Sheet
Silex Cheat Sheet
 
Talkaboutlithium
TalkaboutlithiumTalkaboutlithium
Talkaboutlithium
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 

More from Tatsuhiko Miyagawa

More from Tatsuhiko Miyagawa (15)

cpanminus at YAPC::NA 2010
cpanminus at YAPC::NA 2010cpanminus at YAPC::NA 2010
cpanminus at YAPC::NA 2010
 
Asynchronous programming with AnyEvent
Asynchronous programming with AnyEventAsynchronous programming with AnyEvent
Asynchronous programming with AnyEvent
 
Remedie OSDC.TW
Remedie OSDC.TWRemedie OSDC.TW
Remedie OSDC.TW
 
Why Open Matters It Pro Challenge 2008
Why Open Matters It Pro Challenge 2008Why Open Matters It Pro Challenge 2008
Why Open Matters It Pro Challenge 2008
 
20 modules i haven't yet talked about
20 modules i haven't yet talked about20 modules i haven't yet talked about
20 modules i haven't yet talked about
 
Web::Scraper for SF.pm LT
Web::Scraper for SF.pm LTWeb::Scraper for SF.pm LT
Web::Scraper for SF.pm LT
 
Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8Web Scraper Shibuya.pm tech talk #8
Web Scraper Shibuya.pm tech talk #8
 
Web::Scraper
Web::ScraperWeb::Scraper
Web::Scraper
 
XML::Liberal
XML::LiberalXML::Liberal
XML::Liberal
 
Test::Base
Test::BaseTest::Base
Test::Base
 
Hacking Vox and Plagger
Hacking Vox and PlaggerHacking Vox and Plagger
Hacking Vox and Plagger
 
Plagger the duct tape of internet
Plagger the duct tape of internetPlagger the duct tape of internet
Plagger the duct tape of internet
 
Tilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncherTilting Google Maps and MissileLauncher
Tilting Google Maps and MissileLauncher
 
Writing Pluggable Software
Writing Pluggable SoftwareWriting Pluggable Software
Writing Pluggable Software
 
How we build Vox
How we build VoxHow we build Vox
How we build Vox
 

Recently uploaded

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 

Recently uploaded (20)

Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 

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

Editor's Notes

  1. Hi, good morning. Welcome to my talk.
  2. My name is Tatsuhiko Miyagawa.
  3. I work for a company called Six Apart in San Francisco. It&amp;#x2019;s a company behind many blogging software like Movable Type, Vox and TypePad.
  4. I mostly work on TypePad and recently we shipped new services like TypePad Connect and TypePad Profile. I did most of the backend code for those products.
  5. This is my CPAN/PAUSE ID and you might have already known my name by:
  6. the 154 modules I wrote and uploaded on CPAN. Some of these might look familiar to you.
  7. miyagawa is also my twitter ID, and I&amp;#x2019;ll post links to the slides of this talk to Twitter later. Since this is 20 minute talk and there are many things to talk about, it&amp;#x2019;ll be pretty fast presentation, you don&amp;#x2019;t need to take notes or remember URLs and what not. Just look at the slides later online.
  8. Let me give you a quick intro of the application called &amp;#x201C;Remedie&amp;#x201D; I&amp;#x2019;ve been working on recently like half an year. I&amp;#x2019;ll use this application as an example app today.
  9. So, long story short, I wanted to build some Desktop applications, with nice UI rather than Command Line interface.
  10. There might be many options to build a desktop GUI application. Some MFC/.NET microsoft windows thing. That&amp;#x2019;s not something you want to learn in 2009.
  11. wxWidgets. I think this is a cross platform library to build a GUI application that runs on Windows, Mac and Linux and there&amp;#x2019;s a perl binding. Padre, PerlIDE actually uses this to build the Perl editor. Might not be a bad choice if you want to build an editor.
  12. Objective C and Cocoa API is the best way to build some beautiful looking applications that run on Mac OS X. I guess it&amp;#x2019;s worth investing your time learning these technologies since you can leverage that to build iPhone applications for instance. And there&amp;#x2019;re also scripting language glues for Python and Ruby.
  13. Adobe AIR would probably be the best choice if you already know some ActionScript and want to build a nice looking GUI app that runs on major platforms.
  14. So, all of these options have pros and cons. Some are platform specific and some things need a completely different paradigm and I would need a lot of time learning those stuff. I&amp;#x2019;m a Perl hacker and do web stuff every day. I know a lot of Perl, and little bit of JavaScript.
  15. Why not just build a web application and ship it as a desktop application.
  16. Remember when Steve Jobs announced their initial developer SDK for iPhone in 2007. It was Web 2.0 Ajax application that has an access to iPhone services via sandboxed JavaScript APIs.
  17. Palm Pre has this operating system called WebOS and its SDK called Mojo SDK allows you to write an application with HTML, CSS and JavaScript.
  18. And there&amp;#x2019;s also a project called PhoneGap that allows you to do the same thing against iPhone, Android and BlackBerry: PhoneGap gives you an abstract wrapper API to access phone device functionalities through JavaScript so you can write an application using HTML, CSS and JavaScript for these devices. Luke used this framework to write his YAPC schedule app for Android.
  19. And now HTML5 is coming on its way, with lots of features and APIs to access stuff like Geo location, native video embeds and local storage access.
  20. It&amp;#x2019;s coming, but it hasn&amp;#x2019;t fully come yet. It&amp;#x2019;s definitely the future, but not available right now as its final form, in 2009. So what can fill this &amp;#x201C;gap&amp;#x201D;, like Phone Gap does?
  21. It&amp;#x2019;s micro web app, or desktop web applications.
  22. So let&amp;#x2019;s get back to this Remedie example and give you a quick demo. This is a pluggable, perl-based media center application that allows you to subscribe to virtually ANY video sites with RSS feeds, or even without RSS feeds if you write plugins. And you can watch videos or photos inline or using external player like QuickTime with single, pretty user interface.
  23. Amazing? Cool. Let&amp;#x2019;s talk about how I built this application using which tools and modules. That&amp;#x2019;s probably what you&amp;#x2019;re interested in.
  24. HTTP::Engine is based on Catalyst::Engine. It&amp;#x2019;s an extraction from Catalyst&amp;#x2019;s HTTP request and response handling code so that you can use it outside Catalyst to write a web application that runs under CGI, FastCGI or standalone server or mod_perl without changing anything. You can also use this to build your own micro web framework.
  25. This is the callback function you need to bind the request. It takes an HTTP::Engine::Request object, which has a nice set of APIs to access request headers, cookies and parameters and all of that, and your callback is supposed to return the Response object with headers and body. That&amp;#x2019;s it.
  26. It already has many interfaces supported, mostly ported over from Catalyst. Standalone, POE for event loop asynchronous process, FastCGI and mod_perl. Very nice.
  27. So here, we&amp;#x2019;re making a desktop application. We don&amp;#x2019;t need a separate web server to serve millions of page views in a minute, so no need for FastCGI or mod_perl thing, right? Let&amp;#x2019;s just use ServerSimple, or POE if you want non-blocking processing.
  28. And here are the things your callback handler is supposed to do. First of all, you need to serve static files to build the user interface. That will be HTML, CSS and JavaScript files.
  29. HTTP::Engine has a extension framework called Middleware and they probably have static file serving code, so I&amp;#x2019;d probably switch to that instead of doing this file manipulation directly, which is kind of insecure.
  30. The other thing your controller is supposed to is to implement Ajax backend actions with REST-JSON.
  31. Note that this is a simplified code. And yes this is a little insecure.
  32. And as I said, the construction to map HTTP request to internal API call is kind of crufty and insecure.
  33. There are lots of solution to this, notably Path::Router, Dispatcher and HTTP::Dispatcher. They&amp;#x2019;re from best practical and Infinity Interactive, so pick whichever company you like. JSORB is also from infinity interactive and does more robust and kind of complicated REST-JSON mappings to call methods in the backend from JS client.
  34. And lastly those REST APIs are vulnerable to Cross Site Request Forgery. If a hacker knows which port you&amp;#x2019;re running your application on, they can just link or send form POST to your endpoint to do whatever they want, using your identity.
  35. Some authentication might help, but cookies or basic auth don&amp;#x2019;t because it&amp;#x2019;s CSRF. In Remedie we add some special header to the normal POST request, in jQuery client, so CSRF attacks will be just ignored. Switching to JSONRPC instead of normal GET/POST could solve that problem too.
  36. And Bonjour. This is something I implemented last week and NOT the feature of HTTP::Engine yet, but when Remedie server launches it also publishes its hostname and port and machine name etc. over multicast DNS (aka Bonjour).
  37. Will be useful for auto-discovery by clients, or share the list of channels with someone in your local networks.
  38. Lots of people would have opinions which SQL database to use, for your web applications.
  39. Usually you would pick one of MySQL or PostgreSQL, to build some scalable web sites with complex business logic to run against data stored on SQL server.
  40. SQLite is a flat file based, portable SQL engine. It doesn&amp;#x2019;t implement all of ANSI SQL features, but very fast and useful for embedded software. There will be concurrency problems like locking if you have multiple processes opening the same SQLite database, but
  41. So it&amp;#x2019;s best for desktop applications, because you&amp;#x2019;ll only have one process to open the same database, even if it&amp;#x2019;s a micro desktop web application that we&amp;#x2019;re talking about now.
  42. Actually, software like Firefox, OS X&amp;#x2019;s Mail.app and iCal all use SQLite as its database.
  43. Another reason that it&amp;#x2019;s good for desktop apps is the end-users don&amp;#x2019;t want to and need to run SQL server processes like MySQL or postgreSQL.
  44. Also, if your use SQLite as a backend for your desktop app, backing up is easy. And you can synchronize your database between two machines like Home and Work using tools like Dropbox. Very nice.
  45. Let&amp;#x2019;s talk about DB schema.
  46. Actually let&amp;#x2019;s NOT talk about DB schema. You probably don&amp;#x2019;t need a DBA to design Desktop application. It depends on the size of data set your app is trying to handle, but most of the time, just use as simple schema as possible, to make it flexible and easily extensible.
  47. Remedie&amp;#x2019;s schema is pretty simple. It has just a few index columns, like id and names, and then column called &amp;#x2018;props&amp;#x2019; where we store all the properties as a JSON encoded object, or key-value pairs.
  48. Key value pair is hot.
  49. There are many document database, or key-value database systems like Couch, Mongo or TokyoTyrant and they actually need servers again, like MySQL or postgres.
  50. So the idea is the same: we use SQLite to store arbitrary key-value pairs with some indexes.
  51. How do we abstract those Database access. We need ORM. Another fight here which ORM to use.
  52. Well, you can use anything you like. I don&amp;#x2019;t have strong opinion about this right now.
  53. You can use DBIC or RDBO.
  54. Remedie uses RDBO right now but there&amp;#x2019;s no special reason for that. I just wanted some excuse to try something different because I always use Catalyst, Data::ObjectDriver, YUI and Template Toolkit at work and for this desktop app I wanted to try the whole new stack to build a micro web app.
  55. KiokuDB is one of the hottest technologies in the Perl these days, and there were lots of talks mentioning about it in this YAPC.
  56. KiokuDB can actually do with its DBI backend to save key-value JSPON data in the SQLite database. So i think Yuval and maybe Stevan are interested in porting my Remedie RDBO code over to Kioku over the next few days.
  57. So for this desktop web app thing, I would&amp;#x2019;t introduce anything special from the normal jQuery usage for your web applications. Just use HTML and CSS to design the UI.
  58. You better not write HTML by hand, because your app is truly dynamic. You better manipulate the DOM object and use jQuery&amp;#x2019;s Ajax method to do Ajax JSON calls to the backend.
  59. There are couple of templating plugins for jQuery but I chose jQuery.flydom. which is kind of similar to Template::Declare in Perl.
  60. jQuery.hotkeys is a plugin for jQuery to enable hotkeys or keyboard shortcuts, like vi-style navigation, or using arrow keys to control video playback.
  61. The usage is pretty simple. It overrides the original &amp;#x2018;keydown&amp;#x2019; event so that you can specify which keyboard that it listens to, and then assign a callback to the pressed key.
  62. jQuery.contextMenu is a plugin to enable some right-click or control-click menu so your web application actually looks like a desktop application.
  63. jQuery corners is a plugin to do round corners, pretty important for Web 2.0 sites, and for desktop applications, to implement something like this:
  64. this badge-like overlay is implemented using some hover divs with rounded corners.
  65. jQuery has this event system that you can bind callbacks to browser events, like mouse over, or DOM ready, or link clicked, but you can also use the event system to trigger your app specific custom events and bind callbacks to them. I heavily use this system to make my JS like a real GUI application, because with GUI application most of them are coded in Event Loops.
  66. jQuery UI is an extension to jQuery that implements some UI stuff.
  67. Currently, we only use jQuery UI to implement the drag &amp; drop stuff that you saw in the demo. Maybe I could use other features of jQuery UI to do some more fancy stuff.
  68. There are many other jQuery plugins that I won&amp;#x2019;t talk about today but you might be interested in, to implement some desktop-app like features.
  69. That&amp;#x2019;s it for jQuery. Let&amp;#x2019;s get back to this Desktop app thing again.
  70. This desktop web app sounds sexy, but it&amp;#x2019;s actually just Client-Server model, right?
  71. So we have 2 &amp;#x201C;apps&amp;#x201D; basically. One is the client and the other is the server. Let&amp;#x2019;s make the client as a real application. In this case client is a browser.
  72. There&amp;#x2019;re tools to make Site-Specific Browser, or SSB in short.
  73. Fluid and Prism. Fluid is Safari and Prism is Firefox.
  74. This is how Fluid apps would look like. They&amp;#x2019;re just another browser (Safari) process that are specific to the site, like Github or Gmail or Flickr. You can use Fluid to build a site specific browser, to your application running on localhost:9999 or whatever port.
  75. The users of your desktop app will be able to customize the frontend UI using Userscripts, like Greasemonkey for Prism and GreaseKit for Fluid. Users can also skin their app using Userstyles. So you don&amp;#x2019;t need to implement those plugin mechanisms or anything like that, to allow users to customize their app. SSB can do this already.
  76. Fluid also allows you to extend your app and look more like a desktop app, so your app notification can be hooked to Growl, instead of jQuery.jGrowl that I mentioned, and has an access to Dock menu, like this.
  77. Remedie&amp;#x2019;s RPC is implemented as an JSON REST API, so client and server are basically decoupled. There&amp;#x2019;s no tight connection between front-end app and backend micro web server APIs.
  78. So theoretically, you can have more client applications other than normal browsers like Safari or Firefox, that talk to the same backend server over API. And you have more &amp;#x201C;views&amp;#x201D; to the application.
  79. For example, iPhone.
  80. Finally, we can actually make the Server as an app as well.
  81. by packaging the server process as a bundle.
  82. I used local::lib the excellent CPAN module to have application specific library path and install all dependencies locally inside the app bundle.
  83. You can also use best practical&amp;#x2019;s shipwright to do the same thing, with slightly different approach.
  84. And for Mac OS X, I used a tool called Platypus, to bundle those scripts, libraries and dependent CPAN modules in a .app bundle. it runs everywhere under Leopard, no CPAN installation required.