Palestra realizada no Devfest Campinas 2017 #devfestcampinas Descrição: 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.

1. #USETHEPLATFORM
LEVANDO SUAS APLICAÇÕES AO
PRÓXIMO NÍVEL COM POLYMER

2. OI, EU SOU O YAN
@yanmagale
@yaanmagale
yanmagalhaes.com.br

4. 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…

5. #DEVFESTCAMPINAS

7. “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/

9. 2013
▸ Custom Elements
▸ Shadow DOM
▸ HTML Template
▸ HTML Imports

10. Custom Elements
Shadow DOM
HTML Template

11. Use Your Component <3
HTML Imports

12. WEB COMPONENTS É O FUTURO!

13. 2015

14. A WEB E SEU ECOSSISTEMA EM CONSTANTE EVOLUÇÃO.
2016
A WEB DOS COMPONENTES.

15. BIBLIOTECAS E FRAMEWORKS

16. https://npmcharts.com/compare/react,angular,@angular/core,ember-cli,vue,@cycle/run,@polymer/polymer,react-router
Polymer

17. WEB COMPONENTS É O AGORA!
2017

18. https://www.webcomponents.org/

21. 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

22. npm install -g polymer-cli

23. ▸ polymer-init
▸ polymer-serve
▸ polymer-lint
▸ polymer-test
▸ polymer-build
POLYMER CLI

24. ▸ Iniciar um Simples Web Component
▸ Iniciar uma PWA com PRPL, Navigation e outros
componentes
▸ Ver o use case SHOP
POLYMER INIT

25. COMPONENTS, COMPONENTS, COMPONENTS
▸ Props
▸ Life Cycle Component
▸ Mixin Classes
▸ Scoped Styles
▸ Custom CSS Properties
▸ Data Binding

26. Mixin Classes
Properties

27. Custom Properties
Estilos por Valores de Propriedade

28. LIFE CYCLE COMPONENT

29. DÊ ASAS A SUA IMAGINAÇÃO!

30. EVENT PRESENT AUDIENCE
DEMO
https://github.com/yanmagale/event-present-audience

35. My Props

36. My Methods

37. WEB APPS

38. ▸ Service Workers
▸ Vibration, Battery, Ambient Light
▸ Bluetooth, Storage, Get User Media
▸ Geolocation, Accelerometer
▸ VR
▸ Physical Web
WEB API’S
#USETHEPLATFORM

39. POLYMER APP TOOLBOX

40. https://elements.polymer-project.org/

41. PROGRESSIVE WEB APPS

42. MY CALM APP
DEMO
https://github.com/yanmagale/my-calm-app

43. O QUE ESTÁ POR VIR …

45. AS GRANDES MUDANÇAS
▸ Bower Yarn
▸ HTML Imports ES Modules
Web Components 100% Native

46. QUEM USA O POLYMER HOJE?

52. 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

53. E COMO É O MERCADO? TEM JOBS ?

54. https://angel.co/synthace/jobs/282266-front-end-engineer

55. MAS NÃO TEM NADA AQUI NO NOSSO PAÍS?

56. NÃO ESTAMOS FALANDO SOBRE O POLYMER
NÃO ESTAMOS UTILIZANDO

57. https://github.com/polymer-brasil

60. ONDE POSSO APRENDER MAIS?

61. ▸ 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

62. “PLANEJAR É IMPORTANTE.
EXECUTAR É MAIS IMPORTANTE AINDA.”

63. OBRIGADO!
@yanmagale
@yaanmagale
yanmagalhaes.com.br
#USETHEPLATFORM