Le cadre "Zero to Shipped" pour les nouveaux développeurs

Veuillez utiliser un navigateur Web sur un ordinateur portable / bureau pour la meilleure expérience de visualisation de cet article, car cet article contient beaucoup d'œuvres d'art ASCII visuellement agréables pour un meilleur apprentissage. Veuillez utiliser un navigateur Web sur un ordinateur portable / bureau pour la meilleure expérience de visualisation de cet article, car cet article contient beaucoup d'œuvres d'art ASCII visuellement agréables pour un meilleur apprentissage. Introduction Tout fonctionne sur le code, et la construction d’un prototype est une étape nécessaire.D’une certaine manière, le logiciel est la manifestation physique de l’esprit du programmeur. Il est assez difficile de commencer avec le développement. Vous avez besoin d'expérience pour bien coder, et vous devez bien coder pour gagner de l'expérience. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Diagramme 1 : Breaking the Catch-22 Diagramme 1 : Breaking the Catch-22 Cependant, ce qui suit est un cadre que je voudrais fournir qui peut vous aider à développer rapidement.Je vais sauter la stratégie de produit et la partie d'idée, car cela mérite son propre article. Le cadre Sans plus tarder, le cadre : Qu’est-ce qui est dans le front-end, qu’est-ce qui est dans le backend, quelle base de données, quel type d’API ? 1. Decide on the technology stack. Lors de votre décision, considérez ce qui suit : Your software should be easy to build and maintain. Select a general-purpose language that can be utilized to get the maximum features you want and support different layers of the stack. While the layers of the design are disparate, you should have a low-latency method for these components to talk with each other. a) Homogeneity & Compatibility: For example: JavaScript is the language of the frontend in frameworks like React and Angular. It can also be used on the backend with Node.js and Express. It's the basis for data formats like JSON, which in turn are used by APIs (like GraphQL) and databases (like MongoDB, which uses a JSON-like structure). By leveraging npm (which is like a JavaScript App Store), you can install thousands of libraries for your project. What you intend to develop must be Scalable. This is critically important. Choose a framework that is used by top multinational corporations (MNCs), or even better, one developed by an MNC. b) Scalability: For example: React and GraphQL were created by Facebook, and they use them internally, so you know they are scalable. On MongoDB's website, you can find that Google, among other companies, is one of its partners - so you know it's scalable. You can also look at a tool's GitHub repository and community support; the more, the better. Finally, you can also see if a major cloud provider supports your development stack, as it’s helpful when you intend to scale after the initial development/ or if you need help with quick prototyping of the software that is being developed. Measuring Community Support ======================================= [Technology/Framework] | +--------+--------+--------+ | | | | v v v v GitHub Stack npm Reddit/ Stars Overflow Downloads Discord | | | | v v v v >1K+ >1K >100+/ Active Qs week Community | | | | +--------+--------+--------+ | v [Strong Ecosystem ✓] Diagramme 2 : Mesurer le soutien de la communauté Diagramme 2 : Mesurer le soutien de la communauté Homogeneous vs Heterogeneous Stack ============================================== HOMOGENEOUS (Good): JS → JS → JS → JS ✓ Easy to maintain ✓ Low context switching ✓ Unified tooling HETEROGENEOUS (Complex): Python → Java → PHP → Ruby ✗ Multiple paradigms ✗ Different toolchains ✗ Team expertise split Diagramme 3 : Stack homogène vs Stack hétérogène Diagramme 3 : Stack homogène vs Stack hétérogène Scalability Validation Checklist ============================================ Technology Choice: [React] ☑ Used by MNCs? → Facebook, Netflix, Airbnb ✓ ☑ Large Community? → 240K+ GitHub stars ✓ ☑ AWS Support? → AWS Amplify supports React ✓ ☑ Active Development? → Regular updates ✓ Result: SCALABLE ✓✓✓ Diagramme 4: Liste de vérification de la validation de l'évolutivité (React, AWS, par exemple) Diagramme 4: Liste de vérification de la validation de l'évolutivité (React, AWS, par exemple) AWS Service Support ================================ Your Stack AWS Service ────────── ─────────── React/Angular → CloudFront | Amplify | S3 Hosting v Node.js/API → Lambda | Elastic Beanstalk | EC2 v MongoDB → DocumentDB | v [Fully Supported!] If AWS supports it, it's production-ready! Diagramme 5 : Support des services cloud (AWS, par exemple) Diagramme 5 : Support des services cloud (AWS, par exemple) API Architecture Choice ==================================== REST API: GET /users/1 → Full User Object GET /posts/1 → Full Post Object (Multiple Requests, Over-fetching) GraphQL: query { user(id: 1) { name posts { title } } } (Single Request, Exact Data) ┌──────────────────────┐ │ Facebook uses │ │ GraphQL internally │ │ = Proven at Scale │ └──────────────────────┘ Diagramme 6 : Le cas de GraphQL Diagramme 6 : Le cas de GraphQL GitHub. GitLab. Bitbucket. Open source est une ressource précieuse pour les développeurs modernes. Utilisez-la. Si vous avez pensé à une idée, il y a une bonne chance que quelqu'un d'autre l'ait déjà mis en œuvre (nous ne pouvons pas toujours être l'original, oui?). Regardez leur code. Comprenez-le. Utilisez-le, améliorez-le. Donnez du crédit là où c'est dû, et vous devriez être bien. Cela vous aidera à développer rapidement et à aider à lancer rapidement des projets. Vous pouvez utiliser le temps économisé pour penser à de meilleures fonctionnalités. 2. Leverage open source. Standing on Giants' Shoulders ========================================= [Your Innovation] | ╔═════╧═════╗ ║ You ║ <- Your contribution ╠═══════════╣ ║ Library A ║ <- Open source tools ╠═══════════╣ ║ Library B ║ <- Previous work ╠═══════════╣ ║ Library C ║ <- Community effort ╠═══════════╣ ║ Core Lang ║ <- Foundation ╚═══════════╝ Don't reinvent the wheel! Build on existing solutions. Diagramme 7 : Construire sur l’open source Diagramme 7 : Construire sur l’open source Time Investment Comparison ====================================== Build From Scratch: ├─ Research: 40 hours ├─ Architecture: 30 hours ├─ Implementation: 120 hours ├─ Testing: 40 hours ├─ Debugging: 50 hours └─ TOTAL: 280 hours (7 weeks) Using Open Source: ├─ Search: 2 hours ├─ Understand: 8 hours ├─ Integrate: 6 hours ├─ Customize: 10 hours └─ TOTAL: 26 hours (3 days) SAVINGS: 254 hours (6+ weeks!) ↓ [Use for Features] Diagramme 8 : Le temps économisé est le temps gagné (scenario d'exemple) Diagramme 8 : Le temps économisé est le temps gagné (scenario d'exemple) Common Open Source Licenses ======================================= MIT License ├─ ✓ Commercial use ├─ ✓ Modification ├─ ✓ Distribution └─ ✓ Private use [Most Permissive] Apache 2.0 ├─ ✓ Patent protection ├─ ✓ Commercial use └─ ! State changes GPL v3 ├─ ✓ Strong copyleft ├─ ! Must open source └─ ! Derivative works [Most Restrictive] Always check before using! Diagramme 9 : Licences open source communes Diagramme 9 : Licences open source communes Repository Quality Checklist ========================================= ╭───────────────────────────────────────╮ │ Evaluating: [repository-name] │ ├───────────────────────────────────────┤ │ [ ] README with clear instructions │ │ [ ] License file present │ │ [ ] Active maintenance (commits) │ │ [ ] Issues being addressed │ │ [ ] Good test coverage │ │ [ ] Documentation/Wiki │ │ [ ] Examples provided │ │ [ ] High stars-to-forks ratio │ │ [ ] Contributors > 3 │ │ [ ] Release/version tags │ ├───────────────────────────────────────┤ │ 7+ checked = Safe to use! │ ╰───────────────────────────────────────╯ Diagramme 10 : Liste de vérification de la qualité des dépôts Diagramme 10 : Liste de vérification de la qualité des dépôts Smart Development Strategy =============================================== [ Your Idea ] | v / \ [ Yes ] [ No ] | | | v | | | | [ Yes! ] | | | v | [ Use their work ] | [ + Attribution ] | | +----------+-----------+ | v [ Add YOUR unique value ] ├─ Your UI/UX ├─ Your features ├─ Your integration └─ Your innovation | v [ Ship Product Faster ] Originality ≠ Reinventing Be original where it matters! Tableau 11 : Stratégie de développement intelligent Tableau 11 : Stratégie de développement intelligent Vous n'avez pas toujours besoin d'un Mac ou de Linux pour la programmation; vous avez de bonnes options sur Windows, aussi. Vous pouvez choisir un bon éditeur de code comme VS Code, Sublime Text, etc. S'il vous plaît créer un dépôt GitHub pour sauvegarder votre code. Vous pouvez créer un dépôt privé si vous ne voulez pas que quiconque d'autre sache ce que vous êtes jusqu'à. Utilisez une application de synchronisation comme GitHub Desktop afin que vous puissiez travailler sur votre machine locale et pousser le code vers GitHub sans souci. 3. Choose a proper coding environment. The Complete Coding Environment ============================================ ╔════════════════════════════════════════╗ ║ YOUR DEVELOPMENT SETUP ║ ╠════════════════════════════════════════╣ ║ LAYER 1: Operating System ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Windows / macOS / Linux │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 2: Code Editor ║ ║ ┌──────────────────────────────────┐ ║ ║ │ VS Code + Extensions │ ║ ║ │ • Prettier, ESLint │ ║ ║ │ • GitLens, Live Server │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 3: Version Control ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Git + GitHub Desktop │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 4: Cloud Backup ║ ║ ┌──────────────────────────────────┐ ║ ║ │ GitHub Repository │ ║ ║ │ (Public or Private) │ ║ ║ └──────────────────────────────────┘ ║ ╠════════════════════════════════════════╣ ║ LAYER 5: Language Runtime ║ ║ ┌──────────────────────────────────┐ ║ ║ │ Node.js, Python, etc. │ ║ ║ └──────────────────────────────────┘ ║ ╚════════════════════════════════════════╝ | | v v [Local Code] [Cloud Backup] Professional Setup Complete! Diagramme 12: Exemple d'un environnement de configuration Diagramme 12: Exemple d'un environnement de configuration Command Line vs GitHub Desktop =========================================== COMMAND LINE: GITHUB DESKTOP: ═══════════════ ═══════════════ $ git init Click "New Repo" $ git add . Check boxes $ git commit -m "msg" Type message, click "Commit" $ git remote add origin Paste URL, click "Add" $ git push origin main Click "Push" $ git pull Click "Fetch" $ git log See "History" tab Learning Curve: Learning Curve: ████████░░ 80% ██░░░░░░░░ 20% Both work! Choose comfort level. Diagramme 13 : CLI vs UI Diagramme 13 : CLI vs UI Managing Repository Privacy ======================================== [New Repository] | +------+------+ | | v v ┌────────┐ ┌────────┐ │ PUBLIC │ │PRIVATE │ └───┬────┘ └───┬────┘ | | v v Visible to: Visible to: • Everyone • You • Employers • Invited • Portfolio • Team only | | v v Can switch Can switch to Private to Public (anytime) (anytime) | | +-----+------+ | v Settings > Danger Zone | v "Change visibility" Start Private → Go Public Later (Common Strategy) Diagramme 14: Gestion de la confidentialité des dépôts Diagramme 14: Gestion de la confidentialité des dépôts Vous pouvez le faire! Cependant, si vous essayez de creuser dans la documentation des composants ou des cadres individuels, vous pourriez passer des années à terminer un seul tutoriel. Au lieu de cela, choisissez un livre ou un tutoriel vidéo qui synthétise ces composants - quelque chose qui vous aide à développer un bon projet combinant toutes ces technologies. Disponible sur GitHub. Suivez les experts sur X. Rejoignez les communautés reddit. Lisez les blogs et les tutoriels de projet d'échantillon. Recherchez des articles en utilisant "daily.dev/hackernoon/dev.to/freecodecamp". Lire. Lire. Développer. Lire. Développer. Développer. 4. It is completely okay to "Not Know." « Magnifiques listes » The Documentation Rabbit Hole ========================================= [Want to Learn React] | v Read React Docs | +-------+-------+ | | v v Hooks Docs JSX Docs | | v v useState Docs Babel Docs | | v v useEffect Webpack | | +-------+-------+ | v [6 months later...] [Still in docs, no project!] BETTER APPROACH: [Tutorial Project] → Learn by doing! Diagramme 15 : Le trou de lapin de documentation Diagramme 15 : Le trou de lapin de documentation Effective Content Discovery ========================================================= [ Need to Learn XYZ ] | v +---------------------------------------------------------+ | Step 1: Run Parallel Searches | +----------------+----------------------+-----------------+ | Platform | Action | Refinement | +----------------+----------------------+-----------------+ | Google | Search keywords | "XYZ tut 2025" | | daily.dev | Browse feed/tags | Filter by tag | | Reddit | Find recent posts | Sort by "Top" | | YouTube | Find recent videos | Sort by views | +----------------+----------------------+-----------------+ | v +---------------------------------------------------------+ | Step 2: Consolidate & Vet Results | | (Compare 3-5 top links) | +---------------------------------------------------------+ | v +-----------------+---------------+ | | v v (e.g. 2024+) (Has full examples) | | +----------------+----------------+ | v [ Start Learning! ] Diagramme 16 : Découverte de contenu efficace Diagramme 16 : Découverte de contenu efficace Comment pouvez-vous développer plus de caractéristiques ? vous développez ? écartez vos idées des gens et obtenez de bons commentaires. Regardez Product Hunt, a16z, AngelList, etc. pour obtenir de bonnes idées. Écoutez les podcasts. Mais finalement, Code avec passion. 5. Finally, continuously think about how you can improve your project. peut Développement Multi-Channel Feedback Strategy =========================================== [Your Application] | Collect Feedback From: | +-------+-------+-------+-------+ | | | | | v v v v v Users Friends Reddit GitHub X/ Issues Twitter | | | | | v v v v v Real Honest Public Bug Quick world opinion discus- reports reactions usage sions | | | | | v v v v v What Improve- Feature Tech Viral works ments requests debt features | | | | | +-------+-------+-------+-------+ | v [Prioritized Roadmap] Listen > Ego Diagramme 17: Stratégie de rétroaction multicanal Diagramme 17: Stratégie de rétroaction multicanal Sources of Product Inspiration ========================================== [Your Project] | What features next? | +---------+----------+---------+ | | | | v v v v ┌─────────┐┌──────┐┌─────────┐┌────────┐ │ Product ││ a16z ││AngelList││Podcasts│ │ Hunt ││ Blog ││ ││ │ └────┬────┘└───┬──┘└────┬────┘└───┬────┘ | | | | v v v v Trending VC Startup Expert Products Insights Trends Advice | | | | v v v v User pain Market Business Best points trends models practices | | | | +----+----+----+---+----+----+ | v [Feature Ideas List] [Innovation Backlog] Diagramme 18 : Sources d’inspiration pour les produits Diagramme 18 : Sources d’inspiration pour les produits Résumé J'espère que cet article vous aidera dans votre voyage de programmation, merci de lire mon article. Si vous avez des questions, s'il vous plaît n'hésitez pas à m'envoyer un e-mail. Vous pouvez également me contacter via LinkedIn. Vous pouvez aussi me suivre sur X. par email par email par Linkedin par Linkedin X X Vous pouvez lire mon article sur System Design . ici ici ici Vous pouvez lire mon article sur . DevOps ici Si vous voulez que j'écris sur un autre sujet, veuillez me le faire savoir dans les commentaires. Lien vers le mien . HackerNoon profile Profil de hacker