+
Fábio Vedovelli (@vedovelli)
Web Dev desde 1998
PHP e JS
Laravel e Vue.js (também React)
Atualmente Sr. Front End Dev
octimine technologies de Munique, Alemanha
Programa de Aulas
Aula 1
. Conceitos presentes no front end dev
. Configuração projeto Laravel
. Configuração Vue
. Primeiro compomente
Programa de Aulas
Aula 2
. Explicação dos principais conceitos do
desenvolvimento com Vue.js
. Explicação dos principais recursos do Vue.js
. Desenvolvimento CRUD completo baseado em
componentes Vue.js
Programa de Aulas
Aula 3
. Transformação do projeto da aula anterior numa
Single Page Application
Por que Vue.js?
Front End
Desenvolver Front End é:
Escolher libraries/frameworks
Desenvolver
Lint
Concatenar/Minificar
Modularizar
Componentizar
...
Node.js
NPM e Yarn
Gulp
...
// compile all your Sass
gulp.task('sass', function (){
gulp.src(['./dev/sass/*.scss', '!./dev/sass/_variables.scss'])
.pipe(sass({
includePaths: ['./dev/sass'],
outputStyle: 'expanded'
}))
.pipe(prefix(
"last 1 version", "> 1%", "ie 8", "ie 7"
))
.pipe(gulp.dest('./dev/css'))
Gulp .pipe(minifycss())
.pipe(gulp.dest('./prod/css'));
});
// Uglify JS
gulp.task('uglify', function(){
gulp.src('./dev/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./prod/js'));
});
gulp.task('imagemin', function () {
gulp.src('./dev/img/**/*')
.pipe(imagemin())
.pipe(gulp.dest('./dev/img'))
.pipe(gulp.dest('./prod/img'));
});
gulp.task('default', function(){
// watch me getting Sassy
Webpack
Laravel Elixir
Laravel Elixir
Facilitador no uso do Gulp
Roda Module Bundler
(Browserify, Webpack, Rollup)
Adiciona Cache buster
Concatena e minificar JS e CSS
File Copy
Compila SASS/LESS
Compila ES2015
Gera Source Maps
Configuremos
Nosso Projeto