Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Full Stack Scala
Scala in the backend and frontend!
Ramnivas Laddad
Founder, Paya Labs
@ramnivas
@ramnivas
• Spring framework and Cloud Foundry
contributor
• Main interests
• Scala and functional programming
• Cloud com...
A Quick Demo
High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}
Backend Stack
API Server
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}
API Server
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}
Backend Structure
Backend Structure
Database
Backend Structure
DatabaseSendgrid
Backend Structure
DatabaseSendgridS3
Backend Structure
DatabaseSendgridS3
Backend Structure
DatabaseSendgridS3
Backend Structure
DatabaseSendgridS3
Backend Structure
Database
Data Access Layer
SendgridS3
Backend Structure
Database
Data Access Layer
SendgridS3
Talk by Rob Norris
Programs asValues: JDBC Programming with Doobie
Backend Structure
Database
Data Access Layer
SendgridS3
Backend Structure
Database
Data Access Layer
SendgridS3
Apache
Commons
Backend Structure
Database
Data Access Layer
SendgridS3
Apache
Commons
AWS
SDK
Backend Structure
Database
Data Access Layer
Service Layer
SendgridS3
Apache
Commons
AWS
SDK
Backend Structure
Database
Data Access Layer
Service Layer
HTTP Layer
SendgridS3
Apache
Commons
AWS
SDK
Frontend Stack
High-level Architecture
Static Page Server
html, js, css,
…
API Server
GET, PUT, POST,
DELETE
{
"name" : ...
}
High-level Architecture
Static Page Server
html, js, css,
…
API Server
GET, PUT, POST,
DELETE
{
"name" : ...
}
Serving static contents
var express = require('express');
var fs = require('fs');
var app = express();
var port = process....
High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}
High-level Architecture
API Server Static Page Server
html, js, css,
…
GET, PUT, POST,
DELETE
{
"name" : ...
}
Why Scala.js?
Why Scala.js?
Why Scala.js
Scala!
Why Scala.js
StaticTypes
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 Framework
Simple
Mental Model
Choosing a UI Framework
Simple
Mental Model
Immutable
Data
Choosing a UI Framework
Simple
Mental Model
Functional
programming
Immutable
Data
Choosing a UI Framework
Simple
Mental Model
Mobile
Functional
programming
Immutable
Data
Choosing a UI Framework
Simple
Mental Model
Mobile
Functional
programming
Immutable
Data
Isomorphism
Choosing a UI Framework
Simple
Mental Model
CommunityMobile
Functional
programming
Immutable
Data
Isomorphism
Choosing a UI Framework
Simple
Mental Model
CommunityMobile
Functional
programming
Immutable
Data
Isomorphism
What is React?
• “A JavaScript library for building user interfaces” by
Facebook
• Focuses just on the UI
• Uses virtual D...
Frontend Overview
Frontend Overview
Router
Frontend Overview
Router
Frontend Overview
Router Flux
Component
Frontend Overview
Router Flux
Component
Frontend Overview
Router
Store
Flux
Component
Frontend Overview
Router
Store
Flux
Component
Frontend Overview
Router
Store
Flux
Component
Rest Client
Frontend Overview
Router
Store
Flux
Component
Rest Client
Frontend Overview
Router
Store
Flux
Component
Rest Client
Frontend Overview
Router
Store
Flux
Component
Rest Client
Frontend Overview
ComponentRouter
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 ...
Simple Mental Model
View
PropertiesState
Composition
Composition
Composition
Composition
Composition
Real World Composition
Real World 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 !...
Flux
Flux Component
object ArtistRegistrationWrapper extends
FluxComponent[String, ArtistEditDto](Seq(ArtistStore, InstrumentSt...
Component
object ArtistRegistration extends
Component[ArtistRegistrationProps] {
def element(props: ArtistRegistrationProp...
Responding to events
override def receive = {
case ArtistUpdated(newValue) =>
artist = newValue
emitChange()
case ArtistSa...
No sweat undo/redo
trait CompositionStore extends AbstractStore {
val compositionStack = new UndoStack[Composition]()
over...
Mobile: React Native
Mobile: React Native
https://facebook.github.io/react-native
Mobile: 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 boiler...
Bridging Native React Components
• Problem:
• You got to use components developed in the
wild
• Requires significant boiler...
Example Bridge Component
case class TagsInput(id: js.UndefOr[String] = js.undefined,
className: js.UndefOr[String] = js.un...
UsingTagsInput
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
•...
Using MDL in React
• Problem:
• Components need to be “upgraded”
• Solution:
• React wrapper component around a ReactTag
•...
Example MDL Use
a(className := "mdl-button mdl-js-button
mdl-button--raised mdl-button—colored
mdl-js-ripple-effect",
onCl...
Example MDL Use
a(className := "mdl-button mdl-js-button
mdl-button--raised mdl-button—colored
mdl-js-ripple-effect",
onCl...
Things on the Horizon
• GraphQL?
• Stitch?
• Relay?
• Falcor?
?
Ramnivas Laddad
@ramnivas
Upcoming SlideShare
Loading in …5
×

Full Stack Scala

7,780 views

Published on

Presentation at Scala By the Bay

Published in: Internet
  • Like to know how to take easy surveys and get huge checks - then you need to visit us now! Having so many paid surveys available to you all the time let you live the kind of life you want. learn more...♣♣♣ http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can now be your own boss and get yourself a very generous daily income. START FREE... http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • let's be honest. There are a lot of crazy devices, pumps and p.ills that all claim to be the solution to adding BIG length to your penis. However, most, if not all of these solutions don't pan out, or the growth is only temporary. I guess you could always consider surgery, but if you are anything like me, the thought of having a sharp metal object anywhere near your junk makes you quiver with blood curdling fear :-) Well, it just so happens my friend John, who I met at a men's health conference a few years back, has literally stumbled upon the key to natural male growth. Unlike other systems out there, his involves two unique components: 1. Restarting biological growth that boys experienced during puberty, turning them into men. 2. Performing tested and targeted exercises to encourage blood flow and supersize growth. John has just released a completely ZERO COST enlargement exercises guide where you can discover the proven techniques to start REAL and PERMANENT growth. Download the enlargement exercises guide here ◆◆◆ https://tinyurl.com/ydaetwbk
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Secrets to making $$$ with paid surveys... ♣♣♣ http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Full Stack Scala

  1. 1. Full Stack Scala Scala in the backend and frontend! Ramnivas Laddad Founder, Paya Labs @ramnivas
  2. 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. 3. A Quick Demo
  4. 4. High-level Architecture API Server Static Page Server html, js, css, … GET, PUT, POST, DELETE { "name" : ... }
  5. 5. Backend Stack
  6. 6. API Server API Server Static Page Server html, js, css, … GET, PUT, POST, DELETE { "name" : ... }
  7. 7. API Server API Server Static Page Server html, js, css, … GET, PUT, POST, DELETE { "name" : ... }
  8. 8. Backend Structure
  9. 9. Backend Structure Database
  10. 10. Backend Structure DatabaseSendgrid
  11. 11. Backend Structure DatabaseSendgridS3
  12. 12. Backend Structure DatabaseSendgridS3
  13. 13. Backend Structure DatabaseSendgridS3
  14. 14. Backend Structure DatabaseSendgridS3
  15. 15. Backend Structure Database Data Access Layer SendgridS3
  16. 16. Backend Structure Database Data Access Layer SendgridS3 Talk by Rob Norris Programs asValues: JDBC Programming with Doobie
  17. 17. Backend Structure Database Data Access Layer SendgridS3
  18. 18. Backend Structure Database Data Access Layer SendgridS3 Apache Commons
  19. 19. Backend Structure Database Data Access Layer SendgridS3 Apache Commons AWS SDK
  20. 20. Backend Structure Database Data Access Layer Service Layer SendgridS3 Apache Commons AWS SDK
  21. 21. Backend Structure Database Data Access Layer Service Layer HTTP Layer SendgridS3 Apache Commons AWS SDK
  22. 22. Frontend Stack
  23. 23. High-level Architecture Static Page Server html, js, css, … API Server GET, PUT, POST, DELETE { "name" : ... }
  24. 24. High-level Architecture Static Page Server html, js, css, … API Server GET, PUT, POST, DELETE { "name" : ... }
  25. 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. 26. High-level Architecture API Server Static Page Server html, js, css, … GET, PUT, POST, DELETE { "name" : ... }
  27. 27. High-level Architecture API Server Static Page Server html, js, css, … GET, PUT, POST, DELETE { "name" : ... }
  28. 28. Why Scala.js?
  29. 29. Why Scala.js?
  30. 30. Why Scala.js Scala!
  31. 31. Why Scala.js StaticTypes
  32. 32. Why Scala.js Functional Programming
  33. 33. Why Scala.js Isomorphism
  34. 34. Why Scala.js Maturity!
  35. 35. Why Scala.js Eco-system
  36. 36. UI Framework
  37. 37. Choosing a UI Framework
  38. 38. Choosing a UI Framework Simple Mental Model
  39. 39. Choosing a UI Framework Simple Mental Model Immutable Data
  40. 40. Choosing a UI Framework Simple Mental Model Functional programming Immutable Data
  41. 41. Choosing a UI Framework Simple Mental Model Mobile Functional programming Immutable Data
  42. 42. Choosing a UI Framework Simple Mental Model Mobile Functional programming Immutable Data Isomorphism
  43. 43. Choosing a UI Framework Simple Mental Model CommunityMobile Functional programming Immutable Data Isomorphism
  44. 44. Choosing a UI Framework Simple Mental Model CommunityMobile Functional programming Immutable Data Isomorphism
  45. 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. 46. Frontend Overview
  47. 47. Frontend Overview Router
  48. 48. Frontend Overview Router
  49. 49. Frontend Overview Router Flux Component
  50. 50. Frontend Overview Router Flux Component
  51. 51. Frontend Overview Router Store Flux Component
  52. 52. Frontend Overview Router Store Flux Component
  53. 53. Frontend Overview Router Store Flux Component Rest Client
  54. 54. Frontend Overview Router Store Flux Component Rest Client
  55. 55. Frontend Overview Router Store Flux Component Rest Client
  56. 56. Frontend Overview Router Store Flux Component Rest Client
  57. 57. Frontend Overview ComponentRouter Store Flux Component Rest Client
  58. 58. Frontend Overview ComponentRouter Store Flux Component Rest Client
  59. 59. Scala.js with React • Statically-typed wrapper around React • Fluent, builder API to create components • Well-implemented router (v2) scalajs-react
  60. 60. Simple Mental Model View PropertiesState
  61. 61. Composition
  62. 62. Composition
  63. 63. Composition
  64. 64. Composition
  65. 65. Composition
  66. 66. Real World Composition
  67. 67. Real World Composition
  68. 68. Real World Composition
  69. 69. Mostly Immutable ComponentRouter Store Flux Component Rest Client
  70. 70. Taking advantage of immutability def shouldComponentUpdate(scope: ScopeType, nextProps: P, nextState: S) = { scope.props != nextProps || scope.state != nextState }
  71. 71. Flux
  72. 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. 73. Component object ArtistRegistration extends Component[ArtistRegistrationProps] { def element(props: ArtistRegistrationProps): ReactTag = { div(…) } }
  74. 74. Responding to events override def receive = { case ArtistUpdated(newValue) => artist = newValue emitChange() case ArtistSaved => save() emitChange() ...
  75. 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. 76. Mobile: React Native
  77. 77. Mobile: React Native https://facebook.github.io/react-native
  78. 78. Mobile: React Native https://github.com/chandu0101/scalajs-react-native https://facebook.github.io/react-native
  79. 79. Using external components
  80. 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. 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. 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. 83. UsingTagsInput div( TagsInput( defaultValue = Seq(“foo","bar"), onChange = printSequence _ ) )
  84. 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. 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. 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. 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. 88. Things on the Horizon • GraphQL? • Stitch? • Relay? • Falcor?
  89. 89. ? Ramnivas Laddad @ramnivas

×