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

Compiling JavaScript on Serverside With Scala and ScalaJS

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.

Future of Internet

If we try to look into the future of internet, I think we see two strong forces: Market and AI.

How will they alter the internet we use today?

• Market want to extract most of its users and want to create webpages which are fully personalized in an effort to guide the users to their goals. Sites are personlizing the pages by user settings but why shouldn't all content including color and shape be adopted to the user in a effort to please the user as much as possible? 
• AI and ML is on the uprising and if the server is thinking for itself it could create whatever as a response.

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

Risks

There are some traps though 

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

Scala Stack

I've made three implementations using Google Flexible Environment. 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. 

http://aimmoth.blogspot.se/2016/07/scala-stack-with-google-flexible.html

Map of Scala Stack

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-jetty 

Moi

I discovered C and JavaScript in school 98-99 and have coded since.

As an individual the first problem is to be creative within the little time that is left of work and social life. Keeping goals through discipline and understand how to be efficient was fundamental. 2012 I discovered Google App Engine and within a single JSP-file kept HTML, CSS, JavaScript and Java with a database connection, I was hooked! This was all I needed to create a site. The PaaS handled publication, dashboard, configuration of services, hosting, logging and have a big library of API for the basic operation, which meant I could spend time on coding.

Mixing code with a subject are my main interests and when creating my first sites I understood that it's impossible to create content driven sites by myself. The solution was to give the users tools to modify the site as they witched and, as a community, create the site they wanted in a democratic way.

LinkedIn for Carl Emmoth

Javascript monad Maybe with Monet

The Monad Maybe

Maybe aka option or optional is very useful for preventing null. Using the Javascript library Monet it's quite easy to use this monad.

Preventing null

You have a variable but don't know if it's null. With Maybe, you wrap it and test if it is "some".

Transform or map

Monads are also useful to transform a value to another. Think of this example:

Each step is instancing a variable and making a "halt". With a monad, you can "go with the flow" and do it all in one step:

Sample

https://jsfiddle.net/yapdd5xv/15/

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

Dynamic and facade implementation of Google Endpoints with Scala JS

Google Endpoints generates Javascript that mirrors all REST calls to backend. With Scala JS, these scripts can be used in two different ways: dynamic or facade.

Dynamic

This is the easiest solution. If you know the names and the parameters to backend I would recomend this approch. All you need to do is to type vars and defs to js.Dynamic and then use them just as Javascript. Example of loading your API:

listApiAsDynamic = EndpointsFacade.gapi.client("list").listApi

And to use a method with csv as parameter:

listApiAsDynamic.post(literal(csv = validatedText))

"literal(csv = validatedText)" is like Javascript "{csv : validatedText}"

Facade

This is approch needs more work since you need to mirror the Javascript generated by Google Endpoints, but will give you types and the structure of the Javascript.

Example of loading your API:

listApi = EndpointsFacade.gapi.client.list.listApi

This works since you have defined the API in a facade like in this example:

https://github.com/AIMMOTH/endpoints-objectify-oauth2-scala-scalajs-angular/blob/master/src/main/scalajs/io/cenet/endpoints/EndpointsFacade.scala

You know which functions are available since you have made a complete facade. Example:

https://github.com/AIMMOTH/endpoints-objectify-oauth2-scala-scalajs-angular/blob/master/src/main/scalajs/io/cenet/endpoints/ListFacade.scala

And therefore it's easy make a call with types:

listApi.get(IdRequest(input.toLong))

Scala JS with Angular and Google Endpoints

Finally done with a simple implementation with Scala JS of Angular and Google Endpoints.

Scala

All backend and frontend is done in Scala with shared logic. Made a simple validation of input which is used in frontend when trying to post, and in backend when it receives.

Google Endpoints

A Javascript is generated which mirrors all exposed methods. This is then used by Scala JS to make all requests to backend.

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/

Scala JS Target Folder

Scala JS: Set Target Folder for JavaScript Build

Recently I've been interested in  Scala JS. It would be great to share logic on client and server side and to write all code in Scala. But SBT can be a bit tricky and my project setup was divided into two:

1. One webapp with a Java web container
2. Scala JS with logic shared between frontend and backend

To get SBT to build the JavaScript from my Scala JS project to my webapp I needed to add the following lines in my root build.sbt file:

val jsDir = "../gae/src/main/webapp"

crossTarget in (Compile, fastOptJS) := file(jsDir)

Project combining Scala JS and Java web container

You can check out my project which uses this build at

https://github.com/AIMMOTH/gae-scala-jersey-scalajs

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