Bind from parent component to child (AngularJS)

Bind from Parent Component to Child

Simple example of how to one-way bind from parent component to child. The child component will be able to use the parent's data.

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 

Simple AngularJS Binding With Nested Components

Simple AngularJS Binding With Nested Components

This is a simple example of binding between two nested components.

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

Infographic of Google Endpoints in both Scala and Scala JS

I'm no expert in infographics, but I'd tried to show how Google Endpoints is implemented in Scala and Scala JS.

Map

So there are three different languages:

1. Scala
2. Javascript
3. HTML

Google Endpoints

When this is implemented in Scala on backend, it will generate Javascript. HTML needs to load the script and call a Javascript function when loaded.

Scala JS

Written in Scala, Scala JS will generate Javascript. When the Google Endpoints script is loaded, it will callback to Scala JS's script which will created either dynamic or facade representations of it.

Shared

Since Google Endpoints is implemented in Scala and frontend Javascripts in Scala JS, it's easy to share common logic with Scala code.

Code Example

A simple implementation can be found here:

https://github.com/AIMMOTH/endpoints-objectify-oauth2-scala-scalajs-angular

Google Endpoints + Objectify

Created a small project combining Google Endpoints with Objectify. Added page with a simple JavaScript introduction.

https://github.com/AIMMOTH/endpoints-objectify-fabric

Fabric

There is a small sample for creating some data and getting it.

Creating

As a sample, it's possible to create three different entities

• EntityId, with POST, creates a new id
• EntityData, with POST
• EntityPrimitives, with POST

When posting an EntityId, the response will be its new id.
When posting an EntityData or EntityPrimitives, use the same id as EntityId.

Fetching

To get each type, there's a GET path like

/entityid/123

/entitydata/123

To get the EntityId and all children with the same id, it's possible to use

/entityid/123/entitydata+entityprimitives/

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";)