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
- 2,005