FRONTEND & BACKEND: AN ENDLESS LOVE

Frontend & Backend: an endless love

Con Marco Albarelli e Nicola Bosco riprendono gli incontri di FEVR

Doppio talk al prezzo di uno! In questo meetup racconteremo il rapporto tra Frontend e Backend, raccontando l’integrazione dello stack Frontend con due framework PHP: Symfony e Laravel.

Transcript

1. Frontend with Laravel Elixir 21-09-2016 Nicola Bosco
2. Nicola Bosco Php full-stack developer (with Frontend Attitudes) at Intesys
3. 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.
4. 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
5. Blade template engine Layouts + Sections <!­­ Stored in resources/views/layouts/app.blade.php ­­> <h1>App Name ­ @yield('title')</h1> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div>
6. Extending a layout <!­­ Stored in resources/views/child.blade.php ­­> @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @parent <p>This is appended to the master sidebar.</p> @endsection
7. Control structures (If, Loops) @if (count($records) >= 1) I have records! @else I don't have any records! @endif @foreach ($users as $user) <p>This is user {{ $user­>id }}</p> @endforeach
8. Service Injection @inject('products', 'App\Services\ProductsService') <div> Number of products: {{ $products­>countProducts() }}. </div>
9. Bypass for Javascript Frameworks Hello, @{{ name }}. @verbatim <div class="container"> Hello, {{ name }}. </div> @endverbatim
10. 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
11. Installation npm install E' già presente un package.json per l'installazione iniziale
12. Con guration Si utilizza il gulp le.js
13. Con guration gulp le.js iniziale const elixir = require('laravel­elixir'); require('laravel­elixir­vue'); /* |­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ | Elixir Asset Management |­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ */ elixir(mix => { //here goes the code mix.sass('app.scss') .webpack('app.js'); });
14. 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
15. Result details
16. 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
17. Tasks
18. Working with Css Sass Singolo le // da /resources/assets/sass/app.scss a /public/css/app.css elixir(function(mix) { mix.sass('app.scss'); });
19. 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
20. 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/another­css/another­app.css elixir(function(mix) { mix.sass('app.scss','public/another­css/another­app.css'); });
21. 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()
22. 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()
23. 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()
24. Working with Javascipt Un suggerimento di Laravel: Webpack + Vue
25. 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.
26. 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.
27. Browserify (Laravel 5.2 docs) // From resources/assets/js/app.js to public/js/app.js elixir(function(mix) { mix.browserify('app.js'); });
28. 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/other­assets/js/*.js to public/js/app.js elixir(function(mix) { mix.scriptsIn('resources/other­assets/js/'); });
29. 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'); });
30. Versioning / Cache busting //In gulpfile.js elixir(function(mix) { mix.version('css/all.css'); }); //In the blade view <link rel="stylesheet" href="{{ elixir('css/all.css') }}"> //The resulting html <link rel="stylesheet" href="css/all­16d570a7.css">
31. 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 }); });
32. Calling gulp tasks elixir(function(mix) { mix.task('deploy'); });
33. 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'); }
34. 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).
35. Resouces Elixir of cial page Laracasts: The Laravel suggestion, Webpack + Vue Laracasts: Elixir + Browserify + ES6 + React Laracasts: Vue Series Lessons Laracasts: ES2015 Series Lessons
36. Thanks! 21 Sep 2016 Nicola Bosco