How to build a web user interface when you are a back developper.

1. FEED BACK ON A WEB APPLICATION IN SCALA
28 october 2015 - Nicolas Jorand
{{ SOFTSHAKE }}

2. TEAM
• Software developper started with Java and then evolve to Scala
• Currently working on reactive solution using Akka.
• Some Knowledge of HTML, CSS and JavaScript
Well 2 guys !

3. PROJECT
• Perform data cleansing on csv file received by customers.
• Not technical user
• Get all the rules from the users to eventually process automatically
the files.
• Development time boxed to 20 days

4. USER INTERFACE ?
• Input is CSV
• Data manipulation evolving constantly
• Output is CSV
WHAT DO WE REALLY NEED ?
• Use Excel as UI
Never fits the needs
Learning curve / Dev time
HTMLTable
DSL / Ace
HTMLTable
How to industrialise
• Existing mapping tool
• Framework (goJS, jointJS )

5. DEMO

6. UI WEB FRAMEWORK ?
Evaluate,
Read forums
Do some tests
Got it !
Learning curve
6 month later…
StackOverflow Infinite Loop

7. DEV, NOT DESIGNER
• How to get it responsive !!
• Use a nice template (SmartAdmin)
• How to integrate with web framework

8. WHAT I WOULD LIKE
• Take the template and code the functionalities
• Use only one language for back and front
• User actions are events, just use the Actor Model.
• Need a state at the UI level, the Finite State Machine (FSM)

9. ARCHITECTURE
SmartAdmin
Browser
Ace Akka.js
uPickle
Scala.js
Akka
uPickle
Scala.js
Web Server
Akka
Files Processing
Apache Commons CSV
Asynchronous
Blocking
JSON
Akka messages

10. CALL SCALA FROM JS
$(document).ready(function () {
pageSetUp();
io.xtech.ui.client.FichierIntl().init();
})
@JSExport("io.xtech.ui.client.FichierIntl")
object FichierIntl {
val webSocket = new WebSocket(getWebsocketUri(dom.document))
val system = ActorSystem("fichierIntl-ui")
val fsm = system.actorOf(UIManagerActor.props(new ModalComponent()))
@JSExport
def init(): Unit = {
val socket = getWebSocket
fsm ! UIInitialize(socket)
}
def getWebSocket: WebSocket = {
webSocket.onmessage = { (event: MessageEvent) =>
val msg = read[userEvent](event.data.toString)
msg match {
case Stats(data) =>
fsm ! UIStats(data)
case DSLStatement(ast) =>
fsm ! UINewDSL(ast)
case Customers(cust) =>
fsm ! UICustomerList(cust)
}
webSocket.onclose = { (event: CloseEvent) ⇒
fsm ! UIResetToPageNotInitialized
jQuery("#closedConnectionModal").modal("show")
}
webSocket
}
class UIManagerActor(modal: ModalComponent) extends Actor with FSM[UIState, UIData] {
def common: StateFunction = {
// common code for all states
case Event(msg@UICustomerList(cust), data) =>
logReceived(msg)
modal.buildModalCustomerSelection(cust, data.socket.get)
modal.buildModalFilesSelection(List.empty, data.socket.get)
stay()
}

11. CALL JS FROM SCALA
function myFunction() {
console.log(“Hello from Javascript”);
}
@js.native
object MyCode extends js.Object {
def myFunction(): Unit = js.native
}
def foo {
MyCode.myFunction()
}

12. PRO / CONS
• Code Isomorphe
• Same paradigm
• Type Safe
• Team Building
• Setup (No pattern)
• Create UI components
• Debug Actor on client
• Understand JS signature

13. Questions ?