6 советов для написания лучшего кода

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

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

1. Начните сборку модулей

Один из лучших способов обеспечения согласованности, многократного использования и организации кода — объединение функциональных возможностей. Например, вместо того, чтобы выгружать весь ваш JavaScript в один файл main.js, рассмотрите возможность группировки его в отдельные файлы в зависимости от функциональности, а затем объедините их, как только вы достигнете этапа сборки. Конечно, в написании модульного кода есть гораздо больше, и вы можете написать модульный код не только для JavaScript.

CSS-препроцессоры, такие как Sass (наше введение здесь ), позволяют вам записывать отдельные CSS-файлы, а затем включать их в один основной файл при компиляции. Это позволяет вам писать отдельные CSS-файлы для разных компонентов, таких как кнопки, списки и шрифты. В конце они все включены в один основной файл, но обслуживание этих файлов становится намного проще.

Новые технологии, такие как Polymer, позволяют вам писать собственные элементы HTML, так что ваши HTML, CSS и javascript могут быть сгруппированы в отдельные компоненты на основе функциональности. Обязательно загляните в Browserify (наше введение здесь ), который позволяет вам использовать модули в стиле Node.js в браузере.

Брэд Фрост также дает большой обзор идей и методологий написания модульного кода здесь .

2. Говоря о препроцессорах …

Препроцессоры не просто помогают в написании модульного кода. Они отлично подходят для многих других вещей! Препроцессоры добавляют дополнительные функциональные возможности к вашему внутреннему коду, одновременно выводя те же HTML, CSS и Javascript, которые распознает ваш браузер. Они обычно требуют дополнительного времени на настройку, но они восполняют его, когда вы освоитесь с ними.

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

Вот видео введение в наиболее распространенные препроцессоры для CSS, HTML и JavaScript: Sass, Haml и CoffeeScript .

Если вы интересуетесь Sass, посмотрите, как автор SitePoint Уго Жираудель организовывает свои проекты Sass и свои любимые инструменты для этого .

Пока вы смотрите на Sass, обязательно ознакомьтесь с HAML и Coffescript .

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

3. Планируйте, прежде чем писать

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

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

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

4. Используйте контроль версий

Контроль версий — это система, которая записывает изменения в файл или набор файлов с течением времени, позволяя нескольким пользователям редактировать, отслеживать изменения и размещать ресурсы. Существует множество сервисов, которые обеспечивают контроль версий, включая Bitbucket, Assembla и Github. Github — мой личный фаворит, поскольку он продвигает социальное кодирование, а это означает, что люди могут делиться кодом на Github, улучшая и изучая код, написанный другими пользователями.

Контроль версий может быть сложной темой для понимания, но есть множество учебных пособий, которые помогут вам начать работу. Я рекомендую взглянуть на наше введение в Git для базового обзора по началу работы. У нас также есть руководство по использованию Git в командной среде и несколько советов, чтобы поднять ваши навыки работы с Git на новый уровень . Если вы не проданы в Git, у вас есть и другие варианты контроля версий .

Последний совет: используйте командную строку. Командная строка может быть пугающим интерфейсом, но знакомство с ней улучшит ваше понимание программирования в целом и позволит вам использовать другие замечательные инструменты, такие как Gulp и Grunt.

5. Начните проводить проверки кода

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

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

Если вы не работаете в команде или вы очень антисоциальны, вам могут помочь jslint и SCSSlint . Эти инструменты будут проверять ваш код на наличие ошибок, сохраняя ваши файлы в чистоте и порядке. Нет необходимости в человеческом контакте!

6. Примите вызовы кодирования

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

CodeWars отлично подходит для того, чтобы освежить в памяти ваши способности javascript, а The Practice App предоставит вам случайные задачи переднего плана, основанные на Codepen .