ExamplesTemplatesStorePricingDocsTurbo CSSBlogNamed bucketsTurbo CSS is Tailwind CSS on steroidsIntroducing Turbo CSS, the most advanced web-design languageCalculate how much storage you useBetter login systemCollaboration settingsFilesystem and Database are not cutting the problem space rightWhat I'm working on64bit File node IDsNew how-to videosCreating buttons gets easierIntroducing reusable componentsHTTPS by defaultIntroducing the Boomla ThemeCDN for faster pageloadsWrite your own website builder on top of BoomlaOn On compositionShared admin accessA fresh config editorBuilding a multi-purpose themeA filesystem to replace your CMSNew file link type: scopeMobile editing supportInline file wrapping changedPackage sandboxingNew PHP-like JavaScript engine [sjs-4e]Send emails to the website ownerNew JavaScript engine [sjs-4]A better editing experienceNew email service providerGlossary and other changesNew panel changesImproved registration flowBoomla goes multiplayerUsing local dev toolsWhy Boomla doesn't need GitFile PanelLet's build a communityAutomatic updatesImproved sjs-3 APINew FrontendCSS modulesWork offline with BoomlaFaster page loads via cachingDrag & drop superchargedSupporting CommonJS modulesĀ Paranoid about loosing dataIDE usability improvementsSimple App install flowMeetups in BudapestGoodbye broken linksFlow control from user spaceCustomizing appsContextmenu support for appsDeprecating the .Class fileHello ChangelogEmbedding 3rd party pluginsIntroducing ToolsInstalling apps just got amazingPublic betaHost on our serversSimple deploy with push/pullVersion Control for the Web350M files on a 1TB disk2 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,

ps: follow me on Twitter