full stack scala

Full Stack ScalaScala in the backend and frontend!

Ramnivas LaddadFounder, Paya Labs

@ramnivas

@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.

A Quick Demo

High-level Architecture

API Server Static Page Server

html, js, css, …

GET, PUT, POST, DELETE

{ "name" : ...}

Backend Stack

API Server


html, js, css, …


{ "name" : ...}

Backend Structure

Backend Structure

Database

Backend Structure

DatabaseSendgrid

Backend Structure

DatabaseSendgridS3

Backend Structure

Database

Data Access Layer

SendgridS3

Backend Structure

Database

Data Access Layer

SendgridS3

Talk by Rob NorrisPrograms as Values: JDBC Programming with Doobie

Backend Structure

Database

Data Access Layer

SendgridS3

Backend Structure

Database

Data Access Layer

SendgridS3

ApacheCommons

Backend Structure

Database

Data Access Layer

SendgridS3

ApacheCommons

AWSSDK

Backend Structure

Database

Data Access Layer

Service Layer

SendgridS3

ApacheCommons

AWSSDK

Backend Structure

Database

Data Access Layer

Service Layer

HTTP Layer

SendgridS3

ApacheCommons

AWSSDK

Frontend Stack


Static Page Server

html, js, css, …

API Server


{ "name" : ...}

Serving static contentsvar 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");

});



html, js, css, …


{ "name" : ...}

Why Scala.js?

Why Scala.js

Scala!

Why Scala.js

Static Types

Why Scala.js

Functional Programming

Why Scala.js

Isomorphism

Why Scala.js

Maturity!

Why Scala.js

Eco-system

UI Framework

Choosing a UI Framework

Choosing a UI FrameworkSimple

Mental Model


Mental ModelImmutable

Data


Mental ModelFunctional

programmingImmutable

Data


Mental Model

Mobile

Functionalprogramming

Immutable Data


Mental Model

Mobile


Immutable Data

Isomorphism


Mental Model

CommunityMobile


Immutable Data

Isomorphism

What is React?• “A JavaScript library for building user interfaces” by

Facebook

• Focuses just on the UI• Uses virtual DOM• One-way data-flow

Frontend Overview

Frontend Overview

Router

Frontend Overview

Router Flux Component

Frontend Overview

Router

Store

Flux Component

Frontend Overview

Router

Store

Flux Component

Rest Client

Frontend Overview

ComponentRouter

Store

Flux Component

Rest Client

Scala.js with React

• Statically-typed wrapper around React• Fluent, builder API to create components• Well-implemented router (v2)

scalajs-react

Simple Mental Model

View

PropertiesState

Composition

Real World Composition

Mostly Immutable

ComponentRouter

Store

Flux Component

Rest Client

Taking advantage of immutability

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

Flux Componentobject 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) ) ) }}

Component

object ArtistRegistration extends Component[ArtistRegistrationProps] {

def element(props: ArtistRegistrationProps): ReactTag = { div(…) }}

Responding to events

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

No sweat undo/redotrait 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() ...}

Mobile: React Native


https://facebook.github.io/react-native


https://github.com/chandu0101/scalajs-react-native

https://facebook.github.io/react-native

Using external components

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!

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

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

Using TagsInput

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

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

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

Example MDL Use

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

Things on the Horizon

• GraphQL?• Stitch?• Relay?• Falcor?

?Ramnivas Laddad

@ramnivas

full stack scala

Internet