my-course-01

5 уровней, на которых мыслит программист

Русский | English | Українська

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


1-й уровень. Папки и Файлы

На этом уровне речь идет о структурировании проекта на физическом уровне. Как лучше организовать папки и файлы проекта, чтобы код был читабельным и легко поддерживаемым? Можно написать всё в одном файле, можно поделить по языкам (.html, .css, .js), по назначению - выделив компоненты в отдельные файлы или даже папки, по сторонам клиент-серверного взаимодействия - Front/Backend. Или даже применить более детализированную методологию (7-1 и т.п.).

Адекватная организация кода в разные файлы и папки помогает в разделении ответственности и упрощает навигацию по проекту. Причём в разработке может быть одно разделение на файлы а в приложении, развёрнутом на сервере - другое, организованное при помощи сборщика проектов (Webpack, Parcel, Rollup и т.д.).

На этом уровне мы решаем, где пишем. На следующем - что пишем.

2-й уровень. Код: Инструкции, Выражения, Токены

На уровне кода программа превращается из абстрактных идей в конкретные команды, записанные согласно синтаксису - своду требований к коду, обязательных к выполнению.

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

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

А в JavaScript это ключевые слова, идентификаторы, операторы, литералы, пунктуация и комментарии. Ключевые слова не должны использоваться ни для чего, кроме своего назначения (чаще всего в соответствующих инструкциях). Идентификаторы идентифицируют (именуют) сущности и не должны пересекаться в пределах одной области видимости. Операторы выполняют операции над данными согласно порядку написания, группировке и приоритету выполнения. Литералы буквально создают значения. Пунктуация разделяет другие токены, где этого требует синтаксис. Комментарии не влияют на выполнение кода, но помогают понять его смысл как программисту, так и мощным современным редакторам с интеллектуальными подсказками и автодополнением.

3-й уровень. Данные (значения) и Структуры Данных

Решения о выборе типов и структур данных и способов их организации критически важно для разработчика. В JS нам доступны примитивные (штучные) значения: числа или строки, булевые значения или пустые. Множества (сложные): массивы (с нумерованными значениями в ячейках) или объекты (с именованными значениями в свойствах). Выбирая объекты, мы работаем с ассортиментом из сотен типов объектов, стандартных для браузеров или NodeJS.

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

На этом уровне мы решаем, как и какие храним данные. На следующем - как с ними работаем.

4-й уровень. Сущности, оперирующие данными

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

Переменные и константы - это именованные ссылки на данные. Функции - это анонимные или именованные блоки кода, которые могут вызываться. В том числе и для неоднократного выполнения. Параметры - это именованные ссылки на передаваемые в функцию значения (аргументы). Свойства - это ссылки на данные, принадлежащие объекту, именованные уникальными в пределах него ключами. Ячейки массива, нумерованные индексами, также являются свойствами объекта (а индексы - ключами). Методы - это функции, принадлежащие объекту. Функции-конструкторы или Классы - это шаблоны для создания типовых объектов (экземпляров).

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

5-й уровень. Интерфейсы: GUI, CLI, API

Последний уровень мышления связан с интерфейсами.

Graphical User Interface (GUI) - это графический пользовательский интерфейс, те элементы на экране, посредством которых информация показана пользователям, и с помощью которых они взаимодействуют с приложением (формы, поля ввода, кнопки, ссылки, переключатели состояний). Здесь важны доступность и понимание принципов User Experience (UX) - проектирования пользовательского опыта.

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

Application Programming Interface (API) - это программный интерфейс приложения, руководствуясь которым подпрограммы и целые приложения согласованно взаимодействуют между собой, образуя сложные системы с ещё более широкими возможностями.


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

абстрактная иллюстрация