http://hetic.net/actualites/workshop-reactjs-et-developpement-javascript-moderne Nous organisons un workshop sur le développement Javascript moderne. Vous aurez l'occasion de faire vos débuts sur React.js, Flux, Redux, GraphQL et même une petite intronisation au développement mobile avec React Native. Ce workshop aura lieu le 7 juin 2016 à HETIC et sera disponible en LIVE sur https://app.livestorm.co/p/aa09fe47-ac19-446d-a159-e09c282569ae

1. React
MEETUP 1
JS and native

2. Léo LE BRAS
@Leo_LeBras
leo.lebrasf@gmail.com

3. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 3
I heard REACT was good !

4. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 4
An overview of REACT ECOSYSTEM

5. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 5
2008 CHROME
2009 ANGULAR
history

6. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 6
2008 CHROME
2009 ANGULAR
2013 REACT
history

7. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 7
Facebook Ads Org

9. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 9
REACT, a view library

10. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 10
Components

11. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 11
State changes are UI changes.

12. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 12
markup logic
style

13. live coding
01

14. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 14
<App />
<Product /> <Product />

15. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 15
VIEW = f(data)

16. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 16
Cascading Updates

17. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 17
Predictable code

18. live coding
02

19. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 19
Virtual DOM

20. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 20
REACT
Declarative UI
Immutability
Composition

21. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 21
Components

22. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 22
REACT
Rethink established
best practices

23. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 23
UNIVERSAL
SEO Friendly
Performance

24. FLUX

25. FLUX
REDUX

26. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 26
<App />
<Product /> <Product />
<AddToCard /> <AddToCard />

27. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 27
<App />
<Product /> <Product />
DATA
<AddToCard /> <AddToCard />

28. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 28
<App />
<Product /> <Product />
<AddToCard /> <AddToCard />
STORE

29. live coding
03
#hard

30. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 30
REDUX
Single state tree
Everything is data
dispatch(action) >> reducers

31. Developer eXperience

32. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 32
DX
Hot reloading
Error handling
Debugging

33. Language

34. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 34
LANGUAGE
Babel (ES2015+)
Flow
Functional

35. GRAPHQL

36. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 36
https://api.wino.com/wines

37. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 37
https://api.wino.com/wines?page=2&itemPerPage=10
https://api.blog.com/vintages/181,983,139,653
https://api.blog.com/shops/4,87,34
https://api.blog.com/tags/2,41,17,13,9

38. `query {
post (id: 785461) {
title,
description,
author {
name,
}
}
}`

39. `query {
post (id: 785461) {
title,
description,
author {
name,
}
}
}`
{
"title": "I love Graphql",
"description": "...",
"author": {
"name": "Lee Byron",
}
}

40. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 40
GRAPHQL
Flexible response format
Client specified queries
Strong-typing

41. REACT NATIVE

42. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 42
Native Development sucks

43. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 43
Platform-specific (Swift, Java ...)
Need solid knowledge
Re-build all the things !

44. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 44
Platform-specific (Swift, Java ...)
Need solid knowledge
Re-build all the things !

45. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 45
REACT NATIVE
Learn once, write anywhere
Write JavaScript for iOS and Android
...with native-level performance

47. huge hype !

48. live coding
04

49. And now ?

50. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 50
MVC > FLUX
SWIFT+JAVA > REACT NATIVE
REST > GRAPHQL
ANGULAR > REACT + REDUX

51. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 51
Best pratices are WIP

52. thanks.

53. Léo LE BRAS
Creative Developer
@Leo_LeBras
leo.lebrasf@gmail.com