FRONTEND & BACKEND: AN ENDLESS LOVE

210a2116d2266c84d155f1d8a14f31ef?s=47 FEVR
September 21, 2016

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.

210a2116d2266c84d155f1d8a14f31ef?s=128

FEVR

September 21, 2016
Tweet

Transcript

  1. 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.
  2. 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
  3. 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>
  4. 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
  5. 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
  6. 9.

    Bypass for Javascript Frameworks Hello, @{{ name }}. @verbatim <div

    class="container"> Hello, {{ name }}. </div> @endverbatim
  7. 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
  8. 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'); });
  9. 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
  10. 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
  11. 17.
  12. 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'); });
  13. 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
  14. 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'); });
  15. 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.
  16. 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.
  17. 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/'); });
  18. 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'); });
  19. 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">
  20. 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 }); });
  21. 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'); }
  22. 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).
  23. 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