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

A Swig Service

Logan Bell
June 27, 2014
0
66

A Swig Service

Logan Bell

June 27, 2014
Tweet

Featured

See All Featured
Bootstrapping a Software Product
garrettdimon
297
110k
What's new in Ruby 2.0
geeforr
335
30k
Building Your Own Lightsaber
phodgson
96
4.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.4k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
A Tale of Four Properties
chriscoyier
149
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.2k
Infographics Made Easy
chrislema
234
17k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.4k

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 git@github.com: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