Full Stack Scala

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

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"); });

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-ﬂow

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

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

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 signiﬁcant 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 signiﬁcant 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

Full Stack Scala

Ramnivas Laddad

Full Stack Scala

¿Le ha llamado la atención una diapositiva en particular?