Le paradigme
REACT
QUI SUIS-JE ?
Introduction
Comment Était le web avant React
petit apartÉ
Il y avait le Developpeur Web et l'intégrateur
Evolution du web
Guerre des navigateurs, firefox, chrome...
Le web 2.0
la genÈse des applications riches
- Le web est perçu comme une plate-forme
- L'internaute est co-développeur des applications
- La richesse se trouve dans les données
- Le web 2.0 s'appuie sur l'intelligence collective
- Il est nécessaire d'avoir des interfaces souples et légères
- Le logiciel se libère du PC
- ...Mais niveau archi et structuration.. :/
Petit ApartÉ 2
Il y a toujours le Developpeur Web et l'intégrateur...
...mais il fait un peu de JS
ANgularjs
fait son apparition en 2009
sans oublier:
- MeteorJS
- BackboneJS
- EmberJS
MAIS...MVC, POO..
Apporter la philosophie back-end dans le front-end
Le front-end est un écosystème très complexe, contrairement au back-end
Problèmes de performance dans le DOM
en parlant du dom
Petit ApartÉ 3
BACK-END DEVELOPER, FRONT-END DEVELOPER ET INTEGRATEUR
REACT
f(data) = ui
- Code plus clair (!)
- L'app est prédictible
- Composants réutilisables
- Gestion d'état
- Gérer toutes les updates d'interface
- Dom virtuel
- Peut être intégré à n'importe quel techno
- Universelle
- Immutabilité
- Programmation fonctionnelle
- Concepts librairies "agiles" vs frameworks monoléthiques
AVANTAGES
React n'a pas de…
… contrôleurs
… directives
… templates
… listeners d'events global
… modèles
Just des composants
Paradigme ?
modulaire
Phase 1
Structure | COMPORTEMENT | Presentation
HTML, CSS & JS
Phase 2
Structure & COMPORTEMENT | Presentation
DO NOT MIX LOGIC AND PRESENTATION
separation
of concerns
Phase 3
Structure & COMPORTEMENT & Presentation
Classic CSS
import styles from './Component.scss'
class Component extends React.Component {
state = {
counter: 0
}
onClick = (e) => this.setState({ count: this.state.count + 1 })
render() {
return (
<div className={styles.Component}"> // Component_xU7az
Je suis un composant React
<h1>{this.state.count}</h1>
<button onClick={this.onClick}>Count Up!!</button>
</div>
)
}
}
CSS-MODULES
.compteur {
background: 'blue';
border: '1px solid black'
}Phase 4
Structure & COMPORTEMENT & Presentation
MEANWHILE...
const styles = StyleSheet.create({
Component: {
border: '1px solid blue',
background: 'blue'
}
})
class Component extends React.Component {
state = {
counter: 0
}
onClick = (e) => this.setState({ count: this.state.count + 1 })
render() {
return (
<View style={styles.Component}">
Je suis un composant React
<h1>{this.state.count}</h1>
<button onClick={this.onClick}>Count Up!!</button>
</View>
)
}
}
CSS-in-JS
Phase 5
Structure & COMPORTEMENT & Presentation
& API CALL
flux / Redux
flux / Redux
/api/home
/api/campaign/last
/api/menu
/api/user/1
/api/bandeau
Relay / GraphQL
class Todo extends React.Component<Props> {
render() {
const {complete, text} = this.props.todo;
return (
<li>
<div>
<input
checked={complete}
type="checkbox"
/>
<label>
{text}
</label>
</div>
</li>
);
}
}
export default createFragmentContainer(
Todo,
graphql`
fragment Todo_todo on Todo {
complete
text
}
`
)Structure & COMPORTEMENT & Presentation & API CALL
Structure & COMPORTEMENT & Presentation
Structure & COMPORTEMENT & Presentation
Structure | COMPORTEMENT & Presentation
Structure | COMPORTEMENT | Presentation
Paradigme ?
CONCEPTUEL
REACT-NATIVE
REACT-NATIVE-WINDOWS
REACT-TV
REACT-THREE-RENDERER
REACT-NATIVE-macos
REACT-NATIVE-DESKTOP
REACT-SKETCHAPP
GL-REACT
REACT-GAME-KIT
REACT-360
REACT-NATIVE-WEB
Conclusion
vuejs, angular, RXJS, inferno, preact...
Le paradigme React
By Stéphane Montlouis-Calixte
Le paradigme React
Comprendre l'évolution du web, la nécessité d'une lib telle que React, le changement de paradigme que cela a apporté au développement front-end.
