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

Now we can create the app

[Show]

Next, let’s create Employee Roles

[Show]

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

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:

[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.

[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

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

[Show]

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

[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.

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

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

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

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?

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

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

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