preactCalculator
1.0.0
オースティンのダウンタウンでスタートアップを使用して、フロントエンド開発者のポジションのコーディングチャレンジの一環としてこのアプリを作成しました。このアプリは、Preact、CSS-Grid、およびFlexBoxを使用したシンプルな計算機です。
クイックスタート
デザインの概念
使用される技術
テストと構築プロセス
ローカルマシンでこのアプリをテストまたは表示するには、このリポジトリをクローン化します。新しくクローン化されたリポジトリに移動し、次のコマンドを実行します。
yarnまたは、NPMユーザーの場合：
npm installその後、実行：
yarn startまたは、NPMユーザーの場合：
npm starthttp：// localhost：8080/に移動し、楽しんでください！
この課題には設計仕様は提供されていません。私は喜んでデザインするために自由な統治を与えられました。私が応募していた仕事を念頭に置いて、私は自分の製品をクライアントに応えることを選択しました。そのため、配色、パレット、さらにはファビコンでさえ、意図的にホームページに似ています。 （クライアントは、制作Webサイトでまったく同じデザインを選択したため、クライアントがこのデザインスキームの好みを既に表示しているという考えです。また、細部に注意を示しています。）
これが比較のための写真です。
元のウェブサイト
電卓アプリ
私はこのコーディングチャレンジを、新しいネイティブCSSグリッド（しばらくの間やることを意味していたこと）で遊ぶ機会として使用しました。 CSSグリッドは驚くべきものですが、どうやらグリッドエリアのプロパティを小道具として渡すことはほぼ不可能です。
また、FlexBoxを使用してコンテンツと要素を中央に配置しました。私はFlexBoxの大ファンであり、他のサードパーティのグリッドソリューションよりも強く好みます。
このアプリは、Calc（）機能に正当なユースケースを持っていたのはおそらく初めてです！ calc（）を使用して、メインページの高さを100VHに引っ張ってヘッダーバーの高さとボトムオフセットを設定して、要素が重複しないようにしています。
設計プロセスを通して、ここで概説しているように、いくつかの基本的なUI設計原則を遵守しようとしましたhttps://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
このアプリは次のとおりです。
CSSネイティブグリッド
FlexBox
プアクト
事前ルーター
PREACT CLI
モカ
チャイ
eslint
CSSネイティブグリッドは非常に印象的ですが、ブラウザのサポートは古いブラウザーでは不足している可能性があります。他のネストされたコンポーネントに小道具としてCSSスタイルを渡すことは明らかに非常に困難です。特に、各子コンポーネントがCSSネイティブグリッドを使用するために一意の位置属性を必要とする場合。文字列タイプのプロップをCSSクラスのスタイリングの参照に評価します。失敗します。事前のドキュメントからまっすぐに例を使用する場合でも。 CSS-Gridは、グリッドエリアの引数として文字列を受け入れません。私のプログラムは、CSS varリファレンスとJSリファレンスの間で識別できません。
FlexBoxは驚くべきものであり、CSSネイティブグリッドよりもブラウザのサポートが優れています。それについてこれ以上言われる必要はありません。
PREACTは興味深いテクノロジーです。私はそれが軽量であることが好きで、その速い機能も好きで、MITライセンスを使用して、Reactにほぼ完璧にマッチしています。私は、Reactエコシステムと比較すると、ビルドツールのいくつかが不足していると感じています。
このアプリのPREACTルーターは、最小限のセットアップです。私はそれについて深く話すのに十分なことを扱っていません。
PREACT CLIのセットアップは、テストコマンドの欠如と、設定されていないESLINTセットアップ（または独自の検証ルールに違反したコード）の両方で箱から出して失敗します。テストのセットアップが不足しているため、自分で構成する必要がありました（後で詳しく説明します）。任意のビルドシステム構成の場合、カルマの使用は、私が集めたものからほぼ必須です。彼らのビルドコマンドも失敗します。
テストスイートのセットアップには、MochaとChaiを使用しています。テストされたクラシックです。
Eslintは箱から出して含まれていました（失敗し、後で詳しく説明します）。
電卓コンポーネントに含まれるすべてのアプリケーションロジック。他のすべては純粋/機能的なコンポーネントです。より複雑なアプリを構築する必要があった場合、MobxまたはReduxは整理されていたでしょう。
MobxまたはReduxも機能テストに役立ちます。私は最初、コンポーネントからロジックを切り離そうとしましたが、状態を変更するロジックに関して「この」のコンテキストを保持することは困難です。したがって、コンポーネントにロジックを直接記述することを選択しました。州のコンテキストなしで別のファイルからの状態認識を必要とする方法をインポートすることは、不必要に物事を複雑にします（とにかく、このアプリケーションにはいくつかの方法しかないので、それはやり過ぎです）。
状態のトピックでは、JavaScript Eval（）は非弦オペランドを受け入れません。それは整数をうまく処理しますが、オペランドの引用を解除するので、あなたのアプリケーションが運命づけられるのを助けてください！私は、これが起こらないことを確認するために、州内のすべての計算批判データを文字列として処理しています。
ランダムな注意点として、このアプリは、Clients Current Production Webサイトと比較した場合、PWA、パフォーマンス、アクセシビリティ、およびベストプラクティスの4つのカテゴリすべてで、LocalHostから実行されます。
アプリケーション開発中に追加の依存関係を最小限に抑えようとしました。
テストスイートはyarn testまたはnpm testで実行できます。テストスイートは、マシンにグローバルなMochaインストールを想定しています。
事前には、テストに関連するオープンな問題があります= PREACTJS/PREACT＃658の回避策は、https://github.com/developit/preact-jsx-chai/という少し知られているライブラリを使用することです。
テスト構成は痛みです。 Babel構成は、PREACT-CILによって隠されます。構成にアクセスできません。テストファイルをコンポーネント自体と同じ監督に配置した場合でも、「予期しないトークン「インポート」」を取得します。テストは待つ必要があります。もう一度完了して、分離された機能テストを可能にするために別の代替案を実装する必要があります。
テストのトピックについては、それに関連する多くの問題があります。
PREACTJS/PREACT-COPT＃233
PREACTJS/PREACT＃146
https://gist.github.com/robertknight/88e9d10cff9269c55d453e5fb8364f47（悲しいことに、直感的なWebpack構成とセットアップの欠如は、この方法でまだ失敗につながります）
PREACTJS/PREACT＃658（開かれた問題、困難なプアクトテストのセットアップは、現在の解決策がない既知の問題です。）
PREACTJS/PREACT＃560（プアクトがどのように意見を述べられているかに取り組み、カルマが別の依存関係として必要です。）
https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf（これは私が最初に試みたものでした。
https://preactjs.com/guide/unit-testing-with-enzyme（それらのドキュメントは文字通り1つのセクションであり、正確なカルマのセットアップに代わるものを提供しません。）
糸くずでは、ESLINTはすぐに失敗します。 4つのスペースを使用してインデントします。 ESLINT PREACTデフォルトプラグインは、エラーをスローするタブに設定されています。とにかく、テストのセットアップは実行され、ESLINT構成のセットアップをプラグアンドプレイするために設置されています。クライアント固有の要件に一致するように、このセットアップを即座に再構成することができます。
