To develop for Liferay is no simple Task. There are many things you have to keep in mind, if you want to create and develop professional Applications, and you also have to learn many different technologies, if you aren't yet an savvy Java-Developer. So what are the alternatives, searching the web and marketplace portlets, or ...? Here is a different approach, that uses vanilla Liferay and HTML / Javascript and very little time.

So how can you create applications, and still have time for a day at the SPA?

The short Answer

JSON Webservices and a little bit of HTML and Javascript.
 

The long Answer

To show my take on the long answer, I made up this small example. But bare in mind, that any form with many amount and logic is create able.
 

The example Task: Create a Mailing List sign up (control)

Step 1: Create our “database”

1. First we need to create a web-folder, lets call it “Mailing List”.
   Here all the “data entries”, will be stored
   
    
2. Next we create our “datastructure” as an Journal / WebContent Structure (the Liferay naming is a bit confusing, to an Liferay beginner like me), adding all field we need.
   
   

   For our example the field Email should be enough.

3. Now create a template for the newly created structure
   
    

Step 2: Now comes the best part "CODING"

Write some Javascript and HTML Code, that uses the jsons webservices to create new Articles (this is the important part), these entries are our “data entries”. For our example I used angular and created all the liferay specific functions in an separate module, so that I can reuse. (It is not yet production grade code, but nice for a demo)

Here, the HTML / Javascript code that should be added into the WebContent:

 <div class="newletter-box">
  <style type="text/css">.newletter-box .span4.no-margin{margin:0;}</style>
  <div class="span4 no-margin">
   <div id="newsletterAlertBox" class="alert alert-success hide">
    <b>Success!</b> Your email address is now entered in our mailingslist!
   </div>
   <form id="newsletterBox" class="form-search">
    <div class="input-append" data-ng-app="newsApp" data-ng-controller="baseController">
     <input class="search-query" data-ng-model="Email" placeholder="Enter Email ... " type="text" />
     <button class="btn" data-ng-click="saveEmailAddress()" type="button">
      <i class="icon-envelope">&nbsp;</i>Add to List
     </button>
    </div>
   </form>
   <script src="/angular/angular.min.js"></script>
   <script src="/angular-addon/liferay-service-provider.js"></script>
   <script>
    (function(app){
     app.config(["liferayProvider", function (liferayProvider) {
      liferayProvider.setToken(btoa("newsletterservice:newsletterservice"));
      liferayProvider.addTypes({
       name:"Newsletter",
       groupId: 24913,
       folderId: 24927,
       structureId: 24930,
       templateId: 24932
      });
     }]).controller("baseController", ["$scope", "liferay", function($scope, liferay){
      $scope.saveEmailAddress = function(){
       liferay["Newsletter"].create({Email:$scope.Email}).success(function(){
        document.querySelectorAll("#newsletterAlertBox").className = "alert alert-success";
        document.querySelectorAll("#newsletterBox").className += " hide";
       }).error(function(){
        console.warn(arguments);
       })
      };
     }]);
    }(angular.module("newsApp",["LiferayService"])));
   </script>
  </div>
</div>

I posted the code for the angular module, on github: https://github.com/akumagamo/javascript-liferay-angular-service, if you wanted to use it or try it out yourself.

Last Step:

Go to the SPA and enjoy the time you have saved. (Since a form like this can be build in 30 mins, and about 60-90 mins without the liferay-service-provider.js ) No Java, no Jenkins, no Maven, no ....  just Vanilla Liferay and some basic HTML and Javascript.

I'm eager to hear from other people and experiences. Please share any Ideas, Comments and Feedback you might have.