The Peanut Butter Cup of Web-dev: Plack and single page web apps
•
0 likes•545 views
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
What's hot
What's hot (20)
Similar to The Peanut Butter Cup of Web-dev: Plack and single page web apps
Similar to The Peanut Butter Cup of Web-dev: Plack and single page web apps (20)
More from John Anderson
More from John Anderson (20)
Recently uploaded
Recently uploaded (11)
The Peanut Butter Cup of Web-dev: Plack and single page web apps
- 1. The peanut butter cup of web-dev: Plack & single page web apps @genehack ≈ 03 May 2014 ≈ DCBPW v3.0
- 2. John SJ Anderson @genehack Director of 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
- 5. Angular.js • Client-side MVC Javascript framework • Developed at Google • "HTML enhanced" • Great for "single page" web apps
- 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. <!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. <!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. <!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. <!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
- 12. So, it's…
- 13. But then…
- 14. You hit a brick wall.
- 16. [ A noble yak enters from stage left. ]
- 17. Javascript tools • express • node.js • grunt • yeoman • bower • npm
- 20. Wait … I know 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 grow that 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 appropriate for production… …but you can't live on just Reese's either.
- 25. 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.
- 27. 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