Rámec "Zero to Shipped" pre nových vývojárov

Prosím, použite webový prehliadač na notebooku/desktope pre najlepší zážitok z prezerania tohto článku, pretože tento článok obsahuje veľa vizuálne príjemných ASCII umeleckých diel pre lepšie učenie. Prosím, použite webový prehliadač na notebooku/desktope pre najlepší zážitok z prezerania tohto článku, pretože tento článok obsahuje veľa vizuálne príjemných ASCII umeleckých diel pre lepšie učenie. Úvodná Vývoj softvéru je nevyhnutný.Všetko beží na kóde a budovanie prototypu je nevyhnutným krokom. Je dosť ťažké začať s vývojom. Potrebujete skúsenosti, aby ste kódovali dobre, a musíte kódovať dobre, aby ste získali skúsenosti. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Diagram 1: Rozbiť Catch-22 Diagram 1: Rozbiť Catch-22 Nasledujúce je však rámec, ktorý by som chcel poskytnúť, ktorý vám pomôže rýchlo rozvíjať. vynechám časť produktovej stratégie a ideácie, pretože si zaslúži svoj vlastný článok. rámec Bez toho, aby bol dotknutý rámec: Čo je v front-end, čo je v backend, ktorá databáza, aký typ API? 1. Decide on the technology stack. Pri rozhodovaní zvážte nasledovné: 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: Meranie podpory komunity Diagram 2: Meranie podpory komunity 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: Homogénny vs Heterogénny Stack Diagram 3: Homogénny vs Heterogénny 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: Kontrolný zoznam overenia škálovateľnosti (napríklad React, AWS) Diagram 4: Kontrolný zoznam overenia škálovateľnosti (napríklad React, AWS) 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: Podpora cloudových služieb (napríklad AWS) Diagram 5: Podpora cloudových služieb (napríklad 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: Prípad GraphQL Diagram 6: Prípad GraphQL GitHub. GitLab. Bitbucket. Open source je cenným zdrojom pre moderných vývojárov. Použite ho. Ak ste premýšľali o myšlienke, je tu dobrá šanca, že ju niekto iný už implementoval (nemôžeme byť vždy taký originál, pravda?). Pozrite sa na ich kód. Pochopte ho. Použite ho, vylepšite ho. Dajte kredit tam, kde je to potrebné, a mali by ste byť v poriadku. To vám pomôže rýchlo sledovať vývoj a pomôcť pri rýchlom spustení projektov. Môžete použiť ušetrený čas na premýšľanie o lepších funkciách. 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: Budovanie na otvorenom zdroji Diagram 7: Budovanie na otvorenom zdroji 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: Čas ušetrený je čas zarobený (príklad scenára) Diagram 8: Čas ušetrený je čas zarobený (príklad scenára) 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: Spoločné licencie s otvoreným zdrojovým kódom Diagram 9: Spoločné licencie s otvoreným zdrojovým kódom 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: Kontrolný zoznam kvality úložiska Diagram 10: Kontrolný zoznam kvality úložiska 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: Stratégia inteligentného rozvoja Diagram 11: Stratégia inteligentného rozvoja Nie vždy potrebujete Mac alebo Linux na programovanie; máte dobré možnosti aj na Windows. Môžete si vybrať dobrý kódový editor ako VS Code, Sublime Text atď. Vytvorte si GitHub úložisko na zálohovanie kódu. Môžete si vytvoriť súkromný úložisko, ak nechcete, aby ktokoľvek iný vedel, čo ste na dosah. Použite synchronizačnú aplikáciu ako GitHub Desktop, aby ste mohli pracovať na svojom lokálnom počítači a bezproblémovo tlačiť kód na GitHub. 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: Príklad nastavenia prostredia Diagram 12: Príklad nastavenia prostredia 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: Správa súkromia úložiska Diagram 14: Správa súkromia úložiska Môžete to urobiť! Ak sa však pokúsite vykopať do dokumentácie jednotlivých komponentov alebo rámcov, môžete stráviť roky dokončením jedného tutoriálu. Namiesto toho si vyberte knihu alebo video tutoriál, ktorý syntetizuje tieto komponenty - niečo, čo vám pomôže vyvinúť dobrý projekt kombinujúci všetky tieto technológie. dostupné na GitHub. Sledujte odborníkov na X. Pridajte sa k komunitám reddit. Čítajte blogy a vzorové projektové tutoriály. Hľadajte články pomocou "daily.dev/hackernoon/dev.to/freecodecamp". Čítať. Čítať. Rozvíjať. Čítať. Rozvíjať. Rozvíjať. Rozvíjať. 4. It is completely okay to "Not Know." „Nádherné zoznamy“ 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: Dokumentácia Králiková diera Diagram 15: Dokumentácia Králiková diera 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: Efektívne objavovanie obsahu Diagram 16: Efektívne objavovanie obsahu Ako môžete vytvoriť viac funkcií? aké funkcie Vyhýbajte sa ľuďom a získajte dobrú spätnú väzbu. Pozrite sa na Product Hunt, a16z, AngelList atď. Ak chcete získať dobré nápady. Počúvajte podcasty. Kódovať vášnivo 5. Finally, continuously think about how you can improve your project. Môže rozvíjať 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: Stratégia viackanálovej spätnej väzby Diagram 17: Stratégia viackanálovej spätnej väzby 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: Zdroje produktovej inšpirácie Diagram 18: Zdroje produktovej inšpirácie Zhrnutie Dúfam, že tento článok vám pomôže vo vašej programovacej ceste, ďakujem za prečítanie môjho článku. Ak máte akékoľvek otázky, prosím, neváhajte mi poslať e-mail. Môžete ma kontaktovať aj cez LinkedIn. Môžete ma tiež sledovať na X. e-mailom e-mailom Linkedin → Linkedin → X X Môžete si prečítať môj článok na System Design . tu tu tu Môžete si prečítať môj článok na . DevOps tu Ak chcete, aby som napísal o akejkoľvek inej téme, dajte mi vedieť v komentároch. Link na môj . HackerNoon profile Profil hackerov