WebPerl
Welcome to WebPerl!
欲しかったやつ！！javascriptをperlで置き換えられる。
WebPerl uses the power of WebAssembly and Emscripten to let you run Perl 5 in the browser! WebPerl does not translate your Perl code to JavaScript, instead, it is a port of the perl binary to WebAssembly, so that you have the full power of Perl at your disposal!
WebPerlは、WebAssemblyとEmscriptenの機能を使って、Perl 5をブラウザで実行できるようにします。WebPerlはあなたのPerlコードをJavaScriptに変換するのではなく、WebAssemblyへのperlバイナリのポートですので、自由にPerlの能力をフルに活用できます！ →Run Perl in your browser with WebPerl (Webassembly) - online demo page
[webperl_demo.html]
<!doctype html>
<html lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebPerl <script> Demos</title>
<script src="webperl.js"></script>
<!-- Please see the documentation at http://webperl.zero-g.net/using.html -->
<!-- Example 1: A really basic script -->
<script type="text/perl">
print "Hello, Perl World!\n";
</script>
<!-- Example 2: Accessing JavaScript -->
<script type="text/perl">
use warnings;
use strict;
use WebPerl qw/js/;
js('document')->getElementById('my_button')
->addEventListener("click", sub {
print "You clicked 'Testing!'\n";
} );
</script>
<!-- Example 3: Using jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/perl">
use warnings;
use strict;
use WebPerl qw/js/;
my $jq = js('jQuery');
my $btn = $jq->('<button>', { text=>"Click me!" } );
$btn->click(sub {
print "You clicked the jQuery button!\n";
} );
$btn->appendTo( $jq->('#buttons') );
# And a demo of AJAX using jQuery:
use Cpanel::JSON::XS qw/encode_json/;
use Data::Dumper;
my $data_out = { hello => "Hello, World!\n" };
$jq->ajax( '/ajaxtest', {
method => 'POST', # we're sending JSON in the POST body
data => encode_json($data_out),
} )->done( sub {
my $data_in = shift;
print "AJAX Success! Data: ", Dumper($data_in->toperl);
} )->fail( sub {
my ($jqXHR, $textStatus, $errorThrown) = @_;
print "AJAX Failed! ($errorThrown)\n";
} );
</script>
<!-- Optional STDOUT/STDERR text area (if you don't use this, output goes to Javascript console) -->
<script>
window.addEventListener("load", function () {
document.getElementById('output')
.appendChild( Perl.makeOutputTextarea() );
});
</script>
</head>
<body>
<p>This is a demo of <a href="http://webperl.zero-g.net" target="_blank">WebPerl</a>!</p>
<div id="output"></div>
<div id="buttons">
<button id="my_button">Testing!</button>
</div>
</body>
</html>
Perl Advent Calendar 2018
Perl in the Browser
"Busted Presents!", Tinsle Gumdrop complained. "I hate re-writing code."
It was Tinsle's job to port a whole bunch of backend validation logic code from their Perl based internet web app to the JavaScript front end so the validation could run client side too.
"I bet those Valentine's cherubs who code in Node don't have this problem", she thought to herself. "At least they can run the same code on the server and in the browser."
If only there was a way to run Perl code within the browser also...
The JavaScript engines in modern web browsers are crazy powerful optimized insanity - even on occasion shipping an entire LLVM compiler to just in time compile the JavaScript code down into native instructions in order to get native performance.
In order to help get this level of performance you can use asm.js - a specialist subset of JavaScript to represent low level operations that the JavaScript engine can easily compile down to native code. Or, if your modern browser supports it (like recent versions of Chrome, Firefox, Safari and IE do) you can skip the JavaScript representation entirely and use a machine independent binary format to describe operations the JavaScript engine should run with WebAssembly.
It's possible to compile C code using Emscripten to produce JavaScript code or WebAssembly that (when further automatically compiled for JIT performance in the browser) will run at near-native speed. Of course, Tinsel doesn't want to run any C based code in the browser - she wants to run Perl code. What you need to run Perl code is perl - the Perl interpreter - which, as luck would have it, is itself a C based program. So using Enscripten we can compile a version of perl that can be used, with a bunch of shims and bridges, to execute Perl code embedded in our HTML source code.
This all sounds like a lot of work - or would be, if Hauke Dämpfling's WebPerl project hadn't done all the hard work for us already. All we need to do to run Perl code is include a single script tag in our HTML linking to a JavaScript file containing the precompiled perl interpreter and suddenly we're able to write Perl code directly in our webpages.
For fun, let's write some code to generate Fibonacci numbers in our browser...in Perl.
<html>
<head>
<script src="https://webperlcdn.zero-g.net/v0.07-beta/webperl.js"
integrity="sha256-jL8SB7St5ou4+hb0frK0k6VCQXsWQ1wolDrdU7i4juc="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
fib(
<input id="in" type="number" min="1" max="49">
) = <span id="out"></span>
<script type="text/perl">
use Memoize qw( memoize );
sub fib {
return 1 if $_[0] <= 2;
return fib($_[0] - 1) + fib($_[0] - 2);
}
memoize('fib');
my $jq = js('jQuery');
$jq->('#in')->on('change', sub {
$jq->('#out')->text(
fib( $jq->('#in')->val )
);
});
</script>
</body>
</html>
Assuming you're reading this article with a recent web browser then this code is entirely runnable directly in the browser.
There's a lot to unpack in this dense example:
原文
- At the very top of the script we load the webperl code from the webperl CDN. We don't even have to host this on our own server.
- Once we've done that we're able to use a special form of the <script> tag to write Perl code in our webpage by using the type="text/perl" attribute.
- We're even able to load core modules from within our embedded Perl code. In the example above we load Memoize to cache the output of the fib function so our code runs efficiently.
- It's possible to run JavaScript within our Perl code using the js(...) function. In the above example we're just evaluating jQuery to get a reference to the jQuery function we can then use to access jQuery within Perl.
- The bridge between Perl and JavaScript is pretty flexible. Here we're executing the jQuery function from within Perl, calling a further method on the result on what it returns, and then we're even passing an anonymous Perl subroutine to jQuery as a callback it should execute whenever the input field changes. Remember, jQuery has no idea that it's being called from and itself is calling Perl code at all!
google 翻訳
- スクリプトの一番上に、webperl CDNからwebperlコードをロードします。私たち自身のサーバーでこれをホストする必要すらありません。
- これが済んだら、type = "text / perl"属性を使うことで、特別な形式の<script>タグを使ってWebページにPerlコードを書くことができます。
- 私たちは埋め込まれたPerlコードの中からコアモジュールをロードすることさえ可能です。上記の例では、コードを効率的に実行するためにMemoizeをロードしてfib関数の出力をキャッシュします。
- js（...）関数を使用して、私たちのPerlコード内でJavaScriptを実行することは可能です。上記の例では、jQueryを評価して、Perl内でjQueryにアクセスするために使用できるjQuery関数への参照を取得しています。
- PerlとJavaScriptの間の橋渡しはかなり柔軟です。ここでは、Perlの内部からjQuery関数を実行し、返された結果のさらなるメソッドを呼び出してから、入力フィールドが変わるたびに実行する必要があるコールバックとして、無名のPerlサブルーチンをjQueryに渡しています。覚えておいて、jQueryはそれがから呼び出されているということを知らないし、それ自体がPerlコードを呼び出しているのだ！
原文
Alls Well That Ends Well
In the end Tinsel was able to copy and paste the more complex logic from the backend Perl code without having to rewrite any of it (and avoiding adding additional logic bugs along the way.)
With the extra time she had saved, she was able to take advantage of another Enscripten project - a compile of Quake 3 to run in the browser.
七角形
perl de canvas
- 無精・短気・傲慢