Je code un clone Instagram en clean architecture en moins de 4heures ?
Ғылым және технология
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.
Пікірлер: 40
elle est exceptionnel ta vidéo, sah je suis heureux que youtube me l'ai recommandé
Hello Julien, j'ai une petite question, la couche "domain" de ton app n'est pas censé être indépendante du framework or je crois que tu utilises RTK, dans le cas ou l'on voudrait migrer sur Vue JS il faudrait donc réécrire également toute cette partie comprenant les use-case et non uniquement la couche "app"... J'ai surement mal compris certaines choses, merci d'avance si tu as le temps de m'éclairer sur le sujet
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
@JulienLucas
Ай бұрын
Merci @remyirconnor5074, content que ça t'ait plu.🙏
J'ai adore 🤩
Très intéressant, merci
@JulienLucas
Ай бұрын
Merci @bobbybob-cz3nt 🙏
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.
@JulienLucas
Ай бұрын
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. 🙂
Super vidéo, tu utlises redux toolkit pour ta clean archi mais est-ce qu'on pourrait pas faire la meme chose avec Zustand ?
@c4346
Ай бұрын
bonne question, intéressé par la réponse de Julien aussi !
@JulienLucas
Ай бұрын
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.
@mrkanata7696
Ай бұрын
@@JulienLucas Merci pour la réponse
Mec je débute en développement et ta vidéo est vraiment super merci 🙏🏻
@JulienLucas
Ай бұрын
Merci @jeremied7945! J'étais sur que certains allaient bien apprécier. 😁
@jeremied7945
Ай бұрын
@@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 KZread m'ait pushed ta vidéo.
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.
@JulienLucas
Ай бұрын
@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.
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 ?
@JulienLucas
Ай бұрын
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. ☺
@SirAeshki
Ай бұрын
@@JulienLucas je comprends mieux, je te remercie de m'avoir répondu rapidement, je te souhaite une bonne journée
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
@JulienLucas
Ай бұрын
😅
@zeross30
Ай бұрын
Même commentaire, la vidéo complète pourrai être cool vu qu'en plus elle semble avoir été enregistrée.
@mayoniaise5169
Ай бұрын
la même ;)
Très bonne initiative ! Je suis.
@JulienLucas
Ай бұрын
Merci, content de t'avoir ici @nunn
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.
@JulienLucas
Ай бұрын
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. 🙂
Très intéressant, comment fais-tu les tests de tes composants et de l’intégration ?
@JulienLucas
Ай бұрын
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.
@maorisraoelson5574
22 күн бұрын
@@JulienLucas Effectivement, je trouve que ModelView suit le même principe que le pattern “presentational/container”, remplacé par les hooks
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 ❤
@JulienLucas
Ай бұрын
Ç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).
first, super vidéo
@JulienLucas
Ай бұрын
❤️
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 !
@JulienLucas
Ай бұрын
@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.