Je code un clone Instagram en clean architecture en moins de 4heures ?
ฝัง
- เผยแพร่เมื่อ 13 ก.ค. 2024
- Intéressé par devenir véritablement senior en conception d’applications front-end ? J’ai crée une formation vidéo : formation-cleanarchitecture.com
La meilleure manière de progresser, c’est de créer des clones d’app. Et d’utiliser des frameworks qu’on ai!merait maîtriser.
Je me lance un petit challenge code. Je développe un mini clone Instagram. Particularité, j’utiliserai la méthode clean architecture.
Je vous explique le déroulement.
MON PROGRAMME DE FORMATION (15h de vidéos) :
🧠 Formation Clean Architecture front-end - Deviens véritablement senior, apprends le développement rapide et simple d'applications de très haute qualité → formation-cleanarchitecture.com
📧 MA NEWSLETTER (IRRÉGULIÈRE) : devsfreelancesacademy.substac...
OÙ JE SUIS SUR LES RÉSEAUX :
📸 Rejoins-moi sur Instagram : / julien_lucas
👨💼 Linkedin : / julien-lucas-jl
Chapitres :
00:00 - Intro
00:14 - Explications du challenge
02:15 - Top départ : Dev du HTML/CSS
03:36 - Préparation des fausses données
05:03 - 1er cas d’utilisation : récupérer les posts (et ajout des modules clean architecture)
09:23 - Connection de la donnée sur le post (derniers modules clean archi)
14:43 - Ajout des stories, 2ème cas d’utilisation
16:43 - 3ème cas d’utilisation : les suggestions à suivre
18:06 - Outro
Qui je suis?
Développeur front-end (autour de React) depuis 2018. J’ai eu l’opportunité de travailler en freelance dans quelque startups et scaleups: iziwork, Reezocar, Sewan, Corum, Smartch. Et bien d’autres précédemment durant les 4 précédentes années car j'ai été développeur Wordpress avant ça (freelance aussi)
Sur cette chaîne je t’aide à devenir meilleur développeur, booster ta bankabilté, mieux te vendre, que ce soit en salarié, freelance ou peu importe. Tout avec tout ce qui tourne autour du business et du code. - วิทยาศาสตร์และเทคโนโลยี
elle est exceptionnel ta vidéo, sah je suis heureux que youtube me l'ai recommandé
Salut, super vidéo hyper intéressante que de bons conseils ça fait plaisir de te revoir depuis quelques temps continue comme ça j’adore
Merci @remyirconnor5074, content que ça t'ait plu.🙏
Très intéressant, merci
Merci @bobbybob-cz3nt 🙏
J'ai adore 🤩
Hello ! Super vidéo très intéressante. Penses tu mettre a dispo le code sur un github? Car le seul reproche que je peux faire c'est que par moment ça va très vite et on a pas trop le temps de voir en détails le découpage. J'ai compris les principes mais j'avoue que je suis partisant d'avoir un example a analyser à tête reposé.
En tout cas encore félicitations pour ta vidéo.
Non @lanswave3625, je ne mets pas le repo sur github.
Sinon certains vont se contenter de ça. Alors que je vends une formation qui traite tout ça de manière posée, ainsi que la partie testing. Sans oublier la partie sur 2 autres frameworks, rtk et react query.
Mais c’est vrai que ça passe vite.
Il faut mettre l’écran sur pause. 🙂
Mec je débute en développement et ta vidéo est vraiment super merci 🙏🏻
Merci @jeremied7945! J'étais sur que certains allaient bien apprécier. 😁
@@JulienLucas bah surtout que c'est vraiment la première fois que j'entends parlais de cette forme coding avec ces outils donc ouais chuis bien content que TH-cam m'ait pushed ta vidéo.
Super vidéo, tu utlises redux toolkit pour ta clean archi mais est-ce qu'on pourrait pas faire la meme chose avec Zustand ?
bonne question, intéressé par la réponse de Julien aussi !
Merci @mrkanata7696.
J'ai jamais testé Zustand, mais je peux dire qu'évidemment oui. En faite peu importe les frameworks qu'on utilise, vu qu'il y a du découplage d'inter-dépendance partout. Tu aurais juste à brancher ton Zustand aux gateway (l'infra) et au Presenter (pour envoyer la donnée sur les composants).
À tester.
Après pour le testing tu as toujours différentes possibilités en clean archi, c'est ça qui est bien.
@@JulienLucas Merci pour la réponse
Yes, c'est ça qu'on veut voir. Des cas concrets d'implémentation Clean/Hexa & DDD. Je suis sur Vue et le point qui me dérange le plus par exemple, c'est la liaison entre le domain et les primitives de réactivité du framework.
@xav_624 Je connaissais pas les primitives de réactivité de Vue, j’ai du checker. 😅
Bonne question.
Réponse, ça se mets sur le viewmodel.
Mais tu peux avoir envie de te créer des custom hooks de hooks - pour les usestate sur React, ou ref() et reactive() sur Vue.
Ainsi on retire là aussi de l’inter-dépendance au framework.
J'avoue n'être jamais allé jusque là.
J'espère avoir répondu à ta question.
Très bonne initiative ! Je suis.
Merci, content de t'avoir ici @nunn
Hello julien. Quand on voit le titre je code insta en 4h on s’entend à avoir les 4h de vidéo. Du coup suis un peu rester sur ma fin pour le coup sur cette vidéo. Si t’as la possibilité n’hésite pas a publier la vidéo complète. Du courage pour la suite
😅
Même commentaire, la vidéo complète pourrai être cool vu qu'en plus elle semble avoir été enregistrée.
la même ;)
first, super vidéo
❤️
Super vidéo, de ce que j'ai compris, il existe en faite plusieurs " Clean architecture ", et toi tu te base sur le DDD, c'est bien ça ? J'essaie de comprendre comment mieux structurer son code, sauf que je vois beaucoup de gens utiliser différent nom, par exemple " Application " " Presentations " ou encore des fois " Entites " ou " Models " pour dire la même chose, je me demande si il existe une " norme " quand on fait du " Clean architecture ", par ailleurs j'utilise Vue3. Aurais-tu des conseils pour mieux structurer mon code ?
Non @SirAeshki il n'existe pas plusieurs clean architectures. Une seule.
Moi je rajoute juste les view models, ce qui n'existe pas dans la méthode "officielle" de Robert Martin. Je commet un lapsus dans la vidéo, c'est un rajout de ma part.
Après oui, dans les repo GitHub les devs se trompent souvent sur le naming.
Parfois c'est pas très grave.
Parfois c'est complet freestyle.
D'où ton impression. ☺
@@JulienLucas je comprends mieux, je te remercie de m'avoir répondu rapidement, je te souhaite une bonne journée
Hello, intéressant, c'est possible de savoir à quel âge tu es devenu développeur freelance ? J'aimerais savoir si le marché accepte les gens qui se reconvertissent tardivement.
Bien sur que le marché accepte ceux qui se reconvertissent tardivement, si t'es bon, on t'embauche. Faut arrêter de se prendre la tête avec l'âge.
Reconverti à 37ans sur React pour moi. Avant j'étais dev Wordpress. Donc gros changement. 🙂
Je suis vraiment ravi du projet mais nous aimerions avoir la vidéo complète vraiment pour véritablement avoir des vrais acquis dessus si possible partagé nous le lien de la vidéo merci ❤
Ça représenterait 5h de vidéos
Tout ça est traité en détail dans ma formation: www.formation-cleanarchitecture.com
Et il y a un discount actuellement. Je serait ravis de t'y retrouver (un accès Slack est inclut).
Très intéressant, comment fais-tu les tests de tes composants et de l’intégration ?
Content que ça t'ai plu @maorisraoelson5574. 🙂 Justement j'en parle brièvement dans la vidéo. Je test les composant par leur viewmodel que j'aborde.
C'est à dire en pur tests unitaires. Plutôt que d'émuler le composant entier.
C'est rapide et beaucoup plus maintenable de tester comme ça. Car il n'y a pas de dépendance au framework React.
Je te recommande d'essayer.
@@JulienLucas Effectivement, je trouve que ModelView suit le même principe que le pattern “presentational/container”, remplacé par les hooks
Merci bcp. mais je trouve encore plus mieux une video complete
Ta police de caractère sur VS Code elle fait mal aux yeux
Sujet intéressant mais tout est vraiment trop long ; répétitif et donne l'impression que les explications partent dans tous les sens. J'ai eu l'impression d'entendre pleins de fois la même chose sans que ça n'apporte quelque chose de plus au contenu. Dommage, l'initiative est sympa !
@thomaseyermann Pourtant j’ai tenté de parler de choses différentes tout le long. Regardes:
1. Je parle des modules de code pour les cas d’utilisation
2. Puis de l’injection de dépendance
3. Puis je parle des views models
4. Ensuite je parle des présenters
Mais je prends volontiers la critique, j’ai fait un essai.