{"id":50349667,"url":"https://github.com/avin/how-to-js-framework","last_synced_at":"2026-05-29T20:31:02.760Z","repository":{"id":324418607,"uuid":"1092216238","full_name":"avin/how-to-js-framework","owner":"avin","description":"Курс по созданию JavaScript-фреймворка","archived":false,"fork":false,"pushed_at":"2025-11-15T17:14:28.000Z","size":113,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-21T14:10:58.218Z","etag":null,"topics":["js-framework","lessons","russian"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-08T07:58:52.000Z","updated_at":"2025-11-15T17:14:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/avin/how-to-js-framework","commit_stats":null,"previous_names":["avin/how-to-js-framework"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/avin/how-to-js-framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avin%2Fhow-to-js-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avin%2Fhow-to-js-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avin%2Fhow-to-js-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avin%2Fhow-to-js-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avin","download_url":"https://codeload.github.com/avin/how-to-js-framework/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avin%2Fhow-to-js-framework/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33670211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js-framework","lessons","russian"],"created_at":"2026-05-29T20:31:02.059Z","updated_at":"2026-05-29T20:31:02.746Z","avatar_url":"https://github.com/avin.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Создание JS-фреймворка с Virtual DOM\n\nПрактический курс по созданию собственного JavaScript-фреймворка с нуля. Вы научитесь создавать современный фреймворк с Virtual DOM, реактивностью и компонентной архитектурой, понимая каждый аспект его работы.\n\n## Для кого этот курс\n\n- Разработчики, которые хотят понять внутреннее устройство фреймворков\n- Те, кто использует React/Vue и хочет знать, что происходит \"под капотом\"\n- Программисты, желающие улучшить свои навыки работы с DOM и алгоритмами\n\n## Что вы создадите\n\nВ конце курса у вас будет собственный фреймворк со следующими возможностями:\n- Virtual DOM и эффективный алгоритм обновления\n- Функциональные компоненты\n- Хуки (useState, useEffect)\n- Система контекста для передачи данных\n- Оптимизированная обработка событий\n- Refs для работы с реальным DOM\n\n## Структура курса\n\n### Часть 1: Основы\n\n1. [**Введение**](./lessons/01-introduction.md) - Что такое фреймворк и зачем он нужен\n2. [**Virtual DOM - концепция**](./lessons/02-virtual-dom-concept.md) - Что такое VDOM и почему он используется\n3. [**Представление элементов**](./lessons/03-element-representation.md) - Создание функции h() для описания виртуальных узлов\n\n### Часть 2: Рендеринг\n\n4. [**Первый рендеринг**](./lessons/04-first-rendering.md) - Превращение VDOM в реальный DOM\n5. [**Работа с атрибутами и свойствами**](./lessons/05-attributes-and-properties.md) - Установка props, events, классов и стилей\n6. [**Рендеринг списков и фрагментов**](./lessons/06-lists-and-fragments.md) - Обработка массивов детей\n\n### Часть 3: Обновление\n\n7. [**Алгоритм diffing**](./lessons/07-diffing-algorithm.md) - Сравнение старого и нового VDOM\n8. [**Патчинг DOM**](./lessons/08-dom-patching.md) - Применение минимальных изменений\n9. [**Keys и оптимизация списков**](./lessons/09-keys-and-optimization.md) - Как избежать лишних перерисовок\n\n### Часть 4: Компоненты\n\n10. [**Функциональные компоненты**](./lessons/10-functional-components.md) - Создание переиспользуемых блоков\n11. [**Состояние (State)**](./lessons/11-state.md) - Реактивность и hooks (useState)\n12. [**Жизненный цикл**](./lessons/12-lifecycle.md) - useEffect и побочные эффекты\n13. [**Контекст**](./lessons/13-context.md) - Передача данных через дерево компонентов\n\n### Часть 5: Продвинутые темы\n\n14. [**Система событий**](./lessons/14-event-system.md) - Делегирование и синтетические события\n15. [**Refs**](./lessons/15-refs.md) - Доступ к реальным DOM-элементам\n16. [**Reconciliation**](./lessons/16-reconciliation.md) - Планирование обновлений и батчинг\n17. [**Сборка приложения**](./lessons/17-todo-app.md) - Создание полноценного Todo-приложения\n\n### Приложения\n\n- [**A. Сравнение с React/Vue**](./appendix/a-comparison.md) - Что мы сделали и чем отличаемся\n- [**B. Дальнейшее развитие**](./appendix/b-future-improvements.md) - Идеи для улучшения фреймворка\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favin%2Fhow-to-js-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favin%2Fhow-to-js-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favin%2Fhow-to-js-framework/lists"}