the peanut butter cup of web-dev: plack and single page web apps

The peanut butter cup of web-dev: Plack & single page web apps

@genehack 03 May 2014 DCBPW v3.0

John SJ Anderson@genehack

Director of Technology!Infinity Interactive

Single-page applications All "static" assets delivered in single page load

Page does not do full reload cycle during usage

May have backend returning JSON in response to user actions

Client-side Javascript code handles UI updates

many options

Angular.js Client-side MVC Javascript framework

Developed at Google

"HTML enhanced"

Great for "single page" web apps

Easy to get started with Angular

Two Way Data Binding Demo

function demoCtrl ($scope) {

$scope.demoValue = "foo"

}

{{demoValue}}

Two Way Data Binding Demo

function demoCtrl ($scope) {

$scope.demoValue = "foo"

}

{{demoValue}}

Easy to get started with Angular

Load angular library

Two Way Data Binding Demo

function demoCtrl ($scope) {

$scope.demoValue = "foo"

}

{{demoValue}}

Easy to get started with Angular

Bootstrap Angular

Two Way Data Binding Demo

function demoCtrl ($scope) {

$scope.demoValue = "foo"

}

{{demoValue}}

Easy to get started with Angular

Tie this to this

chunk of controller code

(which means

'demoValue' is available)

Two Way Data Binding Demo

function demoCtrl ($scope) {

$scope.demoValue = "foo"

}

{{demoValue}}

Easy to get started with Angular

Angular template replaced

with value of demoValue

Data binding

changing input

changes value

of demoValue

Ill-advised live demo time!

So, it's

But then

You hit a brick wall.

You need a server.

[ A noble yak enters from stage left. ]

Javascript tools express

node.js

grunt

yeoman

bower

npm

Wait I know Perl.

Perl can serve files.

plackfile#!/usr/bin/env perl !use Plack::Runner; !my $app = Plack::App::IndexFile->new({ root => shift })->to_app; my $runner = Plack::Runner->new; $runner->parse_options( '--access-log' => '/dev/null', @ARGV ); $runner->run( $app ); !package Plack::App::IndexFile; use parent 'Plack::App::File'; sub locate_file { my( $self, $env ) = @_; my $path = $env->{PATH_INFO} || ''; ! return $self->SUPER::locate_file( $env ) unless $path && $path =~ m{/$}; ! $env->{PATH_INFO} .= 'index.html'; ! return $self->SUPER::locate_file( $env ); }

Easy to grow that simple server

into a full Plack-based application.

Prototyping with Plack Static file serving

Middleware for session management

Authentication via middleware

Prototype your backend API (using OX or Dancer)

Possible to merge "typical" JS app layout and "typical" Perl module layout without conflicts

Probably not appropriate for production

but you can't live on just Reese's either.

It is a fun easy way to started.

Allows you to learn one new thing without having to learn a dozen new things at the same time.

XAnti-yak pattern

Photo credits All photos either by me or CC-BY-SA; attributions below

Slide #1: https://www.flickr.com/photos/nettsu/4570198529

Slide #4: https://www.flickr.com/photos/aprily/4196214910

Slide #11: https://www.flickr.com/photos/quinnanya/3821453576

Slide #12: https://www.flickr.com/photos/sarahseverson/6367143975

Slide #14: https://www.flickr.com/photos/mvallius/10104902114

Slide #15: https://www.flickr.com/photos/torkildr/3462607995

Slide #16 & #26: https://www.flickr.com/photos/archer10/2661318228

Slide #18: https://www.flickr.com/photos/eole/4407750708

Slide #19: https://www.flickr.com/photos/kef08/2988576699

Slide #20: https://www.flickr.com/photos/worldofoddy/146446352

Slide #21: code from http://www.modernperlbooks.com/mt/2011/08/serving-a-local-directory-with-plack.html

Slide #22: https://www.flickr.com/photos/62172402@N07/9924983085

Slide #24: https://www.flickr.com/photos/44458147@N00/5123523677

Slide #25: https://www.flickr.com/photos/hodgers/450003437

Thanks! Questions?