This document discusses using Scala.js to build React components in Scala. Scala.js compiles to JavaScript and allows sharing code between frontend and backend while gaining the advantages of static typing like early error detection and reliable refactoring. The document covers setting up a project with React4s and Scala.js, sharing models and APIs between frontend and backend, performance, and accessing Scala libraries from JavaScript. Scala.js is promising for those with a Scala background due to interoperability and available libraries.

1. 1

2. Build your React
component in scala
By Poorva Gokhale & Mushtaq Ahmed

3. ● Catch type related errors early (compile time)
● Types serves as a documentation
● Reliable refactoring
● Better IDE support
● Type systems make code easier to maintain
Why to use type system?

4. ● Typescript - compiles to javascript (same
semantics)
● Flow - type checker
● Scala.js- Cross Platform - compiles to
javascript
● Kotlin - Cross Platform
Ways for Static typing in Javascript

5. Scala(js) - cross platform language
Compiles to jvm and javascript
● All advantages of static typing
● Shared code
● Interoperability
● Performance
● Access to scala ecosystem libraries

6. Project Setup
● Setup
● React4s - React wrapper for scala.js
○ Lifecycle methods
○ State
○ Props
○ Emit handler - callback
● Generate js - fastOptJS
● Bundling - webpack and scalajs-bundler
● Css Support

7. Scala.js - shared code
● Share your code between frontend and backend
● Models
● Shared api
- Serialization logic
- models

8. Interoperability
Scala.js Javascript
JsExport/SJS-Defined
JsImport
Javascript
Typescript
.d.ts (typescript definition file)
Compiles to javascript

9. - Scala.js compiler optimizes generated javascript
- Inlining
- Rewrite iterators as while loops
- Dead code elimination
- Comparable performance with handwritten js
application
Performance

10. ● Scala cross compiling libraries
○ Upickle
○ Scala-java-time
● Js libraries for scala.js
○ Scala-js-dom
○ jquery-facade
Access to scala ecosystem libraries

11. Typescript and scala.js competitors, but coming from
scala background and having rich set of features like
interoperability, available libraries we find scala.js
promising.
Conclusion

12. ● https://www.scala-js.org/
● http://www.react4s.org/
● https://scalacenter.github.io/scalajs-bundler/
References

13. THANK YOU
Mushtaq Ahmed
Developer, ThoughtWorks
mushtaq@thoughtworks.com
github.com/mushtaq
Poorva Gokhale
Developer, ThoughtWorks
poorvag@thoughtworks.com
github.com/Poorva17