Backend + Frontend

Come lavorare sullo stesso progetto da due fronti senza impazzire

Backend + Frontend

Cosa vediamo stasera?

MVP sviluppato su SF3

(completamente TDD/BDD btw :) coverage al 98% )

Frontend Bootstrap

Sviluppo indipendente di FE/BE

Symfony 3

• Usava assetic (deprecato)
• Può coesistere con bower/gulp
• Si aspetta tutti gli asset in una cartella
  (web/ per default)

Symfony 3

app/   The application configuration, templates and translations.
bin/   Executable files (e.g. bin/console).
src/   The project's PHP code.
tests/  Automatic tests (e.g. Unit tests).
var/    Generated files (cache, logs, etc.).
vendor/ The third-party dependencies.
web/   The web root directory.

Un nuovo layout di directory

Symfony 3

I template dovrebbero stare in app/Resources/

Basta alla proliferazione di bundle

La nostra applicazione è l'unico bundle

Non c'è linea guida su dove debbano stare i sorgenti less sass e js

Symfony 3

Un approccio possibile:

Mettiamo less sass js e immagini in

src/AppBundle/Resources/

Il caso concreto

• MVP per la "Stanza del Cittadino"
• Prima release con Backend Symfony
• Frontend "alla vecchia" (non SPA, serverside forms)
• UX sviluppata basandosi su design.italia.it
  https://github.com/italia-it/designer.italia.it
• Tempi stretti? Nah, molto peggio
• Autenticazione forte tramite shibboleth
  (prima nemmeno io sapevo cosa fosse)

Il caso concreto

design.italia.it è basato su bootstrap

usa bower

Per un deploy integrato serviva aggiungere la parte bower alla parte Symfony3

Il caso concreto

Uno dei problemini più noiosi è il deploy

In questo caso il deploy è doppio:

Deploy SF3

Deploy Frontend

Il caso concreto

La soluzione:

Il caso concreto

La soluzione:

Il caso concreto

Lo script di deploy:

#!/bin/bash
export SYMFONY_ENV=prod
echo "Running in ${SYMFONY_ENV} env"
cd /home/httpd/ocsdc
rm -rf vendor/*
git checkout dev
git pull
composer install --no-dev --optimize-autoloader
bin/console doctrine:migration:migrate --env=prod
if [ $? == 0 ]
then
  npm install
  bower install
  mkdir -p var/build/lib
  cp -rf bower_components/* var/build/lib/
  gulp dist
  bin/console cache:clear --env=prod --no-debug
else
  echo "Errore nell'aggiornamento del database"
  exit 1
fi

Il caso concreto

Lo script di deploy:

#!/bin/bash
export SYMFONY_ENV=prod
echo "Running in ${SYMFONY_ENV} env"
cd /home/httpd/ocsdc
rm -rf vendor/*
git checkout dev
git pull
composer install --no-dev --optimize-autoloader
bin/console doctrine:migration:migrate --env=prod
if [ $? == 0 ]
then
  npm install
  bower install
  mkdir -p var/build/lib
  cp -rf bower_components/* var/build/lib/
  gulp dist
  bin/console cache:clear --env=prod --no-debug
else
  echo "Errore nell'aggiornamento del database"
  exit 1
fi

Parte SF3

Il caso concreto

Lo script di deploy:

#!/bin/bash
export SYMFONY_ENV=prod
echo "Running in ${SYMFONY_ENV} env"
cd /home/httpd/ocsdc
rm -rf vendor/*
git checkout dev
git pull
composer install --no-dev --optimize-autoloader
bin/console doctrine:migration:migrate --env=prod
if [ $? == 0 ]
then
  npm install
  bower install
  mkdir -p var/build/lib
  cp -rf bower_components/* var/build/lib/
  gulp dist
  bin/console cache:clear --env=prod --no-debug
else
  echo "Errore nell'aggiornamento del database"
  exit 1
fi

Parte SF3

Parte node

Il caso concreto

Lo script di deploy:

#!/bin/bash
export SYMFONY_ENV=prod
echo "Running in ${SYMFONY_ENV} env"
cd /home/httpd/ocsdc
rm -rf vendor/*
git checkout dev
git pull
composer install --no-dev --optimize-autoloader
bin/console doctrine:migration:migrate --env=prod
if [ $? == 0 ]
then
  npm install
  bower install
  mkdir -p var/build/lib
  cp -rf bower_components/* var/build/lib/
  gulp dist
  bin/console cache:clear --env=prod --no-debug
else
  echo "Errore nell'aggiornamento del database"
  exit 1
fi

Parte SF3

Parte node

Parte fuuu

Il caso concreto

Lo script di deploy:

#!/bin/bash
export SYMFONY_ENV=prod
echo "Running in ${SYMFONY_ENV} env"
cd /home/httpd/ocsdc
rm -rf vendor/*
git checkout dev
git pull
composer install --no-dev --optimize-autoloader
bin/console doctrine:migration:migrate --env=prod
if [ $? == 0 ]
then
  npm install
  bower install
  mkdir -p var/build/lib
  cp -rf bower_components/* var/build/lib/
  gulp dist
  bin/console cache:clear --env=prod --no-debug
else
  echo "Errore nell'aggiornamento del database"
  exit 1
fi

Parte SF3

Parte node

Parte fuuu

bower.json

{
  "name": "ita-bootstrap",
  "description": "Implementazione di riferimento per le Linee guida di design.italia.it",
  "authors": [
    "AgID"
  ],
  "license": "CC0",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap-sass": "bootstrap-sass-official#~3.3.5"
  },
  "overrides": {
    "bootstrap-sass": {
      "main": [
            "src/AppBundle/Resources/assets/stylesheets/_bootstrap.scss",
            "src/AppBundle/Resources/assets/javascripts/bootstrap.min.js",
            "src/AppBundle/Resources/assets/stylesheets/bootstrap/**/*"
      ]
    },
    "jquery": {
      "main": [
                  "src/AppBundle/Resources/dist/jquery.min.js"
      ]
    }
  }
}

Il caso concreto

gulpfile.js

const Writable = require('stream').Writable;
const buildDir = 'var/build';
const baseResourcesDir = 'src/AppBundle/Resources';
const sassDir = baseResourcesDir + '/sass';
const distDir = 'web/';

....

gulp.task('sass', ['bootstrap:customize'], function () {
    return gulp.src(buildDir + '/lib/bootstrap-sass/assets/stylesheets/ita-bootstrap.scss')
        .pipe(sass.sync({precision: 8}).on('error', sass.logError))
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(gulp.dest(distDir + '/css'));
});

gulp.task('dist', ['bootstrap:js', 'jquery', 'sass', 'cssimg'], function () {
});

Il caso concreto

I nostri sorgenti

il nostro output

Dentro un template twig

<link rel="stylesheet" type="text/css" href="{{ asset('css/ita-bootstrap.css') }}"/>

relativo a web/

Il caso concreto