<commit_before>Se baser sur Spectacle pour le moteur de prez ? https://formidable.com/open-source/spectacle/
inspirations :
http://fr.slideshare.net/nikgraf/react-redux-introduction
http://coenraets.org/present/react/
http://fr.slideshare.net/jaisanth/react-js
http://fr.slideshare.net/emadb/an-introduction-to-reactjs-46258876
https://react.rocks/blog/images/React_Intro_sept_2016.pdf
http://fr.slideshare.net/AndrewHull/react-js-and-why-its-awesome

- title
- qui sommes-nous ?
- A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
- séparation MVC. React : only the V
    - React n'a pas de:
        -controllers
        -directives
        -templates
        -global event listeners
        -models
        -view models
        Seulemement... des composants
- code exemple JQuery avec data dans le DOM
- histoire
    - avril 2012 rachat d'IG puis refonte / intégration
    - juin 2013, open source React
    - Utilisation interne à FB (messenger)
- Tour d'horizon, qui l'utilise ?
    - Apple (developer portal)
    - AirBNB,
    - Netflix
    - BBC (http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d)
    - Dropbox, Facebook, github, IG, Wired,
    - Yahoo Mail (http://www.slideshare.net/rmsguhan/react-meetup-mailonreact),
    - Reddit (mobile https://github.com/reddit/reddit-mobile)
    - Whatsapp web

- Difficulté ? https://twitter.com/thomasfuchs/status/708675139253174273
- build components, not templates
- exemple de composant basique
    - une seule méthode requise :render()
- jsx
- exemple jsx -> conversion en JS (React.DOM.p(....))
- encapsuler les composants (et réutiliser)
- passer des props (modèle descendant) -> photo pyramide verres champagne
- props are immutable, children can't touch props

- perf best practice
    - pas de grosse opé sur le DOM
    - limiter les accès au DOM
    - modifier les éléments avant de les ajouter au DOM

- React : re-render everything on every update (!)
- on nous aurait menti ?

- Virtual dom
    - DOM allégé (pour être belle en maillot cet été)
    - diff nouvelle version / ancienne version
    - Calcul des modifications à appliquer
    - Application en batch des modifications
- Component lifecycle



- Ok, on a un modèle descendant, mais on fait comment pour remonter ?
- Architecture/Concept Flux
    - MVC != Unidirectional data flow
    - Pas d'implémentation complète de FB (Dispatcher only)
    - microcosm / fluce / NuclearJS / disto / microflux / fluctuations

- Redux
    - Mai 2015 par <NAME> (ReactEurope)
    - Inspiration d'ELM (langage purement fonctionnel)
    - Mutation et asynchronisme (coca and mentos)
        - Ce que fait React : synchrone/total et sans mutation du DOM

- Princpe
    - Store unique qui represente le state de l'app : SINGLE SOURCE OF TRUTH
    - State read-only : modifiable en émettant des Actions
    - State modifié par des pure fonctions : les reducers

- Fonctionnement
    - State = composition de reducers
    - Chaine de reducer : (previousState, action) => newState
    - Middleware avant et après les reducers

- Middlewares
    + Logger
    + Delay

- Redux + React
    - @Connect pour remplacer le state et dispatch d'action

- Avantages
    - Pas du tout lié à React : redux.net, redux.rb
    - comportement déterministe et predictible
    - Tests unitaires triviaux
    - Architecture modulaire (plugins)
    - Voyage dans le temps / Bugtracking

- Demo TimeTravel

- ouverture vers react native

- Références
    + EggHead.io
    + Create React App (https://github.com/facebookincubator/create-react-app)
    + @dan_abramov et ?
    + ReactEurope
    + MUST SEE: Render 2016: Lee Byron 

- Des questions ? viendez chez nous, on kiffe react, et on est pas prêts de s'arrêter !
-- Ah au fait, cette prez tourne sous ReactJS ;)<commit_msg>add twitter accounts to follow<commit_after>Se baser sur Spectacle pour le moteur de prez ? https://formidable.com/open-source/spectacle/
inspirations :
http://fr.slideshare.net/nikgraf/react-redux-introduction
http://coenraets.org/present/react/
http://fr.slideshare.net/jaisanth/react-js
http://fr.slideshare.net/emadb/an-introduction-to-reactjs-46258876
https://react.rocks/blog/images/React_Intro_sept_2016.pdf
http://fr.slideshare.net/AndrewHull/react-js-and-why-its-awesome

- title
- qui sommes-nous ?
- A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
- séparation MVC. React : only the V
    - React n'a pas de:
        -controllers
        -directives
        -templates
        -global event listeners
        -models
        -view models
        Seulemement... des composants
- code exemple JQuery avec data dans le DOM
- histoire
    - avril 2012 rachat d'IG puis refonte / intégration
    - juin 2013, open source React
    - Utilisation interne à FB (messenger)
- Tour d'horizon, qui l'utilise ?
    - Apple (developer portal)
    - AirBNB,
    - Netflix
    - BBC (http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d)
    - Dropbox, Facebook, github, IG, Wired,
    - Yahoo Mail (http://www.slideshare.net/rmsguhan/react-meetup-mailonreact),
    - Reddit (mobile https://github.com/reddit/reddit-mobile)
    - Whatsapp web

- Difficulté ? https://twitter.com/thomasfuchs/status/708675139253174273
- build components, not templates
- exemple de composant basique
    - une seule méthode requise :render()
- jsx
- exemple jsx -> conversion en JS (React.DOM.p(....))
- encapsuler les composants (et réutiliser)
- passer des props (modèle descendant) -> photo pyramide verres champagne
- props are immutable, children can't touch props

- perf best practice
    - pas de grosse opé sur le DOM
    - limiter les accès au DOM
    - modifier les éléments avant de les ajouter au DOM

- React : re-render everything on every update (!)
- on nous aurait menti ?

- Virtual dom
    - DOM allégé (pour être belle en maillot cet été)
    - diff nouvelle version / ancienne version
    - Calcul des modifications à appliquer
    - Application en batch des modifications
- Component lifecycle



- Ok, on a un modèle descendant, mais on fait comment pour remonter ?
- Architecture/Concept Flux
    - MVC != Unidirectional data flow
    - Pas d'implémentation complète de FB (Dispatcher only)
    - microcosm / fluce / NuclearJS / disto / microflux / fluctuations

- Redux
    - Mai 2015 par <NAME> (ReactEurope)
    - Inspiration d'ELM (langage purement fonctionnel)
    - Mutation et asynchronisme (coca and mentos)
        - Ce que fait React : synchrone/total et sans mutation du DOM

- Princpe
    - Store unique qui represente le state de l'app : SINGLE SOURCE OF TRUTH
    - State read-only : modifiable en émettant des Actions
    - State modifié par des pure fonctions : les reducers

- Fonctionnement
    - State = composition de reducers
    - Chaine de reducer : (previousState, action) => newState
    - Middleware avant et après les reducers

- Middlewares
    + Logger
    + Delay

- Redux + React
    - @Connect pour remplacer le state et dispatch d'action

- Avantages
    - Pas du tout lié à React : redux.net, redux.rb
    - comportement déterministe et predictible
    - Tests unitaires triviaux
    - Architecture modulaire (plugins)
    - Voyage dans le temps / Bugtracking

- Demo TimeTravel

- ouverture vers react native

- Références
    + EggHead.io
    + Create React App (https://github.com/facebookincubator/create-react-app)
    + @dan_abramov,  @reactjs, @Vjeux, @sebmarkbage
    + ReactEurope
    + MUST SEE: Render 2016: <NAME> 

- Des questions ? viendez chez nous, on kiffe react, et on est pas prêts de s'arrêter !
-- Ah au fait, cette prez tourne sous ReactJS ;)
{'fraction_non_alphanumeric': 0.08700787401574803, 'fraction_numerical': 0.01837270341207349, 'mean_word_length': 2.932404540763674, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 12, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2935232', 'n_tokens_mistral': 2628, 'n_tokens_neox': 2454, 'n_words': 781}