SlideShare a Scribd company logo
FEED BACK ON A WEB APPLICATION IN SCALA
28 october 2015 - Nicolas Jorand
{{ SOFTSHAKE }}
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 !
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
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 )
DEMO
UI WEB FRAMEWORK ?
Evaluate,
Read forums
Do some tests
Got it !
Learning curve
6 month later…
StackOverflow Infinite Loop
DEV, NOT DESIGNER
• How to get it responsive !!
• Use a nice template (SmartAdmin)
• How to integrate with web framework
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)
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
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()
}
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()
}
PRO / CONS
• Code Isomorphe
• Same paradigm
• Type Safe
• Team Building
• Setup (No pattern)
• Create UI components
• Debug Actor on client
• Understand JS signature
Questions ?

More Related Content

What's hot (20)

Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)
Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)
Red Hat Developers
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Fwdays
 
Ajax and RJS
Ajax and RJS
Dominiek ter Heide
 
Introduction to AJAX
Introduction to AJAX
Abzetdin Adamov
 
001. Introduction about React
001. Introduction about React
Binh Quan Duc
 
From Web App Model Design to Production with Wakanda
From Web App Model Design to Production with Wakanda
Alexandre Morgaut
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
philogb
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
"Spring Boot. Boot up your development" Сергей Моренец
"Spring Boot. Boot up your development" Сергей Моренец
Fwdays
 
C# Async/Await Explained
C# Async/Await Explained
Jeremy Likness
 
Intro to Backbone.js with Rails
Intro to Backbone.js with Rails
Tim Tyrrell
 
A Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScript
Liang Gong
 
Intoduction to Ajax
Intoduction to Ajax
RISHAV ANURAG
 
Ajax
Ajax
Venkat Krishnan
 
The Chaos Tools Suite
The Chaos Tools Suite
merlinofchaos
 
Mvc razor and working with data
Mvc razor and working with data
Vladislav Hadzhiyski
 
Advantages of Rails Framework
Advantages of Rails Framework
Sathish Mariappan
 
Ajax
Ajax
Siya Agarwal
 
Web forms Overview Presentation
Web forms Overview Presentation
Vladislav Hadzhiyski
 
Introduction presentation
Introduction presentation
Vladislav Hadzhiyski
 
Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)
Write Powerful Javascript Modules To Make Your Apps DRY (Brian Leathem)
Red Hat Developers
 
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Michael North "Ember.js 2 - Future-friendly ambitious apps, that scale!"
Fwdays
 
001. Introduction about React
001. Introduction about React
Binh Quan Duc
 
From Web App Model Design to Production with Wakanda
From Web App Model Design to Production with Wakanda
Alexandre Morgaut
 
JavaScript para Graficos y Visualizacion de Datos
JavaScript para Graficos y Visualizacion de Datos
philogb
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
"Spring Boot. Boot up your development" Сергей Моренец
"Spring Boot. Boot up your development" Сергей Моренец
Fwdays
 
C# Async/Await Explained
C# Async/Await Explained
Jeremy Likness
 
Intro to Backbone.js with Rails
Intro to Backbone.js with Rails
Tim Tyrrell
 
A Dynamic Analysis Framework for Front-end JavaScript
A Dynamic Analysis Framework for Front-end JavaScript
Liang Gong
 
The Chaos Tools Suite
The Chaos Tools Suite
merlinofchaos
 
Advantages of Rails Framework
Advantages of Rails Framework
Sathish Mariappan
 

Similar to Web without framework (20)

Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Andrea Zaza
 
Codeweek 2015 - Reactive Web Applications with Scala and LIFT framework
Codeweek 2015 - Reactive Web Applications with Scala and LIFT framework
Riccardo Sirigu
 
Play Framework and Activator
Play Framework and Activator
Kevin Webber
 
WebCamp: Developer Day: Архитектура Web-приложений: обзор современных решений...
WebCamp: Developer Day: Архитектура Web-приложений: обзор современных решений...
GeeksLab Odessa
 
Reactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDays
Manuel Bernhardt
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
Katia Aresti
 
Full Stack Scala
Full Stack Scala
Ramnivas Laddad
 
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Manuel Bernhardt
 
Project Phoenix - From PHP to the Play Framework in 3 months
Project Phoenix - From PHP to the Play Framework in 3 months
Manuel Bernhardt
 
## Introducing a reactive Scala-Akka based system in a Java centric company
## Introducing a reactive Scala-Akka based system in a Java centric company
Milan Aleksić
 
Scaling business app development with Play and Scala
Scaling business app development with Play and Scala
Peter Hilton
 
Web architecture - overview of techniques.
Web architecture - overview of techniques.
Ruslan Shevchenko
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
Alive Kuo
 
Scale up your thinking
Scale up your thinking
Yardena Meymann
 
4 JVM Web Frameworks
4 JVM Web Frameworks
Joe Kutner
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
Yevgeniy Brikman
 
Reactive programming with examples
Reactive programming with examples
Peter Lawrey
 
Developing a Real-time Engine with Akka, Cassandra, and Spray
Developing a Real-time Engine with Akka, Cassandra, and Spray
Jacob Park
 
From polling to real time: Scala, Akka, and Websockets from scratch
From polling to real time: Scala, Akka, and Websockets from scratch
Sergi González Pérez
 
Andrea Lattuada, Gabriele Petronella - Building startups on Scala
Andrea Lattuada, Gabriele Petronella - Building startups on Scala
Scala Italy
 
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Reactive Web Applications with Scala & Liftweb - CodeWeek 2015
Andrea Zaza
 
Codeweek 2015 - Reactive Web Applications with Scala and LIFT framework
Codeweek 2015 - Reactive Web Applications with Scala and LIFT framework
Riccardo Sirigu
 
Play Framework and Activator
Play Framework and Activator
Kevin Webber
 
WebCamp: Developer Day: Архитектура Web-приложений: обзор современных решений...
WebCamp: Developer Day: Архитектура Web-приложений: обзор современных решений...
GeeksLab Odessa
 
Reactive Web-Applications @ LambdaDays
Reactive Web-Applications @ LambdaDays
Manuel Bernhardt
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
Katia Aresti
 
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Voxxed Days Vienna - The Why and How of Reactive Web-Applications on the JVM
Manuel Bernhardt
 
Project Phoenix - From PHP to the Play Framework in 3 months
Project Phoenix - From PHP to the Play Framework in 3 months
Manuel Bernhardt
 
## Introducing a reactive Scala-Akka based system in a Java centric company
## Introducing a reactive Scala-Akka based system in a Java centric company
Milan Aleksić
 
Scaling business app development with Play and Scala
Scaling business app development with Play and Scala
Peter Hilton
 
Web architecture - overview of techniques.
Web architecture - overview of techniques.
Ruslan Shevchenko
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
Alive Kuo
 
4 JVM Web Frameworks
4 JVM Web Frameworks
Joe Kutner
 
Play Framework: async I/O with Java and Scala
Play Framework: async I/O with Java and Scala
Yevgeniy Brikman
 
Reactive programming with examples
Reactive programming with examples
Peter Lawrey
 
Developing a Real-time Engine with Akka, Cassandra, and Spray
Developing a Real-time Engine with Akka, Cassandra, and Spray
Jacob Park
 
From polling to real time: Scala, Akka, and Websockets from scratch
From polling to real time: Scala, Akka, and Websockets from scratch
Sergi González Pérez
 
Andrea Lattuada, Gabriele Petronella - Building startups on Scala
Andrea Lattuada, Gabriele Petronella - Building startups on Scala
Scala Italy
 
Ad

Recently uploaded (20)

Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Transmission Media. (Computer Networks)
Transmission Media. (Computer Networks)
S Pranav (Deepu)
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Maxim Salnikov
 
Migrating to Azure Cosmos DB the Right Way
Migrating to Azure Cosmos DB the Right Way
Alexander (Alex) Komyagin
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
How to Choose the Right Web Development Agency.pdf
How to Choose the Right Web Development Agency.pdf
Creative Fosters
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
Software Testing & it’s types (DevOps)
Software Testing & it’s types (DevOps)
S Pranav (Deepu)
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Artificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across Industries
SandeepKS52
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Natan Silnitsky
 
Software Engineering Process, Notation & Tools Introduction - Part 4
Software Engineering Process, Notation & Tools Introduction - Part 4
Gaurav Sharma
 
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native Barcelona
Imma Valls Bernaus
 
dp-700 exam questions sample docume .pdf
dp-700 exam questions sample docume .pdf
pravkumarbiz
 
Integrating Survey123 and R&H Data Using FME
Integrating Survey123 and R&H Data Using FME
Safe Software
 
Transmission Media. (Computer Networks)
Transmission Media. (Computer Networks)
S Pranav (Deepu)
 
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
Neuralink Templateeeeeeeeeeeeeeeeeeeeeeeeee
alexandernoetzold
 
Open Source Software Development Methods
Open Source Software Development Methods
VICTOR MAESTRE RAMIREZ
 
UPDASP a project coordination unit ......
UPDASP a project coordination unit ......
withrj1
 
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Agentic Techniques in Retrieval-Augmented Generation with Azure AI Search
Maxim Salnikov
 
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
MOVIE RECOMMENDATION SYSTEM, UDUMULA GOPI REDDY, Y24MC13085.pptx
Maharshi Mallela
 
Advanced Token Development - Decentralized Innovation
Advanced Token Development - Decentralized Innovation
arohisinghas720
 
How to Choose the Right Web Development Agency.pdf
How to Choose the Right Web Development Agency.pdf
Creative Fosters
 
Porting Qt 5 QML Modules to Qt 6 Webinar
Porting Qt 5 QML Modules to Qt 6 Webinar
ICS
 
Step by step guide to install Flutter and Dart
Step by step guide to install Flutter and Dart
S Pranav (Deepu)
 
Software Testing & it’s types (DevOps)
Software Testing & it’s types (DevOps)
S Pranav (Deepu)
 
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
Milwaukee Marketo User Group June 2025 - Optimize and Enhance Efficiency - Sm...
BradBedford3
 
Artificial Intelligence Applications Across Industries
Artificial Intelligence Applications Across Industries
SandeepKS52
 
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Wondershare PDFelement Pro 11.4.20.3548 Crack Free Download
Puppy jhon
 
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Async-ronizing Success at Wix - Patterns for Seamless Microservices - Devoxx ...
Natan Silnitsky
 
Software Engineering Process, Notation & Tools Introduction - Part 4
Software Engineering Process, Notation & Tools Introduction - Part 4
Gaurav Sharma
 
OpenTelemetry 101 Cloud Native Barcelona
OpenTelemetry 101 Cloud Native Barcelona
Imma Valls Bernaus
 
dp-700 exam questions sample docume .pdf
dp-700 exam questions sample docume .pdf
pravkumarbiz
 
Ad

Web without framework

  • 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 )
  • 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