как писать меньше кода
Пишите меньше кода
Самый важный показатель, на который вы не обращаете внимания
В любом коде могут быть баги. Соответственно, число возможных багов в приложении растёт вместе с количеством кода, который вы пишите.
Очевидно, что, чем больше кода нам приходится писать, тем больше это отнимает времени. Вскоре, его перестёт хватать для таких нужных вещей, как оптимизация, добавление новых возможностей в приложение, ну, или для прогулок на открытом воздухе вместо корпения за ноутбуком.
На самом деле, широко известно, что, с увеличением кодовой базы приложения, время разработки проекта и количество багов растут даже не с линейной, а с квадратичной зависимостью. Этим можно объяснить наше подсознательное поведение, когда пулл-реквесту на 10 строк мы с лёгкостью уделим такой уровень внимания, который редко достаётся коду размером более 100 строк. А как только код становится слишком длинным, и перестаёт помещаться на одном экране, когнитивные усилия, необходимые для его понимания, значительно возрастают. Мы пытаемся исправить ситуацию путём рефакторинга и добавлением комментариев — действия, которые почти наверняка приводят к ещё бо́льшему количеству кода. Это порочный круг.
Мы все немного одержимы, верно? Мы следим за производительностью приложения, размером бандла и всего прочего, что мы можем хоть как-то измерить, но мы редко обращаем внимание на объём кода, который пишем.
Читаемость кода — это важно
Само собой, я не утверждаю, что мы должны использовать любые хитрые уловки, чтобы сделать наш код максимально компактным в ущерб читабельности. Также я не утверждаю, что уменьшение строк кода — это самоцель, так как это может способствовать превращению нормального читаемого кода, вроде этого.
. во что-то неудобоваримое:
Я просто хочу убедить вас, что лучше отдавать предпочтение языкам и шаблонам, которые позволяют нам писать меньше кода естественным образом.
Да, я говорю о Svelte
Сокращение объёма кода, который нужно писать, является очевидным преимуществом Svelte. Чтобы проиллюстрировать это, давайте посмотрим на очень простой компонент, реализованный на React, Vue и Svelte. Сначала, версия Svelte:
Как мы сделаем то же самое в React? Скорее всего, это будет выглядеть примерно так:
Иначе говоря, требуется 442 символа в React и 263 символа в Vue, чтобы достичь чего-то, что в Svelte занимает 145 символов. Версия React буквально в три раза больше!
Такая сильная разница скорее исключение — из моего опыта, компонент React обычно примерно на 40% больше, чем его эквивалент на Svelte. Давайте теперь взглянем на особенности Svelte, которые позволяют компактнее излагать наши идеи.
Элементы верхнего уровня
В Svelte компонент может иметь столько элементов верхнего уровня, сколько вам нужно. В React и Vue компонент обязан иметь единственный элемент верхнего уровня — в случае React попытка вернуть два элемента верхнего уровня из функции компонента приведет к синтаксической ошибке. Вы можете использовать фрагмент — <> — вместо
Привязки
В React мы должны самостоятельно обрабатывать события полей ввода вроде :
Стейт
В Svelte обновление локального состояния компонента происходит с помощью простого оператора присваивания:
В React, мы используем хук useState :
Тут сильно больше постороннего шума — оба фрагмента кода выражают одну и ту же концепцию, но во втором случае было использовано на 60% больше символов. Поэтому, когда вы читаете такой код, вам придётся приложить гораздо больше усилий, чтобы понять замысел автора.
Забудем про шаблонный код
Как? Мы выбрали путь, позволяющий обойти ограничения среды выполнения в браузере. Поскольку Svelte — это компилятор, мы не привязаны к особенностям JavaScript: мы можем создавать метод разработки компонентов как нам нравится, а не приспосабливать его к семантике языка. Как это ни парадоксально, но с таким подходом код становится более идиоматическим. Например, мы используем переменные естественным путём, а не через прокси или хуки, при этом получая значительно более производительные приложения.
Как писать меньше кода при создании корпоративных приложений? Разбираемся в отличиях традиционного подхода и Low-Code
В чем ценность Low-code
Ключевые преимущества Low-code инструментария выводят все этапы разработки корпоративного приложения на качественно новый уровень
Начнем с ключевой ценности Low-code для бизнеса – ускорения создания корпоративных приложений.
Традиционная ситуация, которая наблюдается у бизнес-заказчика – это, так называемый, большой ИТ-бэклог. Это значит, что бизнес генерирует идеи, которые затем попадают в очередь и дожидаются своей реализации. Невозможно сказать заранее, когда идея будет реализована, и такая ситуация типична для многих компаний.
Low-code BPM позволяет разрешить эту ситуацию и выровнять ее. Это значит, что корпоративные приложения теперь создаются достаточно быстро, и очередь из потребностей бизнеса в автоматизации не формируется. Эту ценность сложно переоценить, потому что внешняя среда меняется крайне стремительно, всем нужна ускоренная автоматизация.
Еще одна важная мысль, которую стоит иметь в виду – сравнение подходов к автоматизации. Не секрет, что автоматизировать тот или иной бизнес-процесс или деятельность компании можно разными способами:
Чем традиционная разработка отличается от Low-code подхода
Давайте сравним традиционный подход к разработке с Low-code подходом. Для этого посмотрим на стандартный процесс разработки, который состоит из 5-ти шагов:
1) формирование требований
2) разработка
3) стабилизация
4) развертывание
5) эксплуатация и поддержка
Далее расшифруем каждый из шагов:
Это 5 этапов классической разработки информационной системы в бизнесе. Далее рассмотрим каждый из этих этапов в отдельности и покажем, как они меняются при переходе на Low-code.
В классическом подходе формирование требований – это продолжительная и трудоемкая процедура. Компании необходимо иметь хороших аналитиков, которые, во-первых, понимают бизнес-язык, во-вторых, понимают язык ИТ.
Задача аналитиков на этом этапе – написание качественного ТЗ. С этим, как правило, возникают сложности, поскольку информационной системы еще нет, и бизнес не может детально сформулировать свои требования. Аналитики вынуждены оставлять «белые пятна» в техническом задании с пометкой «бизнес формализует требования по ходу проекта».
В традиционном подходе формирование ТЗ может занимать 3-7 месяцев, в зависимости от сложности информационной системы. Таким образом, разработчики начинают работу над корпоративным приложением примерно через полгода.
Low-code принципиально меняет ситуацию. При применении Low-code-инструментария ТЗ практически не пишется – оно заменяется подготовкой прототипа. Такой прототип может быть собран за несколько рабочих дней и представляет собой MVP, который можно обсуждать с бизнесом. Все требования заказчика – кнопки, настройка интерфейсов, бизнес-логика – прорабатываются на прототипе в режиме реального времени. Таким образом, заказчику становится легче формулировать требования, потому что можно сразу увидеть, как будет выглядеть конечный продукт.
Low-code кардинально трансформирует этап формирования требований – ускоряет, делает его гибким и понятным бизнес-заказчику благодаря прототипу. Кроме того, прототип на Low-code может сформировать даже начинающий аналитик, что позволяет грамотно распределять нагрузку внутри команды.
Еще одна сложность в том, что команда разработки будет готова показать результат работы бизнесу только через определенное время.
Используя платформу Low-code можно за неделю подготовить вторую версию прототипа и постепенно уточнять детали с бизнесом. Таким образом, бизнес непрерывно верифицирует то, что разрабатывает команда.
Стабилизация. В классическом подходе, разработчики выдают тестовую систему, и в рамках стабилизации тестовая группа пользователей проверяет корпоративное приложение.
С чем в этом случае может столкнуться тестовая группа пользователей и сами разработчики?
Во-первых, за время подготовки ТЗ и разработки требования бизнеса могут измениться. И теперь имеющаяся бизнес-система не удовлетворяет заказчика на все 100%. Ее базовые возможности совпадают, но некоторые функции могут требовать доработки, что возвращает разработку на предыдущий этап. Таким образом, приложение может дорабатываться снова и снова.
Во-вторых, интерфейсная составляющая. При тестировании может быть такое, что пользователям совсем неудобно использовать интерфейс приложения. Такое случается, когда пользователи и разработчики мыслят по-разному. Очень часто интерфейсная часть откладывается на последние этапы работы над продуктом.
Стабилизация с помощью Low-code проходит гораздо проще и быстрее. Необходимые изменения в корпоративное приложение можно вносить в режиме реального времени при встрече с заказчиком.
Развертывание на продуктивных серверах предполагает массовое подключение пользователей к системе. Это происходит после того, как завершена тестовая эксплуатация и система принята тестовой группой пользователей.
Запуск нового приложения сопряжен с рисками, связанными с текущим ИТ-ландшафтом, интеграцией системы с другими системами.
Low-code BPM облегчает процедуру развертывания. Например, в ELMA365 Low-code BPM реализована архитектурная изоляция приложений. Это значит, что при обновлении приложения или целого раздела целостность системы не теряется, и информационная система работает без сбоев. Более того, обновление отдельного приложения происходит в режиме реального времени и не подразумевает остановку системы.
Традиционно Low-code BPM подразумевает разделение сред разработки, тестирования, продуктивной эксплуатации и автоматизированный перенос отдельных приложений между этими средами.
Ну и последний этап жизненного цикла корпоративного приложения – это эксплуатация и поддержка. Когда корпоративная система или приложение переведены в продуктивную эксплуатацию, ИТ-специалисты должны обеспечивать SLA работоспособности приложения. Также у бизнеса через какой-то период времени могут появиться идеи по развитию текущего корпоративного приложения, и эти идеи будут формировать ИТ-бэклог.
Kubernetes автоматически масштабирует те контейнеры, в которых находятся микросервисы с повышенной нагрузкой в определенный момент времени. Таким образом, динамическое выделение ресурсов на нагруженные части системы позволяет сохранить быстродействие и снизить время отклика для пользователя даже при пиковых нагрузках.
Таким образом, можно утверждать, что ключевые преимущества Low-code инструментария выводят все этапы разработки корпоративного приложения на качественно новый уровень.
Как писать меньше кода и получать больше толку
Comments 6
Скорее, автор высказывал следующую идею:
Все бы ничего, однако, согласитесь, это не всегда работает. Я думаю нет смысла придираться к частностям, так как в других комментариях уже это сделали, но все же лично меня больше всего задел пункт, с котором я никак не могу согласиться — Не пишите неуязвимый код. Где та грань между НЕ неуязвимым кодом и говнокодом или же на скорую руку собранным дерьмом непонятного качества. Требуемого качества пересечения этой границы помогают достичь тесты, ревью коллег и некоторые другие инструменты и способы улучшения кода, но вот что делать тем кто работает один или совсем небольшими командами?
P.S. Как всегда не стоит забывать что все советы это конечно хорошо, но личный удачный/не_удачный опыт ничем не заменишь
Соглашусь только с последним пунктом. По мне всякая необходимость оставлять неиспользуемые функции полностью исчезла с появлением Git.
А вот на счёт остального скажу — такие рекомендации и без того часто понимают превратно. Вообще, много раз убеждался, что любую разумную идея можно довести до абсурда. И особенно могу сказать про первые два пункта, во что это скорее всего превратится в реальности. Умельцев внедрят функциональность самым примитивным способом хоть отбавляй. После этого соответствующие задачи переходят в статус выполнено и включать в очередной sprint время на refactoring редко кто топорится. Вместо этого реализуется дальнейшая функциональность со всё новыми костылями. В итоге очередную новую функцию становится нереально в сколь-нибудь сопоставимые сроки реализовать без новых костылей, как ни хотелось б. Ну и далее характерный реальзтат, когда исправление одной ошибки создат другую ошибку.
Пишите меньше кода, блин
Я не самый талантливый кодер в мире. Правда. Так что я стараюсь писать как можно меньше кода. Чем меньше кода я пишу, тем меньше кода может ломаться, поддерживаться и требовать пояснений.
А еще я ленивый — мед, да еще и ложкой (я решил использовать в статье аналогии с едой).
Но, оказывается, что единственный гарантированный способ повысить производительность в вебе — это писать меньше кода. Минифицировать? Окей. Сжимать? Ну, да. Кэшировать? Звучит неплохо. Вообще отказываться кодить или использовать чужой код изначально? А вот теперь — в яблочко! Что есть на входе — должно выйти на выходе в той или иной форме, независимо от того, смог ли ваш сборщик растворить и переварить это своими желудочными соками (я, пожалуй, откажусь от пищевых аналогий).
И это не все. Кроме видимых улучшений производительности, где вам требуется то же количество кода, но его сначала нужно разжевать (не смог удержаться), вы также можете сэкономить. Моему провайдеру без разницы, посылаю ли я кучу маленьких писем или одно большое: все складывается.
В стремлении к уменьшению мне больше всего нравится вот что: в конце остается только то, что реально нужно, только то, что по-настоящему требуется пользователю. Огромная фотка какого-то чувака, пьющего латте? Выкинуть. Кнопки социальных сетей, которые подсасывают кучу левого кода и ломают дизайн страницы? Пинок под зад им. Эта хреновина на JavaScript, которая перехватывает правый клик и показывает кастомное модальное окно? Выставить на мороз!
Речь идет не только про подключение штук, которые ломают интерфейс. То, как вы пишете свой собственный код, тоже играет большую роль в стремлении к уменьшению кода. Вот несколько советов и идей. Я писал о них ранее, но в контексте удобства и отзывчивого дизайна. Просто так получается, что гибкий, удобный веб требует меньше контроля с нашей стороны и его сложнее сломать.
WAI-ARIA
Преимущество использования нативных элементов в том, что зачастую не нужно будет кодировать собственное поведение. Следующая реализация чекбокса не только слишком многословная, но также зависит от JavaScript, который контролирует изменение состояния и переопределяет стандарт работы с атрибутами и методом GET. Кода больше, и он менее надежный. Красота!
Стили? Не волнуйтесь, все под контролем. Если вообще нужны кастомные стили, конечно.
Сетка
Вы когда-нибудь получали удовольствие от использования или чтения веб-сайта с более чем двумя колонками? Слишком много информации, которая требует внимания. «Интересно, какая из этих штук, похожих на навигацию, на самом деле является нужной мне навигацией?». Это риторический вопрос: я не знаю, что делать дальше и покидаю сайт.
Конечно, иногда хочется поставить какую-нибудь штуку рядом с другой штукой. Например, поисковую выдачу или еще что-то. Но зачем тянуть сюда тонну библиотек для сеток? Флексбокс умеет это буквально с двумя блоками определений.
Теперь все будет растягиваться до примерно 10em в ширину. Количество колонок зависит от того, сколько ячеек размером примерно 10em поместится в viewport. Готово. Идем дальше. А, кстати, давайте еще обсудим такую штуку:
Знаете ли вы, что это число основано на мистической пропорции? Пропорции, которая должна вызывать чувство спокойствия и благоговения? Нет, я не знал об этом и мне пофиг. Просто сделайте кнопку «Порно» достаточно большой, чтоб было видно.
Отступы
Мы знаем, как это делается. Задавайте отступ для всех элементов, используя универсальные селекторы. И переопределяйте когда нужно. Много не потребуется.
Нет, универсальный селектор не ухудшит производительность. Это ересь.
Не нужен целый Angular или Meteor чтобы поделить простую страницу на «views». Views это просто куски страницы, которые видны в те моменты, когда не видны другие. Это можно сделать с CSS:
«Но одностраничные приложения запускают код при загрузке view!», — скажете вы. Я понимаю. Для этого существует событие onhashchange. Не нужно библиотек, и ваши ссылки будут нормальными, стандартными, их можно добавлять в закладки. Это клево. Об этом можно почитать больше, если интересно.
Размер шрифта
Тонкая настройка размера шрифта может сильно раздуть ваши блоки media. Поэтому нужно отдать это в руки CSS. Одна строчка кода.
Э-э-э… вот и все. Есть даже минимальный размер, так что не будет нечитаемых крохотных букв на мобильных устройствах.
10k Apart
Как я сказал, я не лучший в мире кодер. Я просто знаю несколько трюков. Но с небольшим количеством знаний можно сделать очень многое. В этом суть соревнования «10k Apart» — выяснить, чего можно добиться с 10kb или меньше. Есть большие призы. Я как судья не могу дождаться, когда возьмусь за изучение всех крутых заявок, идей и реализаций, которые мне хотелось бы придумать самому. А что придумаете вы?
Пишите меньше кода
Хайп по Svelte после недавнего релиза 3 версии фреймворка всё-таки имеет место быть, чему свидетельствуют сильно возросшее комьюнити и огромное количество вопросов как в официальном чате, так и в нашем рускоязычном telegram-канале. Всё больше разработчиков украдкой или всерьёз присматриваются к этой технологии и задумываются о её применении в своих новых проектах. Для этих разработчиков и всех прочих интересующихся темой максимально эффективного написания кода, Rich Harris, автор и идеолог фреймворка, опубликовал статью о том, как Svelte помогает разработчику минимизировать усилия при создании современных реактивных web-приложений, перевод которой я и предлагаю ниже.
В любом коде могут быть баги. Соответственно, число возможных багов в приложении растёт вместе с количеством кода, который вы пишите.
Очевидно, что, чем больше кода нам приходится писать, тем больше это отнимает времени. Вскоре, его перестаёт хватать для таких нужных вещей, как оптимизация, добавление новых возможностей в приложение, ну, или для прогулок на открытом воздухе вместо корпения за ноутбуком.
На самом деле, широко известно, что, с увеличением кодовой базы приложения, время разработки проекта и количество багов растут даже не с линейной, а с квадратичной зависимостью. Этим можно объяснить наше подсознательное поведение, когда пулл-реквесту на 10 строк мы с лёгкостью уделим такой уровень внимания, который редко достаётся коду размером более 100 строк. А как только код становится слишком длинным, и перестаёт помещаться на одном экране, когнитивные усилия, необходимые для его понимания, значительно возрастают. Мы пытаемся исправить ситуацию путём рефакторинга и добавлением комментариев — действия, которые почти наверняка приводят к ещё бо́льшему количеству кода. Это порочный круг.
Мы все немного одержимы, верно? Мы следим за производительностью приложения, размером бандла и всего прочего, что мы можем хоть как-то измерить, но мы редко обращаем внимание на объём кода, который пишем.
Читаемость кода — это важно
Само собой, я не утверждаю, что мы должны использовать любые хитрые уловки, чтобы сделать наш код максимально компактным в ущерб читабельности. Также я не утверждаю, что уменьшение строк кода — это самоцель, так как это может способствовать превращению нормального читаемого кода, вроде этого.
… во что-то неудобоваримое:
Я просто хочу убедить вас, что лучше отдавать предпочтение языкам и шаблонам, которые позволяют нам писать меньше кода естественным образом.
Да, я говорю о Svelte
Сокращение объёма кода, который нужно писать, является очевидным преимуществом Svelte. Чтобы проиллюстрировать это, давайте посмотрим на очень простой компонент, реализованный на React, Vue и Svelte. Сначала версия Svelte:
Как мы сделаем то же самое в React? Скорее всего, это будет выглядеть примерно так:
Иначе говоря, требуется 442 символа в React и 263 символа в Vue, чтобы достичь чего-то, что в Svelte занимает 145 символов. Версия React буквально в три раза больше!
Такая сильная разница скорее исключение — из моего опыта, компонент React обычно примерно на 40% больше, чем его эквивалент на Svelte. Давайте теперь взглянем на особенности Svelte, которые позволяют компактнее излагать наши идеи.
Элементы верхнего уровня
В Svelte компонент может иметь столько элементов верхнего уровня, сколько вам нужно. В React и Vue компонент обязан иметь единственный элемент верхнего уровня — в случае React попытка вернуть два элемента верхнего уровня из функции компонента приведет к синтаксической ошибке. Вы можете использовать фрагмент — <> — вместо
Привязки
В React мы должны самостоятельно обрабатывать события полей ввода вроде :
Стейт
В Svelte обновление локального состояния компонента происходит с помощью простого оператора присваивания:
В React мы используем хук useState :
Тут сильно больше постороннего шума — оба фрагмента кода выражают одну и ту же концепцию, но во втором случае было использовано на 60% больше символов. Поэтому, когда вы читаете такой код, вам придётся приложить гораздо больше усилий, чтобы понять замысел автора.
Забудем про шаблонный код
Как? Мы выбрали путь, позволяющий обойти ограничения среды выполнения в браузере. Поскольку Svelte — это компилятор, мы не привязаны к особенностям JavaScript: мы можем создавать метод разработки компонентов как нам нравится, а не приспосабливать его к семантике языка. Как это ни парадоксально, но с таким подходом код становится более идиоматическим. Например, мы используем переменные естественным путём, а не через прокси или хуки, при этом получая значительно более производительные приложения.