Examples Templates Store Pricing Docs Turbo CSS Blog Boomla WishList Introducing Turbo UI Named buckets Turbo CSS is Tailwind CSS on steroids Introducing Turbo CSS, the most advanced web-design language Calculate how much storage you use Better login system Collaboration settings Filesystem and Database are not cutting the problem space right What I'm working on 64bit File node IDs New how-to videos Creating buttons gets easier Introducing reusable components HTTPS by default Introducing the Boomla Theme CDN for faster pageloads Write your own website builder on top of Boomla On On composition Shared admin access A fresh config editor Building a multi-purpose theme A filesystem to replace your CMS New file link type: scope Mobile editing support Inline file wrapping changed Package sandboxing New PHP-like JavaScript engine [sjs-4e] Send emails to the website owner New JavaScript engine [sjs-4] A better editing experience New email service provider Glossary and other changes New panel changes Improved registration flow Boomla goes multiplayer Using local dev tools Why Boomla doesn't need Git File Panel Let's build a community Automatic updates Improved sjs-3 API New Frontend CSS modules Work offline with Boomla Faster page loads via caching Drag & drop supercharged Supporting CommonJS modulesĀ  Paranoid about loosing data IDE usability improvements Simple App install flow Meetups in Budapest Goodbye broken links Flow control from user space Customizing apps Contextmenu support for apps Deprecating the .Class file Hello Changelog Embedding 3rd party plugins Introducing Tools Installing apps just got amazing Public beta Host on our servers Simple deploy with push/pull Version Control for the Web 350M files on a 1TB disk 2 weeks in review
Control Panel

New PHP-like JavaScript engine sjs-4e

2019-07-23

Writing HTML in JavaScript (ECMAScript v5.1) is not very pleasant.

Here is a typical sjs-4 code example:

var p = '';
 
p += '<div>';
    p += 'Hello from: <b>'+util.htmlEncode(f.title())+'</b>';
p += '</div>';
 
response.body(p);

It works, but it is ugly, especially if you throw even more HTML into the code. It would be so much nicer to embed the JS code into HTML, instead of the other way around.

This is precisely what the sjs-4e engine allows you to do. It is a dialect of the sjs-4 engine. Before executing sjs-4e code, it will be transpiled to sjs-4. Thus, you can use the same JavaScript API in both engines.

Here is the same code as above written in sjs-4e:

<div>
    Hello from: <b><?= f.title() ?></b>
</div>

Syntax

There are only a couple of syntax elements to be aware of:

  • Embed JS code: <? ... ?>,

  • escape and print the value of foo: <?= foo ?>,

  • print the value of foo (unescaped raw html): <?== foo ?>,

  • print to the output buffer within JS code blocks: print().

Docs

You can find more info and example code snippets in the sjs-4e docs.


Cheers,

you can follow me on Twitter