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!

Made with Slides.com