Download as PDF, PPTX
![[ A noble yak enters from stage left. ]](https://image.slidesharecdn.com/peanutbuttercup-140605184758-phpapp02/75/The-Peanut-Butter-Cup-of-Web-dev-Plack-and-single-page-web-apps-16-2048.jpg)
Uploaded byJohn Anderson
The Peanut Butter Cup of Web-dev: Plack and single page web apps
This document discusses single page web applications and the Angular.js framework. It provides an example of a simple Angular app with two-way data binding between HTML and JavaScript. It also describes how Plack and Perl can be used to prototype and serve such single page apps from the backend during development before integrating a full backend. The document encourages starting simply and learning new techniques gradually.
More Related Content
Similar to 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
- 1. The peanut buttercup of web-dev: Plack & single page web apps @genehack ≈ 03 May 2014 ≈ DCBPW v3.0
- 2. John SJ Anderson @genehack Directorof Technology! Infinity Interactive
- 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.
- 5. Angular.js • Client-side MVCJavascript framework • Developed at Google • "HTML enhanced" • Great for "single page" web apps
- 6. Easy to getstarted 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. <!DOCTYPE html> <html> <head> <title>Two WayData 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. <!DOCTYPE html> <html> <head> <title>Two WayData 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. <!DOCTYPE html> <html> <head> <title>Two WayData 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. <!DOCTYPE html> <html> <head> <title>Two WayData 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.
- 12.
- 13.
- 14. You hit abrick wall.
- 15.
- 16. [ A nobleyak enters from stage left. ]
- 17. Javascript tools • express •node.js • grunt • yeoman • bower • npm
- 20. Wait … Iknow Perl. Perl can serve files.
- 21. 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 ); }
- 22. Easy to growthat simple server… into a full Plack-based application.
- 23. 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
- 24. Probably not appropriatefor production… …but you can't live on just Reese's either.
- 25. It is afun easy way to started. Allows you to learn one new thing without having to learn a dozen new things at the same time.
- 26.
- 27. Photo credits • Allphotos 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
- 28.