Das „Zero to Shipped“-Framework für neue Entwickler

Bitte verwenden Sie einen Webbrowser auf einem Laptop / Desktop für die beste Ansichtserfahrung für diesen Artikel, da dieser Artikel viele visuell angenehme ASCII-Kunstwerke für ein besseres Lernen enthält. Bitte verwenden Sie einen Webbrowser auf einem Laptop / Desktop für die beste Ansichtserfahrung für diesen Artikel, da dieser Artikel viele visuell angenehme ASCII-Kunstwerke für ein besseres Lernen enthält. Einführung Softwareentwicklung ist unerlässlich. Alles läuft auf Code, und der Aufbau eines Prototyps ist ein notwendiger Schritt. Es ist ziemlich schwierig, mit der Entwicklung zu beginnen. Sie brauchen Erfahrung, um gut zu kodieren, und Sie müssen gut kodieren, um Erfahrung zu sammeln. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Diagramm 1: Breaking the Catch-22 Diagramm 1: Breaking the Catch-22 Ich werde die Produktstrategie und den Ideenabschnitt überspringen, da dieser seinen eigenen Artikel verdient. Rahmenbedingungen Ohne weitere Ado, der Rahmen: Was ist im Frontend, was ist im Backend, welche Datenbank, welche Art von API? 1. Decide on the technology stack. Wenn Sie sich entscheiden, beachten Sie Folgendes: 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 ✓] Diagramm 2: Messung der Community-Unterstützung Diagramm 2: Messung der Community-Unterstützung 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 Diagramm 3: Homogene vs Heterogene Stack Diagramm 3: Homogene vs Heterogene Stack 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 ✓✓✓ Diagramm 4: Scalability Validation Checklist (React, AWS zum Beispiel) Diagramm 4: Scalability Validation Checklist (React, AWS zum Beispiel) 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! Diagramm 5: Cloud-Services-Unterstützung (z. B. AWS) Diagramm 5: Cloud-Services-Unterstützung (z. B. AWS) 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 │ └──────────────────────┘ Diagramm 6: Der Fall für GraphQL Diagramm 6: Der Fall für GraphQL GitHub. GitLab. Bitbucket. Open Source ist eine wertvolle Ressource für moderne Entwickler. Verwenden Sie es. Wenn Sie an eine Idee gedacht haben, gibt es eine gute Chance, dass jemand anderes sie bereits implementiert hat (wir können nicht immer das Original sein, richtig?). Schauen Sie sich ihren Code an. Verstehen Sie es. Verwenden Sie es, verbessern Sie es. Geben Sie Kredit, wo es gebührt, und Sie sollten nur in Ordnung sein. Dies wird Ihnen helfen, die Entwicklung schnell zu verfolgen und bei schnellen Bootstrapping-Projekten zu helfen. Sie können die gespeicherte Zeit verwenden, um über bessere Features nachzudenken. 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. Diagramm 7: Aufbau auf Open Source Diagramm 7: Aufbau auf 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] Diagramm 8: Zeit gespeichert ist Zeit verdient (Beispiel-Szenario) Diagramm 8: Zeit gespeichert ist Zeit verdient (Beispiel-Szenario) 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! Diagramm 9: Gemeinsame Open Source-Lizenzen Diagramm 9: Gemeinsame Open Source-Lizenzen 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! │ ╰───────────────────────────────────────╯ Diagramm 10: Repository Quality Checklist Diagramm 10: Repository Quality Checklist 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! Diagramm 11: Strategie für intelligente Entwicklung Diagramm 11: Strategie für intelligente Entwicklung Sie brauchen nicht immer einen Mac oder Linux für die Programmierung; Sie haben gute Optionen auf Windows, auch. Sie können einen guten Code-Editor wie VS Code, Sublime Text usw. Bitte erstellen Sie ein GitHub-Repository, um Ihren Code zu sichern. 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! Diagramm 12: Beispiel einer Umweltinstallation Diagramm 12: Beispiel einer Umweltinstallation 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. Diagramm 13: CLI vs UI Diagramm 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) Diagramm 14: Verwaltung der Repository Privacy Diagramm 14: Verwaltung der Repository Privacy Sie können dies tun! Wenn Sie jedoch versuchen, in die Dokumentation einzelner Komponenten oder Frames zu graben, können Sie Jahre damit verbringen, ein Tutorial abzuschließen. Stattdessen wählen Sie ein Buch oder ein Video-Tutorial, das diese Komponenten synthetisiert - etwas, das Ihnen hilft, ein gutes Projekt zu entwickeln, das all diese Technologien kombiniert. verfügbar auf GitHub. Folgen Sie Experten auf X. Schließen Sie sich den Reddit-Communities an. Lesen Sie Blogs und Musterprojekt-Tutorials. Suchen Sie nach Artikeln mit "daily.dev/hackernoon/dev.to/freecodecamp". Lesen. Lesen. Entwickeln. Lesen. Entwickeln. Entwickeln. Entwickeln. 4. It is completely okay to "Not Know." „Wunderbare Listen“ 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! Diagramm 15: Die Dokumentation Rabbit Hole Diagramm 15: Die Dokumentation Rabbit Hole 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! ] Diagramm 16: Effektive Content Discovery Diagramm 16: Effektive Content Discovery Wie können Sie mehr Features entwickeln? Sie entwickeln? Bounce Ihre Ideen von den Leuten und erhalten gute Rückmeldungen. Schauen Sie sich Product Hunt, a16z, AngelList usw. an, um gute Ideen zu bekommen. Hören Sie Podcasts. Code mit Leidenschaft. 5. Finally, continuously think about how you can improve your project. kann entwickeln 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 Diagramm 17: Multi-Channel Feedback Strategie Diagramm 17: Multi-Channel Feedback Strategie 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] Diagramm 18: Quellen der Produktinspiration Diagramm 18: Quellen der Produktinspiration Zusammenfassung Ich hoffe, dieser Artikel hilft Ihnen in Ihrer Programmierreise, danke für das Lesen meines Artikels. Wenn Sie irgendwelche Fragen haben, fühlen Sie sich bitte frei, mir eine E-Mail zu senden. Sie können mich auch über LinkedIn kontaktieren. Sie können mich auch auf X folgen. E-Mail E-Mail Linkedin → Linkedin → X X Sie können meinen Artikel auf System Design . hier hier hier Sie können meinen Artikel auf . DevOps hier Wenn Sie möchten, dass ich über ein anderes Thema schreibe, lassen Sie mich bitte in den Kommentaren wissen. Link zu meiner . HackerNoon profile Hackerprofil