the peanut butter cup of web-dev: plack and single page web apps

of 28 /28
The peanut butter cup of web-dev: Plack & single page web apps @genehack 03 May 2014 DCBPW v3.0

Upload: john-anderson

Post on 12-Jul-2015

135 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: 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

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

John SJ Anderson@genehack

Director of Technology!Infinity Interactive

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

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

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

…many options

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

Angular.js• Client-side MVC Javascript framework

• Developed at Google

• "HTML enhanced"

• Great for "single page" web apps

Page 6: The Peanut Butter Cup of Web-dev: Plack and 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>

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

<!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

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

<!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

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

<!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)

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

<!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

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

Ill-advised live demo time!

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

So, it's…

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

But then…

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

You hit a brick wall.

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

You need a server.

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

[ A noble yak enters from stage left. ]

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

Javascript tools• express

• node.js

• grunt

• yeoman

• bower

• npm

Page 18: The Peanut Butter Cup of Web-dev: Plack and single page web apps
Page 19: The Peanut Butter Cup of Web-dev: Plack and single page web apps
Page 20: The Peanut Butter Cup of Web-dev: Plack and single page web apps

Wait … I know Perl.

Perl can serve files.

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

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 ); }

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

Easy to grow that simple server…

into a full Plack-based application.

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

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

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

Probably not appropriate for production…

…but you can't live on just Reese's either.

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

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.

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

XAnti-yak pattern

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

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

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

Thanks! Questions?