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) - це програмний інтерфейс додатку, керуючись яким підпрограми та цілі додатки узгоджено взаємодіють між собою, утворюючи складні системи з ще більш широкими можливостями.


Вибір та імплементація оптимальних рішень на кожному з цих рівнів - запорука успішної розробки. Це не тільки допомагає створювати ефективні та надійні програмні рішення, але і робить процес зрозумілим та керованим. Спробуйте скласти ясне уявлення про кожен з цих п’яти рівнів та перевірте себе, написавши або виклавши усно своє розуміння. Це допоможе осмислено приймати рішення та діяти на кожному з них. Адже краса проекту в очевидній доцільності всіх його складових.

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