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 u...
…many options
Angular.js
• Client-side MVC Javascript framework
• Developed at Google
• "HTML enhanced"
• Great for "single page" web ap...
Easy to get started with Angular
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text...
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.ang...
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.ang...
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.ang...
<!DOCTYPE html>
<html>
<head>
<title>Two Way Data Binding Demo</title>
<script type="text/javascript" src="http://code.ang...
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 $r...
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
• Prototyp...
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 ...
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/45...
Thanks!
Questions?
The Peanut Butter Cup of Web-dev: Plack and single page web apps
The Peanut Butter Cup of Web-dev: Plack and single page web apps
Upcoming SlideShare
Loading in …5
×

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

427 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
427
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. The peanut butter cup of web-dev: Plack & single page web apps @genehack ≈ 03 May 2014 ≈ DCBPW v3.0
  2. 2. John SJ Anderson @genehack Director of Technology! Infinity Interactive
  3. 3. 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
  4. 4. …many options
  5. 5. Angular.js • Client-side MVC Javascript framework • Developed at Google • "HTML enhanced" • Great for "single page" web apps
  6. 6. 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>
  7. 7. <!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
  8. 8. <!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
  9. 9. <!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)
  10. 10. <!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
  11. 11. Ill-advised live demo time!
  12. 12. So, it's…
  13. 13. But then…
  14. 14. You hit a brick wall.
  15. 15. You need a server.
  16. 16. [ A noble yak enters from stage left. ]
  17. 17. Javascript tools • express • node.js • grunt • yeoman • bower • npm
  18. 18. Wait … I know Perl. Perl can serve files.
  19. 19. 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 ); }
  20. 20. Easy to grow that simple server… into a full Plack-based application.
  21. 21. 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
  22. 22. Probably not appropriate for production… …but you can't live on just Reese's either.
  23. 23. 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.
  24. 24. X Anti-yak pattern
  25. 25. 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
  26. 26. Thanks! Questions?

×