sujet d'étude — 2020
Reactjs.org
Utilisation de la célèbre librairie Reactjs.org, depuis les bases, passant par les "Hooks" et le "Context API", Redux et de nombreuses "features"...
Objectifs
Apprendre sur des cas concrets, simples et plus complexes, les concepts autour de la librairie React, s'adaptant petit à petit aux pratiques du métier.
Stack
React Hooks & Context API, Redux
PostgreSQL, firebase, mongo, stripe, styled components
Topics
React / redux, les fondamentaux
SPA, virtual DOM, JSX, routing
States management, reducer, store, data flow
Problème
Bien que nous devrions pas être influencé par la tendance, il s'avère qu'avec la demande du marché, il devient cohérent d'apprendre la maitrise de cette librairie, intégrant les grands concepts, les cas d'utilisations et les pratiques métier.
Appréhender un framework, une librairie, demande un peu de temps, ne serait ce que pour aborder les concepts clés en terme théorique et d'alors pratiquer, itérer et s'améliorer afin d'assurer le bon fonctionnement de nos applications. Il vient donc après cela une démarche nécessaire pour mettre en oeuvre les bonnes pratiques et les solutions utilisées par les principaux acteurs du métier.
Le travail sur "Javascript" est un défi passionant. Ce language peut paraitre déroutant pour certains, il va de soi qu'il nécessite une approche différente et "personnelle" demandant donc plus de temps pour le comprendre plus en profondeur. Ceci est le premier travail avant même d'approcher la librairie React.
Avec le temps, j'apprend à prioriser mon travail par une réflexion et une organisation me permettant d'aborder ces difficultés de façon d'avantage professionnelle. Apprendre à gérer la compléxité d'un projet, par une réflexion de son architecture et la compréhension de son écosystème est un point primordial. Il aura un impact considérable sur le travail de développement
De façon plus générale en Javascript, il est nécessaire d'apprendre quelques principes fondamentaux, quelques design patterns, quelques pratiques de l'orienté objet et de la programmation fonctionnelle.
Les principes tels que le gestionnaire d'états, le control de ses données et son flow, la notion de "separate concern" "Single responsability Principle" ou bien la gestion de son code en terme de volume évitant de fait les logiques imbriquées aura un impacte considérable sur la qualité du code final et aidera également à l'implémentation de suites de tests...
Cette démarche m'est venu plus récemment dès lors que j'ai regardé de prêt ce qu'était les problématiques du métier. Dès lors l'emploi de Typescript sur les projets est naturellement venu, permettant ainsi un meilleur controle sur les "types" et se couplant parfaitement au paradigmes de programmation afin d'encadrer notre travail et de se rassurer sur le comportement de l'application.
"CRA" utilise les Hooks de React et leur concept de "Context", une base de données MongoDB (NoSQL) ainsi qu'un serveur Express / Nodejs.
Objectif
Aborder un projet complexe avec les React Hooks & Context sur un modèle de blog / réseau social.
Stack
React Hooks & Context API
Node, Express, MongoDB
Links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores doloribus voluptas libero delectus qui deleniti voluptatem, hic quasi! Aliquam repudiandae, sit quas possimus sed quam. Eaque repellendus repellat eius omnis! Magnam ab facilis illum quod consectetur veniam ut cumque sit. Iure libero et accusantium facere voluptatem nesciunt laborum assumenda sit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellat minus dolore sapiente iure corporis fugiat ea, perspiciatis dolor excepturi! Illo libero in numquam pariatur! Ab maiores quo illum officia, aliquid pariatur iusto est suscipit odio? Fugit vitae unde officia itaque ad tempore quia deleniti!
Code Review
Au regard de mon code sur ce projet et avec du recul, je ne me satisfait de l'organisation des fichiers.
Je me dis que cela peut être mieux organisé avec certainement une architecture de dossier plus intéressante. Cela faciliterai la lecture du programme, sa maintenance et rendrai le résultat bien plus propre au final. Je vais par conséquent, veiller à rechercher ce qu'il se fait concernant ce type de projet et adapter cela en fonction du projet en question. J'aimerai, dans l'idéal proposer un produit final beaucoup plus pratique à comprendre le fonctionnement ainsi que pour naviguer à travers les dossiers et fichiers.
Je profiterai, dès lors que je tacherai règler ce problème, de faire un "check up" quant à MongoDB et l'enregistrement de données. Il y a quelques "issues to fix" depuis le temps...
Avant — Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam magni voluptatem corrupti quis aliquid nostrum maxime animi, iure nobis aperiam exercitationem, numquam qui illo officiis?
Après — Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam eligendi quae eveniet ut sapiente rerum esse eos vitae placeat consequuntur, mollitia enim dolorum! Iste, beatae.
"The Crown Clothing e-commerce" est un projet React / Redux comprenant l'authentification, la connection à Firebase, le système de paiement "Stripe" ect.
Objectif
Aborder un projet complexe avec React / Redux sur un modèle d'e-commerce.
Stack
React / Redux
Firebase, Stripe
Redux Saga, GraphQL, Apollo
Links
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores doloribus voluptas libero delectus qui deleniti voluptatem, hic quasi! Aliquam repudiandae, sit quas possimus sed quam. Eaque repellendus repellat eius omnis! Magnam ab facilis illum quod consectetur veniam ut cumque sit. Iure libero et accusantium facere voluptatem nesciunt laborum assumenda sit!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem repellat minus dolore sapiente iure corporis fugiat ea, perspiciatis dolor excepturi! Illo libero in numquam pariatur! Ab maiores quo illum officia, aliquid pariatur iusto est suscipit odio? Fugit vitae unde officia itaque ad tempore quia deleniti!
Listing récapitulatif des différentes "tasks", concepts clés abordés lors des différents projets ...
Reactjs.org reste une certaine manière d'implémenter du Javascript. Nouvelle Techno, nouvelle "doc", nouveaux concepts, à nous de nous adapter à la syntaxe, de visualiser l'application dans son ensemble ainsi que les différentes utilisations de la librairie.
- Les principales "features" de Reactjs : le DOM "Virtuel", le rendu côté serveur (SSR), le flow de données unidirectionnel, les "UI Components" que l'on peut composer et ré-utiliser.
- La syntaxe JSX : du javascript usant une sorte de syntaxe HTML (Javascript XML).
- La différence entre "component & element" ...
- Les "React States" : un objet qui contient des infos... Similaire aux "props" à la différence qu'il est privé et, est controlé par le "Component".
- Les "React Props" : des données passées d'un "component" parent à un "component" enfant. On peut customiser ces datas, les passer, déclencher un changement de "states" et appliquer la méthode "render()".
- Les différentes phases du "component lifecycle" : "mounting, updating, unmounting"...
- Les "React's lifecycle methods" : "componentWillMount, componentDidMount, componentWillUpdate, componentDidUpdate ..."
- Les "High Order Components" (HOC) : une fonction qui prend un "component" et en retourne un nouveau.
- Les concept de "Context : une façon de passer des données à travers le "component tree" sans avoir à passer des props manuellement à chaque niveau. Permet tou un changement du "context" de notre application
...
Focusing on a Javascript — a library, various uses cases and a bunch of tools ...
"Rester Focus" sur une certaine tâche est une grande qualité, cependant, il ne faut pas se permettre d'être distrait. Quand on voit toute l'étendue de possibilités autour des "JAMSTACK" et autres...
Il y a en effet tout un tas de situations différentes pour des utilisations ou des contextes très différents les uns des autres, et de nombreux outils pour répondre à ces problématiques... J'ai déjà pu aborder deux classiques, que sont le Blog (réseau social) et l'e-commerce, ce qui m'a permit d'aborder de nombreux outils et concepts. J'ai pu prendre en considération les Hooks & Context de React, tout comme Redux, puis, avec l'implémentation de diverses fonctionnalités, j'ai dorénavant eu un grand aperçu de multitudes d'outils, concepts et patterns...
En tant que Junior il reste impossible que de répondre à tout cet environnement autour de Javascript qui, devenant de plus en plus populaire, nous impose une relation toute particulière à notre apprentissage, nous obligeant de prévoir le temps nécessaire dans notre agenda pour "être à jour".
Il faut réitérer les pratiques, y accorder toute l'attention et le temps pour avoir cette vision d'ensemble et ajouter petit à petit des victoires à son "palmarès". Mais il faut surtout pouvoir apprendre à résoudre des problématiques s'aidant de la documentation, du savoir des uns et des autres, de la communauté... La montée en compétences est passionante. Parfois, c'est comme un nouveau monde qui s'ouvre à nous. Cela ouvre des portes, et même l'approche plus technique du métier qui nous confronte par exemple à des concepts plus généraux comme les "computer sciences", représente un vrai challenge.
Il reste encore beaucoup à voir, énormément de sujets, tous avec leur niveau d'importance et tous passionant. Ce "Workshop Js / Reactjs" aborde par la pratique mais également par une approche en profondeur des divers problématiques liées à ce langage de programmation. Personnellement, il m'est primordiale que de pouvoir me donner les moyens d'avoir une certaine vision d'ensemble de ces environnements, de leurs problématiques ainsi que ces concepts clés.
Benefits
Après déploiement d'une application on peux constater que la librairie Reactjs.org est très performante. Il n'est pas compliqué de la prendre en main mais la multitude de possibilités la rend quelques fois complexe à implémenter.
Il a été très bénéfique que de pouvoir travailler sur React et constater du résultat, que ce soit avec "Create React App" ou bien "from scratch", avec ses "Hooks", son principe de "Context", que ce soit avec Redux et le concept de "Reducer" primordial pour tout dévéloppeur javascript... La pratique s'est enrichie de par cette diversité de situations, de par cette multiplicité.
En parallèle à cela, de multiples fonctionnalités ont pu être implémentées: une barre de recherche dynamique, un chat instantané, l'implémentation d'un éditeur "markdown", la connexion à des API, l'envoi de requêtes, la manipulation de données, l'authentification avec & sans Google, la connexion à Firebase, MongoDB ou bien PostGreSQL, la création d'un "checkout" avec les tests de simulation de paiement de "Stripe" ect.
Toutes ces fonctionnalités m'ont ouvert la porte à de nouvelles possibilités et vont continuer à m'accompagner vers de nouveaux concepts tels que les HOC Patterns, les Containers, Docker & Apollo, Redux Saga, GraphQL, Redis, les sessions & les JWT, les Single Page App vs Progressive Web App, Typescript...
Coming next ...
Par la suite le workshop poursuivra par une revue de l'architecture de fichier du projet "CRA", par la continuité de l'application "Crwn Clothing", par l'apprentissage et la pratique de Typescript ainsi que par l'intégration d'un nouveau mode de développement incluant l'implémentation de tests à mon workflow.
- Crown clothing e-commerce: redux, firebase, graphQL
- Code Review
- Typescript & Testing
- React Native