Не другое приложение TO-DO: часть 10

Получение ваших рук грязные и ноги влажные с открытыми рекомендациями веб-компонента … вроде.

Это кросс-пост от 26 до 26 лет, 2019 г. Середина Это воспользуется моим недавним решением использовать грамматику в моем письме (поэтому маленькие правки были сделаны здесь и там), спасибо, что снова смотрите, если вы видели это там 🙇🏽♂️, а если это ваше первое чтение, добро пожаловать!

Добро пожаловать в «Не другое приложение To-Do To Do Do], чрезмерно длительный обзор изготовления одного из самых маленьких приложений, каждый разработчик заканчивается надпись в какой-то момент или иной. Если вы здесь, чтобы узнать о конкретной технике для записи приложений или попросили свой путь от предыдущей установки, а затем вы, скорее всего, вы находитесь в нужном месте и должны читать! Если нет, это возможно, вы хотите к начать с самого начала так что вы тоже можете знать Все наши наши персонажи …

Если вы сделали это так далеко, зачем бросить курить сейчас?

Вы знаете, что сейчас на популярности? Функциональное программирование. Вы знаете, какой отличный способ доставить функции, чтобы использовать преимущества функциональных концепций программирования? Модули ES. Вы знаете, что отличный способ управлять логическими деревьями, не полагаясь на выключатель или Если/else заявления? Схема стратегий. Что вы получаете, когда вы смешиваете их все вместе? Многоразовое и масштабируемое управление данными. Или, по крайней мере, я, конечно, надеюсь, так (да, это еще один хороший, чтобы снять на комментарии) … Вот как я это сделал.

Повторное использование

На многоразовом конце спектра давайте начнем с функционального интерфейса, с помощью которого мы взаимодействуем с жизненным циклом нашего списка DOS (создавая его, добавляя к нему до DOS и завершив на него). Доступ к этому можно получить через Импорт {NewTodos, Addtodo, CompleteTodo} './to-do-manager'; Отказ Здесь мы получаем функциональные элементы управления для инициализации нового набора TO-DOS (т.е. возврата []), добавьте до-дел (т.е. возврата [... TODOS, NEWTODO] ) и удалить TODO (т.е. | Вернуться [… todos.filter (todo => todo.id)] . На каждом из них мы устанавливаем и поддерживаем личность нашего человека до DOS при создании новой идентичности для результирующегося списка TO-DOS, которые будут вызвать трубопровод Render в нашем Litelement На основании приложения. Кроме того, их экспорт позволяет им использовать и повторно использовать в нашем применении и тестах, одновременно подготовленные для того, чтобы быть внесенным внешней зависимостью, если в какой-то момент эта данные стали полезны для нескольких приложений. Если вы хотите использовать их в приложении To-Do, Вилка меня на Github Действительно

Масштаб

На масштабируемой стороне спектра мы рассмотрим остальную часть кода в [SRC/TO-DO-MANGER.JS] (https:///github.com/westbrook/to-do-app/blob/master/src/to-do-manager.js) что охватывает возможность доставлять уровень работы настроившихся предложения для пользователя через WorkLevelMessage (TODOS) экспорт. Хотя эти данные также структурированы для использования в приложении и возможную экстернализацию, что действительно хорошее в этом, так это то, как он структурирован для масштаба.

function workLevelMeter(todos) {
    const workLevelCounts = Object.keys(workLevelByTodoCount);
    const count = workLevelCounts
        .find(todoCount => todos.length <= todoCount);
    return typeof count !== 'undefined'
        ? workLevelByTodoCount[count]
        : workLevelCounts.length;
}

export function workLevelMessage(todos) {
    return workLevelMessages[workLevelMeter(todos)];
}

Обратите внимание, насколько вместо этого, чем пытаясь структурировать расширенный Если/тогда дерево или Переключатель Заявление о наброске, которое сообщение для возврата от [WorklevelMessage] (https://github.com/westbrook/to-do-app/blob/master/src/to-do-manager.js#l52) [Worklevelmeter] (https://github.com/westbroook/to-do-app/blob/master/src/to-do-manager.js#l44) Способ полагается на серию методов объекта и массива (благодаря нашему предыдущему опыту предыдущего предыдущего переживания) разрешить соответствующее сообщение. Это означает, что независимо от того, следует ли применять текущие пять уровней рабочих нагрузок и связанных с ними сообщениями, к одному или на пятьдесят уровней, это же логика будет применяться. Нам не нужно идти по корректированию того, что может легко стать неловковым логическим деревом, когда вы решите сделать дополнения к доставляемым сообщениям или изменениям на уровни, при которых их доставлено, мы просто добавляем связанную информацию в структуру данных:

export const workLevelMessages = {
  0: 'Looks like you don\'t have anything to do right now. Take a break!',
  1: 'Looks like you\'re almost done. Keep it up!',
  2: 'Still a little more work to do. Don\'t loose focus!',
  3: 'It\'s a tough job, but somebody\'s got to do it.',
  4: 'This may look like a lot, but I know you can do it!',
  5: 'Maybe it\'s time to take a vacation? I won\'t judge.',
  /* New message */ 6: 'There\'s a new message in town!',
};

export const workLevelByTodoCount = {
  0: 0,
  3: 1,
  6: 2,
  9: 3,
  14: 4,
  /* New work level */ 50: 5,
};

Приведенные выше добавления будут немедленно доступны для использования с 50 или более DOS, никаких логических изменений не требуется. И, даже лучше, с дополнительным экспортом [WorklevelMessages] (рабочие этапы) и [WorklevelbyTodocount] (https://github.com/westbrook/to-do-app/blob/master/src/to-do-manager.js#l36) Эти дополнения также сразу добавляются в процесс тестирования.

Если вы уверены, что я ошибаюсь, хочу отпраздновать, как правильно я, или научить меня способам, я могу быть даже безумным/проницательным/прогрессивным/правым/et al. О чем-то, что вы прочитали это далеко, я надеюсь, что вы знаете рефрен … Комментарии, которые вы принимаете, и равны комментариям, которые вы делаете. Или, по крайней мере, я слышал (что-то вроде) что-то где-то.

Как отмечалось выше, код, который поделился на протяжении всего нашего разговора на сегодняшний день, не всегда был то, что завершилось как окончательное в моем заявлении. Если вы не получили шанс посмотреть, что, не стесняйтесь читать всю кодовую базу на GitHub.

WestBrook/To-Do-App

Открытый WC работает, чтобы сделать заявку

Appon-wc стартер приложение

Быстрый старт

Для начала:

git clone https://github.com/open-wc/open-wc-starter-app.git
cd open-wc-starter-app

npm install
npm start

Живая демонстрация на NetLify Отказ

Скрипты

Начать Запускает ваше приложение с автоматической перезагрузкой для разработки, он работает только на браузерах, которые поддерживают модули для более быстрой сборки
Начало: ES5 Запускает ваше приложение для разработки, он работает только на браузерах, которые не поддерживают модули (IE11)
построить Создает ваше приложение для производства и выводит его в папке/dist
Начать: построить Запускает вашестроенное приложение, используя простое веб-сервер, чтобы доказать, что он работает без магии 😃.
строить: Статистика Создает отчет о анализе вашего пакета приложения для потребления WebPack Visualizer и Analyzer
Тест Запускает ваш тестовый люкс
Lint Запускает Linter для вашего проекта

Вы также можете увидеть Текущий Окончательное приложение на нетлифицируйте. Он привязан к репо GitHub выше, поэтому по текущему … Я действительно имею в виду это. Он вкладывает все идеи, которые мы обсуждали в действии, живут в Интернете, и я надеюсь, что разговоры, которые мы поделились о развитии, оказались полезными для вас.

Чтобы вернуть нас к тому, где мы начали, вот небольшой преспадающий концепции, которые я хотел найти свой путь в мое приложение MILLE TO-DOAT:

Компонентная архитектура кода
Пользовательские API на основе свойств
государственное управление государством
Стиль обмена
Установка тестирования
интернет-интерфейс

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

Если бы я еще не сказал это, или в некоторых случаях, если вы еще не слышали его, я не сажусь посадочной доли в земле, чтобы сказать, что кто-либо из них не лучший в своем классе, и даже меньше Итак, я пытаюсь сказать, что любой из них будет применяться к проектам любого размера или Голотип Отказ Что я делаю, надеюсь, что может быть, как еще один Набор интересных голосов, которые я следую в поле Темы накрыли до сих пор, а не радость, а интересный разговор между вами и другими я, вы и ваша команда, вы и мной, или, возможно, даже какая-то небольшая часть более крупного сообщества JavaScript. Чем больше мы объединяемся, чтобы поговорить о наших техниках и наращивать краевые чехлы и предметы, которые делают их, тем счастливее мы будем. (О, смотри, может быть, я имел в виду для этого, чтобы зажечь радость …) Итак, возьмите обсуждение на комментарии ниже, @ Сообщения на Twitter , ваша любимая слабина или этот Работали с веб-платформой, веб-компонентами, литером и открытыми веб-компонентами, все это тенденция (хотя бы большую часть времени), и увидимся там!

Плавник.

Как проголосовало множество людей с мнениями по таким темам, которые оба вынуждены видеть мои твиты в их твиттере, и имели бесплатную минуту на прошлой неделе, на прошлой неделе 9000+ словная статья нет, нет.

Итак, это с самого глубокого почтения для вас, мой дорогой читатель, который я нарушил предстоящие разговоры в омновые десять разделов. Поздравляем, вы приближаетесь к концу первого! Если вы наслаждались до сих пор до сих пор, или один из тех людей, которые дают новую Sitcom, пару эпизодов, чтобы ударить его шаг, вот список других для вас, чтобы поставить на вашу очередь Netflix:

Не другое приложение To-do
Начиная
Тест рано, Тестировать часто
Измерьте дважды, Lint Однажды (Я, для одного, приветствую наши тельцы робота. Может быть, они будут делать писать каждый раз, когда у меня есть идея доставить сумасшедшую длинную серию таких статей, как это …)
Сделать его компонентом
Сделать это многоразовая часть
Ваш компонент действительно нужно знать это?
Отделить вещи рано, часто и Только по мере необходимости
Некоторые абстракции не (просто) Для вашего приложения
Многоразовое и масштабируемое управление данными/И в конце концов … (Вы здесь)
Смотрите приложение в действии

Особая благодарность команде на Открытые веб-компоненты Для большого набора инструментов и рекомендаций они собирались вместе, чтобы поддержать постоянно растущее сообщество инженеров и компаний, приносящих высококачественные веб-компоненты в отрасль. Посетите их на Github И создать проблему, отправьте PR или FORK REPO, чтобы войти в действие!

Оригинал: “https://dev.to/westbrook/not-another-to-do-app-part-10-mp6”