Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Isomorphic programming in Scala
and WebDevelopment in Scala.JS
Alberto Maria Angelo Paro
CODEMOTION MILAN - SPECIAL EDITIO...
Alberto Paro
 Master Degree in Computer Science Engineering at Politecnico di
Milano
 Author of 3 books about ElasticSea...
Who it’s using Scala
Isomorphic Scala
one language => many target
Scala is a language that is:
• Multi-paradigm
• Strong-typed
• Functional
• O...
Javascript issues
A lot of language “defects”:
 Easy to forget var
It’s born a script language, not designed to scale lar...
What’s Scala.JS
"Scala.js is a compiler that converts Scala code into the equivalent,
executable Javascript”
Write Scala, ...
Scala.js Compiler Pipeline
Main.class
Main$.class
Main.Scala
Main.sjsir
Main$.sjsir
script- fastopt.js
500k - 3000Kb
scrip...
On developing Web Apps
No code reuse between client and server
• A least you must learn two languages (Scala + JS)
• Algor...
On dev. Web Apps with ScalaJS
Application in only one language
 and the language is Scala
Strong typing in the applicatio...
Some Semantic differences from JS
Javascript VM != Java VM
 Division by 0 doesn’t throw exception
 Checking the type of ...
name := "Foo root project”
lazy val root = project.in(file(".")).
aggregate(fooJS, fooJVM).
settings(publish := {},
publis...
Libraries
When using REST in themes, my code can break due to:
 Model changes:
• Who removed a field from …?
• Who renamed the fiel...
Type safe RPC between client and server
API trait in shared code
Server code implement the backend code
Client calls in a ...
https://github.com/lihaoyi/scalatags
libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.6.7”
ScalaTags is a small X...
Strong Typed HTML Syntax for JVM/JS
html(
head(
script(src:="..."),
script(
"alert('Hello World')"
)
),
body(
div(
h1(id:=...
https://github.com/greencatsoft/scalajs-angular
libraryDependencies += "com.greencatsoft" %%% "scalajs-angular" % "0.7”
“s...
It provides annotation helper for AngularJS Services, Controllers, Directives, and Filters.
It wraps ngRoute for routing i...
I love ReactJS because:
 Your code is clear. It is arranged into components, each with its own defined
responsibility. (W...
I love ScalaJS ReactJS because:
• It composed by simple concepts:
• Properties (Props) are immutable
• State is mutable
• ...
Scala
https://github.com/japgolly/scalajs-react
http://japgolly.github.io/scalajs-react/
ScalaJS React provide also many e...
Scala
https://github.com/japgolly/scalacss
http://japgolly.github.io/scalacss/book/
ScalaCSS aims to bring type-safety and...
Links
Scala
A lot of libraries are linked in Scala.js Homepage (http://www.scala-js.org/)
For a complete projects, the best reso...
Questions
Thank You Alberto Paro
alberto.paro@gmail.com
@aparo77We are hiring (IT, GB, SG)!
Tip & Tricks
To manage the javascript library, Scala needs the code signature of the Javascript methods.
First search on scala.js site ...
“Automatically” bootstrap your façade from a typescript definition
(https://github.com/borisyankov/DefinitelyTyped): ~900 ...
Upcoming SlideShare
Loading in …5
×

Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopment in Scala.JS - Codemotion Milan 2017

Scala is the only language that can be used to produce code that can be "trans/compiled" for the JVM, in Javascript and in native binary. This allows to write libraries that are usable in JVM and JS using the power of functional programming (i.e. cats, scalaz), generic programming (i.e. shapeless) and macro/scalameta available in Scala. In this talk, we will see how to write a Scala application backend and a SPA (scala.js/scala-js-react) that share the same code as a business logic, datamodels and transparent API call (JVM/JS) in Scala (via autowire/akka-http/circe).

  • Be the first to comment

  • Be the first to like this

Alberto Maria Angelo Paro - Isomorphic programming in Scala and WebDevelopment in Scala.JS - Codemotion Milan 2017

  1. 1. Isomorphic programming in Scala and WebDevelopment in Scala.JS Alberto Maria Angelo Paro CODEMOTION MILAN - SPECIAL EDITION 10 – 11 NOVEMBER 2017
  2. 2. Alberto Paro  Master Degree in Computer Science Engineering at Politecnico di Milano  Author of 3 books about ElasticSearch from 1 to 5.x + 6 Tech reviews  Big Data Trainer, Developer and Consulting on Big data Technologies (Akka, Playframework, Apache Spark, Reactive Programming) e NoSQL (Accumulo, Hbase, Cassandra, ElasticSearch, Kafka and MongoDB)  Evangelist for Scala e Scala.JS Language  CTO at Quinnteus PTE LD (Singapore)
  3. 3. Who it’s using Scala
  4. 4. Isomorphic Scala one language => many target Scala is a language that is: • Multi-paradigm • Strong-typed • Functional • Object Oriented Scala compiler compile code in a special AST (Abstract Syntactic Tree) There are different byte-cote emitter:  JVM  Javascript  Native (binary based on LLVM) The same code can be compiled and run in different target based on your needs.
  5. 5. Javascript issues A lot of language “defects”:  Easy to forget var It’s born a script language, not designed to scale large applications (SPA or many modules)  And Web is moving toward very big and complex JS applications Jquery => AngularJS => React.Js (an hype in complexity) A lot of language compiles to javascript (Coffeescript, Typescript, …) due to these issues and more: https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
  6. 6. What’s Scala.JS "Scala.js is a compiler that converts Scala code into the equivalent, executable Javascript” Write Scala, not Javascript - the compiler handles the rest. It brings the advantages of Scala into client web development. Support of “all” Scala (also macros) SBT integration - IDE support as “standard” Scala language Compiled code is reasonable small (GCC => Google Closure Compiler) SourceMaps for easy debug in Web browser Interoperability with Javascript (JS => ScalaJS , ScalaJS => JS) • Scala.js code calls Javascript • Scala.js can export classes and methods to Javascript • http://www.scala-js.org/
  7. 7. Scala.js Compiler Pipeline Main.class Main$.class Main.Scala Main.sjsir Main$.sjsir script- fastopt.js 500k - 3000Kb script- opt.js 100k - 1000kb Scalac Scala.js Plugin Optimizer Renderer Google C C
  8. 8. On developing Web Apps No code reuse between client and server • A least you must learn two languages (Scala + JS) • Algorithms and models must be rewritten RCP/Ajax calls with “no type” No compiler checks Javascript issues: Forgot a “var” Js => [“10”, “10”, “10”, “10”].map(parseInt) [10, NaN, 2, 3] ['10','10','10','10','10'].map(function(x){return parseInt(x);})
  9. 9. On dev. Web Apps with ScalaJS Application in only one language  and the language is Scala Strong typing in the application and RCP layer  Autowire library Scala typesafe  document.getElementByld(“foo”) “Standard” behavior  scala.js> List("10", "10", "10", "10").map(parseInt) List(10, 10, 10, 10) …
  10. 10. Some Semantic differences from JS Javascript VM != Java VM  Division by 0 doesn’t throw exception  Checking the type of number is based on its numeric value, not class instance.  Scala.Unit is represented as undefined in Javascript  JavaScript regular expressions are slightly different from Java regular expressions.  Different behavior of some exceptions
  11. 11. name := "Foo root project” lazy val root = project.in(file(".")). aggregate(fooJS, fooJVM). settings(publish := {}, publishLocal := {}) lazy val foo = crossProject.in(file(".")). settings( name := "foo", version := "0.1-SNAPSHOT", scalaVersion := "2.12.3”, libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.4.3" ). jvmSettings( // Add JVM-specific settings here ). jsSettings( // Add JS-specific settings here ) lazy val fooJVM = foo.jvm lazy val fooJS = foo.js Simple multi target JS/JVM <project root> +- jvm | +- src/main/scala +- js | +- src/main/scala +- shared +- src/main/scala SBT configuration JS/JVM
  12. 12. Libraries
  13. 13. When using REST in themes, my code can break due to:  Model changes: • Who removed a field from …? • Who renamed the field …? • Who changed the type of the field …?  Endpoints changes: • A new parameter is required • You changed my endpoint name! o /item/executeNLP => /item/execute-nlp • Changed return type: i.e. models  This situation becomes more evident in large teams or in very fast development cycles. Safe Server-Client Communication Issues
  14. 14. Type safe RPC between client and server API trait in shared code Server code implement the backend code Client calls in a type safe way // shared interface trait Api{ def add(x: Int, y: Int, z: Int): Int } Safe Server Client Communication // server-side router and implementation object Server extends autowire.Server... object ApiImpl extends Api def add(x: Int, y: Int, z: Int) = x + y + z } // client-side callsite import autowire._ // needed for correct macro application object Client extends autowire.Client... Client[Api].add(1, 2, 3).call(): Future[Int] // | | | // | | The T is pickled and wrapped in a Future[T] // | The arguments to that method are pickled automatically // Call a method on the `Api` trait Autowire
  15. 15. https://github.com/lihaoyi/scalatags libraryDependencies += "com.lihaoyi" %%% "scalatags" % "0.6.7” ScalaTags is a small XML/HTML construction library for Scala. Since ScalaTags is pure Scala, any editor that understands Scala will understand scalatags. Not only do you get syntax highlighting, you also get code completion:  Autocomplete  Error Highlighting  In-editor documentation: And all the other good things (jump to definition, extract method, etc.) you're used to in a statically typed language. No more digging around in templates which mess up the highlighting of your HTML editor, or waiting months for the correct plugin to materialize. Strong Typed HTML Syntax for JVM/JS ScalaTags
  16. 16. Strong Typed HTML Syntax for JVM/JS html( head( script(src:="..."), script( "alert('Hello World')" ) ), body( div( h1(id:="title", "This is a title"), p("This is a big paragraph of text") ) ) ) <html> <head> <script src="..."></script> <script>alert('Hello World')</script> </head> <body> <div> <h1 id="title">This is a title</h1> <p>This is a big paragraph of text</p> </div> </body> </html> ScalaTags - Example
  17. 17. https://github.com/greencatsoft/scalajs-angular libraryDependencies += "com.greencatsoft" %%% "scalajs-angular" % "0.7” “scalajs-angular aims to help developers build AngularJS based applications in type safe manner with Scala language.” Schermata 2015-04-26 alle 10.56.47.png AngularJS – 1/2
  18. 18. It provides annotation helper for AngularJS Services, Controllers, Directives, and Filters. It wraps ngRoute for routing in your SPA. AngularJS – 2/2
  19. 19. I love ReactJS because:  Your code is clear. It is arranged into components, each with its own defined responsibility. (Web component, better dividi-et-impera approach)  Your app is predictable. It’s very clear where data flows, and what happens when a user does something.  Your app is fast. React is really, really fast, creating a better experience for users, even if you have a ton of data. (Virtual DOM, …)  Your app is standards-based. React adds layers only when it needs to. You feel like you are actually writing JavaScript and HTML, not some magic template language.  Surprise, you’re an app developer. React breaks down barriers across platforms, by applying its same model across the board. This means that once you learn the React way of structuring an web application, you have a huge head start on developing a native iOS or Android app, thanks to react-native. Surely this will happen to other platforms. Schermata 2015-04-26alle 10.56.47.png http://aspiringwebdev.com/why-react-js-matters-for-developers/ ScalaJs - React
  20. 20. I love ScalaJS ReactJS because: • It composed by simple concepts: • Properties (Props) are immutable • State is mutable • a render method • Everything is strong typed: VDOM, Components • Easy to extend components• Schermata 2015-04-26 alle 10.56.47.png Javascript var HelloMessage = React.createClass({displayName: 'HelloMessage', render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(HelloMessage, {name: ”Alberto"}), mountNode);• Schermata 2015-04-26 alle 10.56.47.png Scala val HelloMessage = ScalaComponent.builder[String]("HelloMessage") .render($ => <.div("Hello ", $.props)) .build HelloMessage(”Alberto") .renderIntoDOM(mountNode)Schermata 2015-04-26 alle 10.56.47. https://github.com/japgolly/scalajs-react http://japgolly.github.io/scalajs-react/ ScalaJs - React
  21. 21. Scala https://github.com/japgolly/scalajs-react http://japgolly.github.io/scalajs-react/ ScalaJS React provide also many extra: • Scalaz support ("com.github.japgolly.scalajs-react" %%% "ext-scalaz71" % ”1.1.1") • Monocle support (Lens for case class) ("com.github.japgolly.scalajs-react" %%% "ext- monocle" % ”1.1.1") • Testing support ("com.github.japgolly.scalajs-react" %%% "test" % ”1.1.1" % "test") val s = Simulation.focus >> ChangeEventData("hi").simulation >> Simulation.blur • Module extra ("com.github.japgolly.scalajs-react" %%% "extra" % ”1.1.1") with  Router  Component Mixins:  Broadcaster and Listenable  ExternalVar  LogLifecycle  OnUmount  SetInterval ScalaJs - React
  22. 22. Scala https://github.com/japgolly/scalacss http://japgolly.github.io/scalacss/book/ ScalaCSS aims to bring type-safety and clarity to: • creating CSS • using CSS • maintaining CSS • correctness of CSS You can create standalone CSS like SCSS/LESS, or you can create inline styles to be applied to directly without the need to manually manage class names. Being 100% Scala, you benefit from all the normal type-aware advantages like jump-to- definition of a style, type-safe keys and values, worry-free refactoring, etc. Example: http://japgolly.github.io/scalacss/book/quickstart/standalone.html ScalaCSS – CSS typesafe
  23. 23. Links
  24. 24. Scala A lot of libraries are linked in Scala.js Homepage (http://www.scala-js.org/) For a complete projects, the best resources are:  SPA Tutorial (https://github.com/ochrons/scalajs-spa-tutorial) with doc (http://ochrons.github.io/scalajs-spa-tutorial/css-in-scala.html):  Play Scala.Js Example (https://github.com/hussachai/play-scalajs-showcase)  https://scalafiddle.io/sf/4beVrVc/1 Rendering  https://scalafiddle.io/sf/n6lR8Xh/2 Some samples  https://github.com/circe/circe JSON as a Pro!  https://twitter.github.io/scala_school/ Scala Course from twitter Scala Native  http://www.scala-native.org/en/latest/ Useful Links
  25. 25. Questions
  26. 26. Thank You Alberto Paro alberto.paro@gmail.com @aparo77We are hiring (IT, GB, SG)!
  27. 27. Tip & Tricks
  28. 28. To manage the javascript library, Scala needs the code signature of the Javascript methods. First search on scala.js site or github scalajs trait JQuery extends js.Object { /** * Adds the specified class(es) to each of the set of matched elements. */ def addClass(classNames:String):JQuery = js.native def addClass(func:js.ThisFunction2[Element, Int, String, String]):JQuery = js.native @JSName("after") def afterInternal(content:js.Any):JQuery = js.native @JSName("append") def appendInternal(content:js.Any*):JQuery = js.native @JSName("appendTo") def appendToInternal(target:js.Any):JQuery = js.native @JSName("attr") def attrInternal(attributeName:String):UndefOr[String] = js.native $(“div#myId”).addClass("myclass") Facading Javascript Libraries
  29. 29. “Automatically” bootstrap your façade from a typescript definition (https://github.com/borisyankov/DefinitelyTyped): ~900 library already “typed”. The process is not 100 % accurate, so manual editing is often needed afterwards. This can be improved, but not to perfection, because the features offered by the type systems of TypeScript and Scala.js differ in some subtle ways. Usage $ sbt 'run somelib.d.ts SomeLib.scala' https://github.com/sjrd/scala-js-ts-importer Facading Javascript Libraries

×