Моя текущая скорость ведения блога не фантастична. У меня очень хорошие намерения, но я неизменно:

  • Перестаньте делать «рабочие» дела вне рабочей недели, чтобы я мог дать отдохнуть своему бедному мозгу. В последнее время я могу делать это с разумным успехом, узнав, как нельзя справляться с выгоранием!
  • Погрузитесь в подготовку к певческим конвенциям/шоу с моим припевом из парикмахерской (бесстыдная пробка, но мне все равно).
  • Увлекитесь изучением технологий, чтобы удовлетворить собственное любопытство или помочь мне с будущими обязательствами клиентов.

Поэтому я подумал, что попытаюсь использовать последнюю причину как возможность написать что-нибудь классное, а также попытаться вести блог о своем прогрессе! Итак, давайте приступим к делу. Давайте строить…

ВНЕШНЯЯ СТРУКТУРА

Потому что, скажем прямо, их мало.

Учитывая, что уже существуют тысячи полностью зрелых фреймворков, которые позволяют создавать красивые, динамичные одностраничные приложения, и что они, как правило, имеют отличную поддержку сообщества, инструменты и удовлетворенность разработчиков; зачем строить еще один?

Проще говоря — потому что я хочу. Меня не устраивает таинственное колдовство, которое происходит за кулисами при рендеринге приложения React. Меня очень интересует, как наблюдаемость компонента данных может вызвать только частичный повторный рендеринг DOM. Я очень заинтересован в том, чтобы разработать высокопроизводительную среду веб-рендеринга с нуля и узнать много о TypeScript, виртуальных и теневых DOM и архитектуре веб-компонентов. Но прежде всего я просто хочу.

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

Итак, в течение следующих X дней, недель, месяцев, лет / до тех пор, пока мне не станет скучно; Я собираюсь строить.

Перво-наперво

Я чертовски большой канбан-энтузиаст, и, как и большинство моих друзей-инженеров, я не люблю ничего больше, чем перечислять всегда любимое дерьмо из моей жизни. Итак, обо всем по порядку, давайте займемся Trello:

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

Agile — это лекарство-воротник. Обсуждать!!

В любом случае, я отвлекся. Какие функции я должен построить? Ну, для начала есть несколько небольших технических задач, над которыми мне нужно поработать, чтобы я мог запустить свою ручку:

Прежде всего, я хочу настроить Jest (мой любимый фреймворк для тестирования!), чтобы он хорошо работал с TypeScript. Далее я хочу, чтобы Webpack транспилировал все, что я кодирую, в JavaScript. По моим оценкам, это займет всего пару часов, так что давайте начнем с этого прямо сейчас!

Настройка среды разработки

Вместо того, чтобы тратить уйму времени на описание того, как я пришел к этому состоянию, я создал суть, содержащую каждый из файлов конфигурации, которые я накатил для поддержки транспиляции TypeScript в собственный JavaScript, и параметры, позволяющие Jest понимать TypeScript во время выполнения:

.jest.config.js

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

пакет.json

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

tsconfig.json

Наличие файла tsconfig.json в каталоге указывает на то, что этот каталог является корнем проекта TypeScript. Это будет вызываться веб-пакетом под капотом и содержит несколько советов компилятора для улучшения нашего опыта разработки (в основном всего несколько импортов для поддержки ES16/17).

webpack.config.js

Наконец, этот файл конфигурации веб-пакета описывает, как происходит наша транспиляция, и каким будет результат сборки, где она будет жить и т. д. Важно отметить, что он собирается использовать плагин ts-loader для транспиляции. TypeScript в JavaScript. Имея все вышеперечисленное, мы можем приступить к написанию супер-простого теста на отказ!!

Доказательство!!

Слушай, я очень устал сейчас. Но это все замечательно — мы смогли построить простой ходячий скелетон, который правильно подключен, и мы можем начать писать несколько тестов для создания нашей функциональности!

Если вы хотите следить за этой серией сообщений в блоге, есть репозиторий, на который вы можете взглянуть здесь!

Супер.

Первоначально опубликовано на https://blog.thesheps.dev 22 июня 2019 г.