1 of 40

Creando aplicaciones web con Scala/Scala.js

By Alexis Hernandez

2 of 40

About me

  • Principal Scala Consultant at Wiringbits
  • Technical Partner/Advisor for 10+ companies
  • Working with Scala for 6+ years (3+ on Scala.js)
  • Maintainer of Scala-js-chrome sbt plugin
  • Author of Chrome-Scalajs template

3 of 40

Agenda

  • Intro
  • Demo
  • Architecture
  • Highlights
  • Surprise!

4 of 40

Traditional Web Apps share a common core

  • Account registration
  • Authentication
  • Email verification
  • Password recovery
  • Admin dashboards

5 of 40

These web apps are all over the internet

Still, we have to do most of the work from scratch when using Scala/Scala.js

6 of 40

No more!

Now we have the Wiringbits Scala Web App Template

7 of 40

Let’s see a demo

https://github.com/wiringbits/scala-webapp-template#short-videos

8 of 40

Architecture

9 of 40

10 of 40

11 of 40

12 of 40

  • Http layer

​

  • Decode requests into typed models

​

  • Authenticate requests

​

  • Delegate the work to the actions layer

​

  • Encode responses

Server Architecture: Controllers

13 of 40

  • Unaware of the http layer

​

  • 1 responsibility; 1 public method

​

  • An action can’t depend on another action, call services instead

​

  • Checks authorization rules

​

  • Runs complex validations

​

  • Combines the work from Services, Repositories, ExternalApis

Server Architecture: Actions

14 of 40

  • Unaware of the Actions layer

​

  • Combines the work from Repositories and ExternalApis

​

  • Exposes functions handling business rules when they get complex enough to fit in Actions

Server Architecture: Services

15 of 40

  • Unaware of Actions/Services

​

​

​

​

​

​

  • Knows how to deal with external APIs (like AWS SES)

Server Architecture: ExternalApis

16 of 40

  • Unaware of Actions/Services

​

  • Combines the work from DAOs

​

  • Chooses when to use transactions

Server Architecture: Repositories

17 of 40

  • Unaware of Repositories

​

  • A DAO knows how to deal with a database table

​

  • Maps query results into DataModels

​

  • Transforms an operation + DataModel to SQL statements

Server Architecture: Data Access Objects

18 of 40

Programming paradigm

  • Imperative (Java)
  • Pure FP (Haskell)
  • Pragmatic (meet in the middle) ←

19 of 40

Highlights

  • Scala does not need to be hard, the template uses pragmatic choices
  • We have been able to get contributions from non-scala developers at their first week
  • Scala.js shines when onboarding devs with js background

20 of 40

Works with the React ecosystem

21 of 40

UI fetches data consistently

  • Display a loader when the data is being fetched
  • Display an error when there was a problem fetching the data
  • Give the user an opportunity to retry loading the data

22 of 40

UI fetches data consistently - Loading

23 of 40

UI fetches data consistently - Error/Retry

24 of 40

Done by AsyncComponent

25 of 40

Typed data models

  • Deal with validated domain values (correct by construction)
  • Which are used to construct validated forms
  • Which are used to submit requests to the server
  • The server-side code automatically validates such domain models when receiving a request

26 of 40

Typed data models

27 of 40

Forms composed of typed models

28 of 40

Forms composed of typed models (easy to test!)

29 of 40

Requests composed of typed models

30 of 40

Controllers deal with requests composed of typed models

31 of 40

Practical testing utilities

32 of 40

Tests involving a database launch a clean one

33 of 40

Endpoint tests use frontend ApiClient

34 of 40

Auto-generated Admin UI

35 of 40

Auto-generated Admin UI - Settings

36 of 40

Onboarding material

37 of 40

Give it a try

https://github.com/wiringbits/scala-webapp-template

38 of 40

Surprise

39 of 40

Surprise

  • Codepreview.io for free! (demo)
  • Keep a static url to try the latest code
  • Get a new url on every PR to try the changes
  • Get a temporal database just for this PR

40 of 40

Thanks!

Questions?