preactCalculator
1.0.0
Я построил это приложение в рамках задачи по кодированию для поставки разработчиков Frontend с стартапом в центре Остина. Это приложение представляет собой простой калькулятор с использованием Preact, CSS-Grid и Flexbox.
Быстрый старт
концепции дизайна
технология используется
Процесс тестирования и сборки
Чтобы проверить или просмотреть это приложение на вашей локальной машине, клонируйте этот репозиторий. Перейдите к своему недавно клонированному репозитории и запустите следующие команды:
yarnИли альтернативно для пользователя NPM:
npm installЗатем беги:
yarn startИли альтернативно для пользователей NPM:
npm startПерейдите к http: // localhost: 8080/и получайте удовольствие!
Для этой задачи не было предоставлено характеристики дизайна. Мне было дано бесплатное правление, как мне приятно. Имея в виду работу, на которую я подал заявление, я решил обслуживать свой продукт клиенту. Таким образом, цветовая схема, палитра и даже измерение намеренно похожи на свою домашнюю страницу. (Идея заключается в том, что клиент уже продемонстрировал предпочтение этой схеме дизайна, поскольку он выбрал тот же дизайн для своего производственного веб -сайта. Он также отображает внимание к деталям.)
Вот фотографии для сравнения.
Оригинальный сайт 
Приложение калькулятора 
Я использовал этот вызов кодирования как возможность поиграть с новой нативной сетью CSS (то, что я хотел сделать какое -то время). CSS GRID удивительна, но, видимо, почти невозможно пропустить свойства в области сетки в качестве реквизита.
Я также использовал Flexbox, чтобы сосредоточиться на контенте и элементах. Я большой поклонник Flexbox и решительно предпочитаю его по сравнению с другими сторонними решениями сетки или использованием поплавок для позиционирования элементов.
Это приложение также, вероятно, первое, когда у меня был оправданный вариант использования для функции Calc ()! Я использую CALC (), чтобы установить высоту основной страницы, равную 100В.
На протяжении всего процесса проектирования я пытался придерживаться некоторых основных принципов дизайна пользовательского интерфейса, как указано здесь https://medium.com/@erikdkennedy/7-rules-for-creating-gorge-ui-part-1-559d4e805cda
Это приложение использует:
CSS Native Grid
Flexbox
Предварительный
Preact-Router
Preact Cli
Мокко
Чай
Эслинт
Нативная сетка CSS довольно впечатляет, хотя поддержка браузеров может отсутствовать в более старых браузерах. По -видимому, невероятно сложно передавать стили CSS в качестве реквизита другим вложенным компонентам. Особенно, когда каждому дочернему компоненту требуется уникальный атрибут позиции для работы с CSS Native Grid. Оценка реквизита типа строки в ссылку на стиль CSS Class не выполняется. Даже при использовании примеров прямо из предварительной документации. CSS-Grid не принимает строки в качестве аргументов в области сетки. Моя программа не может различить ссылку на CSS VAR и ссылку на JS.
Flexbox потрясающий и имеет лучшую поддержку браузера, чем CSS Native Grid. Больше не нужно говорить об этом.
Preact - интересная технология. Мне нравится, что он легкий, мне также нравится его быстрая функциональность и что это почти идеально подходит для React, но с лицензией MIT. Я чувствую, что некоторые из инструментов для сборки не хватает по сравнению с экосистемой React.
Preact-Router в этом приложении является лишь минималистичной настройкой. Я не справился с этим достаточно, чтобы подробно поговорить об этом.
Настройка Preact CLI не выходит из коробки как из -за отсутствия их тестовой команды, так и плохо настроенной настройки Eslint (или кода, написанного ими, который нарушает их собственные правила проверки). Настройка тестирования отсутствует, и мне пришлось настроить свой собственный (подробнее об этом позже). Для любой конфигурации системы сборки использование кармы почти обязательно по сравнению с тем, что я собираю. Их команда сборки также терпит неудачу.
Я использую Mocha и Chai для настройки теста. Это классическая проверка времени.
Эслинт был включен из коробки (сбой, будет более подробно рассмотрен более подробно).
Вся логика приложения, содержащаяся в компоненте калькулятора. Все остальные являются чистыми/функциональными компонентами. Если бы мне нужно было создать более сложное приложение, MOBX или Redux были бы в порядке.
Mobx или Redux также помог бы с тестированием функций. Первоначально я пытался отделить логику от компонента, но трудно сохранить контекст «этого» в отношении логики, которая изменяет состояние. Следовательно, я решил напрямую написать логику в компоненте. Методы импорта, которые требуют осведомленности о состоянии из отдельного файла без контекста состояния излишне усложняют вещи (в любом случае это излишнее, поскольку у нас есть только несколько методов в этом приложении).
Что касается состояния, JavaScript eval () не принимает нетронутый операнд. Это будет хорошо справляться с целыми числами, но не поднимает операнд и так поможет вам, что ваше приложение обречено! Я обрабатываю все данные о критических расчетах в состоянии как строку, чтобы убедиться, что этого не произойдет.
В случайном примечании это приложение работает с Localhost с ухудшением, набрав более высокие оценки по оценке Lightbox во всех 4 категориях PWA, производительности, доступности и лучших практик по сравнению с текущим веб -сайтом для клиентов.
Я пытался сохранить дополнительные зависимости как минимум во время разработки приложений.
Испытательный набор можно запустить с помощью yarn test или npm test . Test Suite предполагает глобальную установку MOCHA на вашу машину.
Сама библиотека Preact имеет открытые проблемы, связанные с тестированием = preactjs/preact#658 Их обходной путь-использовать малоизвестную библиотеку под названием https://github.com/developit/preact-jsx-chai/, к сожалению, эта библиотека, похоже, не сработала для меня.
Конфигурация тестирования - это боль. Конфигурации Вавилона скрыты Preact-Cil. Не может получить доступ к конфигурации. Получение «неожиданного импорта» токена, даже когда я помещаю тестовый файл в тот же директор, что и сам компонент ». Тесты должны будут ждать. Сделано снова, мне придется реализовать еще одну альтернативу, чтобы разрешить отдельное тестирование функций.
Что касается тестирования, вот множество вопросов, связанных с ней:
Preactjs/Preact-Compat#233
Preactjs/Preact#146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47 (к сожалению, отсутствие интуитивной конфигурации и настройки Webpack все еще приводит к отказу с этим методом)
Preactjs/Preact#658 (Open Specing, сложная настройка теста Preact является известной проблемой без текущего решения.)
Preactjs/Preact#560 (затрагивает то, как Preact является самоуверенными и требует кармы в качестве еще одной зависимости.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (это было то, что я пытался сначала. Не повезло с этим.)
https://preactjs.com/guide/unit-testing-with-enzyme (их документация буквально один раздел. и не предлагает альтернативы их точной настройке кармы.)
И на личинге Eslint провалится без ящика. Я отступаю, используя 4 пространства. Плагин Eslint Preact по умолчанию устанавливается на вкладки, что вызывает ошибки. Несмотря на это, настройка тестирования работает и существует для подключения и игры любой настройки конфигурации Eslint. Я смог бы мгновенно повторно завоевать эту настройку, чтобы соответствовать любым конкретным требованиям клиента.
