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/

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>

13. jQuery
<div>
<h1 id="title"></h1>
</div>
<script>
$('#title').text('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

18. Linguagem de Template

19. Código
Imprevisível

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

27. Componentes
Muitos conceitos

28. Código Imprevisível

29. (data) => HTML
Código Imprevisível

30. (data) => HTML
Código Imprevisível

31. Linguagem de Template

32. Tudo é Javascript
Linguagem de Template

33. Performance

34. Virtual DOM
Performance

35. SEO

36. Renderização Server-side
SEO

37. “E os designers?”

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

47. Cordova & PhoneGap

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.

58. Arquitetura multicore

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