Redux

Bonjour,  je m’appelle Stéphane, je suis Ingénieur développeur web et mobile chez NetDevices. Je suis spécialisé notamment dans le front web cependant il m’arrive également de faire du front mobile et du back javascript. Aujourd’hui je vous propose de nous intéresser à Redux.
Mais avant de parler de Redux, intéressons nous un peu à l’histoire des applications web.

En 2009 , un acteur important fait son apparition dans le monde des applications web : il s’agit d’Angular.

 

redux

Qu’est-ce qu’Angular?

Angular est un framework, c’est à dire un cadre de travail qui fournit aux développeurs  toutes les librairies et tous les outils permettant de créer des applications web intelligentes avec une logique et un traitement propre au navigateur. Cette technique ne nécessite pas de serveur.

Ce processus déjà présent à l’initial dans de solutions telles que Javascript et JQuery était beaucoup plus complexe. Angular a donc facilité le processus de création d’application web aussi bien que mobile. Cependant ce framework comportait des problèmes de performance.

Facebook a décidé de proposer quelque chose de plus performant qu’Angular, ce qui a abouti à la création de React. Cependant React touchait uniquement la modification des éléments visibles d’une application, sans prendre en compte la “logique”, l’aspect fonctionnel de celle-ci.

Pour une grosse application il fallait d’autres outils, notamment un capable de gérer “l’état” de l’application. Facebook a donc créé l’application “Flux”. Cependant Flux n’a pas fait l’unanimité.

Ce n’est qu’en fin 2015, donc moins de deux ans que Dan Abramov va apporter sa solution, Redux.

 

Qu’est ce que Redux ?

redux-netdevices

Redux est une librairie open source qui permet à une application en Javascript de savoir quel est l’état de la donnée. Cette librairie transmet une liste de tous les changements au niveau de l’état, ce qui va être utile en cas de bugg (ceci va permettre de retracer tout le cheminement et identifier les causes du bugg afin de les corriger).

Ainsi, la liste va être liée au store et mise à jour dès lors qu’il y aura une modification des composants (ajout/suppression). Ceci va être possible grâce à ce que l’on appelle les “reducers”. Ceux-ci vont “traiter” les nouvelles actions afin de les répertorier sur l’état de l’application . Ce processus a pour finalité de déclencher une fonction.

Redux Chez Netdevices

 

redux-netdevices

 

Nous utilisons actuellement  Redux pour la conception d’une application d’un de nos clients. Cette application dotée de multiples fonctionnalités (réseau social, check-in/ check-out,…) a pour objectif d’optimiser la gestion et le managérat de chantier.

 

netdevices

 

NetDevices est une équipe composée de chefs de projets méthodiques, de développeurs geeks, d’intégrateurs / webdesigners, tous passionnés du développement web et des nouvelles technologies.

Vous avez des projets digitaux? Nous donnons vie à vos ambitions et vous accompagnons dans tout le processus de transformation digitale.

Avec nos solutions Web2Mobile, Sharry (market place mobile), et notre partenariat avec IBM, nous savons répondre à vos besoins du plus simple au plus complexe.

Nos domaines technologiques de prédilection (mais pas seulement) : Fullstack JS, React Native, ReactJS, Nodejs, Angular 1&2, Ionic, Cordova, Redux… et les outils associés : Stack mean, Jira, Jenkins, Slack, Trello, intégration continue, TDD…

 

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/redux/" data-token="3d1e494449ec723bfd9cac3e7e670d66"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-recaptcha-container wpforms-is-recaptcha"><div class="g-recaptcha" data-sitekey="6Ld-v7wUAAAAAICtcpP_oL2unK8KqKzfkX04QsSN"></div><input type="text" name="g-recaptcha-hidden" class="wpforms-recaptcha-hidden" style="position:absolute!important;clip:rect(0,0,0,0)!important;height:1px!important;width:1px!important;border:0!important;overflow:hidden!important;padding:0!important;margin:0!important;" required></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="1"><input type="hidden" name="wpforms[post_id]" value="5449"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->