Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

FRONTEND & BACKEND: AN ENDLESS LOVE

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.

FEVR

September 21, 2016
Tweet

More Decks by FEVR

Other Decks in Programming

Transcript

  1. 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. 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. 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. 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. 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. Bypass for Javascript Frameworks Hello, @{{ name }}. @verbatim <div

    class="container"> Hello, {{ name }}. </div> @endverbatim
  7. 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. 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. 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. 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. Working with Css Sass Singolo le // da /resources/assets/sass/app.scss a

    /public/css/app.css elixir(function(mix) { mix.sass('app.scss'); });
  12. 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
  13. 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'); });
  14. 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.
  15. 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.
  16. 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/'); });
  17. 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'); });
  18. 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">
  19. 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 }); });
  20. 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'); }
  21. 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).
  22. Resouces Elixir of cial page Laracasts: The Laravel suggestion, Webpack

    + Vue Laracasts: Elixir + Browserify + ES6 + React Laracasts: Vue Series Lessons Laracasts: ES2015 Series Lessons