Quick Poll – Create a web application in 10 minutes

When considering web application development with Scala you probably think about the Play! framework. It’s a great tool for creating fully fledged enterprise grade applications, but creating something big isn’t always necessary. Sometimes you need something easy that allows for fast time-to-market. I stumbled into this problem some time ago when doing prototyping and Skinny saved me a lot of work.

This post is a quick introduction to the framework, hopefully helping you with getting started. As an example I’ll show you how to put together an app that gathers poll results.

First I’ll quickly guide you through the app creation process and then I’ll explain anything that you might’ve missed. Don’t worry you might get lost – both parts are short and, as you’ll see, using Skinny is pretty straightforward.

Coding quick-poll in 10 minutes

First make sure you have all the necessary software installed. You’ll need node.js, npm and Yeoman. You can also install them all using

https://gist.github.com/pjazdzewski1990/e848b1d1427f9abafca4

Now we can create the app

https://gist.github.com/pjazdzewski1990/75ccc75fa1de829cf4b8

[Show]

Next, let’s create Employee Roles

https://gist.github.com/pjazdzewski1990/aafc9dffd33dab8a8682

[Show]

Now you are ready to run the server. Open a new console tab and type

https://gist.github.com/pjazdzewski1990/9137ea3f914c834b54bf

Now when you go to https://localhost:8080/employee_roles you should see table of roles people will be able to apply for. Right not it’s empty so let’s add some fixtures. Open src/main/scala/ScalatraBootstrap.scala and add this code:

https://gist.github.com/pjazdzewski1990/d42e4b368e666f68c016

[Show]

also make sure it’s called inside initSkinnyApp. After refreshing you should have Scala Hakker on the list of roles. Now create the poll result model.

https://gist.github.com/pjazdzewski1990/2c7ac0d37903771a8e4e

[Show]

Now another page should be available https://localhost:8080/poll_results This is where our candidates will enter their data. You can play with that a bit.

The generated form looks good, but it would be easier to use if the role form field was a dropdown with names. Also the email isn’t validated to contain an email address. Let’s tweak the default view a bit…

Open src/main/scala/controller/PollResultsController.scala and modify the form field definition to use the email validator provided by Skinny

https://gist.github.com/pjazdzewski1990/798d9ab11d66ddb603c6

Now go to src/main/webapp/WEB-INF/pollResults/_form.html.ssp and substitute the generated html for the role field with our custom dropdown

https://gist.github.com/pjazdzewski1990/34630cd0b85c1c03937f

[Show]

And now for a final touch, add a link to the poll in src/main/webapp/WEB-INF/root/index.html.ssp

https://gist.github.com/pjazdzewski1990/ef6a216a1aa6fe363d3b

[Show]

Quick-poll explained

Now you’ve seen how quick it is to create a bare-bone app with Skinny, but you might not be clear on some details. Don’t worry! I’ll explain everything step-by-step now.

https://gist.github.com/pjazdzewski1990/53826cffa05d6c6b978e

Nothing special here. We use Yeoman – a project scaffolding generation tool – with a template for creating Skinny applications.

https://gist.github.com/pjazdzewski1990/51d3694718b061c0dc52

Few thing to notice here. The skinny helper script is just a convenient wrapper around sbt. g option is a shorthand for generate. The next argument is what to create. We can create a model, migration or controller. By putting scaffold we tell Skinny to generate everything.

After each model change done by skinny we should issue a db:migrate so our local db will be updated. In this case we use a local H2. You can take a look at the generated SQL in task/src/main/resources/db/migration

https://gist.github.com/pjazdzewski1990/d42e4b368e666f68c016

The code above illustrates few useful concepts. First of all it takes place in ScalatraBootstrap class which can be used to run code at start (as we use it), to mount controller routes, start workers and much more. Secondly, it uses the power of Skinny ORM

https://gist.github.com/pjazdzewski1990/798d9ab11d66ddb603c6

Skinny comes with a validation module which we use here. The validators we add to the form field guarantee that we will only accept properly formatted e-mails of no more than 512 characters. Neat, right?

https://gist.github.com/pjazdzewski1990/34630cd0b85c1c03937f

In the view layer Skinny uses Scalate as the templating system to render content. That’s why we have ${} for interpolating values in html, #if/#forfor looping and branching and <%@ for declaring parameters. We could use a different system by passing a specific param to ./skinny script

Possible improvements

The app you’ve made is still pretty rough around the edges. What could be done to improve it?

Role field in PollResult is a simple Long value, that we happen to treat as a foreign key pointing to EmployeeRole table. It would be better to make the relationship explicit by using Skinny’s associations

Another code smell that might become a pain is doing a database query model.EmployeeRole.findAll() inside a form template. I did that to make the example as short as possible, but a more suitable place for that is the controller. To set roles parameter in the controller we will have to override the routes first. Here’s how to do than on example of create route. First modify src/main/scala/controller/Controllers object to include

https://gist.github.com/pjazdzewski1990/f996d5d14399f86f6f15

path declaration and define the action itself in src/main/scala/controller/PollResultsController

https://gist.github.com/pjazdzewski1990/c4ca74b60cb619d7794a

Last thing to consider is forbidding users from deleting resources. You could either setup some kind of authorization or remove the delete path by overriding it (as shown above) with action method using haltWithBody(error code)

Summary

Skinny is a great tool for creating prototypes quickly. I’m’ looking forward to see what it’s development might bring in the future. Also for some strange reason we find Skinny’s logo appealing at Scalac. Wonder why that is…

Links

• https://skinny-framework.org/documentation/getting-started.html

Do you like this post? Want to stay updated? Follow us on Twitter or subscribe to our Feed.

Read also:

• Do Scala with Scalac – 7 success stories to follow
• 6 COMPANIES PIONEERING THE USE OF DISTRIBUTED SYSTEMS
• How to create an automation process using AWS, IaaS, IaaC, and CICD
• JWT Authentication in a React-Redux app
• Exploring Tagless Final pattern for extensive and readable Scala code