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

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

Post on 12-Jul-2015

96 views

Category:

Internet

1 download

Embed Size (px)

TRANSCRIPT

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

    Two Way Data Binding Demo

    function demoCtrl ($scope) {

    $scope.demoValue = "foo"

    }

    {{demoValue}}

  • Two Way Data Binding Demo

    function demoCtrl ($scope) {

    $scope.demoValue = "foo"

    }

    {{demoValue}}

    Easy to get started with Angular

    Load angular library

  • Two Way Data Binding Demo

    function demoCtrl ($scope) {

    $scope.demoValue = "foo"

    }

    {{demoValue}}

    Easy to get started with Angular

    Bootstrap Angular

  • Two Way Data Binding Demo

    function demoCtrl ($scope) {

    $scope.demoValue = "foo"

    }

    {{demoValue}}

    Easy to get started with Angular

    Tie this to this

    chunk of controller code

    (which means

    'demoValue' is available)

  • Two Way Data Binding Demo

    function demoCtrl ($scope) {

    $scope.demoValue = "foo"

    }

    {{demoValue}}

    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 files.

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

  • 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

    Prototype your backend API (using OX or Dancer)

    Possible to merge "typical" JS app layout and "typical" Perl module layout without conflicts

  • 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.

  • XAnti-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?