preactCalculator
1.0.0
我為前端開發人員郵政局的編碼挑戰的一部分構建了該應用，並在奧斯汀市中心開設了一家初創公司。該應用程序是一個簡單的計算器，使用preact，CSS-GRID和FLEXBOX。
快速開始
設計概念
使用的技術
測試和構建過程
要在本地計算機上測試或查看此應用，請克隆此存儲庫。導航到新的克隆存儲庫並運行以下命令：
yarn或者對於NPM用戶：
npm install然後運行：
yarn start或者對於NPM用戶：
npm start導航到http：// localhost：8080/，玩得開心！
沒有為此挑戰提供設計規格。我可以隨時自由地設計設計。請記住我要申請的工作，我選擇為客戶提供產品。因此，配色方案，調色板甚至Favicon有意與其首頁相似。 （這個想法是客戶已經對該設計方案顯示了偏好，因為他們為其生產網站選擇了完全相同的設計。它也顯示了對細節的關注。）
這是用於比較的照片。
原始網站
計算器應用
我使用這種編碼挑戰作為與新的本機CSS網格玩耍的機會（我有意義的一段時間）。 CSS網格是驚人的，但顯然，將網格區域的特性作為道具幾乎是不可能的。
我還使用Flexbox將內容和元素集中。我是Flexbox的忠實擁護者，並且強烈希望它比其他第三方網格解決方案或使用浮子進行元素定位。
這個應用也可能是我第一次為Calc（）功能提供了合理的用例！我正在使用calc（）將主頁高度設置為等於100VH的主頁高度減去標頭欄的高度和底部偏移量，以確保元素不會重疊。
在整個設計過程中，我試圖遵守此處概述的一些基本UI設計原則
該應用程序使用：
CSS本地網格
Flexbox
預先反應
預言
預先CLI
摩卡
柴
eslint
CSS本機網格令人印象深刻，儘管瀏覽器的支持可能缺乏較舊的瀏覽器。顯然，將CSS樣式作為道具將其傳遞給其他嵌套組件非常困難。尤其是當每個孩子組件都需要一個獨特的位置屬性以與CSS本機網格一起使用時。將字符串類型的道具評估為CSS類樣式的參考失敗。即使使用示例直接出現在提前文檔中。 CSS-Grid不接受字符串作為網格區域論點。我的程序無法辨別CSS VAR參考和JS參考。
Flexbox令人驚嘆，並且比CSS本機網格更好。無需再說。
預言是一項有趣的技術。我喜歡它的輕量級，我也喜歡它的快速功能，它幾乎是React，但具有MIT許可證的完美匹配。與React生態系統相比，我確實覺得缺少一些構建工具。
此應用程序中的preact-router只是一個簡約的設置。我還沒有足夠的處理來深入談論它。
PREACT CLI的設置在缺乏測試命令和不配置的ESLINT設置（或違反其驗證規則的代碼）上均出現了。缺乏測試設置，我必須配置自己的（稍後再詳細介紹）。對於任何構建系統配置，業力的使用僅是我所收集的。他們的構建命令也失敗。
我使用摩卡咖啡和柴進行測試套件。這是經典的時間。
開箱即用的ESLINT（失敗，稍後將詳細介紹）。
計算器組件中包含的所有應用程序邏輯。所有其他都是純/功能組件。如果我需要構建一個更複雜的應用程序，那麼MOBX或REDUX就會井井有條。
MOBX或REDUX也將有助於功能測試。我最初試圖將邏輯與組件分解，但是對於修改狀態的邏輯，很難保留“此”的上下文。因此，我選擇直接在組件中編寫邏輯。導入需要從單獨的文件中進行狀態意識的方法，而沒有狀態不必要的情況使事物變得複雜（無論如何，這是過度的，因為我們在此應用程序中只有幾種方法）。
在國家主題上，JavaScript eval（）將不接受非弦樂操作數。它會很好地處理整數，但是請拿起操作數，因此請幫助您上帝注定要應用！我正在處理該州的所有關鍵數據作為字符串，以確保不會發生這種情況。
隨機注意到，與客戶當前生產網站相比，該應用程序從Localhost的Localhost Crumelly在Lightbox評估中得分更高，在PWA，性能，可訪問性和最佳實踐中，該應用程序在Lightbox評估中得分更高。
在應用程序開發過程中，我試圖將額外的依賴項保持在最低水平。
測試套件可以通過yarn test或npm test運行。該測試套件假設您的機器上安裝了全局摩卡咖啡。
提前庫本身俱有與測試有關的開放問題= preactjs/preact＃658他們的解決方法是使用一個鮮為人知的庫，稱為https://github.com/developit/preakect-jsx-chai/不幸，不幸的是，圖書館似乎對我不起作用。
測試配置很痛苦。 Babel Configs被預先介紹所隱藏。無法訪問配置。即使我將測試文件與組件本身相同的DIR，也會獲得“意外的令牌”導入。 ”測試將不得不等待。再次完成，我必須實現另一種替代方案才能進行分離的功能測試。
關於測試的主題，這裡有很多與之相關的問題：
preactjs/preeact-compat＃233
preACTJS/realeact＃146
https://gist.github.com/robertknight/88e9d10cff9269c555553e53e5fb8364f47（可悲的是，缺乏直覺的WebPack配置和設置仍然會導致使用這種方法失敗）
preACTJS/preeact＃658（開放問題，難以提前測試設置是一個已知問題，沒有當前解決方案。）
preactjs/preactct＃560（涉及預先反應的方式，並要求業力作為另一種依賴性。）
https://gist.github.com/developit/9b0bbb57b3e001de67814814c7f4f4de9cbfbf（這是我首先嘗試的。也不運氣。）
https://preactjs.com/guide/unit-testing-with-enzyme（它們的文檔實際上是一個部分。沒有提供其確切業力設置的替代方案。）
在覆蓋上，ESLINT失敗了。我縮進了4個空間。 ESLINT預先反應默認插件設置為標籤，該插件導致錯誤被丟棄。無論如何，測試設置都可以運行，並且可以插入任何ESLINT配置設置。我可以立即重新配置此設置以匹配任何特定於客戶的要求。
