Da alcuni mesi abbiamo accettato un’interessante sfida per nuovo cliente Neomobile entrando a far parte del team di sviluppo del nuovo pannello di amministrazione, di verifica e reportistica per Onebip, la loro piattaforma di pagamento su credito telefonico.
Dopo una prima macro analisi delle esigenze del cliente, abbiamo ritenuto fondamentale l’implementazione di un software amministrativo semplice da utilizzare per gli utenti, dove l’usabilità e la facilità di integrazione con la loro base dati fosse il punto di forza di tutto il software.
La scelta tecnologica
Vista l’esigenza di raggiungere risultati in tempi brevi, la nostra proposta è stata fin da subito di implementare una Single Page Application (SPA) che comunicasse con la business logic del cliente attraverso un architettura REST. Il cliente ha accettato entusiasta e siamo scesi nel dettaglio della scelta tecnologica.
Forti delle nostre competenze sia nello sviluppo frontend che backend, abbiamo fatto cadere la scelta tecnologica su due prodotti software Open Source, secondo noi irresistibili: AngularJs e Silex.
Come interfaccia grafica, dopo una votazione interna al team, si è scelto di utilizzare Flex Admin, un tema responsivo sviluppato sul framework css Bootstrap. Questo ci ha dato la possibilità di sviluppare con molta velocità le funzionalità avendo già a disposizione un set di oggetti UI pronti all’uso.
AngularJs e Silex
AngularJs è l’innovativo framework sviluppato dalla famosa azienda di Mountain View, framework che ha rivoluzionato il modo di sviluppare Single Page Application, introducendo concetti provenienti da altri linguaggi come il data binding, la dependency injection e sviluppando addirittura un framework di test end to end, che permette di facilitare il test delle applicazioni stesse.
“HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.”
Silex, invece, è un micro framework php leggero e performante che appoggiandosi sulle spalle dei giganti – i componenti di Symfony – offre la possibilità di sviluppare servizi restful attraverso un sistema di routing semplice e potente che permette di definire rotte su tutti i verbi del protocollo HTTP, implementare autenticazioni stateless e definire dinamicamente i servizi attraverso la dependency injection.
“Silex is a PHP microframework for PHP 5.3. It is built on the shoulders of Symfony2 and Pimple and also inspired by sinatra. A microframework provides the guts for building simple single-file apps. Silex aims to be:
Concise: Silex exposes an intuitive and concise API that is fun to use.
Extensible: Silex has an extension system based around the Pimple micro service-container that makes it even easier to tie in third party libraries.
Testable: Silex uses Symfony2’s HttpKernel which abstracts request and response. This makes it very easy to test apps and the framework itself. It also respects the HTTP specification and encourages its proper use.”
Siamo abituati a scegliere solo prodotti software che siano coperti da test automatici e che consentano facilmente a loro volta di testare in maniera unitaria ed efficiente le nuove funzionalità sviluppate per i nostri clienti. AngularJs e Silex rispettano questo requisito fondamentale. Per noi testare il codice non è solo il minimo necessario per garantire sicurezza e continua affidabilità ai nostri clienti ma ci aiuta, attraverso il Test Driven Development (TDD), anche a far emergere il design più appropriato del nostro software.
Se vuoi sapere di più sul TDD abbiamo scritto un libro, Pro PHP Refactoring, su come eseguirlo se sviluppi in PHP.
Sviluppare una Single Page Application
Sviluppare una Single Page Application significa sviluppare un software con architettura a micro servizi dove tutta la logica di view viene servita dal browser, mentre la logica di business viene gestita esclusivamente dal server attraverso API REST, che servono tutte le funzionalità per l’accesso e la gestione di ogni risorsa. La comunicazione tra browser e API avviene attraverso richieste XHR. Tutta la comunicazione avviene scambiando dati in formato JSON che vengono poi analizzati e rappresentati dal browser utilizzando specifiche funzioni del framework Javascript.
Di seguito un piccolo tutorial su come sia possibile implementare una semplice Single Page Application che stampa il noto “Hello world” con AngularJs e Silex.
Per prima cosa creiamo una nuova cartella “helloworld”. Entriamo nella cartella e installiamo Silex utilizzando Composer, per farlo scarichiamo Composer e lanciamo il comando “php composer.phar require silex/silex”.
Successivamente creiamo una cartella “web”, entriamo nella cartella e installiamo AngularJs utilizzando Bower. Per farlo installiamo Bower attraverso npm e lanciamo il comando “bower install angular”.
A questo punto, rimanendo nella cartella “web” creiamo il file “api.php” che sarà il punto di accesso alla nostra api.
<?php
// web/api.php
require_once __DIR__.'/../vendor/autoload.php';
$app = new SilexApplication();
$app->get('/helloworld', function () use ($app) {
return 'Hello World';
});
$app->run();
Alla riga 7 abbiamo definito la rotta /helloworld che restituisce semplicemente la stringa “Hello World”. Questo sarà il servizio che utilizzeremo per stampare la nostra scritta attraverso AngularJs.
Nella stessa cartella “web” creiamo il file “index.html” che conterrà la nostra Single Page Application in AngularJs.
<!doctype html>
<html lang="en" ng-app="hwApp">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-controller="hwCtrl">
<h1>{{ serverData }}</h1>
<script type="text/javascript">
angular.module('hwApp', [])
.controller('hwCtrl', function($scope, $http){
$http.get('/api.php/helloworld').success(function(data){
$scope.serverData = data;
})
});
</script>
</body>
</html>
La chiamata al nostro servizio avviene alla riga 14, utilizzando il servizio $http di AngularJs. Se la chiamata va a buon fine assegniamo al parametro dello $scope serverData il valore che ci ha restituito il servizio. Attraverso il data binding automatico di AngularJs vedremo comparire nella nostra pagina la scritta “Hello World” all’interno del tag h1 alla riga 9.
