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! Inﬁnity 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

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

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)

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 ﬁles.

plackﬁle #!/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 ﬁle 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 conﬂicts

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.

X Anti-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?

The Peanut Butter Cup of Web-Dev: Plack and sin...

The Peanut Butter Cup of Web-Dev: Plack and single page web apps

John SJ Anderson

More Decks by John SJ Anderson

Other Decks in Programming

Featured

Transcript

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

John SJ Anderson @genehack Director of Technology! Inﬁnity Interactive

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

…many options

Angular.js • Client-side MVC Javascript framework • Developed at Google

Easy to get started with Angular <!DOCTYPE html> <html> <head>

<!DOCTYPE html> <html> <head> <title>Two Way Data Binding Demo</title> <script

<!DOCTYPE html> <html> <head> <title>Two Way Data Binding Demo</title> <script

<!DOCTYPE html> <html> <head> <title>Two Way Data Binding Demo</title> <script

<!DOCTYPE html> <html> <head> <title>Two Way Data Binding Demo</title> <script

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

Wait … I know Perl. Perl can serve ﬁles.

plackﬁle #!/usr/bin/env perl ! use Plack::Runner; ! my $app =

Easy to grow that simple server… into a full Plack-based

Prototyping with Plack • Static ﬁle serving • Middleware for

Probably not appropriate for production… …but you can't live on

It is a fun easy way to started. Allows you

X Anti-yak pattern

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

Thanks! Questions?