Представляем вам перевод статьи Sm0ke, опубликованной на сайте dev.to. Автор рассказывает о своем опыте генерации веб-приложений и способе автоматизации процесса их создания.

Привет, кодеры!

Я — разработчик-фрилансер, и я сгенерировал более 100 приложений на различных языках и платформах, используя инструменты автоматизации, парсинг HTML и бойлерплейт-код.

Все мои приложения, как платные, так и бесплатные, находятся в открытом хранилище GitHub. О некоторых из них я расскажу в этой статье.

#1? Сгенерированные JAMstack-приложения


Всего я создал более 40 таких приложений. Дизайн для них разрабатывали известные веб-агентства.



  • Бесплатные приложения с лицензией MIT — Argon Design, Material Kit, Now UI, Paper Kit.
  • Бесплатные приложения с лицензией CCA 3.0 (при их использовании нужно сохранять информацию об авторстве) — ?Fractal, Landed, BigPicture.

#2 Сгенерированные Flask-приложения


Все эти приложения, как платные, так и бесплатные, используют бойлерплейт, базу данных SQLite, ORM, аутентификацию, хелперы и базовый набор инструментов (статический экспорт через Frozen-Flask и скрипт развертывания на FTP).

  • Бесплатные приложения с лицензией MIT — Paper Kit, FlaskPlay.
  • Бесплатные приложения с лицензией CCA 3.0 (при их использовании нужно сохранять информацию об авторстве) — Phantom, SolidState.



#3 Сгенерированные админ-панели


Все мои админ-панели созданы с помощью Flask и используют базу данных SQLite, аутентификацию, ORM и базовый набор инструментов (полный список панелей можно увидеть тут).

Вот некоторые панели: Flask Dashboard Argon?, Flask Dashboard Material? и Flask Dashboard NowUi. Все они имеют лицензию MIT.



Другие сгенерированные приложения и бойлерплейты


  • Full Stack — приложения с двухуровневой архитектурой, а также Vue и React (на уровне интерфейса). Имеют лицензию MIT.
  • Бойлерплейт-код для Node.js, Laravel и Flask — тоже с лицензией MIT.

О процессе автоматизации


Однажды я решил упростить процесс создания приложений. Опираясь на свой фрилансерский опыт за последние два года, а также на требования клиентов и обратную связь, я сделал следующие выводы:

  • Клиентам всегда нужно несколько дизайнов для приложения (чтобы было из чего выбирать).
  • Мои приложения должны быть совместимы даже с самыми новыми устройствами.
  • Необходимо, чтобы миграция устаревших версий приложений на новые устройства укладывалась в небольшой бюджет.

Чтобы решить эти задачи, процесс разработки нужно было сделать автоматизированным. В моем случае понадобилось несколько этапов:

  • Извлекаем компоненты для различных шаблонных движков (Jinja2, Pug, Blade) из простых HTML-файлов с помощью HTML-парсера.
  • Внедряем обработанный дизайн в существующий бойлерплейт-кодLaravel, Node.js, JAMstack или Flask.
  • Запускаем минимальное количество автотестов.

Дальнейшие шаги


  • Расширяем парсер HTML, чтобы конвертировать устаревшие HTML-дизайны в темы Vue, React и Angular.
  • Готовим темы для современных фреймворков (Gatsby.js, Gridsome, Hugo), начиная с дизайна, созданного на Bootstrap.
  • Переносим дизайны из предыдущих версий CSS-фреймворка (Bootstrap) на Bulma и Tailwind.
  • Добавляем в пайплайн больше бойлерплейтов — например, для Django, Fastify и подобных фреймворков.

Заранее спасибо за обратную связь!

Комментарии (10)


  1. Symsym
    02.10.2019 21:41

    Спасибо за перевод, крутой подход.


    1. Plarium Автор
      03.10.2019 16:08

      Вам спасибо, что читаете.


  1. Dimtry44
    02.10.2019 22:44

    Зависит от сложности приложения, в достаточно простых случаях можно нагенерить вообще всё что угодно и под любую платформу.

    Сложности начинаются когда надо кастомизировать поведение.


    1. rkuvaldin
      03.10.2019 01:38

      Да, но к этому моменту ты уже показал заказчику POC и взял с него аванс.


  1. pholeg
    03.10.2019 10:41

    не мешало бы добавить временные сроки потраченные на проекты


  1. dissable
    03.10.2019 14:34
    +1

    Неплохо весьма


  1. PerlPower
    03.10.2019 18:46
    +1

    Я ничего не понял. Автор сделал что-то вроде генераторов для yeoman, только не общего назначения, а заточенных под фрилансерские хотелки и с изрядной долей встроенного дизайна?


    1. 402d
      04.10.2019 10:34

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

      Надоело это добро молодцу.
      Написал он себе супер тулзу.

      Жить стало легче, заказы стали делаться быстрее.
      Но вот беда. Нету столько заказчиков. Да и муторно. После волшебной палочки нужно
      еще напильником подтачивать.

      И осенила его мысль. А пусть ко мне другие обращаются.
      Тыкнут пальчиком. Хочу из этого, да вон под это. А я за это денежку малую получу.

      Стал молодец, голову ломать. Как таких найти. Да и решил.
      Надо бесплатно лучшее из того, что у меня палочка сделала людям отдать.
      Пойдет по краям и странам весть благая.
      Да ко мне и придут.


      1. PerlPower
        04.10.2019 13:19

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


        1. 402d
          04.10.2019 16:15

          Я его перехвалил.
          фактически из его 111 реп большинство использованы для микрохостинга
          из одного рекламного readme.md

          Обработка шаблона в основном заключается.
          был один файл.
          стал файл с 3 инклюдами и плюс 3 файла (шапка, подвал, боковушка)