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. 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 (?)
  2. 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/
  3. 4.

    WebComponents ( iframe ) • confinamento (acesso restrito à pagina

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

    WebComponents ( DOM ) • Carregamento de JS e CSS

    ficam por sua conta OLARK Live Chat www.olark.com jQuery-UI Slider Plugin ColorPicker
  5. 7.
  6. 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"> = +
  7. 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"> = +
  8. 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">
  9. 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">
  10. 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" ]
  11. 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" ]
  12. 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" ]
  13. 17.