Не для любителей copy-paste

а также способ автоматизации неизбежного copy-paste в работе

PRODUCTION

COPY AND PASTE

I DID IT

Agenda

• СOPY-PASTE - ЭТО ХОРОШО ИЛИ ПЛОХО?

• АНТИПАТТЕРНЫ, ПОРОЖДАЮЩИЕ COPY-PASTE

• СНИППЕТЫ, КАК СПОСОБ АВТОМАТИЗАЦИИ НАПИСАНИЯ КОДА

• ОБЗОР СНИППЕТОВ: ЧТО ЭТО? КАК РАБОТАЕТ? КАК ИСПОЛЬЗОВАТЬ?

• QA

Maryia Krauchanka

Software Engineer – EPAM Systems

mariasun254

maryia_krauchanka@epam.com

https://t.me/mariasun254

https://t.me/storm_the_front

ПоЧЕму я Copy-paste-у?

• Не знаю как решить проблему

• Не помню синтаксис

• Boilerplate code

• копирование проекта, схожего по функционала с последующей настройкой

• Стилевые решения

• переиспользую код в разлиный местах приложения

• Лень...

pros

• быстрый результат

• просто найти и проверить перед использованием

• копирование best practices

• уменьшение риска

• увеличивает продуктивность

cons

• нет гарантии качества кода(потенциальные bugs)
• сложночитаемый и непонятный код
• наличие side effects
• неактуальные решения
• проблема дальнейшей поддержки кода
• рост технического долга
• готовые решения лишают вас возможности учится

COPY-PASTE Это хорошо или плохо?

Программирование методом COPY-PASTE 

процесс создания программного кода с часто повторяющимися частями, произведёнными операциями копировать-вставить

• большие, сложночитаемые функции

• Сложен для восприятия

• многократно повторяющие фрагменты кода притупляют внимание

• Допущенная ошибка циклически повторяется на протяжении ЖЦ кода

Даже  существует такой стиль программирования! 

А ты на стиле?

Cargo Cult Programming

Is the Art of Programming by Coincidence

«Cargo cult programming» — это использование паттернов без четкого понимания того, для чего они нужны и какими обладают достоинствами по сравнению с альтернативными решениями. Такое использование несет гораздо больше вреда, нежели пользы.

Fred doesn’t know why the code is failing because he didn’t know why it worked in the first place. It seemed to work, given the limited “testing” that Fred did, but that was just a coincidence.

 programmers who understand what the code does, but not how it does it

Doing Stuff Just Because

Еще больше антипаттернов

ИЛИ КАК БЫТЬ ЕЩЕ круче

Spaghetti -  расползание кода на одном этаже программы. 

Golden hammer - применение какого-то конкретного паттерна для решения всех возможных и невозможных задач.

Blind faith - заключается в доверии программиста к какому-либо коду, включая свой собственный.

Programming by permutation - это программирование методом подбора.

I am not trying...

Copy and paste doesn't create bad code. Bad programmers create bad code.

Ничего нет плохого, если...

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

Copy-paste везде...

SPIPPETS в помощь!

Что это?

Фрагменты кода - это шаблоны, облегчающие ввод повторяющихся шаблонов кода.

Как использовать?

- расширение для многих популярных языков и фреймворков для IDE

- создание кастомных snippets

Как это работает?

Custom snippet

Custom snippet(VSC)

• можно получить доступ в VS Code через:

  File > Preferences > User Snippets (Windows)
  Code > Preferences > User Snippets (macOS)

• Каждый файл JSON для конкретного языка программирования имеет пример по умолчанию в комментариях, демонстрирующий использование фрагментов кода.

Snippet базовая структура

• For Loop имя сниппета.
• prefix определяет триггер, по которому можно вызвать сниппет в IntelliSense и на вкладке completion. В примере for.
• body  это содержимое сниппера с переменными. Может быть как отдельная строка, так и массив строк, каждый элемент которого будет вставлен в виде отдельной строки.
• a description описание сниппета, которое будет использовано в IntelliSense drop down.

Snippet помощники

переменные

• TM_SELECTED_TEXT Текущий выбранный текст или пустая строка

• TM_CURRENT_LINE Содержимое текущей строки
• TM_CURRENT_WORD Содержимое слова под курсором или пустая строка
• TL;DR

трансформации значений переменных

A little bit of working experience...

SIT DOWN AND LISTEN

I swear I use it...

Time for magic

File > Preferences > User Snippets (Windows)
 

typescript.json

{
  "multiPageBot": {
    "prefix": "multiPageBot",
    "body": [
      "export class $1_$TM_FILENAME_BASE extends MultiPageBot {",
      "\tprotected loopScope = '$3';",
      "\tprotected pagination = new Pagination('$4');",
            TL;TR
      "\t}",
      "}",
    ],
    "description": "multiPageBot basic setup"
  },

GO

FIND

WRITE TEMPLATE

USE

prefix + tab

Существует ли зависимость между хорошим программистом и количеством скопированного кода?

Ну и напоследок...

• ПРИ КОПИРОВАНИИ КОДА, СПРОСИ СЕБЯ ЗАЧЕМ?ПОСТАРАЙТЕСЬ ПОНЯТЬ, КАК ЭТОТ МАЛЕНЬКИЙ ФУНКЦИОНАЛ ДЕЛАЕТ ТО, ЧТО ОН ДЕЛАЕТ, И КАК ОН ВПИСЫВАЕТСЯ В ОБЩУЮ КАРТИНУ ВЕБ-РАЗРАБОТКИ.

• БУДЬТЕ ВКУРСЕ ТОГО, ЧТО ВЫ ДЕЛАЕТЕ И ​​НИМПЛЕМЕНТИРУЙТЕ ЧТО-НИБУДЬ СЛЕПО

• ПОЛАГАЙТЕСЬ ТОЛЬКО НА НАДЕЖНЫЕ ВЕЩИ

• НЕ ПРОСТО ПРОВЕРЯЙТЕ СВОЙ КОД, НО И ПРОВЕРЯЙТЕ СВОИ ПРЕДПОЛОЖЕНИЯ

• НЕ БУДЬ РАБОМ ИСТОРИИ. НЕ ПОЗВОЛЯЙТЕ СУЩЕСТВУЮЩЕМУ КОДУ ДИКТОВАТЬ БУДУЩИЙ КОД.

Ну И еще чуть-чуть...

• ОСТОРОЖНО ДЕЛАЙТЕ ЛОЖНЫЕ ВЫВОДЫ

• НЕ ПОЛАГАЙТЕСЬ НА УДАЧУ И СЛУЧАЙНЫЕ УСЛОВИЯ - ПРОГРАММИРУЙТЕ ПО НАМЕРЕНИЮ

• ЧИТАЙТЕ SOURCE CODE -  САМАЯ АКТУАЛЬНАЯ ДОКУМЕНТАЦИЯ, КОТОРАЯ ПОМОЖЕТ ВАМ ПОЛУЧИТЬ ПОЛНОЕ ПОНИМАНИЕ ПРОИСХОДЯЩИХ ВЕЩЕЙ

REMEMBER

Don’t just copy and paste mechanically. Engage your brain!

рЕСУРСЫ

• https://pragprog.com/the-pragmatic-programmer/extracts/coincidence

• https://code.visualstudio.com/docs/editor/userdefinedsnippets

• https://blog.ndepend.com/cargo-cult-programming/

• https://medium.com/@jacobedawson/creating-visual-studio-code-snippets-ce72fed8c5bd

• https://www.jetbrains.com/help/webstorm/creating-and-editing-live-templates.html

tHANK YOU

Questions