Рамка «Zero to Shipped» для новых разработчиков

Пожалуйста, используйте веб-браузер на ноутбуке / рабочем столе для лучшего просмотра этой статьи, так как эта статья содержит много визуально приятных произведений искусства ASCII для лучшего обучения. Пожалуйста, используйте веб-браузер на ноутбуке / рабочем столе для лучшего просмотра этой статьи, так как эта статья содержит много визуально приятных произведений искусства ASCII для лучшего обучения. Введение Разработка программного обеспечения имеет важное значение.Все работает по коду, и построение прототипа является необходимым шагом. Вам нужно опыт, чтобы хорошо кодировать, и вам нужно хорошо кодировать, чтобы получить опыт. Breaking the Catch-22 with Framework ================================================ Skill Level ^ | *Framework-Guided Path* | / | / | / Time Key: Framework shortcuts the experience-to-skill gap Диаграмма 1: Breaking the Catch-22 Диаграмма 1: Breaking the Catch-22 Тем не менее, следующее - это рамка, которую я хотел бы предоставить, которая может помочь вам быстро развиваться. я пропущу часть стратегии продукта и идеи, поскольку она заслуживает собственной статьи. Рамочная Без дальнейшего расширения рамки: Что находится в переднем конце, что находится в заднем конце, какая база данных, какой тип API? 1. Decide on the technology stack. При принятии решения учитывайте следующее: 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 ✓] Диаграмма 2: Измерение поддержки сообщества Диаграмма 2: Измерение поддержки сообщества 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 Диаграмма 3: Гомогенный vs Гетерогенный стек Диаграмма 3: Гомогенный vs Гетерогенный стек 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 ✓✓✓ Диаграмма 4: Контрольный список проверки масштабируемости (например, React, AWS) Диаграмма 4: Контрольный список проверки масштабируемости (например, 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! Диаграмма 5: Поддержка облачных сервисов (например, AWS) Диаграмма 5: Поддержка облачных сервисов (например, 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 │ └──────────────────────┘ Диаграмма 6: Случай GraphQL Диаграмма 6: Случай GraphQL GitHub. GitLab. Bitbucket. Открытый исходный код является ценным ресурсом для современных разработчиков. Используйте его. Если вы думали об идее, есть хорошая вероятность, что кто-то еще уже реализовал его (мы не можем всегда быть тем оригиналом, верно?). Посмотрите на их код. Поймите его. Используйте его, улучшите его. Дайте кредит там, где это должно быть, и вы должны быть в порядке. Это поможет вам быстро следить за развитием и помочь в быстром запуске проектов. Вы можете использовать сэкономленное время, чтобы думать о лучших функциях. 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. Диаграмма 7: Строительство с открытым исходным кодом Диаграмма 7: Строительство с открытым исходным кодом 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] Диаграмма 8: Время, сохраненное – это время, заработанное (пример сценария) Диаграмма 8: Время, сохраненное – это время, заработанное (пример сценария) 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! Диаграмма 9: Общие лицензии с открытым исходным кодом Диаграмма 9: Общие лицензии с открытым исходным кодом 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! │ ╰───────────────────────────────────────╯ Диаграмма 10: Контрольный список качества репозиторий Диаграмма 10: Контрольный список качества репозиторий 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! Диаграмма 11: Стратегия умного развития Диаграмма 11: Стратегия умного развития Вам не всегда нужен Mac или Linux для программирования; у вас также есть хорошие варианты на Windows. Вы можете выбрать хороший редактор кода, как VS Code, Sublime Text и т. Д. Пожалуйста, создайте репозиторий 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! Диаграмма 12: Пример настройки среды Диаграмма 12: Пример настройки среды 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. Диаграмма 13: CLI vs UI Диаграмма 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) Диаграмма 14: Управление конфиденциальностью репозитория Диаграмма 14: Управление конфиденциальностью репозитория Вы можете это сделать! Однако, если вы пытаетесь копать в документации отдельных компонентов или рамок, вы можете потратить годы на завершение одного учебника. Вместо этого выберите книгу или видео-учебник, который синтезирует эти компоненты - что-то, что помогает вам разработать хороший проект, объединяющий все эти технологии. доступны на GitHub. Следите за экспертами на X. Присоединяйтесь к сообществам reddit. Читайте блоги и примерные учебники по проектам. Поиск статей с помощью "daily.dev/hackernoon/dev.to/freecodecamp". Читать. Читать. Развивать. Читать. Развивать. Развивать. Развивать. 4. It is completely okay to "Not Know." «Удивительные списки» 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! Диаграмма 15: Документация Rabbit Hole Диаграмма 15: Документация 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! ] Диаграмма 16: Эффективное открытие контента Диаграмма 16: Эффективное открытие контента Как вы можете развить больше функций? какие функции Вы развиваете? Отбросьте свои идеи от людей и получите хорошую обратную связь. Посмотрите на Product Hunt, a16z, AngelList и т. Д. Чтобы получить хорошие идеи. Слушайте подкасты. Но в конце концов, Код с страстью. 5. Finally, continuously think about how you can improve your project. может Развивать 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 Диаграмма 17: Стратегия многоканальной обратной связи Диаграмма 17: Стратегия многоканальной обратной связи 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] Диаграмма 18: Источники вдохновения для продуктов Диаграмма 18: Источники вдохновения для продуктов Резюме Я надеюсь, что эта статья поможет вам в вашем программировании, спасибо за прочтение моей статьи. Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь отправлять мне электронное письмо. Вы также можете связаться со мной через LinkedIn. Вы также можете следить за мной на X. Электронная Электронная Линкейн Линкейн X X Вы можете прочитать нашу статью на System Design . здесь здесь здесь Вы можете прочитать нашу статью на . DevOps здесь Если вы хотите, чтобы я писал по любой другой теме, пожалуйста, сообщите мне в комментариях. Линк к моему . Профиль хакера Профиль хакера