Modern Perl Web Development with Dancer

Modern Perl
Web
Development
with Dancer

Some History
●
20 years ago most web development was done
with Perl & CGI
●
10-15 years ago that changed
●
Competition in the web development space
●
Other (better?) technologies

What Changed?
●
Hard to maintain
●
CGI used less
●
No "new version" for twenty years
●
Technologies with less historical baggage

What Else Changed?
●
Perl changed a lot
●
Major release every year
●
Powerful extension libraries
●
CPAN - Perl's killer app

The Plan
●
Show that Perl is still good for web development
●
Demonstrate some Modern Perl tools
●
Show Perl working with modern web
technology
– Bootstrap
– jQuery
– Mustache

Perl Web Tools
●
PSGI/Plack
– Web server interaction
●
Dancer2
– Web framework

Other Perl Tools
●
DBIx::Class
– ORM
●
Template Toolkit
– Templating engine
●
Moose
– OO framework

Other Tools
●
Bootstrap
– CSS framework
●
jQuery
– Javascript framework
●
Mustache
– Javascript templates

PSGI
●
Perl Server Gateway Interface
●
CGI++
●
Interface between Perl app and web server
●
A lot like Python's WSGI

PSGI Application
my $app = sub {
my $env = shift;
return [
200,
[ Content_type => 'text/plain' ],
[ 'Hello world!' ],
];
}

PSGI Specification
●
Subroutine reference
●
Passed a hash reference
●
Returns a reference to a three-element array
●
Status code
●
Array of header name/value pairs
●
Array containing body

PSGI Advantages
●
Separates development from deployment
●
Easier debugging & testing
●
Middleware

Plack
●
Plack is a toolbox for working with PSGI
●
A lot like Ruby's Rack
● Development web server (plackup)
●
Middleware
●
Apps
●
Adapters for various deployment environments

Writing a PSGI Application
●
You can write your application in "raw" Plack
– Plack::Request
– Plack::Response
●
But unless it's very simple you should use a
framework
●
Makes your life easier

Frameworks in Perl
●
Catalyst
●
Mojolicious
●
Ox
●
Dancer(2)
– Our choice

Dancer2
●
Simple route-based framework
●
Plenty of plugins available
– Sessions
– Authentication
– Database access
●
Good balance between ease and power

Creating Your Dancer2 App
●
Command line program to create an app
skeleton
● dancer2 gen -a Todo
● Many files put into Todo directory

Running Your Dancer2 App
●
Run your web app in a development web server
– plackup
● cd Todo
● plackup bin/app.psgi
●
Go to http://localhost:5000/

Bootstrap
●
The default Dancer2 index page looks nice
●
But we can do better
●
Bootstrap is a CSS framework
– From Twitter
●
Easy improvements to web pages
●
http://getbootstrap.com

Pages and Layouts
● Dancer2 stores page templates in views
– views/index.tt
● And layouts in views/layouts
– views/layouts/main.tt
●
These are Template Toolkit files

Changing Template Engine
●
Dancer2's default templating engine is
Template::Simple
●
But we use the Template Toolkit instead
● Change templating engine in config.yml

config.yml (before)
template: "simple"
# template: "template_toolkit"
# engines:
# template:
# template_toolkit:
# start_tag: '<%'
# end_tag: '%>'

config.yml (after)
# template: "simple"
template: "template_toolkit"
engines:
template:
template_toolkit:
start_tag: '<%'
end_tag: '%>'

Template Toolkit
●
Perl's de-facto standard templating engine
●
Text templates
● Processing tags marked with <% ... %>
●
Simple programming language
– Variables
– Loops

Layouts vs Pages
●
A page is a single page
●
A layout is a wrapper around all of your pages
●
Consistant look and feel
● <% content %> tag where page content is
inserted

Bootstrap Changes
● Edit views/layouts/main.tt
●
Steal HTML from Bootstrap examples page
● Insert the <% content %> tag
● Replace views/index.tt
– <p>Page content</p>

Plack Middleware
●
Plack Middleware wraps around your PSGI app
●
Can alter the request on the way in
●
Can alter the response on the way out
●
PSGI's simple specification makes this easy

Middleware Power
●
Middleware can skip the app
●
Go straight to the response
●
Authentication
●
Serving static files

Static Files
●
Your app will have static files
– Images
– CSS
– Javascript
●
Serve these from the filesystem
●
No need to go through the app
●
Use Plack::Middleware::Static

Your Dancer2 App
#!/usr/bin/env perl
use strict;
use warnings;
use FindBin;
use lib "$FindBin::Bin/../lib";
use Todo;
Todo->to_app;

Adding Middleware
●
Plack::Builder is used to load and configure middleware
● Use the builder and enable keywords
use Plack::Builder;
my $app = ...;
builder {
enable 'Some::Middleware';
$app;
};

Plack::Middleware::Static
use Plack::Builder;
use Todo;
builder {
enable 'Plack::Middleware::Static',
path => qr{^/(javascripts|css)/},
root => './public/';
Todo->to_app;
};

Plack::Middleware::Static
●
Serve static files directly
– Don't go through the app
● If the path matches qr{^/(javascripts|
css)/}
● Serve files from ./public
– Note the "."

Displaying Data
●
We want to display data
– Todo item
●
Start simple
●
Hard-code data in Todo.pm
●
Read that data in index.tt

Data in Todo.pm
my @items = ({
title => 'Todo item 1',
description =>
'Do something interesting',
due => '2016-08-24',
done => 1,
}, {
...
});

Munge the Data
my $dt_parser = DateTime::Format::Strptime->new(
pattern => '%Y-%m-%d',
);
my $now = DateTime->now;
foreach my $item (@items) {
$item->{due} =
$dt_parser->parse_datetime($item->{due});
$item->{overdue} = $item->{due} <= $now;
}

Pass Data to Template
template 'index',
{ items => @items };

Display Data in Template
<% FOREACH item IN items -%>
<div class="panel panel-<% IF item.done %>success<% ELSIF
item.overdue %>danger<% ELSE %>info<% END %>">
<div class="panel-heading">
<h3 class="panel-title"><% item.title %></h3>
</div>
<div class="panel-body"><p><% item.description %></p>
<p class="text-right">
<small>Due: <% item.due.strftime('%A %d %B')
%></small>
</p>
</div>
</div>
<% END -%>

Step 5 - Getting
Data from a
Database

Dynamic Data
●
That's nice, but we don't have a static Todo list
– Hopefully
●
Need to get the data from a database

Define Database Table
CREATE TABLE item (
id integer not null
auto_increment primary key,
title varchar(200) not null,
description text,
due datetime,
done boolean not null default false
) Engine=InnoDB;

Database Interfaces with Perl
●
The standard Perl database interface is called
DBI
●
But we can do better than that
●
We will use DBIx::Class
– Based on DBI
●
ORM

Object Relational Mapping
●
Maps between OO concepts and DB concepts
●
table : class
●
row : object
●
column : attribute
●
Write less SQL!

Database Metadata
●
DBIx::Class needs a set of Perl classes
●
You can write these yourself
●
Or you can automatically generate them
● dbicdump extracts metadata from your
database
●
Generates the classes

todo.conf
schema_class Todo::Schema
<connect_info>
dsn dbi:mysql:todo
user todouser
pass sekr1t
</connect_info>
<loader_options>
dump_directory ./Todo/lib
components InflateColumn::DateTime
use_moose 1
</loader_options>

Generating Classes
● Run dbicdump from your command line
● dbicdump todo.conf
●
Dumps stuff into Todo/lib

Generated Classes
●
Todo/lib/Todo/Schema.pm
– Main connection object
●
Todo/lib/Todo/Schema/Result/Item.pm
– One row from the item table

Dancer2 and DBIC
●
Use a plugin to access DBIC from Dancer2
●
Dancer2::Plugin::DBIC
●
Configure connection in config.yml

config.yml
plugins:
DBIC:
default:
schema_class: Todo::Schema
dsn: dbi:mysql:dbname=todo
user: todouser
pass: sekr1t

Todo.pm
use Dancer2::Plugin::DBIC;
get '/' => sub {
# Removed hard-coded data
# Get data from database instead
my @items =
schema->resultset('Item')->all;
template 'index', { items => @items };
};

index.tt
●
No changes
●
Which is a bonus
●
Previously we passed hashrefs
●
Now we pass objects
●
TT uses the same syntax for both

TT Hashes vs Objects
●
Hashref
– Perl: $item->{key}
– TT: item.key
●
Object
– Perl: $item->attribute
– TT: item.attribute
●
Handy for prototyping

Step 6 -
Displaying with
Javascript

Flexibility
●
Generating the HTML using TT code in the template
isn't very flexible
●
Write a JSON data structure instead
– JSON
●
Generate the HTML from the JSON
– Mustache
●
Process Mustache template on page load
– jQuery

JSON
<script>
var items = [
{
counter: <% loop.count %>,
title: "<% item.title %>",
description: "<% item.description %>",
done: <% item.done %>,
overdue: <% item.overdue %>,
due: "<% item.due.strftime('%A %d %B') %>",
panel_class: "<% IF item.done %>success
<% ELSIF item.overdue %>danger
<% ELSE %>info<% END %>",
}<% UNLESS loop.last %>,<% END %>
<% END -%>
];
</script>

Somewhere to Put the List
<div id="list">
</div>

Mustache
●
Simple Javascript templating language
●
Similar features to Template Toolkit
● Define templates in <script> tags
● Render with Mustache.render()

Mustache Template
<script id="item-template" type="text/template">
{{#items}}
<div class="panel panel-{{panel_class}}">
<h3 class="panel-title">{{counter}}: {{title}}</h3>
</div>
<div class="panel-body"><p>{{description}}</p>
<p class="text-right"><small>Due:
{{due}}</small></p>
</div>
</div>
{{/items}}
</script>

Rendering the Template
<script>
$( document ).ready(function() {
var template = $('#item-template').html();
var list = Mustache.render(
template, { items: items }
);
$('#list').append(list);
});
</script>

Our First Feature
●
Show/hide done items
– Bootstrap Switch
– jQuery
●
Save the state in a cookie
– js.cookie
●
No Perl in this step

Add the Switch
<p>Completed items:
<input type="checkbox"
name="show-complete"
data-on-text="Show"
data-off-text="Hide"
data-size="small"></p>

Set Up the Switch
function set_up_switch(the_switch, curr_state) {
the_switch.on('switchChange.bootstrapSwitch',
function(event, new_state) {
show_list(new_state);
Cookies.set('show-complete', new_state);
});
the_switch.bootstrapSwitch(
'state', curr_state
);
}

Some Other Helpers
function generate_list(div, list_items) {
var template = $('#item-template').html();
div.append(
Mustache.render(template,
{ items: list_items })
);
}
function show_list(state) {
if (state) {
$(".panel-success").show(1000);
} else {
$(".panel-success").hide(1000);
}
}

Document Ready
$( document ).ready(function() {
list_div = $("#list");
list_div.hide();
generate_list(list_div, items);
# Gotcha!
cook_state = Cookies.get('show-complete') == 'true';
set_up_switch(
$("[name='show-complete']"),
cook_state
);
show_list(cook_state);
list_div.show();
});

An Important Feature
●
Need to mark items as done
●
Add "done" button to page
– Bootstrap Glyphicons
●
Update status in database
●
Redisplay page

More Data Needed
●
Add id to JSON
●
Add button_type to JSON
– Controls colour of button

index.tt
{
counter: <% loop.count %>,
id: <% item.id %>,
title: "<% item.title %>",
description: "<% item.description %>",
done: <% item.done %>,
overdue: <% item.overdue %>,
due: "<% item.due.strftime('%A %d %B') %>",
panel_class: "<% IF item.done %>success
<% ELSE %>info<% END %>",
button_type: "<% IF item.done %>success
<% ELSE %>primary<% END %>"
}<% UNLESS loop.last %>,<% END %>
<% END -%>

Display Button
<script id="item-template" type="text/template">
{{#items}}
<div class="panel panel-{{panel_class}}">
<h3 class="panel-title">{{counter}}: {{title}} {{^done}}">
<form style="float:right" method="post"
action="/done/{{id}}">
<button type="submit"
class="btn btn-{{button_type}} btn-lg">
<span class="glyphicon glyphicon-ok"></span>
</button>
</form>{{/done}}
</h3>
</div>
<div class="panel-body">
<p>{{description}}</p>
<p class="text-right"><small>Due: {{due}}</small></p>
</div>
</div>
{{/items}}
</script>

POST vs GET
●
Done action is POST
●
Alters the database
●
Protection from crawlers

Marking Item Done
●
Find item in database
– Not found -> 404
●
Update status
●
Redirect to home page

Todo.pm
post '/done/:id' => sub {
my $id = route_parameters->get('id');
my $item =
schema->resultset('Item')->find($id);
unless ($item) {
status 404;
return "Item $id not found";
}
$item->update({ done => 1 });
redirect('/');
};

Add Todo Items
●
Todo lists get longer
●
Need to add new items
●
New form to capture information
●
Save to database
●
Handle missing information

Add an Add Button
<span style="float:right">
<a href="/add">
class="btn btn-primary btn-lg">
<span class="glyphicon
glyphicon-plus"></span>
</button>
</a>
</span>

Display Add Form
●
Two actions on /add
●
Display form
●
Process form data
●
Use HTTP method to differentiate
●
GET vs POST

Todo.pm - GET
get '/add' => sub {
template 'add';
};

Todo.pm - POST
post '/add' => sub {
my $item;
my @errors;
my %cols = (
title => 'Title',
description => 'Description',
due => 'Due Date',
);
foreach (qw[title description due]) {
unless ($item->{$_} = body_parameters->get($_)) {
push @errors, $cols{$_};
}
}
if (@errors) {
return template 'add', {
errors => @errors, item => $item
};
}
resultset('Item')->create($item);
redirect('/');
};

add.tt (Error Display)
<% IF errors.size -%>
<div class="alert alert-danger" role="alert">
The following inputs were missing:
<ul>
<% FOREACH error IN errors -%>
<li><% error %></li>
<% END -%>
</ul>
</div>
<% END -%>

add.tt (Data Capturing)
<form method="post">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control"
id="title" name="title" placeholder="Title"
value="<% item.title %>">
</div>
<label for="description">Description</label>
<textarea class="form-control" rows="5"
id="description" name="description"
placeholder="Description">
<% item.description %>
</textarea>
</div>
<label for="due">Date Due</label>
<input type="date" id="due" name="due"
value="<% item.due %>">
</div>
class="btn btn-default">Save</button>
</form>

Logging In
●
Only valid users should be able to edit the list
●
Other visitors can view the list
●
Use sessions to store login details

Add Login Form and Logout Link to
main.tt
<li>
<% IF session.user %>
<a href="/logout">Log out</a>
<% ELSE %>
<form class="navbar-form navbar-right"
method="post" action="/login">
<div class="form-group form-group-sm">
<input type="text" class="form-control"
name="user" placeholder="User">
</div>
<div class="form-group form-group-sm">
<input type="password" class="form-control"
name="password" placeholder="Password">
</div>
class="btn btn-default btn-xs">Log in</button>
</form>
<% END %>
</li>

Todo.pm - Logging In
post '/login' => sub {
my $user = body_parameters->get('user');
my $pass = body_parameters->get('password');
# TODO: Make this better!
if ($pass eq 'letmein') {
session user => $user;
}
redirect '/';
};

Todo.pm - Logging Out
get '/logout' => sub {
session user => undef;
redirect '/';
};

Display Appropriate Buttons - Add
<% IF session.user -%>
<span style="float:right">
<a href="/add">
class="btn btn-primary btn-lg">
glyphicon-plus"></span>
</button>
</a>
</span>
<% END -%>

Display Appropriate Buttons - Mark
Done
<% IF session.user %>
{{^done}}
<form style="float:right" method="post"
</button>
</form>
{{/done}}
<% END %>

Editing Tasks
●
Tasks aren't fixed in stone
●
Deadlines change
●
Details change
●
Fix typos
●
Delete tasks

Add Edit and Delete Buttons
<h3 class="panel-title">{{counter}}:
{{title}}<% IF session.user %>
{{^done}}<form style="float:right" method="post"
<button title="Mark Done" type="submit"
</button>
<a href="/edit/{{id}}"><button title="Edit" type="button"
<span class="glyphicon glyphicon-pencil"></span>
</button></a>
<a href="/delete/{{id}}"><button title="Delete" type="button"
<span class="glyphicon glyphicon-remove"></span>
</button></a></form>{{/done}}<% END %></h3>
</div>

Deletion Code
get '/delete/:id' => sub {
my $item = find_item_by_id($id)
or return "Item $id not found";
template 'delete', { item => $item };
};
post '/delete/:id' => sub {
$item->delete;
redirect '/';
};

Edit Code (GET)
get '/edit/:id' => sub {
template 'add', { item => $item };
};

Edit Code (POST)
post '/edit/:id' => sub {
my $new_item;
my @errors;
my %cols = (
title => 'Title',
description => 'Description',
due => 'Due Date',
);
foreach (qw[title description due]) {
unless ($new_item->{$_} = body_parameters->get($_)) {
push @errors, $cols{$_};
}
}
if (@errors) {
return template 'add',
{ errors => @errors, item => $new_item };
}
$item->update($new_item);
redirect('/');
};

find_item_by_id($id)
sub find_item_by_id {
my ($id) = @_;
my $item =
schema->resultset('Item')->find($id);
unless ($item) {
status 404;
return;
}
return $item;
}

Tag Tasks
●
Associate tags with tasks
●
Display tags for task
●
Edit tags
●
Filter on tags

Database Changes
●
New table "tag"
●
New link table "item_tag"
●
Generate new DBIC schema classes

Database Changes (Cheating)
● cd step12
● db/make_db
● dbicdump todo.conf

Database Relationships
●
DBIC recognises relationships between tables
●
Regenerates code automatically
● Item has_many Item Tags
● Item Tags belong_to Items
● Item has a many_to_many relationship with
Tag
– And vice versa

Add Tags
my @tags = split /s*,s*/,
body_parameters->get('tags');
...
my $new_item =
resultset('Item')->create($item);
foreach my $tag (@tags) {
$new_item->add_to_tags({ name => $tag });
}

Displaying Tags (1)
tags: [
<% FOREACH tag IN item.tags -%>
"<% tag.name %>"
<% UNLESS loop.last %>,<% END %>
<% END -%>
]

Displaying Tags (2)
<div class="panel
panel-{{panel_class}}
{{#tags}}tag-{{.}} {{/tags}}">

Displaying Tags (3)
<p><a class="btn btn-{{button_type}}
btn-xs tag-button" href="#" role="button"
title="Clear tag filter" id="clear-tag">
glyphicon-remove"></span></a>
{{#tags}}
<a class="btn btn-{{button_type}}
btn-xs tag-button"
href="#" role="button">{{.}}</a>
{{/tags}}</p>

Filtering Tags
$(".tag-button").on('click', function(event)
{
event.preventDefault();
if (this.id == "clear-tag") {
$(".panel").show(400);
} else {
$(".panel").hide(400);
$(".tag-" + this.text).show(400);
}
});

Things We Didn't Cover
●
Testing
●
Deployment

Things to Add
●
User management
●
Better error checks
●
AJAX
– Pop-ups

Things to Read
●
Dancer documentation
●
Dancer advent calendar
●
PSGI/Plack documentation
●
CPAN

Things to Consider
●
Perl has great tools for web development
●
Moose is a state of the art object system
●
DBIC is a state of the art ORM
●
Dancer, Catalyst and Mojolicious are state of the
art web frameworks
●
No language has better tools

Stay in Touch
●
dave@perlhacks.com
●
@perlhacks
●
http://perlhacks.com/
●
Mailing list
●
Facebook

Modern Perl Web Development with Dancer

More Related Content

What's hot

Similar to Modern Perl Web Development with Dancer

More from Dave Cross

Recently uploaded

Modern Perl Web Development with Dancer