Backend + Frontend

Come lavorare sullo stesso progetto da due fronti senza impazzire

Backend + Frontend

Chi sono?

Sono il papà di una bellissima bambina di 2 anni abbondanti,
Sono un autodidatta che bighellona e lavora in questo campo da tanti anni:

come lavoro dal 2003, libero professionista dal 2010


Convintissimo sostenitore del TDD e dei microservizi, siccome mi son stufato di lavorare sul serio sto iniziando a dire alla gente come andare su AWS, molta meno fatica :)
 

Utente solo linux finché Steam non mi ha fatto tornare la scimmia del gaming.
Da quella volta sostengo la necessità di un setup SLI per il pc da lavoro (e di una partizione Win :D )

Marco Albarelli

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

Tah Dah

Prossimi passi

  • Sistemare gli script
  • Farli eseguire da ansible
  • Deployare su AWS
  • Trasformare la UI in una SPA

Cos'ho imparato

È bello fare sia il frontend che il backend

ognuno deve fare il proprio mestiere

I due mondi possono coesistere :)

Domande?

Grazie

Scusate il `post` lungo, ecco una patata

Frontend e Backend

By marcoalbarelli

Frontend e Backend

Come lavorare da due fronti su uno stesso progetto senza diventare matti

  • 897
Loading comments...

More from marcoalbarelli