Upgrade to Pro — share decks privately, control downloads, hide ads and more …

#UseThePlatfom - Levando suas aplicações ao próximo nível com Polymer

YanMagale
October 21, 2017

#UseThePlatfom - Levando suas aplicações ao próximo nível com Polymer

Palestra realizada no Devfest NE 2017, realizado em Salvador #dfne2k17

Bibliotecas como React e VueJS tem mostrado muitas vantagens que podemos agregar em nosso projeto, trabalhando com componentes web e de uma forma desacomplada. O Ecossistema fornecido por cada uma delas e por toda a comunidade JS tornaram possível criarmos aplicações web muito poderosas, utilizando bibliotecas que criam componentes web. Mas e o Polymer, será que ele também esta preparado para criarmos projetos baseados em Web Components? Nesta palestra, faremos todo um overview pela versão 2.0 do Polymer lançada no Google I/O deste ano, ver todo o ciclo de desenvolvimento de um aplicação web, como fazer testes, como criar PWAs, como podemos utilizar bibliotecas modernas de gerenciamento de estado, como Redux, e várias outras bibliotecas JS. Também iremos ver quais as mudanças estão para acontecer no Polymer 3.0 e ver quais empresas já estão utilizando Polymer em seus projetos. Vamos descobrir juntos todo o poder que o browser ja nos oferece para a criação de Web Components, e ver como o Polymer pode nos ajudar a criar projetos melhores.

YanMagale

October 21, 2017
Tweet

More Decks by YanMagale

Other Decks in Programming

Transcript

  1. ASSUNTO QUE POR SI SÓ DARIA UMA PALESTRA INTEIRA, ENTÃO

    NÃO VOU FALAR A FUNDO SOBRE O ASSUNTO. O FOCO DA PALESTRA É O POLYMER ANTES DE INICIARMOS…
  2. “UNLOCK THE POWER OF WEB COMPONENTS. POLYMER IS A JAVASCRIPT

    LIBRARY THAT HELPS YOU CREATE CUSTOM REUSABLE HTML ELEMENTS, AND USE THEM TO BUILD PERFORMANT, MAINTAINABLE APPS.” https://www.polymer-project.org/
  3. AS GRANDES MUDANÇAS ▸ Custom Elements v1; Shadow Dom v1

    ▸ Criação de Componentes com ES6 Classes ▸ Melhorias em seu Data System (SUPER PODEROSO) ▸ Novos métodos de Life Cycle Component ▸ Modo Híbrido (Support Polymer v1) ▸ 25% do tamanho do Polymer v1.0
  4. ▸ Iniciar um Simples Web Component ▸ Iniciar uma PWA

    com PRPL, Navigation e outros componentes ▸ Ver o use case SHOP POLYMER INIT
  5. COMPONENTS, COMPONENTS, COMPONENTS ▸ Props ▸ Life Cycle Component ▸

    Mixim Classes ▸ Scoped Styles ▸ Custom CSS Properties ▸ Data Binding
  6. ▸ Service Workers ▸ Vibration, Battery, Ambient Light ▸ Bluetooth,

    Storage, Get User Media ▸ Geolocation, Accelerometer ▸ VR ▸ Physical Web WEB API’S #USETHEPLATFORM
  7. AS GRANDES MUDANÇAS ▸ Bower Yarn ▸ HTML Imports ES

    Modules Web Components 100% Native
  8. OUTROS CASES ▸ McDonalds (Menu Board) - https://twitter.com/AJStacy06/ status/857628546507968512 ▸

    Github - https://github.com/ ▸ Zeplin - https://zeplin.io ▸ Coca-Cola ▸ Netflix ▸ NASA https://github.com/Polymer/polymer/wiki
  9. ▸ https://www.polymer-project.org/ ▸ https://polymer-slack.com ▸ https://www.webcomponents.org/ ▸ PolyCasts - https://www.youtube.com/playlist?

    list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo ▸ https://github.com/hippie-elements/web-components-good- practices ▸ CSS Cast Show - https://www.youtube.com/channel/ UC9d_htYmYYFUXB2vBKx4NgA ▸ https://github.com/yanmagale/polymer-workshop-devweekend