Tweet
Tweet

Slide 1

Slide 1 text

Templates (as a service)

Slide 2

Slide 2 text

Who Am I? Logan Bell twitter: @epochbell IRC: logie https://metacpan.org/author/LOGIE Work for Shutterstock

Slide 3

Slide 3 text

Why was the JavaScript developer sad? Because he didn't Node how to Express himself

Slide 4

Slide 4 text

Things to cover • What is Swig.js? • Swig in Perl • Swig as a service • Why? • How to? • Questions

Slide 5

Slide 5 text

What is Swig • Inspired by Django/Twig style templates • Written by Paul Armstrong • Written in JavaScript • It’s hip with the kids

Slide 6

Slide 6 text

Example {% for item in items %}
{{ item }}
{% endfor %} !
{{ price }}

Slide 7

Slide 7 text

What is Swig • Supports tags • Object Oriented template inheritance • express.js compatible • Also works with node.js
 


Slide 8

Slide 8 text

Webstack • Platform team • Need for unified templates across multiple languages • Dancer and Modern Perl • Moving away from Mason

Slide 9

Slide 9 text

Perl and JavaScript • Javascript templates and Perl backend? • But we want to use Dancer • But we want to share Templates • We also want to use Swig

Slide 10

Slide 10 text

Template::Swig • Perl wrapper that compiled JavaScript • JavaScript::V8 • Upsides: • Fast • Downsides: • Difficult to upgrade • Difficult to keep custom tags in-line

Slide 11

Slide 11 text

JavaScript::V8 use JavaScript::V8; my $context = JavaScript::V8::Context->new; $context->bind_function(yo => sub { print @_ }); $context->eval(q{ // This is javascript
 yo(“word up"); });

Slide 12

Slide 12 text

JavaScript::V8 use JavaScript::V8; my $context = JavaScript::V8::Context->new; $context->bind_function(yo => sub { print @_ }); $context->eval(q{ // This is javascript
 yo(“word up"); });

Slide 13

Slide 13 text

Rage

Slide 14

Slide 14 text

Let’s make it a service! • We’ll use node.js • Build it with express.js • We can use i18n • Perl/Ruby/Php can 
 share templates!

Slide 15

Slide 15 text

This is what it looks like Dancer/ Starman Nginx Proxy Dancer/ Starman Swig Service
 Worker Swig Service Worker Cluster Manager

Slide 16

Slide 16 text

WebService::SwigClient • Uses WWW::Curl under the hood • Meant to be fast, caches connection
 


Slide 17

Slide 17 text

WebService::SwigClient use WebService::SwigClient; my $client = WebService::SwigClient->new( service_url => http://localhost:8999, error_handler => sub { my ($error, $curl_object) = @_; warn $error; }, ); $client->render('foo.html', { param => 1, param => 2});

Slide 18

Slide 18 text

We also need the service git clone [email protected]:shutterstock/a-swig-service.git ! npm install ! bin/run-swig —port=8999 --templates=./templates

Slide 19

Slide 19 text

Let’s learn to dance

Slide 20

Slide 20 text

Dancer::Plugin::Swig • Wrapper around WebService::SwigClient • Easy to setup and get started with


Slide 21

Slide 21 text

How to use it • Setup a dancer application:
 perl -a Dancer MySwig::App
 • Install the swig module:
 cpanm Dancer::Plugin::Swig

Slide 22

Slide 22 text

The Config plugins: Swig: service_url: "http://localhost:8999"

Slide 23

Slide 23 text

Route File package NewApp; use Dancer ':syntax'; use Dancer::Plugin::Swig; ! our $VERSION = '0.1'; ! get '/' => sub { render 'index.html', { hello_world => 'howdy' }; }; ! true;

Slide 24

Slide 24 text

Route File package NewApp; use Dancer ':syntax'; use Dancer::Plugin::Swig; ! our $VERSION = '0.1'; ! get '/' => sub { render 'index.html', { hello_world => 'howdy' }; }; ! true;

Slide 25

Slide 25 text

The Template File Hi {{ hello_world }}

Slide 26

Slide 26 text

Run the service ! bin/run-swig —port=8999 --templates=./templates

Slide 27

Slide 27 text

Try it open http://my.dancer.application.com/ Hi howdy

Slide 28

Slide 28 text

Basic i18n support • Built in swig tag {% i18n %} • Can watch for a translation file and load it appropriately • Uses a npm module yacm 
 (yet another cluster manger)

Slide 29

Slide 29 text

i18n tag {% i18n TAG_NAME %} Default {% eni18n %} {% i18n TAG_NAME key:value %} 
 Default key
 {% end18n %}

Slide 30

Slide 30 text

The Template File Hi 
 {% i18n hello_world %}Not found{% endi18n %}
 


Slide 31

Slide 31 text

Route File package NewApp; use Dancer ':syntax'; use Dancer::Plugin::Swig; ! our $VERSION = '0.1'; ! get '/' => sub { render 'index.html', { 
 i18n => { language => ‘es’ }, hello_world => ‘HELLO_WORLD' }; }; true;

Slide 32

Slide 32 text

Translation File { "HELLO_WORLD": { "en": "howdy", "es": "hola mundo", "fr": "bonjour tout le monde" } }

Slide 33

Slide 33 text

Run the service ! bin/run-swig —port=[port] \ —templates=./templates \
 —translations =./translations.json

Slide 34

Slide 34 text

Try it open http://my.dancer.application.com/ Hi hola mundo

Slide 35

Slide 35 text

Heavy Load, No Problem ! bin/run-swig —port=[port] \ —templates=./templates \
 —translations =./translations.json \ —workers = 2

Slide 36

Slide 36 text

Workers • Using node clusters, which create network processes that share the same port. • We use yacm to manage our workers. • Watches for changes in files and reloads into memory

Slide 37

Slide 37 text

Other Interesting Features • ruby/sinatra client • it’s faster than Mason 1

Slide 38

Slide 38 text

Where to learn more • https://github.com/shutterstock/a-swig-service • https://metacpan.org/pod/ WebService::SwigClient • https://metacpan.org/pod/release/LOGIE/ Dancer-Plugin-Swig-0.02/README.pod

Slide 39

Slide 39 text

Thank You! • Shutterstock: For both employment and the images for this talk • Webstack Team: Nikolay, Vishal, Adam, Kevin, and Belden • My wife and two girls: Amy, Chloe and Kassidy! Love all of ya! • The site where I stole my joke: 
 http://www.elijahmanor.com/front-end-web-dev-jokes/

Slide 40

Slide 40 text

Questions