globo
.com

ComponentSwarm
o problema
no início era difícil reaproveitar componentes...
...então criamos o globotv-ui
depois de um tempo...
depois de um tempo...
o problema
o problema
Componente de título de seção

globotv-ui base
Componente de botão
Componente de thumb
o problema
Componente de título de seção

globotv-ui base
Componente de botão
Componente de thumb
o problema
o problema

Componente de trilho
css

javascript

imagens

fontes

documentação
componente
imagens
/*
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=
*=

require
require
require
require
require
require
require
require
requir...
solução
Uma estrutura padronizada
!""
#  
#  
#  
#  
#  
#  
#  
#  
#  

component_1
!"" css
#   !"" body.css.scss
#   !"" heade...
o que o component swarm faz?
/*
*= use "globotv-ui/trilho"
*= swarm_import
*/
DEMO
Upcoming SlideShare
Loading in...5
×

Component Swarm

843

Published on

https://github.com/tulios/component_swarm

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
843
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Component Swarm

  1. 1. globo .com ComponentSwarm
  2. 2. o problema
  3. 3. no início era difícil reaproveitar componentes...
  4. 4. ...então criamos o globotv-ui
  5. 5. depois de um tempo...
  6. 6. depois de um tempo...
  7. 7. o problema
  8. 8. o problema Componente de título de seção globotv-ui base Componente de botão Componente de thumb
  9. 9. o problema Componente de título de seção globotv-ui base Componente de botão Componente de thumb
  10. 10. o problema
  11. 11. o problema Componente de trilho
  12. 12. css javascript imagens fontes documentação
  13. 13. componente imagens
  14. 14. /* *= *= *= *= *= *= *= *= *= *= *= *= *= *= *= *= require require require require require require require require require require require require require require require require globotv-ui/base globotv-ui/base-responsive globotv-ui/ficha globotv-ui/ficha-responsive globotv-ui/footer globotv-ui/footer-responsive globotv-ui/icon-font globotv-ui/gradient-background globotv-ui/header globotv-ui/header-responsive globotv-ui/grid globotv-ui/grid-responsive globotv-ui/hd globotv-ui/page-title globotv-ui/page-title-responsive globotv-ui/palco-info
  15. 15. solução
  16. 16. Uma estrutura padronizada !"" #   #   #   #   #   #   #   #   #   component_1 !"" css #   !"" body.css.scss #   !"" header.css.scss #   %"" main.css.scss !"" docs #   %"" index.md !"" js #   %"" main.js %"" manifest.json sass e coffescript são válidos E um descritor do componente { "css": ["main", "header", "body"], "js": ["main"], "libs": ["jquery"], "dependencies": [ "component_2" ], "docs": { "name": "Component 1", "description": "Lorem ipsum dolor", "category": "Base" } }
  17. 17. o que o component swarm faz? /* *= use "globotv-ui/trilho" *= swarm_import */
  18. 18. DEMO
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×