Criando WebComponents com WillJS

Palestra realizada no DevInSampa 2013 (http://devinsampa.com.br/) sobre como construir componentes facilmente utilizando o framework WillJS para gerenciar dependências.

Transcript

1. Criando WebComponents
   com WillJS
   Marcelo Manzan
   @kawamanza | github.com/kawamanza
   

   View Slide

2. O que são Components?
   ● mecanismos que atendem uma necessidade
   sistêmica específica (às vezes mais de uma)
   ● adaptável (de acoplamento fácil)
   ● Sinônimos
   ○ Plugins
   ○ Addons (browser extensions)
   ○ Gems / Libs
   ○ Frameworks (?)
   

   View Slide

3. O que são WebComponents?
   ● Widgets (quando visíveis ao usuário –
   window + gadget)
   ● também podem não ser visíveis (ex:
   Workers, serviços HTTP)
   ● são construídos como applets, flash, iframe
   ou diretamente na página
   ● W3C Working Draft (22 May 2012):
   ○ http://www.w3.org/TR/components-intro/
   ○ http://www.w3.org/TR/shadow-dom/
   

   View Slide

4. WebComponents ( iframe )
   ● confinamento (acesso restrito à pagina pai)
   ● encapsulamento (protegido de acessos
   externos)
   ● CSS e JS independentes
   Google Ads
   ( iframe )
   reCAPTCHA
   ( form / iframe )
   

   View Slide

5. WebComponents ( DOM )
   ● Carregamento de JS e CSS ficam por sua
   conta
   OLARK Live Chat
   www.olark.com
   jQuery-UI Slider Plugin
   ColorPicker
   

   View Slide

6. Usando o jQuery-UI Slider ( guide )
   

   View Slide

7. View Slide

8. WillJS + jQuery-UI Slider ( sample )
   

   View Slide

9. WillJS - jqueryui.slider component
   

   View Slide

10. Dependencies ( CSS, order )
    
    
    
    
    
    
    
    
    
    =
    /* Dependencies */
    [ "a.css"
    , "c.css"
    , "d.css"
    , "e.css"
    ]
    +
    /* Dependencies */
    [ "a.css"
    , "d.css"
    , "^c.css"
    , "e.css"
    ]
    
    
    
    
    
    
    =
    +
    

    View Slide

11. Dependencies ( CSS, order )
    
    
    
    /* Dependencies */
    [ "a.css"
    , "b.css"
    , "e.css"
    , "f.css"
    ]
    
    
    
    
    
    
    =
    +
    /* Dependencies */
    [ "a.css"
    , "b.css"
    , "+e.css"
    , "f.css"
    ]
    
    
    
    
    
    
    =
    +
    

    View Slide

12. Dependencies ( WillJS asset ID )
    ● Identificando asset já existente na página:
    /* Dependencies */
    [ "/javascripts/jq/jquery-ui-1.10.3.min.js"
    , "/stylesheets/jq/jquery-ui-1.10.3.min.css"
    ]
    
    
    
    

    View Slide

13. Dependencies ( CSS, themes )
    ● Substituindo folhas de estilo
    ○ use "themeId@" antes do path
    /* Dependencies */
    [ "ui-theme@/stylesheets/jquery-ui-theme1.css" ]
    
    
    
    <br/>will.use("ui-theme@/stylesheets/jquery-ui-theme2.css")();<br/>
    
    

    View Slide

14. Dependencies ( JS, asset ID )
    ● Forçando um ID para JSs
    ○ use "jsId@" antes do path
    /* Dependencies */
    [ "//ajax.googleapis.com/ajax/libs/1.9/jquery.min.js"
    , "/javascripts/ckeditor.js"
    , "cke_jquery_adapter@/javascripts/ckeditor/adapters/jquery.js"
    ]
    

    View Slide

15. Dependencies ( JS, fallbacks )
    ● Tolerando falhas no carregamento
    ○ use " | " (pipe) no início do path
    /* Dependencies */
    [ "//ajax.googleapis.com/ajax/libs/1.9/jquery.min.js"
    , "|//assets.mydomain.com/js/jquery-1.9.1.min.js"
    , "|//js/jquery-1.9.1.min.js"
    ]
    

    View Slide

16. Dependencies ( cache )
    
    
    
    
    
    
    /* Dependencies */
    [ "//ajax.googleapis.com/ajax/libs/1.9/jquery.min.js?1"
    , "//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js?"
    , "/javascripts/ckeditor.js"
    ]
    

    View Slide

17. DEMO
    

    View Slide

18. Obrigado!
    Perguntas...?
    Marcelo Manzan
    @kawamanza | github.com/kawamanza
    

    View Slide