the peanut butter cup of web-dev: plack and single page web apps
Embed Size (px)
TRANSCRIPT
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<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Load angular library
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Bootstrap Angular
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
Easy to get started with Angular
Tie this <div> to this chunk of controller code
(which means 'demoValue' is available)
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<script type="text/javascript">
function demoCtrl ($scope) {
$scope.demoValue = "foo"
}
</script>
</head>
<body ng-app>
<div ng-controller="demoCtrl">
<h1>{{demoValue}}</h1>
<input type="text" ng-model="demoValue" />
</div>
</body>
</html>
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?