preactCalculator
1.0.0
Ich habe diese App als Teil einer Codierungsherausforderung für eine Frontend -Entwicklerfunktion mit einem Startup in der Innenstadt von Austin erstellt. Diese App ist ein einfacher Taschenrechner mit Preact, CSS-Grid und Flexbox.
Schneller Start
Designkonzepte
Technologie verwendet
Test- und Erstellungsprozess
Klonen Sie dieses Repository, um diese App auf Ihrem lokalen Computer zu testen oder anzusehen. Navigieren Sie zu Ihrem neu geklonten Repository und führen Sie die folgenden Befehle aus:
yarnOder alternativ für den NPM -Benutzer:
npm installDann rennen:
yarn startOder alternativ für NPM -Benutzer:
npm startNavigieren Sie zu http: // localhost: 8080/und viel Spaß!
Für diese Herausforderung wurden keine Konstruktionsspezifikationen bereitgestellt. Ich bekam die freie Regierungszeit, um zu entwerfen, wie es mir gefiel. Beachten Sie den Job, für den ich mich beworben habe, und entschied mich, mein Produkt an den Kunden zu versorgen. Daher ähneln das Farbschema, die Palette und sogar das Favicon der Homepage absichtlich. (Die Idee ist, dass der Kunde bereits eine Präferenz für dieses Designschema angezeigt hat, da er genau das gleiche Design für seine Produktionswebsite ausgewählt hat. Es zeigt auch die Liebe zum Detail.)
Hier sind Fotos zum Vergleich.
Originalwebsite 
Rechner App 
Ich habe diese Coding -Herausforderung als Gelegenheit verwendet, mit dem neuen nativen CSS -Netz (etwas zu spielen (etwas, das ich seit einiger Zeit tun soll). CSS Grid ist erstaunlich, aber anscheinend ist es nahezu unmöglich, als Requisiten Grid-Bereiche zu bestehen.
Ich habe auch Flexbox verwendet, um die Inhalte und Elemente zu zentrieren. Ich bin ein großer Fan von Flexbox und bevorzuge es gegenüber anderen Drittnetzlösungen oder Verwendung von Floats für die Elementpositionierung.
Diese App ist wahrscheinlich auch das erste Mal, dass ich einen gerechtfertigten Anwendungsfall für die Funktion Calc () hatte! Ich verwende Calc (), um die Hauptseite von 100 VH abzüglich der Höhe des Kopfbalkens und eines unteren Versatzes einzustellen, um sicherzustellen, dass sich die Elemente nicht überlappen.
Während des gesamten Designprozesses habe ich versucht, einige grundlegende UI-Designprinzipien einzuhalten, wie sie hier beschrieben sind.
Diese App verwendet:
CSS Native Grid
Flexbox
Vorwirkung
Preact-Router
Preact Cli
Mokka
Chai
Eslint
Das CSS -native Netz ist ziemlich beeindruckend, obwohl die Browserunterstützung in älteren Browsern fehlt. Es ist anscheinend unglaublich schwierig, CSS -Stile als Requisiten an andere verschachtelte Komponenten weiterzugeben. Insbesondere wenn jede untergeordnete Komponente ein einzigartiges Positionsattribut benötigt, um mit CSS Native Grid zu arbeiten. Die Bewertung von String -Typ -Requisiten in eine Referenz für das CSS -Klassenstyling schlägt fehl. Auch wenn Beispiele direkt aus der Preact -Dokumentation verwendet werden. CSS-Grid akzeptiert Strings nicht als Argumente der Gitterfläche. Mein Programm kann zwischen einer CSS VAR -Referenz und einer JS -Referenz nicht erkennen.
Flexbox ist fantastisch und hat eine bessere Browser -Unterstützung als CSS -natives Netz. Es muss nicht mehr darüber gesagt werden.
Preact ist eine interessante Technologie. Ich mag es, dass es leicht ist, ich mag auch seine schnelle Funktionalität und dass es ein nahezu perfektes Übereinstimmung mit React, aber mit einer MIT -Lizenz. Ich habe das Gefühl, dass einige der Build -Tools im Vergleich zum React -Ökosystem fehlen.
Preact-Router in dieser App ist nur ein minimalistisches Setup. Ich habe mich nicht genug damit befasst, ausführlich darüber zu sprechen.
Das Setup von Preact Cli scheitert sowohl wegen des Fehlens eines Testbefehls als auch eines schlecht konfigurierten Eslint -Setups (oder von ihnen geschriebenen Code, der gegen ihre eigenen Validierungsregeln verstoßen). Das Testen des Setups fehlt und ich musste meine eigenen konfigurieren (dazu später mehr). Für jede Build -Systemkonfiguration ist die Verwendung von Karma in Bezug auf das, was ich sammelte, fast obligatorisch. Ihr Build -Befehl schlägt ebenfalls fehl.
Ich benutze Mokka und Chai für mein Testsuite -Setup. Es ist ein klassischer Zeit getestet.
Eslint wurde aus der Schachtel aufgenommen (fehlgeschlagen, wird später ausführlicher behandelt).
Alle Anwendungslogik in der Taschenrechnerkomponente. Alle anderen sind reine/funktionale Komponenten. Hätte ich eine komplexere App erstellen musste, wäre Mobx oder Redux in Ordnung gewesen.
MOBX oder Redux hätten auch bei Funktionstests geholfen. Ich habe zunächst versucht, die Logik der Komponente zu entkoppeln, aber es ist schwierig, den Kontext von 'Dies' in Bezug auf die Logik zu bewahren, die den Zustand verändert. Daher habe ich mich entschieden, die Logik direkt in die Komponente zu schreiben. Importieren von Methoden, die ein staatliches Bewusstsein aus einer separaten Datei erfordern, ohne einen Kontext des Staates unnötig erschwert (es ist sowieso übertrieben, da wir nur wenige Methoden in dieser Anwendung haben).
Zum Thema Zustand akzeptiert der JavaScript Eval () keinen nicht-stringenden Operanden. Es wird Zahlen gut umgehen, aber es ist ein Operand, und so hilf Ihnen Gott, dass Ihre Bewerbung zum Scheitern verurteilt ist! Ich behandle alle berechnungskritischen Daten im Zustand als Zeichenfolge, um sicherzustellen, dass dies nicht geschieht.
Nach zufälligem Hinweis zeichnet diese App von Localhost in allen 4 Kategorien von PWA, Leistung, Zugänglichkeit und Best Practices im Vergleich zur aktuellen Produktionswebsite von Lightbox in allen 4 Kategorien von PWA, Leistung, Zugänglichkeit und Best Practices höher.
Ich habe versucht, zusätzliche Abhängigkeiten während der Anwendungsentwicklung auf ein Minimum zu halten.
Die Testsuite kann mit yarn test oder npm test ausgeführt werden. Die Testsuite setzt eine globale Mokka -Installation auf Ihrem Computer aus.
Die Preact-Bibliothek selbst hat offene Probleme im Zusammenhang mit testing = preactjs/preact#658 Mit ihrer Problemumgehung besteht die Verwendung einer wenig bekannten Bibliothek namens https://github.com/developit/preact-jsx-chai/ Leider, dass die Bibliothek für mich nicht zu funktionieren scheint.
Die Testkonfiguration ist ein Schmerz. Babel-Konfigurationen werden durch Preact-Cil versteckt. Kann nicht auf config zugreifen. Erhalten Sie "unerwarteter Token" importieren ", auch wenn ich die Testdatei in derselben Dire wie die Komponente selbst platziere." Tests müssen warten. Ich müsste noch einmal eine andere Alternative implementieren, um getrennte Funktionstests zu ermöglichen.
Zum Thema Tests finden Sie hier eine Menge Themen, die sich darauf beziehen:
Preactjs/Preact-Compat#233
Preactjs/Preact#146
https://gist.github.com/robertknight/88e9d10CFF9269c55d453e5fb8364f47 (leider führt der Mangel an intuitiver Webpackkonfiguration und -aufbau immer noch zu einem Fehler mit dieser Methode)
Preactjs/Preact#658 (Open Problem, schwieriger Preact -Test -Setup ist ein bekanntes Problem ohne aktuelle Lösung.)
Preactjs/Preact#560 (berührt, wie Preact der Meinung ist und Karma als eine andere Abhängigkeit benötigt.)
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (Dies war das, was ich zuerst versuchte. Außerdem kein Glück.)
https://preactjs.com/guide/unit-testing-with-enzym (ihre Dokumentation ist buchstäblich ein Abschnitt. Und bietet keine Alternative zu ihrem genauen Karma-Setup.)
Und beim Lining schlägt der Eslint nicht aus dem Feld. Ich nutze mit 4 Leerzeichen ein. Das Standard -Plugin von Eslint Preact wird auf Registerkarten eingestellt, was zu Fehlern geworfen wird. Unabhängig davon wird das Test-Setup ausgeführt und ist vorhanden, um ein ESLINT-Konfigurations-Setup zu planen. Ich könnte dieses Setup sofort neu konfigurieren, um alle kundenspezifischen Anforderungen zu entsprechen.
