1.
Inside Bokete:
Web Application with
Mojolicious and others.
Yusuke Wada a.k.a yusukebe
From Yokohama, Japan
2013-06-05
YAPC::NA 2013

2.
Introduction of myself
- Yusuke Wada a.k.a yusukebe
- From Japan, Yokohama.
- A Web Application Enginner.
- CEO of Wadit Inc and CTO of Omoroki Inc.
- I got the award of the YAPC::Asia 2012 popularity vote.
- My trip is supported by Japan Perl Association.

3.
Development of “Bokete”
My work
I spend a time to developing web site named “Bokete”. “Bokete” is my work.

4.
What’s Bokete?
Bokete is Japanese popular entertainment web service like a 9gag.com.
- Japanese entertainment web service by Omoroki Inc.
- It’s like a 9gag.com

5.
Bokete has ...
- Web site for PC browser and smart phone browser
- iOS App and Android App
- 3 hundred million Page View per month overall
- Backend system is written by me
Web site for PC and Smartphone browser, mobile application of iOS / Android are available in
Bokete. We have 3 hundred million page views per month overall. Backend system is written by
me.
http://bokete.jp/

6.
Screenshot of web site

7.
Screenshot of mobile App

8.
Users generate contents
Bokete services
User who has funny things.
Post
See
User who want to laugh.
Bokete have a many contents generated by users. User who has funny things post the “boke” to
Bokete sites. And other users who want to laugh see these contents.

9.
Boke
= Photo + Short Text
What are contents of Bokete?
So, what are contents of the Bokete? The answer is “Boke”. Boke is constructed of a photo and a
short text. Let’s see bokes on Bokete.

10.
Boke No.1
You know, get this calmly.
You are hitting your referee.

11.
Boke No.2
Who forgot a uniform ?

12.
Boke No.3
Hey! You didn’t say UNO!!

13.
Boke No.4
They give up.

14.
Boke No.5
This man is the murderer.

15.
How about bokes?
How about the bokes on Bokete? We have books of Bokete, so please ask me later if you have
interests of bokes. Then I’ll introduce backend system of Bokete.

16.
System of Bokete
About using Perl
Technical topics
Bokete is made by Perl! We love Perl.

17.
Structure of servers
Web App
EC2 Instances
Elastic Load Blancing
RDS
MySQL Master
RDS
MySQL Read Replica
API App
EC2 Instances
Elastic Load Blancing
Memcached Memcached
Browsers Mobile Apps

18.
Using Mojolicious!
- Mojolicious as a Web Application Framework
- But Mojolicious is very “thin” not like a Ruby on Rails
- So, we should use other CPAN modules
- Many modules written by Japanese author are used
We use Mojolicious to implementing Bokete. Mojolicious is good Web Application Framework. But,
Mojolicious is very “thin” and too simple that is not like a Ruby on Rails. So, inside Bokete,
we use other CPAN modules that are written by Japanese Author. I think these modules are not so
popular in overseas from Japan. One of this talk theme is introduce Japanese CPAN modules.

19.
PSGI/Plack
Interface between app and server
Enable to use Plack Middlewares and Starman/Starlet
as high-perfomance app server
PSGI
Web App
Web Application
Framework
Web Server
supports PSGI
Web App
Web Application
Framework
Web App
Web Application
Framework
Web Server
supports PSGI
Web Server
supports PSGI
Plack
Middleware

20.
“.psgi” example
use Mojo::Server::PSGI;
use Plack::Builder;
use Bokete::Web;
my $psgi = Mojo::Server::PSGI->new( app => Bokete::Web->new );
my $app = $psgi->to_psgi_app;
builder {
enable "Runtime";
enable "ServerStatus::Lite",
path => '/server-status',
allow => [ '0.0.0.0/1' ],
scoreboard => '/var/run/server';
$psgi->to_psgi_app;
};
Add X-Runtime Header
It’s like a Apache’s mod_status

21.
Mouse
Fast class builder
package Point;
use Mouse;
has 'x' => (is => 'rw', isa => 'Int');
has 'y' => (is => 'rw', isa => 'Int');
sub clear {
my($self) = @_;
$self->x(0);
$self->y(0);
}
1;
Moose compatible, Fast because using XS
and No dependencies.

22.
DBIx::Skinny or Teng
Minimal O/R mapper
Supporting transaction, raw SQL, inflate/deflate
lightweight, and fast
Prepare your database on SQLite or MySQL, others.
package MyDB;
use DBIx::Skinny;
1;
Make some modules for Database access.
＊Teng is newer version of DBIx::Skinny

23.
Using DBIx::Skinny
use MyDB;
my $db = MyDB->new({ connect_info => [ 'dbi:SQLite:' ] });
$db->insert('table', { col => 'value' }); # Insert
my $row = $db->single('table', { id => 1 }); # Select
say $row->col;
my $iter = $db->search('table'); # Iterator instance
while ($row = $iter->next) {
say $row->col;
}
package MyDB::Schema;
use DBIx::Skinny::Schema;
install_table ‘table’ => schema {
pk ‘id’;
columns qw/id col/;
};
1;

24.
FormValidator::Lite
A form validator
FormValidator::Lite->load_constraints(qw/Japanese Email/);
my $validator = FormValidator::Lite->new($self->req);
my $res -> $validator->check(
name => [qw/NOT_NULL/],
mail => [qw/EMAIL/],
{ mails => [qw/mail mail_confirm/] } => ['DUPLICATION']
);
if($validator->has_error) {
$self->stash->{messages} = $validator->get_error_messages();
return $self->render;
}
...;
Fast, simple, customizing error messages

25.
HTML::FillInForm::Lite
fill HTML forms with Perl data
$self->helper(
render_fill => sub {
my ( $self, $template_name ) = @_;
my $html = $self->render_partial($template_name)->to_string;
return $self->render_text(
HTML::FillInForm::Lite->fill( $html, $self->req->params ),
format => 'html'
);
}
);
2 times faster than HTML::FillInForm
# In controller
return $self->render_fill(‘/post’) if $error;

26.
HTML form is filled with request parameters

27.
Shortcut method for controller
- Check request parameters
- Show error messages
- Fill HTML form with request parameters
sub post {
my $self = shift;
if($self->form('Post')->has_error) {
return $self->render_fill('/post');
}
}

28.
Devel::KYTProf
Profiler for I/O blocking time
use Devel::KYTProf;

29.
Carton / v0.9.15
Manager of Perl modules
Like a ruby bundler, using cpanfile
Carton manages
dependency of modules.
CPAN
modules
in App
An environment No.1
CPAN
modules
in App
An environment No.2
Same version modules
Carton is now
experimetal !
API is likely to chage.

30.
Using Carton.
# on cpanfile
requires ‘Mojolicious’, 4.07;
requires ‘Mouse’;
requires ‘Teng’, 0.18;
$ carton install
$ carton exec -Ilib -- plackup myapp.psgi
carton.lock file is generated
and module files is installed into “local” directory
Execute perl command with core libraries and local libraries

31.
Server::Starter
Daemon for hot-deploying
# On daemontools run script
start_server --port 8001 -- plackup -s Starman bokete_web.psgi
Supporting Starman/Starlet and other HTTP servers
$ sudo svc -h /service/bokete_web
To gracefully restart the server program,
sending SIGHUP to this daemon.

32.
Cinnamon
Simple deployment tool
use Cinnamon::DSL;
set repository => 'git@github.com:yusukebe/MyApp.git';
role 'web' => [qw/001.server.name 002.server.name/],
{ deploy_to => '/home/user/www/myapp', branch => 'master', damoentools_dir => '/service/myapp' };
task deploy => {
setup => sub {
my ($host, @args) = @_;
my $repository = get('repository');
my $deploy_to = get('deploy_to');
my $branch = 'origin/' . get('branch');
remote {
run "git clone $repository $deploy_to && cd $deploy_to && git checkout -q $branch";
} $host;
}
};
$ cinnamon web deploy:setup

33.
And many other modules
- Data::Validator - Validator for Perl data
- CloudForecast - Web Application for server monitoring
- Data::Page::Navigation - Pager
- Test::mysqld
- Plack::Middleware::ReverseProxy
- Plack::Middleware::AxsLog
- Starman

34.
Bokete is supported by many CPAN Modules
Mojolicious is good but minimal.
We combine CPAN modules which is choosed.
It’s like LEGO blocks !!

35.
Wrap-up
- I’ve talk about...
- Bokete as a Japanese entertainment web site
- We are using a Mojolicious !!
- Other CPAN modules by Japanese authors
- There is more than one way to develop web applications !!
And ...

36.
YAPC::Asia 2013 will be held !
- September 19 - 21 on Keio University near the Tokyo .
- Early Bird Tickets On Sale ! - 1,000 JPY discounted .
- Talk submissions are accepted now .
- Most biggest YAPC in the world (Maybe) .

37.
Thank you !!