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
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 )
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