Framework "Zero to Shipped" för nya utvecklare

Vänligen använd en webbläsare på en bärbar dator/skrivbord för den bästa visningsupplevelsen för den här artikeln, eftersom den här artikeln innehåller en hel del visuellt trevliga ASCII konstverk för bättre lärande. Vänligen använd en webbläsare på en bärbar dator/skrivbord för den bästa visningsupplevelsen för den här artikeln, eftersom den här artikeln innehåller en hel del visuellt trevliga ASCII konstverk för bättre lärande. Introduktion Allt körs på kod, och att bygga en prototyp är ett nödvändigt steg. Det är ganska svårt att komma igång med utveckling. Du behöver erfarenhet för att kodas bra, och du måste kodas bra för att få erfarenhet. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Diagram 1: Att bryta Catch-22 Diagram 1: Att bryta Catch-22 Jag kommer att hoppa över produktstrategin och idé delen, eftersom det förtjänar sin egen artikel. Ramverk Utan ytterligare ado, ramverket: Vad är i front-end, vad är i backend, vilken databas, vilken typ av API? 1. Decide on the technology stack. När du bestämmer dig, överväga följande: 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 ✓] Diagram 2: Mätning av samhällsstöd Diagram 2: Mätning av samhällsstöd 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 Diagram 3: Homogen vs Heterogen Stack Diagram 3: Homogen vs Heterogen 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 ✓✓✓ Diagram 4: Scalability Validation Checklist (React, AWS, till exempel) Diagram 4: Scalability Validation Checklist (React, AWS, till exempel) 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! Diagram 5: Stöd för molntjänster (t.ex. AWS) Diagram 5: Stöd för molntjänster (t.ex. 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 │ └──────────────────────┘ Diagram 6: Fallet för GraphQL Diagram 6: Fallet för GraphQL GitHub. GitLab. Bitbucket. Öppen källkod är en värdefull resurs för moderna utvecklare. Använd den. Om du har tänkt på en idé finns det en bra chans att någon annan redan har implementerat den (vi kan inte alltid vara den ursprungliga, rätt?). Titta på deras kod. Förstå den. Använd den, förbättra på den. Ge kredit där det är värt, och du borde bara vara bra. Detta kommer att hjälpa dig att snabbt spåra utveckling och hjälpa till med att snabbt starta projekt. Du kan använda den sparade tiden för att tänka på bättre funktioner. 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. Diagram 7: Bygga på öppen källkod Diagram 7: Bygga på öppen källkod 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] Diagram 8: Tid sparad är tid tjänad (exempel scenario) Diagram 8: Tid sparad är tid tjänad (exempel scenario) 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! Diagram 9: Gemensamma öppna källkodslicenser Diagram 9: Gemensamma öppna källkodslicenser 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! │ ╰───────────────────────────────────────╯ Diagram 10: Repository Quality Checklist Diagram 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! Diagram 11: Smart utvecklingsstrategi Diagram 11: Smart utvecklingsstrategi Du behöver inte alltid en Mac eller Linux för programmering; du har bra alternativ på Windows också. Du kan välja en bra kodredigerare som VS Code, Sublime Text, etc. Skapa ett GitHub-lagringsutrymme för att säkerhetskopiera din kod. Du kan skapa ett privat lagringsutrymme om du inte vill att någon annan ska veta vad du är upp till. Använd en synkroniseringsprogram som GitHub Desktop så att du kan arbeta på din lokala maskin och trycka koden till GitHub sömlöst. 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! Diagram 12: Exempel på en miljöinställning Diagram 12: Exempel på en miljöinställning 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. Diagram 13: CLI vs UI Diagram 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) Diagram 14: Hantera arkivets integritet Diagram 14: Hantera arkivets integritet Du kan göra detta! Men om du försöker gräva in i dokumentationen av enskilda komponenter eller ramar, kan du spendera år att slutföra en handledning. Istället väljer du en bok eller en video tutorial som syntetiserar dessa komponenter - något som hjälper dig att utveckla ett bra projekt som kombinerar alla dessa tekniker. finns på GitHub. Följ experter på X. Gå med i reddit-communities. Läs bloggar och samplingsprojektguider. Sök efter artiklar med hjälp av "daily.dev/hackernoon/dev.to/freecodecamp". Läs. Läs. Utveckla. Läs. Utveckla. Utveckla. Utveckla. 4. It is completely okay to "Not Know." ”Fantastiska listor” 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! Diagram 15: Dokumentation Rabbit Hole Diagram 15: 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! ] Diagram 16: Effektiv innehållsupptäckt Diagram 16: Effektiv innehållsupptäckt Hur kan du utveckla fler funktioner? vilka funktioner Du utvecklar? Bounce dina idéer bort från människor och få bra feedback. Titta på Product Hunt, a16z, AngelList, etc. för att få bra idéer. Lyssna på podcasts. Men så småningom, Kodning med passion. 5. Finally, continuously think about how you can improve your project. kan utvecklas 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 Diagram 17: Multi-Channel Feedback Strategi Diagram 17: Multi-Channel Feedback Strategi 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] Diagram 18: Källor till produktinspiration Diagram 18: Källor till produktinspiration Sammanfattning Jag hoppas att den här artikeln hjälper dig i din programmeringsresa, tack för att du läser min artikel. Om du har några frågor, var snäll och skicka mig ett mail. Du kan också kontakta mig via LinkedIn. Du kan också följa mig på X. e-post e-post Linköping Linköping X X Du kan läsa min artikel på System Design . här här här Du kan läsa min artikel på . DevOps här Om du vill att jag ska skriva om något annat ämne, låt mig veta i kommentarerna. Länk till min . HackerNoon profile Hackerprofil

Framework "Zero to Shipped" för nya utvecklare

About Author

KOMMENTARER

HÄNG TAGGAR

DENNA ARTIKEL PRESENTERAS I

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps