Criando WebComponents com WillJS

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.

A5850797ba1755c5704d14553aca7392?s=128

Marcelo Manzan

May 18, 2013
Tweet

Transcript

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

  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 (?)
  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/
  4. WebComponents ( iframe ) • confinamento (acesso restrito à pagina

    pai) • encapsulamento (protegido de acessos externos) • CSS e JS independentes Google Ads ( iframe ) reCAPTCHA ( form / iframe )
  5. WebComponents ( DOM ) • Carregamento de JS e CSS

    ficam por sua conta OLARK Live Chat www.olark.com jQuery-UI Slider Plugin ColorPicker
  6. Usando o jQuery-UI Slider ( guide )

  7. None
  8. WillJS + jQuery-UI Slider ( sample )

  9. WillJS - jqueryui.slider component

  10. Dependencies ( CSS, order ) <!-- (page) --> <link href="b.css">

    <link href="d.css"> <!-- (result) --> <link href="a.css"> <link href="c.css"> <link href="b.css"> <link href="d.css"> <link href="e.css"> = /* Dependencies */ [ "a.css" , "c.css" , "d.css" , "e.css" ] + /* Dependencies */ [ "a.css" , "d.css" , "^c.css" , "e.css" ] <!-- (result) --> <link href="a.css"> <link href="b.css"> <link href="c.css"> <link href="d.css"> <link href="e.css"> = +
  11. Dependencies ( CSS, order ) <!-- (page) --> <link href="b.css">

    <link href="d.css"> /* Dependencies */ [ "a.css" , "b.css" , "e.css" , "f.css" ] <!-- (result) --> <link href="a.css"> <link href="b.css"> <link href="e.css"> <link href="f.css"> <link href="d.css"> = + /* Dependencies */ [ "a.css" , "b.css" , "+e.css" , "f.css" ] <!-- (result) --> <link href="a.css"> <link href="b.css"> <link href="d.css"> <link href="e.css"> <link href="f.css"> = +
  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" ] <!-- (page) --> <script src="..." data-willjs-id="jquery-ui"></script> <link href="..." data-willjs-id="localhost_stylesheets_jq_jquery-ui">
  13. Dependencies ( CSS, themes ) • Substituindo folhas de estilo

    ◦ use "themeId@" antes do path /* Dependencies */ [ "ui-theme@/stylesheets/jquery-ui-theme1.css" ] <!-- (page) --> <link href="/stylesheets/jquery-ui-theme1.css" data-willjs-id="ui-theme"> <!-- (page) --> <script> will.use("ui-theme@/stylesheets/jquery-ui-theme2.css")(); </script> <link href="/stylesheets/jquery-ui-theme2.css" data-willjs-id="ui-theme">
  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" ]
  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" ]
  16. Dependencies ( cache ) <!-- (imports) --> <script src="//.../ajax/libs/1.9/jquery.min.js?1"></script> <script

    src="//.../ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script src="/javascripts/ckeditor.js?0.9.5-25"></script> <!-- (page) --> <script src="/javascripts/will/will.min.js?0.9.5-25"></script> /* 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" ]
  17. DEMO

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