Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Swig Service

Avatar for Logan Bell Logan Bell
June 27, 2014
0
130

A Swig Service

Avatar for Logan Bell

Logan Bell

June 27, 2014
Tweet

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Navigating Team Friction
Avatar for Lara Hogan lara
187
15k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
970

Transcript

  1. Templates (as a service)

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

    Work for Shutterstock

  3. Why was the JavaScript developer sad? Because he didn't Node

    how to Express himself

  4. Things to cover • What is Swig.js? • Swig in

    Perl • Swig as a service • Why? • How to? • Questions

  5. What is Swig • Inspired by Django/Twig style templates •

    Written by Paul Armstrong • Written in JavaScript • It’s hip with the kids

  6. Example {% for item in items %} <div class="item">{{ item

    }}</div> {% endfor %} ! <div class="price">{{ price }}</div>

  7. What is Swig • Supports tags • Object Oriented template

    inheritance • express.js compatible • Also works with node.js
 


  8. Webstack • Platform team • Need for unified templates across

    multiple languages • Dancer and Modern Perl • Moving away from Mason

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

  10. Template::Swig • Perl wrapper that compiled JavaScript • JavaScript::V8 •

    Upsides: • Fast • Downsides: • Difficult to upgrade • Difficult to keep custom tags in-line

  11. 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"); });

  12. 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"); });

  13. Rage

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

  15. This is what it looks like Dancer/ Starman Nginx Proxy

    Dancer/ Starman Swig Service
 Worker Swig Service Worker Cluster Manager

  16. WebService::SwigClient • Uses WWW::Curl under the hood • Meant to

    be fast, caches connection
 


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

  18. We also need the service git clone [email protected]:shutterstock/a-swig-service.git ! npm

    install ! bin/run-swig —port=8999 --templates=./templates

  19. Let’s learn to dance

  20. Dancer::Plugin::Swig • Wrapper around WebService::SwigClient • Easy to setup and

    get started with


  21. How to use it • Setup a dancer application:
 perl

    -a Dancer MySwig::App
 • Install the swig module:
 cpanm Dancer::Plugin::Swig

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

  23. Route File package NewApp; use Dancer ':syntax'; use Dancer::Plugin::Swig; !

    our $VERSION = '0.1'; ! get '/' => sub { render 'index.html', { hello_world => 'howdy' }; }; ! true;

  24. Route File package NewApp; use Dancer ':syntax'; use Dancer::Plugin::Swig; !

    our $VERSION = '0.1'; ! get '/' => sub { render 'index.html', { hello_world => 'howdy' }; }; ! true;

  25. The Template File <html> <head> <title>Hi</title> </head> <body> <span>{{ hello_world

    }}</span> </body> </html>

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

  27. Try it open http://my.dancer.application.com/ <html> <head> <title>Hi</title> </head> <body> <span>howdy</span>

    </body> </html>

  28. 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)

  29. i18n tag {% i18n TAG_NAME %} Default {% eni18n %}

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

  30. The Template File <html> <head> <title>Hi</title> </head> <body> <span>
 {%

    i18n hello_world %}Not found{% endi18n %}
 </span>
 </body> </html>

  31. 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;

  32. Translation File { "HELLO_WORLD": { "en": "howdy", "es": "hola mundo",

    "fr": "bonjour tout le monde" } }

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

    =./translations.json

  34. Try it open http://my.dancer.application.com/ <html> <head> <title>Hi</title> </head> <body> <span>hola

    mundo</span> </body> </html>

  35. Heavy Load, No Problem ! bin/run-swig —port=[port] \ —templates=./templates \


    —translations =./translations.json \ —workers = 2

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

  37. Other Interesting Features • ruby/sinatra client • it’s faster than

    Mason 1

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

  39. 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/

  40. Questions