React
Para aplicações web e mobile
como plataforma de interface
@breno_calazans
VTEX
Por que estou falando de
React?
VTEX é uma plataforma
SaaS de e-commerce
Visite nosso estande!
Próximo ao restaurante
Como melhorar a construção de
interface de lojas?
Tentamos o modo tradicional
Não é possível ter uma
experiência ótima sem
interações complexas
A VTEX está construindo uma nova
plataforma para desenvolver
lojas como aplicações web
Breve História das
Aplicações Web
Javascript
<div>
<h1 id="title"></h1>
</div>
<script>
var title = document.getElementById
('title');
title.innerHTML = 'Ol...
jQuery
<div>
<h1 id="title"></h1>
</div>
<script>
$('#title').text('Olá, mundo!');
</script>
Frameworks
com Data Bind
e Templates
Angular, Ember, Knockout e
Backbone
<div data-bind="template: 'title-
template'">
</d...
Problemas
Muitos conceitos!
Filters, Directives, Services, Controllers,
Transclusion, Factory, Provider, etc…
SEO
Google
Linguagem de Template
Código
Imprevisível
“Na minha época era mais fácil…”
Request
Usuário abre uma
página
Servidor Banco
Lê os dados do
banco de dados
Servidor
Renderiza um
template com os
dados
R...
(data) => page
O Facebook parou para
repensar as boas práticas
React
Biblioteca Javascript para
construção de interfaces
Muitos conceitos
Componentes
Muitos conceitos
Código Imprevisível
(data) => HTML
Código Imprevisível
(data) => HTML
Código Imprevisível
Linguagem de Template
Tudo é Javascript
Linguagem de Template
Performance
Virtual DOM
Performance
SEO
Renderização Server-side
SEO
“E os designers?”
JSX
class Hello extends React.Component {
render() {
return <h1>Olá Mundo!</h1>;
}
}
JSX
API Declarativa
SQL, Regex e Programação funcional
SELECT * FROM users
WHERE name=”Silva”;
var table = Database.use(‘users’);
var users = table.getAll();
var result = filter...
Com React você não precisa
lidar diretamente com o DOM
Facebook, Netflix, Dropbox,
AirBnb, Reddit, PayPal,
Khan Academy, Walmart,
ESPN, Microsoft, Uber,
NFL, Mozilla, Globo
Ressalvas!
React não é bala de prata
Caso você não queira lidar com
renderização server-side, use
apenas em áreas logadas
Mobile Apps
Cordova & PhoneGap
Browser
● Não tem sistema de gestos
● Javascript não tem processos
paralelos
● Não tem acesso a capacidades
nativas
O ambiente nativo é muito mais
poderoso que o web
Mas tudo vem com um custo...
O ambiente nativo é mais hostil
iOS e Android
Equipes, ferramentas, projetos e
códigos diferentes
API Imperativa
React?
React foi feito para construir
qualquer sistema de interfaces
React Native
É um framework para construção
de aplicativos nativos usando
Javascript e React.
Arquitetura multicore
API Declarativa
“Escreva uma vez, rode em
qualquer lugar”
“Aprenda uma vez, desenvolva
em qualquer lugar”
“Compartilhe quando possível,
vá nativo quando necessário”
Compartilhe
● APIs
● Ferramentas
● Linguagem
● Código
Nativo
Compartilhe
● APIs
● Ferramentas
● Linguagem
● Código
Nativo
● Funcionalidades
Proprietárias
● Performance
● Investimentos...
Facebook Ads Manager
● Experiência nativa
● Feito pelo mesmo time
● Compartilha 80-95% do código
Concluindo
React mudou a comunidade
fundamentalmente
Popular
Github Stars
★ 43,131 React
★ 39,717 jQuery
★ 16,300 Ember
★ 12,540 Angular
Criou um
ecossistema
Pacotes no npm
15,202 React
9,915 jQuery
3,682 Ember
7,589 Angular
React
- Abstração simples
- Fácil de testar
- API Declarativa
- Desenvolvedores confiantes
- Facilita composição
- Várias ...
Obrigado
DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface
DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface
Upcoming SlideShare
Loading in …5
×

DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface

116 views

Published on

Breno Calazans, Software Engineer da VTEX, palestrou sobre "React para aplicações web e mobile como plataforma de interface", no DevCommerce Conference 2016.

O DevCommerce Conference 2016 aconteceu nos dias 06 e 07 de junho de 2016, no Hotel Tivoli em São Paulo-SP http://devcommerce2016.imasters.com.br/

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
116
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DevCommerce Conference 2016: React para aplicações web e mobile como plataforma de interface

  1. 1. React Para aplicações web e mobile como plataforma de interface @breno_calazans VTEX
  2. 2. Por que estou falando de React?
  3. 3. VTEX é uma plataforma SaaS de e-commerce
  4. 4. Visite nosso estande! Próximo ao restaurante
  5. 5. Como melhorar a construção de interface de lojas?
  6. 6. Tentamos o modo tradicional
  7. 7. Não é possível ter uma experiência ótima sem interações complexas
  8. 8. A VTEX está construindo uma nova plataforma para desenvolver lojas como aplicações web
  9. 9. Breve História das Aplicações Web
  10. 10. Javascript <div> <h1 id="title"></h1> </div> <script> var title = document.getElementById ('title'); title.innerHTML = 'Olá, mundo!'; </script>
  11. 11. jQuery <div> <h1 id="title"></h1> </div> <script> $('#title').text('Olá, mundo!'); </script>
  12. 12. 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>
  13. 13. Problemas
  14. 14. Muitos conceitos! Filters, Directives, Services, Controllers, Transclusion, Factory, Provider, etc…
  15. 15. SEO Google
  16. 16. Linguagem de Template
  17. 17. Código Imprevisível
  18. 18. “Na minha época era mais fácil…”
  19. 19. 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
  20. 20. (data) => page
  21. 21. O Facebook parou para repensar as boas práticas
  22. 22. React
  23. 23. Biblioteca Javascript para construção de interfaces
  24. 24. Muitos conceitos
  25. 25. Componentes Muitos conceitos
  26. 26. Código Imprevisível
  27. 27. (data) => HTML Código Imprevisível
  28. 28. (data) => HTML Código Imprevisível
  29. 29. Linguagem de Template
  30. 30. Tudo é Javascript Linguagem de Template
  31. 31. Performance
  32. 32. Virtual DOM Performance
  33. 33. SEO
  34. 34. Renderização Server-side SEO
  35. 35. “E os designers?”
  36. 36. JSX class Hello extends React.Component { render() { return <h1>Olá Mundo!</h1>; } } JSX
  37. 37. API Declarativa SQL, Regex e Programação funcional
  38. 38. 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
  39. 39. Com React você não precisa lidar diretamente com o DOM
  40. 40. Facebook, Netflix, Dropbox, AirBnb, Reddit, PayPal, Khan Academy, Walmart, ESPN, Microsoft, Uber, NFL, Mozilla, Globo
  41. 41. Ressalvas!
  42. 42. React não é bala de prata
  43. 43. Caso você não queira lidar com renderização server-side, use apenas em áreas logadas
  44. 44. Mobile Apps
  45. 45. Cordova & PhoneGap
  46. 46. Browser ● Não tem sistema de gestos ● Javascript não tem processos paralelos ● Não tem acesso a capacidades nativas
  47. 47. O ambiente nativo é muito mais poderoso que o web
  48. 48. Mas tudo vem com um custo...
  49. 49. O ambiente nativo é mais hostil
  50. 50. iOS e Android Equipes, ferramentas, projetos e códigos diferentes
  51. 51. API Imperativa
  52. 52. React?
  53. 53. React foi feito para construir qualquer sistema de interfaces
  54. 54. React Native
  55. 55. É um framework para construção de aplicativos nativos usando Javascript e React.
  56. 56. Arquitetura multicore
  57. 57. API Declarativa
  58. 58. “Escreva uma vez, rode em qualquer lugar”
  59. 59. “Aprenda uma vez, desenvolva em qualquer lugar”
  60. 60. “Compartilhe quando possível, vá nativo quando necessário”
  61. 61. Compartilhe ● APIs ● Ferramentas ● Linguagem ● Código Nativo
  62. 62. Compartilhe ● APIs ● Ferramentas ● Linguagem ● Código Nativo ● Funcionalidades Proprietárias ● Performance ● Investimentos Existentes
  63. 63. Facebook Ads Manager ● Experiência nativa ● Feito pelo mesmo time ● Compartilha 80-95% do código
  64. 64. Concluindo
  65. 65. React mudou a comunidade fundamentalmente
  66. 66. Popular Github Stars ★ 43,131 React ★ 39,717 jQuery ★ 16,300 Ember ★ 12,540 Angular
  67. 67. Criou um ecossistema Pacotes no npm 15,202 React 9,915 jQuery 3,682 Ember 7,589 Angular
  68. 68. React - Abstração simples - Fácil de testar - API Declarativa - Desenvolvedores confiantes - Facilita composição - Várias plataformas
  69. 69. Obrigado

×