Slide 1
Slide 1 text
Frontend with
Laravel
Elixir
21-09-2016 Nicola Bosco
Slide 2
Slide 2 text
Nicola Bosco
Php full-stack developer (with Frontend Attitudes)
at Intesys
Slide 3
Slide 3 text
Introducing Laravel
Laravel è un framework open source di tipo MVC scritto in
PHP per lo sviluppo di applicazioni web, creato nel 2011 da
Taylor Otwell come derivazione di Symfony.
Attualmente alla versione 5.3 è uno dei framework PHP più
utilizzati al momento.
Slide 4
Slide 4 text
A little Laravel overview
MVC framework, basato su Composer
Sintassi espressiva e intuitiva.
RestFul routing (VERB)
Eloquent ORM, Querybuilder, Migrations per
versionamento Db
Blade template engine
Unit testing con PHPUnit
Grande community, eccellente documentazione e tutorial
video su Laracast
Slide 5
Slide 5 text
Blade template engine
Layouts + Sections
App Name @yield('title')
@section('sidebar') This is the master sidebar. @show
@yield('content')
Slide 6
Slide 6 text
Extending a layout
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
This is appended to the master sidebar.
@endsectionSlide 7
Slide 7 text
Control structures (If, Loops)
@if (count($records) >= 1)
I have records!
@else
I don't have any records!
@endif
@foreach ($users as $user)
This is user {{ $user>id }}
@endforeachSlide 8
Slide 8 text
Service Injection
@inject('products', 'App\Services\ProductsService')
Number of products: {{ $products>countProducts() }}.
Slide 9
Slide 9 text
Bypass for Javascript Frameworks
Hello, @{{ name }}.
@verbatim
Hello, {{ name }}.
@endverbatim
Slide 10
Slide 10 text
A help for Frontenders - Elixir
Elixir è un'estensione di e fornisce una API che
sempli ca la con gurazione del proprio task runner su
Laravel.
Gulp
Slide 11
Slide 11 text
Installation
npm install
E' già presente un package.json per l'installazione iniziale
Slide 12
Slide 12 text
Con guration
Si utilizza il gulp le.js
Slide 13
Slide 13 text
Con guration
gulp le.js iniziale
const elixir = require('laravelelixir');
require('laravelelixirvue');
/*
|
| Elixir Asset Management
|
*/
elixir(mix => {
//here goes the code
mix.sass('app.scss')
.webpack('app.js');
});
Slide 14
Slide 14 text
Execution
Singola esecuzione dei task
gulp
Singola esecuzione dei task per l'ambiente di produzione
gulp production
Esecuzione dei task e refresh alla modi ca degli assets
gulp watch
Slide 15
Slide 15 text
Result details
Slide 16
Slide 16 text
Destinazione di default:
Default paths
Di default Elixir legge gli assets sorgenti da:
/resources/assets/[TYPE]/ //es: /resources/assets/sass/app.scss
/public/[TYPE]/ //es: /public/css/app.css
Slide 17
Slide 17 text
Tasks
Slide 18
Slide 18 text
Working with Css
Sass
Singolo le
// da /resources/assets/sass/app.scss a /public/css/app.css
elixir(function(mix) {
mix.sass('app.scss');
});
Slide 19
Slide 19 text
Sass
Vengono eseguiti l'autopre xer, generati i source maps e
mini cato il codice se si tratta di una compilazione per la
produzione
gulp production
Slide 20
Slide 20 text
Sass - Opzioni
Files multipli
// da /resources/assets/sass/.. a /public/css/app.css
elixir(function(mix) {
mix.sass(['app.scss','fixes.scss']);
});
Destinazione css custom
// da /resources/assets/sass/app.scss a /public/anothercss/anotherapp.css
elixir(function(mix) {
mix.sass('app.scss','public/anothercss/anotherapp.css');
});
Slide 21
Slide 21 text
Less
// da /resources/assets/less/app.less a /public/css/app.css
elixir(function(mix) {
mix.less('app.less');
});
Abbiamo la stessa essibilità di utilizzo di mix.sass()
Slide 22
Slide 22 text
Stylus
// da /resources/assets/stylus/app.styl a /public/css/app.css
elixir(function(mix) {
mix.stylus('app.styl');
});
Abbiamo la stessa essibilità di utilizzo di mix.sass()
Slide 23
Slide 23 text
Plain Css
// da /resources/assets/css/.. a /public/css/app.css
elixir(function(mix) {
mix.styles(['app.css','fixes.css']);
});
Abbiamo la stessa essibilità di utilizzo di mix.sass()
Slide 24
Slide 24 text
Working with Javascipt
Un suggerimento di Laravel: Webpack + Vue
Slide 25
Slide 25 text
Webpack
// From resources/assets/js/app.js to public/js/app.js
elixir(function(mix) {
mix.webpack('app.js');
});
Di default viene compilato ES2015 in ES5, generati i source
maps e mini cato il codice se si tratta di una compilazione per
la produzione
gulp production
Si può utilizzare il webpack.con g.js per con gurare
Webpack.
Slide 26
Slide 26 text
Rollup
"the next-generation JavaScript module bundler"
// From resources/assets/js/app.js to public/js/app.js
elixir(function(mix) {
mix.rollup('app.js');
});
Si può utilizzare il rollup.con g.js per con gurare Rollup.
Slide 27
Slide 27 text
Browserify (Laravel 5.2 docs)
// From resources/assets/js/app.js to public/js/app.js
elixir(function(mix) {
mix.browserify('app.js');
});
Slide 28
Slide 28 text
Plain Scripts
// From resources/assets/js/products.js + dashboard.js to public/js/app.js
elixir(function(mix) {
mix.scripts([
'products.js',
'dashboard.js'
]);
});
Concatenazione dei .js contenuti in una cartella
// From resources/otherassets/js/*.js to public/js/app.js
elixir(function(mix) {
mix.scriptsIn('resources/otherassets/js/');
});
Slide 29
Slide 29 text
Other Tasks
Copying Files & Directories
//File copy from vendor/foo/bar.css to public/css/bar.css
elixir(function(mix) {
mix.copy('vendor/foo/bar.css', 'public/css/bar.css');
});
//Directory copy from vendor/foo/ to public/css/
elixir(function(mix) {
mix.copy('vendor/foo', 'public/css');
});
Slide 30
Slide 30 text
Versioning / Cache busting
//In gulpfile.js
elixir(function(mix) {
mix.version('css/all.css');
});
//In the blade view
//The resulting html
Slide 31
Slide 31 text
BrowserSync
Refresh automatico del browser alla modi ca degli assets
tramite gulp watch.
//with local development on project.dev
elixir(function(mix) {
mix.browserSync({
proxy: 'project.dev' //Local Url of your application
});
});
Slide 32
Slide 32 text
Calling gulp tasks
elixir(function(mix) {
mix.task('deploy');
});
Slide 33
Slide 33 text
Custom Tasks
var Task = Elixir.Task;
Elixir.extend('speak', function(message) {
new Task('speak', function() {
return gulp.src('').pipe(shell('say ' + message));
})
.watch('./app/**'); //With watcher on gulp watch
});
elixir(function(mix) {
mix.speak('Hello World');
}
Slide 34
Slide 34 text
Considerations
I task proposti da Elixir, ed Elixir stesso, sono suggerimenti
di Laravel.
Probabilmente sono i backender a trarre più bene cio da
Elixir.
Nel caso di single page apps con un servizio API backend
valutare l'utilizzo di Lumen (minimal Laravel).
Slide 35
Slide 35 text
Resouces
Elixir of cial page
Laracasts: The Laravel suggestion, Webpack + Vue
Laracasts: Elixir + Browserify + ES6 + React
Laracasts: Vue Series Lessons
Laracasts: ES2015 Series Lessons
Slide 36
Slide 36 text
Thanks!
21 Sep 2016 Nicola Bosco