This document discusses using Scala for full stack development, with Scala in both the backend and frontend. It provides an overview of using Scala and Scala.js for backend and frontend development, including architectures, frameworks, and techniques. The backend is built with Scala and Spring Boot, using techniques like dependency injection and immutable data structures. The frontend is built with Scala.js and React for the UI, using Flux architecture and immutable data. It also discusses mobile development with Scala and React Native.

1. Full Stack Scala
Scala in the backend and frontend!
Ramnivas Laddad
Founder, Paya Labs
@ramnivas

2. @ramnivas
• Spring framework and Cloud Foundry
contributor
• Main interests
• Scala and functional programming
• Cloud computing
• Author of books and articles
• AspectJ in Action (1st and 2nd edition)
• Speaker at many professional conferences
• JavaOne, ScalaDays, JavaPolis, SpringOne, Software
Development, No Fluff Just Stuff, OSCON etc.

3. A Quick Demo

4. High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}

5. Backend Stack

6. API Server
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}

7. API Server
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}

8. Backend Structure

9. Backend Structure
Database

10. Backend Structure
DatabaseSendgrid

11. Backend Structure
DatabaseSendgridS3

12. Backend Structure
DatabaseSendgridS3

13. Backend Structure
DatabaseSendgridS3

14. Backend Structure
DatabaseSendgridS3

15. Backend Structure
Database
Data Access Layer
SendgridS3

16. Backend Structure
Database
Data Access Layer
SendgridS3
Talk by Rob Norris
Programs asValues: JDBC Programming with Doobie

17. Backend Structure
Database
Data Access Layer
SendgridS3

18. Backend Structure
Database
Data Access Layer
SendgridS3
Apache
Commons

19. Backend Structure
Database
Data Access Layer
SendgridS3
Apache
Commons
AWS
SDK

20. Backend Structure
Database
Data Access Layer
Service Layer
SendgridS3
Apache
Commons
AWS
SDK

21. Backend Structure
Database
Data Access Layer
Service Layer
HTTP Layer
SendgridS3
Apache
Commons
AWS
SDK

22. Frontend Stack

23. High-level Architecture
Static Page Server
html, js, css,
…
API Server
GET, PUT, POST,
DELETE
{
"name" : ...
}

24. High-level Architecture
Static Page Server
html, js, css,
…
API Server
GET, PUT, POST,
DELETE
{
"name" : ...
}

25. Serving static contents
var express = require('express');
var fs = require('fs');
var app = express();
var port = process.env.PORT || 4000;
var devMode = process.env.SERVE_MODE != "SERVE_PROD";
var serveInfo = { dir: __dirname + ‘/dev-bin', maxAge: 0}
if (!devMode) {
var oneHour = 60*60*1000;
serveInfo = { dir: __dirname + ‘/prod-bin', maxAge: oneHour}
}
app.use(express.static(serveInfo.dir, { maxAge: serveInfo.maxAge }));
app.get('*', function(request, response, next) {
response.sendFile(serveInfo.dir + '/index.html');
});
app.listen(port, function() {
console.log("Started on " + port + " (dev mode = " + devMode + ")n");
});

26. High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}

27. High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}

28. Why Scala.js?

29. Why Scala.js?

30. Why Scala.js
Scala!

31. Why Scala.js
StaticTypes

32. Why Scala.js
Functional Programming

33. Why Scala.js
Isomorphism

34. Why Scala.js
Maturity!

35. Why Scala.js
Eco-system

36. UI Framework

37. Choosing a UI Framework

38. Choosing a UI Framework
Simple
Mental Model

39. Choosing a UI Framework
Simple
Mental Model
Immutable
Data

40. Choosing a UI Framework
Simple
Mental Model
Functional
programming
Immutable
Data

41. Choosing a UI Framework
Simple
Mental Model
Mobile
Functional
programming
Immutable
Data

42. Choosing a UI Framework
Simple
Mental Model
Mobile
Functional
programming
Immutable
Data
Isomorphism

43. Choosing a UI Framework
Simple
Mental Model
CommunityMobile
Functional
programming
Immutable
Data
Isomorphism

44. Choosing a UI Framework
Simple
Mental Model
CommunityMobile
Functional
programming
Immutable
Data
Isomorphism

45. What is React?
• “A JavaScript library for building user interfaces” by
Facebook
• Focuses just on the UI
• Uses virtual DOM
• One-way data-flow

46. Frontend Overview

47. Frontend Overview
Router

48. Frontend Overview
Router

49. Frontend Overview
Router Flux
Component

50. Frontend Overview
Router Flux
Component

51. Frontend Overview
Router
Store
Flux
Component

52. Frontend Overview
Router
Store
Flux
Component

53. Frontend Overview
Router
Store
Flux
Component
Rest Client

54. Frontend Overview
Router
Store
Flux
Component
Rest Client

55. Frontend Overview
Router
Store
Flux
Component
Rest Client

56. Frontend Overview
Router
Store
Flux
Component
Rest Client

57. Frontend Overview
ComponentRouter
Store
Flux
Component
Rest Client

58. Frontend Overview
ComponentRouter
Store
Flux
Component
Rest Client

59. Scala.js with React
• Statically-typed wrapper around React
• Fluent, builder API to create components
• Well-implemented router (v2)
scalajs-react

60. Simple Mental Model
View
PropertiesState

61. Composition

62. Composition

63. Composition

64. Composition

65. Composition

66. Real World Composition

67. Real World Composition

68. Real World Composition

69. Mostly Immutable
ComponentRouter
Store
Flux
Component
Rest Client

70. Taking advantage of immutability
def shouldComponentUpdate(scope: ScopeType,
nextProps: P,
nextState: S) = {
scope.props != nextProps ||
scope.state != nextState
}

71. Flux

72. Flux Component
object ArtistRegistrationWrapper extends
FluxComponent[String, ArtistEditDto](Seq(ArtistStore, InstrumentStore)) {
def onArtistChange(artist: ArtistEditDto): Unit = {
ArtistUpdated(artist).dispatch()
}
...
def element(props: String) = {
...
div(
ArtistRegistration(
ArtistRegistrationProps(
artist, allInstruments, onArtistChange,
onArtistCoverPhotoChange, onArtistProfilsePhotoChange)
)
)
}
}

73. Component
object ArtistRegistration extends
Component[ArtistRegistrationProps] {
def element(props: ArtistRegistrationProps): ReactTag = {
div(…)
}
}

74. Responding to events
override def receive = {
case ArtistUpdated(newValue) =>
artist = newValue
emitChange()
case ArtistSaved =>
save()
emitChange()
...

75. No sweat undo/redo
trait CompositionStore extends AbstractStore {
val compositionStack = new UndoStack[Composition]()
override def receive = {
case NewComposition =>
compositionStack.clear()
loaded()
case LoadComposition(c) =>
compositionStack.clear()
compositionStack.push(c)
loaded()
case UpdateComposition(c) =>
compositionStack.push(c)
emitChange()
case UndoComposition =>
compositionStack.undo()
emitChange()
case RedoComposition =>
compositionStack.redo()
emitChange()
...
}

76. Mobile: React Native

77. Mobile: React Native
https://facebook.github.io/react-native

78. Mobile: React Native
https://github.com/chandu0101/scalajs-react-native
https://facebook.github.io/react-native

79. Using external components

80. Bridging Native React Components
• Problem:
• You got to use components developed in the
wild
• Requires significant boilerplate to make it work
from scalajs-react
• Solution: Some macro magic!

81. Bridging Native React Components
• Problem:
• You got to use components developed in the
wild
• Requires significant boilerplate to make it work
from scalajs-react
• Solution: Some macro magic!
github.com/payalabs/scalajs-react-bridge

82. Example Bridge Component
case class TagsInput(id: js.UndefOr[String] = js.undefined,
className: js.UndefOr[String] = js.undefined,
ref: js.UndefOr[String] = js.undefined,
key: js.UndefOr[Any] = js.undefined,
defaultValue: js.UndefOr[Seq[String]] = js.undefined,
value: js.UndefOr[Array[String]] = js.undefined,
placeholder: js.UndefOr[String] = js.undefined,
onChange: js.UndefOr[js.Array[String] => Unit] = js.undefined,
validate: js.UndefOr[String => Boolean] = js.undefined,
transform: js.UndefOr[String => String] = js.undefined)
extends ReactBridgeComponent

83. UsingTagsInput
div(
TagsInput(
defaultValue = Seq(“foo","bar"),
onChange = printSequence _
)
)

84. Using MDL in React
• Problem:
• Components need to be “upgraded”
• Solution:
• React wrapper component around a ReactTag
• Upgrades element upon mounting
• Implicits to avoid noise

85. Using MDL in React
• Problem:
• Components need to be “upgraded”
• Solution:
• React wrapper component around a ReactTag
• Upgrades element upon mounting
• Implicits to avoid noise
github.com/payalabs/scalajs-react-mdl

86. Example MDL Use
a(className := "mdl-button mdl-js-button
mdl-button--raised mdl-button—colored
mdl-js-ripple-effect",
onClick --> saveAction())("Save").material

87. Example MDL Use
a(className := "mdl-button mdl-js-button
mdl-button--raised mdl-button—colored
mdl-js-ripple-effect",
onClick --> saveAction())("Save").material

88. Things on the Horizon
• GraphQL?
• Stitch?
• Relay?
• Falcor?

89. ?
Ramnivas Laddad
@ramnivas