Tuesday, June 28, 2016

Play Framework 2.5 and Vue sample CRUD single page application

In my previous post I shared a link to a sample application I had built using the Play framework. That application works and is fine but the one thing I wanted to change was to have a Javascript template framework on the front-end so that I can easily update portions of the webpage with AJAX request and response calls to and from the server. There are many different approaches to accomplish this; you can do it all with Javascript but there are frameworks and libraries available that make this sort of thing a lot easier and cleaner to do. I have used Javascript template engines like Handlebars or DustJs in the past and they have worked quite nicely. There are even more modern frameworks available now that go the extra mile and make things even simpler and more powerful. AngularJS comes to mind. I spent some time learning and seeing how I can use AngularJS for my Play application but in the end I opted to use Vue.js instead. Vue was a lot easier to learn and to get up and running with than AngularJS was and it works amazingly well.

I started by creating a default Play application and reused most of the business-side logic I had used in the previous version of the app. I then created a folder in the root of my project called 'vue' and I put all my Vue related files in there. I am using Play as a RESTful service and Vue as a client-side rendering framework. The only Play Scala template I have is the index.scala.html page which references the bundled javascript file and defines the root element for the Vue application. The only reason I have this index file within Play is to do with the Javascript routing provided by Play. Having said that I think in the long run I will move the index file into the Vue project in order to make use of Vue's hot-reload feature.

If you are interested in this sample application I have built you can clone / downloaded it from here.

Introduction

This application is used to showcase the Play framework as well as Vue.js while learning basic Spanish phrases. This application makes use of the following:

Installing

Running

  • Open a command terminal and change into the sample application root directory
  • Run activator:
    • activator run
  • Run webpack: 
    • webpack --watch
  • Open the following link in a browser:
    • http://localhost:9000

Screenshots







Posted by at No comments:
Labels: , , , ,

Monday, June 27, 2016

Play Framework 2.5 sample CRUD application

I have had an interest in the Play framework for a number of year now and I have built a few small applications using the framework. The Play framework has evolved over time and in order to keep up to date with the most recent changes it's useful to try and build your own application. I have built a very simple CRUD application for this purpose.

If you are interested in application you can clone / downloaded it from here.

Introduction

This application is used to showcase Play framework while learning basic Spanish phrases. This application makes use of the following:

Installing

Running

  • Open a command terminal and change into the sample application root directory
  • Run activator:
    • activator run

Screenshots






Posted by at No comments:
Labels: , , , ,
Subscribe to: Posts (Atom)