Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
React
MEETUP 1
JS and native
Léo LE BRAS
@Leo_LeBras
leo.lebrasf@gmail.com
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 3
I heard REACT was good !
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 4
An overview of REACT ECOSYSTEM
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 5
2008 CHROME
2009 ANGULAR
history
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 6
2008 CHROME
2009 ANGULAR
2013 REACT
history
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 7
Facebook Ads Org
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 9
REACT, a view library
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 10
Components
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 11
State changes are UI changes.
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 12
markup logic
style
live coding
01
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 14
<App />
<Product /> <Product />
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 15
VIEW = f(data)
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 16
Cascading Updates
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 17
Predictable code
live coding
02
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 19
Virtual DOM
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 20
REACT
Declarative UI
Immutability
Composition
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 21
Components
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 22
REACT
Rethink established
best practices
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 23
UNIVERSAL
SEO Friendly
Performance
FLUX
FLUX
REDUX
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 26
<App />
<Product /> <Product />
<AddToCard /> <AddToCard />
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 27
<App />
<Product /> <Product />
DATA
<AddToCard /> <AddToCard />
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 28
<App />
<Product /> <Product />
<AddToCard /> <AddToCard />
STORE
live coding
03
#hard
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 30
REDUX
Single state tree
Everything is data
dispatch(action) >> reducers
Developer eXperience
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 32
DX
Hot reloading
Error handling
Debugging
Language
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 34
LANGUAGE
Babel (ES2015+)
Flow
Functional
GRAPHQL
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 36
https://api.wino.com/wines
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 37
https://api.wino.com/wines?page=2&itemPerPage=10
https://api.blog.com/vint...
`query {
post (id: 785461) {
title,
description,
author {
name,
}
}
}`
`query {
post (id: 785461) {
title,
description,
author {
name,
}
}
}`
{
"title": "I love Graphql",
"description": "...",
...
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 40
GRAPHQL
Flexible response format
Client specified queries
Strong-typing
REACT NATIVE
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 42
Native Development sucks
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 43
Platform-specific (Swift, Java ...)
Need solid knowledge
Re-build all the ...
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 44
Platform-specific (Swift, Java ...)
Need solid knowledge
Re-build all the ...
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 45
REACT NATIVE
Learn once, write anywhere
Write JavaScript for iOS and Andro...
huge hype !
live coding
04
And now ?
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 50
MVC > FLUX
SWIFT+JAVA > REACT NATIVE
REST > GRAPHQL
ANGULAR > REACT + REDUX
MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 51
Best pratices are WIP
thanks.
Léo LE BRAS
Creative Developer
@Leo_LeBras
leo.lebrasf@gmail.com
Workshop React.js et développement Javascript moderne
Workshop React.js et développement Javascript moderne
Prochain SlideShare
Chargement dans…5
×
Prochain SlideShare
Le chatbot présidentiel
Suivant

3

Partager

Workshop React.js et développement Javascript moderne

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

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

Workshop React.js et développement Javascript moderne

  1. 1. React MEETUP 1 JS and native
  2. 2. Léo LE BRAS @Leo_LeBras leo.lebrasf@gmail.com
  3. 3. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 3 I heard REACT was good !
  4. 4. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 4 An overview of REACT ECOSYSTEM
  5. 5. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 5 2008 CHROME 2009 ANGULAR history
  6. 6. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 6 2008 CHROME 2009 ANGULAR 2013 REACT history
  7. 7. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 7 Facebook Ads Org
  8. 8. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 9 REACT, a view library
  9. 9. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 10 Components
  10. 10. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 11 State changes are UI changes.
  11. 11. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 12 markup logic style
  12. 12. live coding 01
  13. 13. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 14 <App /> <Product /> <Product />
  14. 14. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 15 VIEW = f(data)
  15. 15. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 16 Cascading Updates
  16. 16. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 17 Predictable code
  17. 17. live coding 02
  18. 18. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 19 Virtual DOM
  19. 19. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 20 REACT Declarative UI Immutability Composition
  20. 20. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 21 Components
  21. 21. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 22 REACT Rethink established best practices
  22. 22. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 23 UNIVERSAL SEO Friendly Performance
  23. 23. FLUX
  24. 24. FLUX REDUX
  25. 25. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 26 <App /> <Product /> <Product /> <AddToCard /> <AddToCard />
  26. 26. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 27 <App /> <Product /> <Product /> DATA <AddToCard /> <AddToCard />
  27. 27. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 28 <App /> <Product /> <Product /> <AddToCard /> <AddToCard /> STORE
  28. 28. live coding 03 #hard
  29. 29. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 30 REDUX Single state tree Everything is data dispatch(action) >> reducers
  30. 30. Developer eXperience
  31. 31. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 32 DX Hot reloading Error handling Debugging
  32. 32. Language
  33. 33. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 34 LANGUAGE Babel (ES2015+) Flow Functional
  34. 34. GRAPHQL
  35. 35. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 36 https://api.wino.com/wines
  36. 36. 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
  37. 37. `query { post (id: 785461) { title, description, author { name, } } }`
  38. 38. `query { post (id: 785461) { title, description, author { name, } } }` { "title": "I love Graphql", "description": "...", "author": { "name": "Lee Byron", } }
  39. 39. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 40 GRAPHQL Flexible response format Client specified queries Strong-typing
  40. 40. REACT NATIVE
  41. 41. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 42 Native Development sucks
  42. 42. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 43 Platform-specific (Swift, Java ...) Need solid knowledge Re-build all the things !
  43. 43. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 44 Platform-specific (Swift, Java ...) Need solid knowledge Re-build all the things !
  44. 44. 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
  45. 45. huge hype !
  46. 46. live coding 04
  47. 47. And now ?
  48. 48. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 50 MVC > FLUX SWIFT+JAVA > REACT NATIVE REST > GRAPHQL ANGULAR > REACT + REDUX
  49. 49. MAY, 29TH 2019 REACT Léo Le Bras @Leo_LeBras 51 Best pratices are WIP
  50. 50. thanks.
  51. 51. Léo LE BRAS Creative Developer @Leo_LeBras leo.lebrasf@gmail.com
  • jobran41

    Oct. 9, 2019
  • DIKBOLISouleymane

    Aug. 1, 2018
  • ThoRousseau

    Jan. 26, 2017

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

Vues

Nombre de vues

4 672

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

3 260

Actions

Téléchargements

0

Partages

0

Commentaires

0

Mentions J'aime

3

×