как пользоваться исходным кодом
Программисты, давайте изучать исходники классических программ
Современные программисты — счастливчики: мы живём в мире, в котором исторические и оказавшие существенное влияние программы имеют открытый код, доступный для изучения. Однако, многие программисты только учатся, и изучают те программы, над которыми работают сами. У нас редко находится время для изучения исторических работ, и курсы программирования редко тратят время на такие вещи.
Мы полагаем, что разработчикам следует изучать исходники программ, оказавших большое влияние, подобно тому, как архитекторы изучают здания, оказавшие влияние на архитектуру (и критикуют их). Чем повторять те же ошибки снова и снова, мы должны изучить большую работу, проделанную до нас, и вынести из неё уроки.
В идеале, нам следует изучать исходные коды великих программ с комментариями и критикой, которая даёт нам информацию о контексте проекта, его сильных и слабых сторонах. Такие комментарии редки, но вот вам несколько отправных точек:
Также можно найти исходники программ, которые вы использовали в прошлом. Важно начинать с программ, которые вам хорошо знакомы, и вы можете связать их функции с исходным кодом. Вот ресурсы, которые вы можете использовать для того, чтобы найти и изучить исторические исходники:
Организация «The Historical Source»: репозиторий GitHub в настоящее время содержит архив из 143 программ. Многие из них являются некогда популярными играми, в которые вы, возможно, играли.
Сайт «Чёрная книга игрового движка» содержит подробный разбор движков Doom и Wolfenstein 3D, с исходниками.
Каталог ПО NASA содержит свыше 1000 программных проектов, доступных для публики.
Коллекция Музея Компьютерной Истории содержит исходники исторических программ. Вот выборка из их коллекции исторических исходных кодов:
Как научиться читать код сайта и зачем это нужно, если вы не программист
Кажется, что программирование — это сложно, особенно если никогда не приходилось с ним сталкиваться. На самом деле всё зависит от задачи. Чтобы вносить небольшие изменения на сайт, хватит и азов, а их может освоить даже человек без технического образования. Об этих азах и пойдет речь в статье. Расскажем об устройстве исходного кода, о том, как начать в нём немного разбираться, и ответим на вопрос, зачем всё это вам нужно.
Примечание: мы не будем лезть в дебри и подробно описывать процесс программирования. Расскажем о том минимуме, что пригодится в работе над вашим сайтом.
Зачем понимать исходный код
Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса.
Зная, как устроен исходный код, вы сможете:
Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.
Плюс вам больше не будет казаться магией работа SEO-специалиста. Вы будете говорить на одном языке и понимать, как поисковики видят ваш сайт и что можно улучшить.
Если вы решите проанализировать сайты конкурентов, немного разбираясь в коде, вы сможете оценить не только визуальную и контентную стороны страниц. У вас получится определить, с помощью каких ключевых слов продвигается сайт, на какой CMS работает и немного больше понять стратегию продвижения конкурентов.
Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.
Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.
Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.
Что такое исходный код сайта
Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.
Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.
Как посмотреть код любого сайта
Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.
Код вызывается одной из комбинаций:
Панель с кодом откроется на этой же странице, а не в другом окне. При наведении мышки на код будет подсвечиваться соответствующая ему область на текущей странице.
Дальше в статье мы будем пользоваться именно этим инструментом — он нагляднее.
Чтобы не утонуть в огромном количестве новых символов, нужно разобраться, что такое HTML, CSS и JavaScript.
Что такое HTML
HTML — язык гипертекстовой разметки. На нём написано большинство сайтов в интернете.
Что можно узнать о сайте из исходного кода
Код сайта предназначен в первую очередь для браузера и поисковых систем. Браузеру он говорит, что и в каком порядке выводить на странице. Поисковые системы берут из исходного кода всю информацию о странице: заголовок, описание, метаданные — всё то, что потребуется, чтобы показать страницу в выдаче поисковика. Обычный пользователь тоже может прочитать этот специальный текст — достаточно знать, как он устроен.
Все элементы кода нужны для правильного расположения разделов и деталей страницы. Всё это вы сможете найти и проанализировать, внимательно изучив исходный код сайта:
Чтобы лучше понять теорию, разберёмся в коде страниц блога RU-CENTER: найдём теги, картинки и другую информацию.
Для начала открываем страницу и вызываем интерактивный код (Ctrl + Shift + I). Откроется интерактивная панель с кодом, поделённая на две области. Слева — HTML-код (вкладка Elements), справа — CSS (вкладка Styles). Нам пока нужна левая часть с HTML.
Основные теги
HTML-страница состоит из набора тегов, которые вместе с содержимым называются элементами — это строительный материал веб-страницы. Другими словами, теги — команды для браузера, чтобы он понял, как нужно показывать сайт пользователю. Указывая в коде определенные теги, вы говорите браузеру: «Это текст, а это картинка, это ссылка, а это кнопка или форма». И браузер показывает все элементы интерфейса так, как вы их разместили.
Теги обычно открываются и закрываются так: — открытие тега, — закрытие.
Теги делятся на два вида: блочные и строчные.
Исходный код и его 11 составляющих
Теперь, когда вы понимаете концепцию программирования, мы рассмотрим исходный код – его главные составляющие и принципы работы с ними.
Часть 2 – Исходный код
В предыдущей части мы затронули азы программирования, где рассказали о машинном языке, преобразователях, языках программирования и работе с CLI. Двигаемся дальше.
Исходным кодом называется основной файл вроде Microsoft (.doc), но немного другой. Это текстовый файл, написанный с помощью простых редакторов, таких как Windows Блокнот. В предыдущем разделе мы перечислили, что нужно, чтобы интерпретаторы или компиляторы конвертировали исходный код в двоичный. Первый должен быть сохранен в файле, что передается для ввода в переводчик (преобразователь).
Когда вы закончите писать код, запустите его через переводчик. Рассмотрим в качестве примера запуск кода на языке Python с использованием команды python.
Начало работы: ваша первая программа
3. Откройте в нем новый файл и введите следующее:
Результат должен выглядеть так:
Анатомия типичного кода
Теперь мы рассмотрим содержимое типичного файла исходного кода. Ниже приведены регулярные компоненты.
Ключевые слова
Короткие человекочитаемые слова, обычно называемые ключевыми. Они свойственны изучаемому вами языку и они особенны. Их просто нужно знать. Вот небольшой набор ключевых слов, часто используемых в Python.
Идентификаторы
Слова, изобретенные вами. Да, не удивляйтесь! Вы, программист. Эти слова обычно называются идентификаторами. Они могут быть созданы вами или другими программистами. Они упакованы в плагины, более известные как библиотеки.
Примером является библиотека Math. Она позволяет получить доступ к функциям, таким как квадратный корень (Math.sqrt), используемый в JavaScript.
Многие языки программирования поставляются со множеством библиотек. Они обычно называются SDK (комплекты разработки программного обеспечения). Загружаются вместе с компилятором для дальнейшего создания технологий, приложений и проектов. Также существуют фреймворки, созданные, чтобы облегчить разработку проекта и объединить его различные составляющие.
Некоторые идентификаторы в комплекте с выбранным языком не могут использоваться в качестве идентификатора пользователя. Примером является слово string в Java. Такие идентификаторы вместе с ключевыми словами называются Зарезервированными Словами. Они также являются особыми.
Все ключевые слова являются зарезервированными. Также слова, которые вы выбираете, должны иметь смысл для тех, кто впервые их видит.
Основные типы данных
Целые числа могут быть знаковыми и беззнаковыми, большими и малыми. Последние фактически зависят от объема памяти, зарезервированного для таких чисел. Есть числа с десятичными частями, обычно называемые double и float, в зависимости от языка, который вы изучаете.
Также существуют логические типы данных boolean, которые имеют значение true или false.
Сложные типы данных
Указанные выше типы известны как элементарные, первичные или базовые. Мы можем создавать более сложные типы данных из приведенных базовых.
Массив (Array) – это простейшая форма сложного типа. Строка (String) – это массив символов. Мы не можем обойтись без этих данных и часто используем их при написании кода.
Комбинация символов – это строка. Чтобы использовать аналогию, строка для компьютера означает, что слово принадлежит человеку. Слово «термометр» состоит из 9 символов – мы просто называем это строкой символов. Обработка строк – это обширная тема, которая должна изучаться каждым начинающим программистом.
Сложные типы данных поставляются с большинством языков программирования, которые используются. Есть и другие, такие как системы классов. Это явление также известно как объектно-ориентированное программирование (ООП).
Переменные
Переменные – это просто имена областей памяти. Иногда нужно сохранить данные в исходном коде в месте, откуда их можно вызвать, чтобы использовать. Обычно это место памяти, которое резервирует компилятор/интерпретатор. Нам нужно дать имя этим ячейкам памяти, чтобы потом их вспомнить. Рассмотрим фрагмент кода Python ниже:
pet_name – пример переменной, и тип данных, хранящихся в pet_name, является строкой, что делает переменную строковой. Существуют также числовые. Таким образом, переменные классифицируются по типам данных.
Константы
Константы – это значения, которые не изменяются на протяжении всего жизненного цикла программы. Чаще всего в их именах используются заглавные буквы. Некоторые языки поддерживают создание постоянных значений, а некоторые – нет.
Существуют строго типизированные языки программирования, в которых каждая переменная должна быть определенного типа. Выбрав тип один раз, вы больше не сможете его изменить. Java – хороший пример такого ЯП.
Другие же не предоставляют эти функции. Они являются свободно типизированными или динамическими языками программирования. Пример – Python.
Вот как объявить постоянное значение в JavaScript:
Литералы
В каждом исходном коде существуют типы данных, которые используются повсюду и изменяются только в том случае, если их отредактировали. Это литералы, которые не следует путать с переменными или константами. Ни один исходный код не обходится без них. Литералы могут быть строками, числами, десятичными знаками или любыми другими типами данных.
В приведенном выше фрагменте слово «Hippo» является строковым литералом. Это всегда будет «Hippo», пока вы не отредактируете исходный код. Когда вы научитесь кодить, узнаете, как управлять литералами таким образом, чтобы оставлять неизменной большую часть кода.
Пунктуация/Символы
В большинстве написанных программ вы найдете различные знаки препинания в зависимости от выбранного языка программирования. Например, в Java используется больше знаков препинания, чем в Python.
Основные знаки включают в себя запятую (,), точку с запятой (;), двоеточие (:), фигурные скобки (<>), обычные круглые скобки (()), квадратные скобки ([]), кавычки («» или »), вертикальную черту (|), слэш (\), точку (.), знак вопроса (?), карет (^) и процент (%).
Добро пожаловать в мир программирования, где знаки препинания – ваши лучшие друзья. Скоро вы обнаружите, что в коде их всегда очень много.
Операторы
Шансы, что вы будете писать исходный код для выполнения какой-нибудь операции, крайне высоки. Любые языки программирования, которые мы используем, включают в себя множество операторов. Среди применяемых выделяют сложение (+), деление (/) умножение (*), вычитание (—) и знак больше (>).
Операторы обычно классифицируются следующим образом:
Комментарии
Документация будет важным аспектом деятельности в сфере программирования. Это то, как вы объясняете свой код другим программистам. Подобное делается с помощью комментариев, которые добавляются к различным частям кода. С помощью комментариев вы можете направлять других программистов через написанную программу.
Компилятор игнорирует строки кода, которые являются комментариями.
Объявление комментариев разное для разных языков. Например, # используется для ввода комментариев в языке Python.
Вот пример комментария в Python:
Пробелы и вкладки
Это пробелы, созданные между кодом, который вы пишете. Они ставятся при нажатии пробела или клавиши табуляции на клавиатуре.
Двигаемся дальше
Вы познакомились с исходным кодом и изучили его содержимое. Скомпилированный или преобразованный код может не запускаться по ряду причин. Эти причины обычно связаны с ошибками. Действие поиска и удаления ошибок называется отладкой и является навыком, который вы должны изучить. Ошибки мы рассмотрим в следующей части.
Убедитесь, что вы правильно настроили Python в своей компьютерной системе, и запустите свою первую программу.
Викторина
Определите элементы, которые мы изучили, в приведенном ниже фрагменте кода Java:
Улучшайте свое знание JavaScript разбирая исходный код
Когда вы только начинаете карьеру программиста копание в исходном коде открытых библиотек и фреймворков может казаться чем-то страшным. В этой статье Карл Мунгази делится опытом как он поборол свой страх и стал использовать исходный код для приобретения знаний и развития навыков. Он также использует Redux чтобы показать как он «разбирает» библиотеку.
Вы помните, когда впервые погрузились в код библиотеки или фреймворка, которые часто используете? В моей жизни этот момент наступил на моей первой работе в качестве фронтенд-разработчика три года назад.
Мы как раз только что переписали устаревший собственный фреймворк, который использовался для создания курсов интерактивного обучения. В самом начале работ по переписыванию мы изучили некоторые готовые решения, включая Mithril, Inferno, Angular, React, Aurelia, Vue, и Polymer. Поскольку я был еще юным падаваном (только что перешедшим из журналистики в веб-разработку), то был ужасно напуган сложностью каждого фреймворка и непониманием того, как они работают.
Понимание стало приходить, когда я начал тщательно исследовать фреймворк Mithril. С тех пор мое знание JavaScript — и программирования в целом — существенно подкрепилось благодаря часам, потраченным на копание во внутренностях библиотек, которые я ежедневно использовал на работе и в собственных проектах. В этой статье я расскажу как можно использовать вашу любимую библиотеку в качестве учебного пособия
Чтение исходного кода я начал с функции hyperscript из Mithril
Плюсы разбора исходного кода
Один из главных плюсов разбора исходного кода — можно узнать много нового. Когда я начинал разбирать код Mithril, то очень слабо представлял себе что такое виртуальный DOM. Когда же закончил — уже знал, что виртуальный DOM это техника, включающая создание дерева объектов, описывающих пользовательский интерфейс. Затем это дерево может быть преобразовано в DOM-элементы с использованием DOM API вроде document.createElement. Для обновления же создается новое дерево, описывающее будущее состояние интерфейса и затем сравнивается с предыдущим вариантом этого самого дерева.
Я читал об этом во многих статьях и руководствах, но самым поучительным было наблюдать за всем этим в процессе работы над нашим приложением. Также я научился задавать правильные вопросы при сравнении фреймворков. Вместо того, чтобы сравнивать рейтинги, например, можно задать вопрос «Как способ работы данного фрейворка с изменениями влияет на производительность и удобство конечного пользователя?»
Еще одним плюсом является развитие понимания хорошей архитектуры приложения. Несмотря на то, что большинство open-source проектов в общем-то более-менее похожи по структуре своих репозиториев, все равно у них есть различия. Структура Mithril весьма плоская и если вы хорошо разбираетесь в его API — можете делать вполне реалистичные предположения о коде в папках render, router и request. С другой стороны, структура React`a отражает его новую архитектуру. Разработчики отделили модуль, отвечающий за обновление UI (react-reconciler) от модуля, отвечающего за рендеринг DOM-элементов (react-dom).
Одно из преимуществ такого разделения для разработчиков — они могут писать свои собственные рендереры с помощью хуков в react-reconciler. Parcel, сборщик модулей который я недавно изучал, тоже имеет папку packages, как и React. Ключевой модуль называется parcel-bundler, он содержит код, который отвечает за создание сборок, работу сервера обновления модулей (hot module server) и инструмент командной строки.
Разбор исходного кода вскоре приведет вас к чтению спецификации JavaScript
Еще один плюс, который был для меня большим сюрпризом, — вам становится проще читать официальную спецификацию JavaScript. Впервые я обратился к ней, когда пытался разобраться, чем отличается throw Error и throw new Error (спойлер — ничем). Я задался этим вопросом потому что Mithril использовал throw Error в имплементации функции m и мне стало интересно, а чем же оно лучше throw new Error. Потом я узнал также, что операторы && и || не обязательно возвращают булевы значения, нашел правила, по которым оператор нестрогого сравнения == «разруливает» значения и причину по которой Object.prototype.toString.call(<>) возвращает ‘[object Object]’.
Как разбирать исходный код
Разбирать исходный код можно по-разному. Самым простым способом мне кажется следующий: выбрать метод из вашей библиотеки и описать, что происходит, когда вы его вызываете. Не стоит описывать каждый шаг, нужно просто попытаться понять его общие принципы и структуру.
Недавно я таким образом разобрал ReactDOM.render и таким образом многое узнал о React Fiber и некоторых сложностях в его имплементации. К счастью, React весьма популярен и наличие большого количества статей на ту же тему от других разработчиков ускорило процесс.
Это погружение в код также познакомило меня с концепцией co-operative scheduling, методом window.requestIdleCallback и живым примером связного списка (React обрабатывает обновления, отправляя их в очередь, которая является связным списком обновлений с приоритетами). В процессе неплохо бы создать простейшее приложение с использованием библиотеки. Это упрощает дебаггинг, поскольку вам не придется иметь дело со стек-трейсом других библиотек.
Если я не делаю подробный обзор, то открою папку node_modules в проекте над которым работаю или загляну на GitHub. Всегда так делаю, натыкаясь на баг или интересную фичу. Читая код на GitHub, убедитесь в том, что это последняя версия. Код последней версии можно увидеть кликнув по кнопке смены веток и выбрав «теги». Изменения в библиотеках и фреймворках происходят постоянно, так что вряд ли вы захотите разбирать что-то, чего может не быть в следующей версии.
Более поверхностный вариант изучения исходного кода — то, что я называю «беглый взгляд». Как-то я установил express.js, открыл папку node_modules и прошелся по зависимостям. Если README не давал мне удовлетворительного пояснения, я читал исходник. Это привело меня к интересным открытиям:
Дебаггинг инструменты браузера — ваши лучшие друзья при дебаге кода на фронтенде. Кроме всего прочего они позволяют останавливать выполнение программы в любой момент и проверить при этом ее состояние, пропустить выполнение функции, либо же зайти внутрь оной или выйти из нее. В минифицированном коде это невозможно — поэтому я этот код распаковываю и помещаю в соответствующий файл в папке node_modules.
Используйте дебаггер как полезное приложение. Сделайте предположение, а затем проверьте его.
Пример из практики: функция connect в Redux
React-Redux — это библиотека для управления состоянием приложений на React. Когда я работаю с популярными библиотеками вроде этой, то начинаю с поиска статей об их использовании. При подготовке этого примера я ознакомился с данной статьей. Это еще один плюс изучения исходного кода — оно ведет вас к информативным статьям вроде этой, которые улучшают ваше мышление и понимание.
Connect — это функция react-redux, которая связывает react-компонент и redux-хранилище приложения. Как? Согласно документации она делает следующее:
“… возвращает новый, связанный класс компонента, который является оберткой переданного в нее компонента.”
Прочитав это я задаюсь следующими вопросами:
Компонент, на котором я сосредоточился, выглядит примерно так:
Это компонент-контейнер, который служит оберткой для четырех меньших связанных компонентов. Одна из первых вещей, которые вы обнаружите в файле, который экспортирует connect это комментарий «connect — это фасад для connectAdvanced». Уже на этом этапе мы можем кое-чему поучиться: у нас есть возможность наблюдать паттерн «фасад» в действии. В конце файла мы видим, что connect экспортирует вызов функции createConnect. Ее параметры — набор значений по умолчанию, которые деструктуризируются следующим образом:
И у нас есть еще один поучительный момент: экспорт вызываемой функции и деструктуризация аргументов функции по умолчанию. Деструктуризация поучительна для нас потому, что код мог бы быть написан так:
В результате мы получили бы ошибку — Uncaught TypeError: Cannot destructure property ‘connectHOC’ of ‘undefined’ or ‘null’. Это бы произошло потому, что у функции нет значений аргументов по умолчанию.
Примечание: чтобы лучше понять деструктуризацию аргументов, вы можете прочесть статью David Walsh. Некоторые моменты могут показаться тривиальными, в зависимости от вашего знания языка — тогда вы можете сосредоточиться на тех моментах, с которыми не знакомы.
Сама по себе функция createConnect ничего не делает. Она просто возвращает функцию connect, которую я использовал здесь:
Она принимает четыре опциональных аргумента и первые три из них проходят через функцию match, которая помогает определить их поведение исходя из того, какие аргументы переданы, а также их типа. Выходит, раз второй аргумент, переданный в match — одна из трех функций, импортированных в connect, мне нужно выбрать, куда двигаться дальше.
Есть что почерпнуть также и из прокси-функции, используемой для обертки первого аргумента в connect, если эти аргументы — функции; из утилиты isPlainObject, используемой для проверки plain objects или из модуля warning, который показывает, как можно сделать дебаггер, который будет ломаться на всех ошибках. После функции match мы переходим к connectHOC — функции, которая берет наш react-компонент и связывает его с redux. Есть еще один вызов функции, возвращающий wrapWithConnect — функцию, которая фактически обрабатывает связывание компонента с хранилищем.
Глядя на имплементацию connectHOC я могу предположить, почему детали реализации connect должны быть скрыты. Это по сути сердце react-redux и содержит логику, которая не должна быть доступная через connect. Даже если остановиться на этом, то в последствии, если нужно будет копнуть глубже — у нас уже будет исходный материал с детальным пояснением кода.
Итоги подведем
Изучение исходного кода — поначалу очень сложная штука. Но, как и все остальное, со временем становится проще. Задача его не в том, чтобы все понять, а в том, чтобы вынести для себя что-то полезное — общее понимание и новые знания. При этом очень важно быть внимательным во время всего процесса и вникать в детали.
Еще один неожиданный момент в isPlainObject в этом месте:
Поиск ответа в Гугл привел меня в эту ветку на StackOverflow, и к этому комментарию на GitHub`е Redux, где поясняется, как этот код обрабатывает ситуации, когда, например, объект передан из iFrame.
Впервые решил перевести статью. Буду признателен за уточнения, советы и рекомендации