Лучшие GitHub-репозитории для веб-разработчиков

Программист тратит многие часы на разработку некоего функционала и на то, чтобы код соответствовал передовым практическим приёмам, принятым в той или иной среде. В эти часы не должно входить регулярное написание шаблонных конструкций. Программист может сильно помочь себе в деле правильной организации работы, избавив себя от ненужных дел и вложив время в изучение правильных инструментов. Хорошим подспорьем может оказаться и знание о ценных ресурсах, список которых всегда полезно держать под рукой.

Автор материала, перевод которого мы публикуем сегодня, предлагает рассмотреть несколько GitHub-репозиториев, которые, если иногда в них заглядывать, позволят веб-разработчикам улучшить свои знания и навыки, окажут содействие в написании более качественного кода, помогут работать быстрее.

Node.js Best Practices

Вклад в репозиторий Node.js Best Practices сделали 133 программиста, у него более 40 тысяч звёзд на GitHub. Он обновляется практически ежедневно. Это — замечательный ресурс, который позволяет всем желающим оставаться в курсе того, что происходит в мире Node.js, и при этом изучать лучшие практические методы разработки.

Этот репозиторий не только содержит сведения о полезнейших приёмах разработки для Node.js, он, кроме того, даёт сведения об интеграции Node.js с другими платформами — с такими, например, как Docker и Kubernetes. Сейчас в нём находится более 80 «лучших практик», руководств по стилю, советов по архитектуре приложений.

Вот некоторые из освещаемых в нём сфер разработки:

• Структурирование проектов.
• Обработка ошибок.
• Стиль кода.
• Тестирование и обеспечение высокого качества кода.
• Подготовка проектов к выводу в продакшн.

HTML5 Boilerplate

HTML5 Boilerplate — это профессиональный фронтенд-шаблон для создания быстрых, надёжных и гибких веб-приложений и сайтов.

Этот проект является результатом многих лет итеративной разработки, в нём накоплен большой объём знаний сообщества веб-программистов. Он не навязывает тем, кто им пользуется, какой-то конкретной философии разработки, не предписывает применение некоего фреймворка. Пользуясь этим проектом, каждый может спроектировать свой код так, как считает нужным.

Вот какие возможности представлены в шаблоне:

• Поддержка Normalize.css.
• Поддержка jQuery с CDN.
• Настройки сервера Apache.
• Полезные вспомогательные CSS-классы.
• Стандартные стили для печати, механизмы оптимизации производительности и многое другое.

В зависимости от того, какие именно возможности этого шаблона планируется использовать, и от того, как именно планируется с ним работать, может понадобиться скопировать определённые его материалы в свой проект. Использование подобных материалов означает то, что в распоряжении разработчика оказывается предварительно настроенный базовый шаблон. Это ускоряет разработку веб-проектов.

RealWorld

Благодаря репозиторию RealWorld можно, без лишних сложностей, освоить базовые концепции и идеологию некоего нового фреймворка.

Обычно, изучая что-то новое, программист читает документацию, запускает оторванные от практики примеры в чём-то вроде CodePen, разбирает эти примеры, потом их собирает, устанавливает у себя инструменты командной строки… В общем, тратит много времени и сил. Кроме того, ситуация может осложниться тем, что программист не очень хорошо ухватил суть тех инструментов, которые пытается изучить.

Рассматриваемый репозиторий позволяет выбрать любую из поддерживаемых им технологий для клиентской разработки (React, Angular 2 и многие другие), любую серверную платформу (среди них, например, Node.js и Django) и, интегрировав их друг с другом, увидеть реальный пример приложения.

Так как в реализациях примеров используется весь стек технологий, необходимых для разработки веб-проекта, совершенно свободно комбинировать их части не получится, но они, несмотря на применение в них различных технологий, демонстрируют сопоставимую функциональность и схожие UX-спецификации.

Вот несколько популярных примеров интеграции технологий из этого репозитория:

• Angular + ngrx + nx
• ClojureScript + re-frame
• React / MobX
• Go + Gin
• NestJS + TypeORM/Prisma

Это — лишь малая часть того, что можно найти в репозитории RealWorld. Полагаю, вам интересно будет исследовать его.

И, кстати, тут имеются не только примеры, рассчитанные на веб-разработку. Кое-что, основанное на NativeScript, тут могут найти и те, кто создаёт проекты, рассчитанные на мобильные устройства.

В репозитории идёт работа по подготовке примеров, ориентированных на следующие технологии: React Native, Jasonette, Swift, C# и Xamarin, Kotlin/Android, Onymos, фреймворк Quasar, Swift Perfect и Flutter.

You Don’t Know JS Yet

Репозиторий You Don’t Know JS Yet — это место, где можно найти серию книг, посвящённых глубокому изучению базовых механизмов JavaScript.

Все книги доступны бесплатно, читать их можно прямо в репозитории.

Вот в каком порядке рекомендуется изучать эти книги:

1. Get Started.
2. Scope & Closures.
3. Objects & Classes.
4. Types & Grammar.
5. Sync & Async.
6. ES.Next & Beyond.

Книги №1 и 2 уже можно почитать, книги 3-4 ещё не готовы. Надо отметить, что в данном репозитории представлено второе издание этих книг. А здесь можно найти шесть книг первого издания.

Airbnb JavaScript Style Guide

Руководство по стилю JavaScript-кода от Airbnb, которое можно найти в репозитории Airbnb JavaScript Style Guide, представляет собой подробный и профессионально составленный документ.

Это руководство способно помочь программисту понять внутренние механизмы языка, детально разобравшись с его основными механизмами. Здесь же можно найти полезные демонстрационные фрагменты кода.

Вот некоторые популярные темы, нашедшие отражение в этом руководстве:

• Стрелочные функции.
• Поднятие переменных.
• Работа с типами и преобразование типов.
• Стили, рассчитанные на ECMAScript 6+ (ES 2015+).
• Тестирование.
• Производительность.

Storybook

В репозитории Storybook можно найти код одноимённой среды разработки, предназначенной для создания компонентов пользовательского интерфейса. Эта среда позволяет работать с библиотеками компонентов, исследовать компоненты в различных состояниях, разрабатывать и тестировать компоненты в интерактивном режиме.

Среда Storybook работает за пределами приложения. Это позволяет разрабатывать компоненты интерфейса в изоляции, что может улучшить возможности многократного использования компонентов, улучшить их тестируемость, повысить скорость разработки. Создавать компоненты в Storybook можно очень быстро, не заботясь при этом о зависимостях, характерных для конкретного приложения.

В состав Storybook входит инструмент командной строки и примеры кода, которые позволяют быстро освоить эту среду.

Front-End Checklist

В репозитории Front-End Checklist можно найти всеобъемлющий список того, что должно быть в проекте перед его выпуском в продакшн, или того, что стоит проверить перед тем, как проект можно будет счесть готовым к реальной работе.

Этот репозиторий нацелен на клиентскую часть веб-разработки. Он затрагивает такие вопросы, как производительность, безопасность, SEO. Требованиям, представленным в этом репозитории, должно соответствовать большинство проектов. Но некоторые из этих требований, в определённых условиях, могут и не выполняться. Некоторые из них могут быть менее важными, чем другие. Рекомендации могут предусматривать чтение дополнительной документации, использование различных инструментов, просмотр видеоматериалов с разъяснениями каких-то сложных моментов.

Итоги

Спасибо всем, кто дочитал до этого места. Репозитории, о которых я тут рассказал, это далеко не единственные ресурсы такого рода. Я уверен, что существует и огромное количество других подобных ресурсов. Но те репозитории, которыми я тут поделился, приносят мне реальную пользу. Надеюсь, они пригодятся и вам.

А какие репозитории (предназначенные для веб-разработчиков) вы считаете полезными?