Front-End
Organizando
seu
Código
Quem sou?
Guilherme Guitte
Fatec Sorocaba
Desenvolvedor Web
Já trabalhei com Ruby on Rails
Trabalho na Leroy Merlin (Laravel4)
Front-End
"Na minha visão, aplicações Javascript
de larga escala são aplicações não-triviais
que requerem um esforço significante
de manutenção por parte do desenvolvedor,
onde maior parte do trabalho
de manipulação de dados e visualização
é atribuída ao navegador."
Addy Osmani
Complexidade das aplicações
Pequenas aplicações
Aplicações de larga escala
COMPLEXIDADE DAS APLICAÇÕES
Pequenas aplicações
- Style.css
- Templates
- scripts.js
- imagens
Complexidade das aplicações
- CSS com centenas de linhas.
- JS com plugins
- BEM SIMPLES
- com uma função jQuery executável
Aplicações de larga escala
Facebook
Twitter
Github
Amazon
...
Modularização
- CSS
- HTML
- jQuery
- Modularizando no Laravel
Modularização
O que é módulo?
Módulos
Módulo
módulo
<div class="thumbnail">
<img src="image.jpg" alt="image">
<div class="description">
<p class="pin-name"></p>
<p class="pin-count"></p>
</div>
<div class="pinneds"></div>
</div>
Módulos
/************* * modules/thumbnails.less **************/ .thumbnails {} .thumbnails > img {} .thumbnails .description {} .thumbnails .description .pin-name {} .thumbnails .description .pin-count {} /**************** * modules/pinneds.less **************/ .pinneds {} .pinneds .large {}
Módulo
- Short inheritance: 3-4 levels
- Classes portáveis
arquitetura
Pre-processadores:
LEES
SASS
Laravel:
http://jasonlewis.me/code/basset (less)
- minificação
- compila LESS
Leituras
http://oocss.org/
http://smacss.com/
javascript
http://addyosmani.com/largescalejavascript/
http://pivotal.github.io/jasmine/
http://compass-style.org/
Modularidade no Laravel
Usando blade
Modularização no Laravel
-
includes
- extends
- yield no layout
- sections
modularizando no Laravel
usando @section e @yields
<!-- views/layouts/main.blade.php -->
<!doctype html> <html lang="en"> <head> </head> <body>
@section('sidebar') This is the master sidebar. @show
<div class='main'> @yield('content') </div> </body> </html>
<!-- views/posts/index.blade.php -->
@section('content')
HTML here
@stop
Modularizando no LARAVEL
class BaseController extends Controller
{
protected $layout = 'layouts.main';
protected function setupLayout() { if ($this->layout) { $this->layout = View::make($this->layout); } }
}
MOdularlizando no Laravel
usando @extends e @includes
<!-- views/posts/index.blade.php -->
@extends('layouts.main')
@section('sidebar') @parent <p>This is appended to the master sidebar.</p> @stop
@section('content')
HTML here
@include('_topbar')
@stop
Obrigado!
Front-End
By guilhermeguitte
Front-End
- 1,959