หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

เครื่องคิดเลขล่วงหน้า

ฉันสร้างแอพนี้เป็นส่วนหนึ่งของความท้าทายในการเข้ารหัสสำหรับตำแหน่งนักพัฒนาส่วนหน้าด้วยการเริ่มต้นในเมืองออสติน แอพนี้เป็นเครื่องคิดเลขง่าย ๆ โดยใช้ Preact, CSS-GRID และ FlexBox

สารบัญ

  • เริ่มต้นอย่างรวดเร็ว

  • แนวคิดการออกแบบ

  • เทคโนโลยีที่ใช้

  • การทดสอบและสร้างกระบวนการ

การติดตั้ง

ในการทดสอบหรือดูแอพนี้บนเครื่องในพื้นที่ของคุณโคลนที่เก็บนี้ นำทางไปยังที่เก็บที่ถูกโคลนใหม่ของคุณและเรียกใช้คำสั่งต่อไปนี้:

  • yarn

หรืออีกทางเลือกหนึ่งสำหรับผู้ใช้ NPM:

  • npm install

จากนั้นเรียกใช้:

  • yarn start

หรือหรือสำหรับผู้ใช้ NPM:

  • npm start

ไปที่ http: // localhost: 8080/และสนุก!

  • หากด้วยเหตุผลบางอย่างมันทำงานไม่ถูกต้องคุณอาจต้องติดตั้ง preact-cli ทั่วโลก

ออกแบบ

ไม่มีข้อมูลจำเพาะการออกแบบสำหรับความท้าทายนี้ ฉันได้รับการออกแบบฟรีตามที่ฉันพอใจ โปรดทราบว่างานที่ฉันสมัครฉันเลือกที่จะรองรับผลิตภัณฑ์ของฉันกับลูกค้า เช่นนี้โทนสีจานสีและแม้แต่ Favicon จึงมีความคล้ายคลึงกับหน้าแรกโดยเจตนา (ความคิดที่ว่าลูกค้าได้แสดงการตั้งค่าสำหรับรูปแบบการออกแบบนี้แล้วเนื่องจากพวกเขาได้เลือกการออกแบบเดียวกันที่แน่นอนสำหรับเว็บไซต์การผลิตของพวกเขามันยังแสดงความใส่ใจในรายละเอียดด้วย)

นี่คือภาพถ่ายสำหรับการเปรียบเทียบ

  • เว็บไซต์ดั้งเดิม แท็ก alt

  • แอพเครื่องคิดเลข แท็ก alt

ฉันใช้ความท้าทายในการเข้ารหัสนี้เป็นโอกาสในการเล่นกับกริด CSS ดั้งเดิมใหม่ (สิ่งที่ฉันตั้งใจจะทำมาระยะหนึ่งแล้ว) กริด CSS นั้นน่าทึ่ง แต่เห็นได้ชัดว่ามันเป็นไปไม่ได้ที่จะผ่านคุณสมบัติพื้นที่กริดเป็นอุปกรณ์ประกอบฉาก

ฉันยังใช้ FlexBox เพื่อจัดกึ่งกลางเนื้อหาและองค์ประกอบ ฉันเป็นแฟนตัวยงของ Flexbox และชอบมันมากกว่าโซลูชั่นกริดของบุคคลที่สามอื่น ๆ หรือใช้การลอยตัวสำหรับการวางตำแหน่งองค์ประกอบ

แอพนี้อาจเป็นครั้งแรกที่ฉันมีกรณีการใช้งานที่สมเหตุสมผลสำหรับคุณสมบัติ CALL ()! ฉันใช้ calc () เพื่อตั้งค่าความสูงของหน้าหลักเท่ากับ 100vh ลบความสูงของแถบส่วนหัวและชดเชยด้านล่างเพื่อให้แน่ใจว่าองค์ประกอบไม่ทับซ้อนกัน

ตลอดกระบวนการออกแบบฉันพยายามที่จะปฏิบัติตามหลักการออกแบบ UI ขั้นพื้นฐานบางอย่างตามที่ระบุไว้ที่นี่ https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

รายละเอียด

แอพนี้ใช้:

  • กริดพื้นเมือง CSS

  • บ็อกซ์บ็อกซ์

  • ทำขึ้นก่อน

  • preact-router

  • preact cli

  • มอคค่า

  • ไค

  • eslint

กริดพื้นเมือง CSS นั้นค่อนข้างน่าประทับใจแม้ว่าการสนับสนุนเบราว์เซอร์อาจขาดได้ในเบราว์เซอร์รุ่นเก่า เห็นได้ชัดว่ามันยากอย่างไม่น่าเชื่อที่จะผ่านสไตล์ CSS เป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบที่ซ้อนกันอื่น ๆ โดยเฉพาะอย่างยิ่งเมื่อส่วนประกอบเด็กแต่ละตัวต้องการแอตทริบิวต์ตำแหน่งที่ไม่ซ้ำกันเพื่อทำงานกับกริดดั้งเดิมของ CSS การประเมินอุปกรณ์ประกอบการประเภทสตริงเป็นข้อมูลอ้างอิงสำหรับการออกแบบคลาส CSS ล้มเหลว แม้ว่าจะใช้ตัวอย่างตรงจากเอกสารก่อน CSS-GRID ไม่ยอมรับสตริงเป็นข้อโต้แย้งในพื้นที่กริด โปรแกรมของฉันไม่สามารถมองเห็นได้ระหว่างการอ้างอิง CSS VAR และการอ้างอิง JS

FlexBox นั้นน่าทึ่งและมีการสนับสนุนเบราว์เซอร์ที่ดีกว่า CSS Native Grid ไม่จำเป็นต้องพูดถึงเรื่องนี้อีกต่อไป

Preact เป็นเทคโนโลยีที่น่าสนใจ ฉันชอบที่มันมีน้ำหนักเบาฉันก็ชอบฟังก์ชั่นที่รวดเร็วและมันเป็นการจับคู่ที่สมบูรณ์แบบสำหรับการตอบสนอง แต่มีใบอนุญาต MIT ฉันรู้สึกเหมือนเครื่องมือสร้างบางอย่างที่ขาดเมื่อเปรียบเทียบกับระบบนิเวศปฏิกิริยา

Preact-Router ในแอพนี้เป็นเพียงการตั้งค่าที่เรียบง่าย ฉันไม่ได้จัดการกับมันมากพอที่จะพูดถึงเรื่องนี้ในเชิงลึก

การตั้งค่าของ PREACT CLI ล้มเหลวจากกล่องทั้งสองการขาดคำสั่งทดสอบและการตั้งค่า ESLINT ที่กำหนดค่าไม่ดี (หรือรหัสที่เขียนโดยพวกเขาที่ละเมิดกฎการตรวจสอบความถูกต้องของตนเอง) การตั้งค่าการทดสอบขาดและฉันต้องกำหนดค่าของตัวเอง (เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง) สำหรับระบบบิลด์ใด ๆ ที่กำหนดค่าการใช้งานกรรมนั้นเป็นเพียงเรื่องบังคับจากสิ่งที่ฉันรวบรวม คำสั่ง build ของพวกเขาก็ล้มเหลว

ฉันใช้ Mocha และ Chai สำหรับการตั้งค่าชุดทดสอบของฉัน มันเป็นเวลาที่ผ่านการทดสอบแบบคลาสสิก

Eslint ถูกรวมอยู่นอกกรอบ (ล้มเหลวจะได้รับการกล่าวถึงในรายละเอียดเพิ่มเติมในภายหลัง)

ตรรกะแอปพลิเคชันทั้งหมดที่มีอยู่ในส่วนประกอบเครื่องคิดเลข อื่น ๆ ทั้งหมดเป็นองค์ประกอบที่บริสุทธิ์/ใช้งานได้ หากฉันจำเป็นต้องสร้างแอพที่ซับซ้อนมากขึ้น Mobx หรือ Redux จะเป็นไปตามลำดับ

MOBX หรือ REDUX จะช่วยในการทดสอบฟังก์ชั่น ตอนแรกฉันพยายามที่จะแยกตรรกะจากส่วนประกอบ แต่มันยากที่จะรักษาบริบทของ 'สิ่งนี้' เกี่ยวกับตรรกะที่ปรับเปลี่ยนสถานะ ดังนั้นฉันเลือกที่จะเขียนตรรกะในส่วนประกอบโดยตรง การนำเข้าวิธีการที่ต้องใช้การรับรู้ของรัฐจากไฟล์แยกต่างหากโดยไม่มีบริบทของรัฐทำให้สิ่งต่าง ๆ ซับซ้อนโดยไม่จำเป็น

ในหัวข้อของรัฐ JavaScript Eval () จะไม่ยอมรับตัวถูกดำเนินการที่ไม่ใช่สตริง มันจะจัดการกับจำนวนเต็มได้ดี แต่ไม่ได้อ้างถึงตัวถูกดำเนินการและช่วยให้คุณพระเจ้าแอปพลิเคชันของคุณถึงวาระแล้ว! ฉันจัดการข้อมูลที่สำคัญในการคำนวณทั้งหมดในสถานะเป็นสตริงเพื่อให้แน่ใจว่าสิ่งนี้จะไม่เกิดขึ้น

ในบันทึกแบบสุ่มแอพนี้ทำงานจาก Localhost คะแนนสูงกว่าในการประเมิน Lightbox ใน PWA ทั้ง 4 ประเภทประสิทธิภาพการเข้าถึงและแนวทางปฏิบัติที่ดีที่สุดเมื่อเปรียบเทียบกับเว็บไซต์การผลิตของลูกค้าในปัจจุบัน

ฉันพยายามที่จะเก็บการพึ่งพาเพิ่มเติมอย่างน้อยที่สุดในระหว่างการพัฒนาแอปพลิเคชัน

การทดสอบ

ชุดทดสอบสามารถทำงานได้ด้วย yarn test หรือ npm test ชุดทดสอบถือว่าการติดตั้งมอคค่าทั่วโลกบนเครื่องของคุณ

Preact Library มีปัญหาเปิดที่เกี่ยวข้องกับการทดสอบ = preactjs/preact#658 วิธีแก้ปัญหาของพวกเขาคือการใช้ห้องสมุดที่รู้จักกันเล็กน้อยที่เรียกว่า https://github.com/developit/preact-jsx-chai/ น่าเสียดายที่ห้องสมุดดูเหมือนจะไม่ได้ผลสำหรับฉัน

การทดสอบการตั้งค่าเป็นความเจ็บปวด การกำหนดค่า Babel ถูกซ่อนไว้โดย preact-cil ไม่สามารถเข้าถึงการกำหนดค่า รับ "โทเค็นที่ไม่คาดคิด 'นำเข้า' แม้ว่าฉันจะวางไฟล์ทดสอบไว้ในส่วนประกอบเดียวกับตัวเอง" การทดสอบจะต้องรอ ทำอีกครั้งฉันต้องใช้ทางเลือกอื่นเพื่ออนุญาตให้ทำการทดสอบฟังก์ชั่นที่แยกจากกัน

ในหัวข้อการทดสอบนี่คือปัญหามากมายที่เกี่ยวข้อง:

  • preactjs/preact-compat#233

  • preactjs/preact#146

  • https://gist.github.com/robertknight/88E9D10CFF9269C55D453E5FB8364F47 (น่าเศร้าที่การขาดการกำหนดค่าเว็บแพ็คที่ใช้งานง่ายและการตั้งค่ายังคงนำไปสู่ความล้มเหลวด้วยวิธีนี้)

  • preactjs/preact#658 (ปัญหาเปิดการตั้งค่าการทดสอบ preact ที่ยากเป็นปัญหาที่ทราบว่าไม่มีวิธีแก้ปัญหาปัจจุบัน)

  • preactjs/preact#560 (สัมผัสกับวิธีการที่ preact มีความคิดเห็นและต้องการกรรมเป็นอีกการพึ่งพา)

  • https://gist.github.com/developit/9b0bb57b3e001de67814c7f4de9cbfbf (นี่คือสิ่งที่ฉันพยายามก่อนไม่มีโชค

  • https://preactjs.com/guide/unit-testing-with-enzyme (เอกสารของพวกเขาเป็นส่วนหนึ่งอย่างแท้จริงและไม่มีทางเลือกอื่นในการตั้งค่ากรรมที่แน่นอนของพวกเขา)

และบนผ้าสำลี eslint ล้มเหลวนอกกรอบ ฉันเยื้องโดยใช้ 4 ช่องว่าง ปลั๊กอินเริ่มต้นของ ESLINT PREACT ถูกตั้งค่าเป็นแท็บซึ่งทำให้เกิดข้อผิดพลาดที่จะโยน ไม่ว่าการตั้งค่าการทดสอบจะทำงานและอยู่ในสถานที่สำหรับการตั้งค่าการตั้งค่า ESLINT ใด ๆ ฉันจะสามารถกำหนดค่าการตั้งค่านี้ได้ทันทีเพื่อให้ตรงกับข้อกำหนดเฉพาะของลูกค้า

ปัญหาที่รู้จัก

  • กดปุ่ม '.' ทำให้เกิดข้อผิดพลาดซ้ำ ๆ / * โปรดอย่าทำสิ่งนี้ :) */
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด