Compiling JavaScript on Serverside With Scala and ScalaJS using Google Standard App Engine

Compiling JavaScript on Serverside With Scala and ScalaJS using Google Standard App Engine 

Since my experience with the JavaScript world and exploration of ScalaJS I felt compelled to move from Node and Grunt and try to fully utilize Scala for both front and back.

I reached a goal with Scala Stack, a concept of creating all web content on serverside using only Scala code. The concept is extended to keep everything in code including configuration to be fully testable.

Obvious Advantages

My main purpose was to skip the JavaScript world but it moved on to something much larger. If all code is shared there are quite a few advantages

• Single, isomorphic source which ease work and can share logic
• Share data by keeping it in code. For instance languages could be defined with a Enum type
• Fully testable code
• No JavaScript package manager like NPM or WebPack
• No pre processor like Gulp or Grunt
• No SBT since the compilation is with a simple Servlet  

Risks

There are some traps though 

• Security, some code should not be shared between backend and frontend
• Long term effects, demands an experienced architect 
• Shared code needs to be ScalaJS compatible and cannot use backend dependencies since it's compiled and used on frontend

Scala Stack

Map of Scala Stack

I've made three implementations using Google Standard Environment with Java 8. Implemented in native JavaScript, jQuery and AngularJS.

Goal is to keep everything in code and to avoid configuration, annotations and settings in Strings.

By only using Scala on serverside, it produce HTML, CSS and JavaScript which is all components for a webpage. 

Scala Stack with Angular

You find links to code and running example below

• Live demo https://scala-stack-angular.appspot.com
• Github https://github.com/AIMMOTH/scala-stack-angular

Servlet Compiler

Scala Stack is using a Servlet compiler with different logging:

• https://github.com/AIMMOTH/scala-js-compiler
• Jetty https://github.com/AIMMOTH/scalajs-compiler-servlet 

Scala Stack with Google Flexible Environment

Scala Stack with Google Flexible Environment

(this article is not yet completed)
(updated 2016-11-11)

I've created a few Maven projects based on Google Flexible Environment and Scala backend which produces HTML, CSS and JavaScript without any files (.html, .css, .sass, .less, .js) and without any frontend builder like Gulp or Grunt.

Goal

To produce all frontend from Scala backend utilizing shared code and to be fully tested.

Infographic

Scala servlets creates HTML with CSS and JavaScript.

This is a graphic representation of how it works.

• All code is written in Scala
• Code may share
• Resources
• Validation
• Routes
• Logic
• Translations and other data
• Structure of
• HTML
• CSS
• A servlet can read Scala JS source code and compile a JavaScript
• This includes the shared code
• A servlet can build HTML with CSS 
• Other servlets can provide REST API and also use the shared code
• All code can be unit tested and all code can be tested in the same test

This means that the Scala stack covers both frontend and backend.

Code

There is a repository called Scala Stack at Github. There is one branch for jQuery in development and one branch for Angular which is only started:

• https://github.com/AIMMOTH/scala-stack/tree/master (live)*
• https://github.com/AIMMOTH/scala-stack-jquery (live)*
• https://github.com/AIMMOTH/scala-stack-angular  (live)*

*Unfortunately I can't afford Google Compute Engine running 24/7 and was forced to shut them down. If Google Compute Engine would scale from 0 to minimize expense I could start them again.

Examples

I'm currently working on a example using jQuery (in progress) and one using Angular (started).

Note that Scala JS source is placed in webapp, an alternative could be resources

Webapp with HTML, CSS and JavaScript written in Scala

ISO Scala

This is an example of HTML, CSS and JavaScript written in Scala.

Technics

Different parts are written in different ways

• Backend, Scala implementation of a Java Servlet
• HTML and CSS, using ScalaTags to generate HTML in a String
• JavaScript, built with ScalaJS

Two Builds

There are two different builds

1. Backend, using plain Maven to build and setup the project
2. JavaScript, built with SBT and using ScalaJS dependencies

Example

View a whole example at

https://github.com/AIMMOTH/iso-scala

Clickable Swype Canvas by JavaScript and HTML5

Created clickable swype canvas which scrolls window (or IFrame) with plain JavaScript and HTML5. See notes below.

 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Clickable Swype Canvas</title>  
 </head>  
 <body>  
 <script type="text/javascript">  
 var active = false;  
 var startX = 0;  
 var startY = 0;  
 function move(e) {  
     if (active) {  
         var dy = (e.clientY - startY);  
         window.scrollBy(0, dy);  
 //         parent.document.getElementById("frame").contentWindow.scrollBy(0, dy);  
     } else {  
         var px = e.clientX - c.offsetLeft;  
         var py = e.clientY - c.offsetTop;  
         if (px > 100 && px < 200) {  
             document.body.style.cursor = "pointer";  
         } else {  
             document.body.style.cursor = "default";  
         }  
     }  
 }  
 function down(e) {  
     active = true;  
     startX = e.clientX - c.offsetLeft;  
     startY = e.clientY - c.offsetTop;  
     ctx.clearRect(0, 0, 200, 1200);  
     ctx.moveTo(0,0);  
     ctx.lineTo(200, 1200);  
     ctx.stroke();  
     ctx.font="30px Arial";  
 //     var scroll = parent.document.getElementById("frame").contentWindow.document.body.scrollTop;  
     var scroll = window.pageYOffset;  
     ctx.fillText("x" + startX + ", y:" + (startY + scroll), 10, 300);  
 }  
 function up(e) {  
     active = false;  
 }  
 function out(e) {  
     active = false;  
 }  
 </script>  
 <canvas id="c" style="background: yellow;" width="200px" height="1200px" onmousemove="move(event);" onmousedown="down(event);" onmouseup="up(event);" onmouseout="out(event);">  
 </canvas>  
 <script>  
 var c = document.getElementById("c");  
 var ctx = c.getContext("2d");  
 ctx.moveTo(0,0);  
 ctx.lineTo(200, 1200);  
 ctx.stroke();  
 </script>  
 </body>  
 </html>  

Notes:

1. If you want to use IFrame instead, uncomment, remove window.* and create a second page with the IFrame with this one as source. Make sure the id of the IFrame is "frame" or change in this code.
2. You can make a lot of adjustments regarding the swype. I would add a threshold to the delta x and y to prevent "small" scrolls and to improve click stability.
3. The canvas is filled with some debug draw to make it easier to see the scroll and click coordinates. This must be added afterwards the canvas tag (?)
4. Canvas must have width and height, it can't be set in CSS style.
5. The cursor pointer is changed at some coordinates to demonstrate canvas interaction. Just change the coordinates to some area and make it a link for example (document.location.href="www.google.com";)