Apenas Laravel

Não é suficiente!

Que história é essa?

Pergunto:

Já tentou desenvolver sem

Javascript?

Blade Templates

Eles são fantásticos!

Javascript e CSS

são inevitáveis

<?php

...

class ParticipantRepository {

    public function specific () {
        
        return Participant::with(['payment', 'skills'])
            ->where('payment.status', 'paid')
            ->whereIn('skills', ['php', 'mysql'])
            ->get(['first_name', 'last_name', 'email']);

    }

}


...

class ParticipantController {

    public function index () {

        $list = $repository->specific();

        $emails = $list->map(function ($participant) {
            return $participant->email;
        });
        

        return view('laraconf.participants.index')->with(compact('list', 'emails'));

    }

}

Isso é ser fluente!

E é este o presente que o Laravel nos deu:

SIMPLICIDADE!

Laravel Mix

<script>

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@app': resolve('src/features'),
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}
</script>

<script>

    let mix = require('laravel-mix');

    mix.js('resources/assets/js/main.js', 'public/js');

</script>

Laravel Mix

• Modules
• Vue.js components
• React
• SASS/LESS
• Vanilla Script (concatenação simples)
• CSS Extraction
• Minification
• Assets copy/paste
• Cache busting
• Browser sync / Hot reload

ZERO CONFIGURAÇÃO!

<script>

let mix = require('laravel-mix');

mix.js('resources/assets/js/main.js', 'public/js')

  .extract([
    'vue', 'vuex', 'd3', 'lightgallery', 'lodash', 'moment'
  ])

  .scripts([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
    'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
    'node_modules/jQuery-QueryBuilder/dist/js/query-builder.standalone.js',
    'node_modules/jquery-colorbox/jquery.colorbox.js',
    'node_modules/lightgallery/dist/js/lightgallery.js',
    'node_modules/lightgallery/dist/js/lg-thumbnail.js',
    'node_modules/lightgallery/dist/js/lg-zoom.js',
    'node_modules/lightgallery/dist/js/lg-pager.js',
    'node_modules/lightgallery/dist/js/lg-fullscreen.js',
    'node_modules/hopscotch/dist/js/hopscotch.js',
    'node_modules/velocity-animate/velocity.js',
    'node_modules/velocity-animate/velocity.ui.js',
    'resources/assets/js/libraries/mask/jquery.mask.js',
    'resources/assets/js/libraries/highcharts-4.2.5/highcharts-custom.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/heatmap.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/treemap.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/no-data-to-display.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/highcharts-more.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/highcharts-3d.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/solid-gauge.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/exporting.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/drilldown.src.js',
    'resources/assets/js/libraries/highcharts-4.2.5/data.src.js',
    'resources/assets/js/libraries/d3.js-v3/d3.js',
    'resources/assets/js/libraries/slick/slick.js',
    'resources/assets/js/ace-init.js',
    'resources/assets/js/octimine-2017.js',
  ], 'public/js/octimine.js')

  .styles([
    'node_modules/bootstrap/dist/css/bootstrap.css',
    'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
    'node_modules/font-awesome/css/font-awesome.css',
    'node_modules/jquery-colorbox/example4/colorbox.css',
    'node_modules/lightgallery/dist/css/lightgallery.css',
    'node_modules/lightgallery/dist/css/lg-transitions.css',
    'node_modules/sweetalert/dist/sweetalert.css',
    'node_modules/hopscotch/dist/css/hopscotch.css',
    'node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.css',
    'node_modules/jQuery-QueryBuilder/dist/css/query-builder.default.css',
    'resources/assets/js/libraries/slick/slick.css',
    'resources/assets/js/libraries/slick/slick-theme.css',
    'resources/assets/css/price_table.css',
    'resources/assets/css/octimine-2017.css',
  ], 'public/css/octimine.css')

  .copy('node_modules/lightgallery/dist/img/*', 'public/img')
  .copy('node_modules/lightgallery/dist/fonts/*', 'public/fonts')
  .copy('node_modules/font-awesome/fonts', 'public/fonts')
  .copy('node_modules/hopscotch/dist/img', 'public/img')
  .copy('resources/fonts', 'public/fonts')

  .version();

</script>

20 de Abril de 2015

/resources/assets/js/components

Fábio Vedovelli

www.youtube.com/vedovelli

@vedovelli