introduction to scala js

Deepak Mehra Trainee Software Consultant Knoldus Software LLP

ScalaJS

Agenda

Why JavaScript?

Introduction to Scala

What is Scala.js and Why?

Let's code

Why JavaScript

There are many programming languages out there. Why should you use JavaScript?

It is an elegant programming language

It is fast enough for what you want to do

It is widely used

It is freely available

Why javascript, why we are bothering to do javascript. beacuse as you know its typical to do web development without javascript.
ITs the only language, that's basically supported web browser.
So at some point you need javascript code.
ITs scripting language, not designed to scale large rich web application

Languages that compile to JS

Typescript compilers that compiles in javascript and add some new features such as type annotations, classes and interfaces.CoffeeScript, Dart

Coffee script is very popular and targets javascript. One of the main reason of its popularity to get rid of javascript c like syntax, because some people apparently dislike curly braces and semicolon very much. CoffeeScript is inspired by Ruby, Python and Haskell. Google created Dart as a replacement of Dart. They are hoping that one day they will replace javascript.

Parenscript, Emscripten, JSIL, GWT. Js.scala

What is Scala

A Scalable language

Scala is an acronym for Scalable Language. This means that Scala grows with you. Scala is a pure-bred object-oriented language. Conceptually, every value is an object and every operation is a method-call. The language supports advanced component architectures through classes and traits.

Scala- an acronym for Scalable Language. a careful integration of object-oriented and functional language concepts.Scala runs on the JVM..scala.js supports all of scala language so it can compile entire scala standard library.

Scala.js

Compiles Scala code to JavaScript

Introduced during the 4th Scala
Days in June 2013

No need to sacrifice
JavaScript interoperability

compiles Scala code to JavaScript,

allowing you to write your web application entirely in Scala!.

Scala.js compiles full-fledged Scala code down to JavaScript, which can be integrated in your Web application. It provides very good interoperability with JavaScript code, both from Scala.js to JavaScript and vice versa. E.g., use jQuery and HTML5 from your Scala.js code.

Since scala as a language and also its library rely on java standard library, so it is impossible to support all of scala without supporting some of java. hence scala.js includes partial part of java standard library , written in scala itself

If you are developing rich internet application in scala and you are using all goodness of scala but you are sacrificing javascript interoperability, then you can use scala.js , a scala to javascript compiler. So that you can build entire web application in scala. A javascript backend for scala

Why Scala.js

Scala.js no longer experimental.

More than a compiler, an entire ecosystem.

Strong typing, including for JavaScript libraries.The Scala Standard library

Great community, welcoming to new users and helpful

Now-a days interoperability between statically typed and dynamically typed is getting demanded day by day that's why many statically typed languages are targeting javascript.statically typed means, when a type of variable is known at compile time. In dynamically typed means, when a type of variable is interpreted at run time.

interoperability with object oriented and functional features of javascript is essential but existing language has poor support for this. But scala.js interoperatibility system is based on powerful for type-directed interoperability with dynamically typed languages. It accommodates both the functional and object oriented features of scala and provides very natural interoperability with both language.It is expressive enough to represnt Dom, jquery in its statically and dynamically typed language. Scala has a very powerful type system with unique combination of features:traits, genrics, implicit conversion, higher order function and user defined dynamic type. As a functional and object-orientedlanguage, its concepts are also very close to JavaScript, behind thetype system: no static methods

Features of Scala.js

Interoperability

Scala.js loves JavaScript libraries, including React and AngularJS. You can use any JavaScript library right from your Scala.js code, either in a statically or dynamically typed way. You won't even notice you're crossing a language border!

its a tool for making javascript download and run faster. its a true compiler for javascript. instead of compiling form source code to javascript, it compiles javascript to better javascript. it parses your javascript, anlyze it, optimize code , remove dead code. it also checks syntax, variable reference.


Performance

Scala.js optimizes your Scala code into highly efficient JavaScript. Incremental compilation guarantees speedy (1-2s) turn-around times when your code changes. The generated JavaScript is both fast and small, starting from 45kB gzipped for a full application.



Correctness

Strong typing guarantees your code is free of silly mistakes; no more mixing up strings or numbers, forgetting what keys an object has, or worrying about typos in your method names. Scala.js takes care of all this tedious book-keeping for you, letting you focus on the actual, more interesting problem your application is trying to solve.


Semantics Differences

Numbers and characters

Floats may behave like Doubles

Integer division by 0 is undefined

isInstanceOf tests are based on value

toString for integral Floats and Doubles

Continued..

Number and characters have same semantices on JVM except 4 exception

Since JavaScript doesn't have a native float type, we sometimes represent Floats using doubles/numbers, rather than with lower-precision 32-bit floats

Unlike the JVM where dividing an integer type by 0 throws an exception, in Scala.js integer division by 0 is undefined.

Instance tests (and consequently pattern matching) on any of Byte, Short, Int, Float, Double are based on the value and not the type they were created with.
Calling toString on a Float or a Double that holds an integral value, will not append ".0" to that value. This is due to how numeric values are represented at runtime in Scala.js

Unit

Exceptions

Regular expressions

Semantics Differences

toString() on Unit will return undefined rather than ().

Implemented on the top of JavaScript regexes.

ArrayIndexOutOfBoundsException is never thrown.
NullPointerException is reported as TypeError.
StackOverFlowError is unsupported.

scala.Unit is represented using JavaScript's undefined. Therefore, calling toString() on Unit will returnundefined rather than ().

JavaScript regular expressions are slightly different from Java regular expressions. The support for regular expressions in Scala.js is implemented on top of JavaScript regexes.

Calling JavaScript from Scala.js

Primitive Scala.js types

Continued..

When writing an application with Scala.js, it is expected that the main application logic be written in Scala.js, and that existing JavaScript libraries are leveraged. Calling JavaScript from Scala.js is therefore the most important direction of interoperability.

Because JavaScript is dynamically typed, it is possible to call JS libraries in a dynamically typed way. However, it is also possible to interop with static types, for better leveraging of Scala.

The package scala.scalajs.js (code on GitHub) contains static type definitions for all the types,

hese types have all the fields and methods available in the JavaScript API.

Calling JavaScript from Scala.js

Literal object construction

Scala.js

JavaScript

Continued..

Scala.js provides two syntaxes for creating JavaScript objects in a literal way.

Export Scala.js APIs to JavaScript

By default, Scala.js classes, objects, methods and properties are not available to JavaScript. Entities that have to be accessed from JavaScript must be annotated explicitly as exported. The @JSExport annotation is the main way to do this.

Optimization

Optimizing

Fast-Optimize Full-Optimize

Optimizing

Fast-Optimize

The resulting file in the target folder will have the suffix -fastopt.js.

You can disable the optimization.

This will perform fast Scala.js-specific optimizations and write the resulting code to a single JavaScript file. You can now use this JavaScript file in your HTML page or in whatever way you like. The resulting file in the target folder will have the suffix -fastopt.js.

This is for development purpose.

Optimizing

Full-Optimize

The resulting file in the target folder will have the suffix -opt.js.

To make the resulting JavaScript even smaller (and usually faster as well), the sbt plugin integrates the Google Closure Compiler under the so-called full-optimizations.
This will call the Google Closure Compiler on the result of the fast-optimizations stage. Note that this can take a while and is therefore not recommended in the development cycle. The resulting file in the target folder will have the suffix -opt.js.

This is for production

Optimizing

Fast-Optimize

The resulting file in the target folder will have the suffix -fastopt.js.

You can disable the optimization.

This will perform fast Scala.js-specific optimizations and write the resulting code to a single JavaScript file. You can now use this JavaScript file in your HTML page or in whatever way you like. The resulting file in the target folder will have the suffix -fastopt.js.

This is for development purpose.

Launcher

The resulting file in the target folder will have the suffix -launcher.js.

Used to run main class.

If you want the code which is used to run the main class to be written to a file, you can set ScalaJSKeys.persistLauncher := true. Note that this will require your main class to be either unique or explicitly set (mainClass := Some()). The resulting file in the target folder will have the suffix -launcher.js.

References

http://www.scala-js.org/http://speakingjs.com/es5/ch02.htmlhttp://www.scala-lang.orghttp://stackoverflow.com/questions/tagged/scala.jshttp://www.parleys.com/play/53a7d2cbe4b0543940d9e555http://www.parleys.com/play/51c380bfe4b0ed8770356866

Piyush Mishra