DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface
0 gostou731 visualizações
O documento discute o uso do React como uma plataforma para construção de interfaces em aplicações web e mobile, enfatizando sua perfomance e flexibilidade. Também menciona como o React revolucionou a comunidade de desenvolvimento, criando um ecossistema robusto e facilitando a construção de aplicativos nativos com o React Native. Por fim, aborda vantagens e desafios na utilização do React, incluindo questões de SEO e a complexidade na renderização do lado do servidor.
DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface
- 1. React Para aplicações web e mobile como plataforma de interface @breno_calazans VTEX
- 2. Por que estou falando de React?
- 3. VTEX é uma plataforma SaaS de e-commerce
- 5. Visite nosso estande! Próximo ao restaurante
- 6. Como melhorar a construção de interface de lojas?
- 7. Tentamos o modo tradicional
- 8. Não é possível ter uma experiência ótima sem interações complexas
- 9. A VTEX está construindo uma nova plataforma para desenvolver lojas como aplicações web
- 11. Breve História das Aplicações Web
- 12. Javascript <div> <h1 id="title"></h1> </div> <script> var title = document.getElementById ('title'); title.innerHTML = 'Olá, mundo!'; </script>
- 14. Frameworks com Data Bind e Templates Angular, Ember, Knockout e Backbone <div data-bind="template: 'title- template'"> </div> <template id="title-template"> <h1 data-bind="text: $title"></h1> </template> <script> var viewModel = { title: '' }; ko.applyBindings(viewModel); viewModel.title('Olá, mundo!'); </script>
- 15. Problemas
- 16. Muitos conceitos! Filters, Directives, Services, Controllers, Transclusion, Factory, Provider, etc…
- 17. SEO Google
- 20. “Na minha época era mais fácil…”
- 21. Request Usuário abre uma página Servidor Banco Lê os dados do banco de dados Servidor Renderiza um template com os dados Response Página HTML Request Atende a requisição
- 22. (data) => page
- 23. O Facebook parou para repensar as boas práticas
- 24. React
- 25. Biblioteca Javascript para construção de interfaces
- 26. Muitos conceitos
- 29. (data) => HTML Código Imprevisível
- 30. (data) => HTML Código Imprevisível
- 32. Tudo é Javascript Linguagem de Template
- 33. Performance
- 35. SEO
- 38. JSX class Hello extends React.Component { render() { return <h1>Olá Mundo!</h1>; } } JSX
- 39. API Declarativa SQL, Regex e Programação funcional
- 40. SELECT * FROM users WHERE name=”Silva”; var table = Database.use(‘users’); var users = table.getAll(); var result = filter(users, (user) => { return user.name == “Silva”; }); API Declarativa API Imperativa
- 41. Com React você não precisa lidar diretamente com o DOM
- 42. Facebook, Netflix, Dropbox, AirBnb, Reddit, PayPal, Khan Academy, Walmart, ESPN, Microsoft, Uber, NFL, Mozilla, Globo
- 43. Ressalvas!
- 44. React não é bala de prata
- 45. Caso você não queira lidar com renderização server-side, use apenas em áreas logadas
- 46. Mobile Apps
- 48. Browser ● Não tem sistema de gestos ● Javascript não tem processos paralelos ● Não tem acesso a capacidades nativas
- 49. O ambiente nativo é muito mais poderoso que o web
- 50. Mas tudo vem com um custo...
- 51. O ambiente nativo é mais hostil
- 52. iOS e Android Equipes, ferramentas, projetos e códigos diferentes
- 53. API Imperativa
- 54. React?
- 55. React foi feito para construir qualquer sistema de interfaces
- 56. React Native
- 57. É um framework para construção de aplicativos nativos usando Javascript e React.
- 59. API Declarativa
- 60. “Escreva uma vez, rode em qualquer lugar”
- 61. “Aprenda uma vez, desenvolva em qualquer lugar”
- 62. “Compartilhe quando possível, vá nativo quando necessário”
- 63. Compartilhe ● APIs ● Ferramentas ● Linguagem ● Código Nativo
- 64. Compartilhe ● APIs ● Ferramentas ● Linguagem ● Código Nativo ● Funcionalidades Proprietárias ● Performance ● Investimentos Existentes
- 65. Facebook Ads Manager ● Experiência nativa ● Feito pelo mesmo time ● Compartilha 80-95% do código
- 66. Concluindo
- 67. React mudou a comunidade fundamentalmente
- 68. Popular Github Stars ★ 43,131 React ★ 39,717 jQuery ★ 16,300 Ember ★ 12,540 Angular
- 69. Criou um ecossistema Pacotes no npm 15,202 React 9,915 jQuery 3,682 Ember 7,589 Angular
- 70. React - Abstração simples - Fácil de testar - API Declarativa - Desenvolvedores confiantes - Facilita composição - Várias plataformas
- 71. Obrigado