100 days of code frontend
1.0.0
หมายเหตุ: ทรัพยากรนี้เก่า! ฉันจะเก็บถาวรที่เก็บนี้ภายในสิ้นเดือนกรกฎาคม 2564 เนื่องจากฉันรู้สึกว่าคำแนะนำมากมายที่นี่ล้าสมัยสำหรับการเรียนรู้การพัฒนาเว็บส่วนหน้าในปี 2564
โปรดสนับสนุน repo นี้โดยให้ดาว️ที่ด้านบนของหน้าและติดตามฉันสำหรับทรัพยากรเพิ่มเติม!
ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาส่วนหน้าหรือไม่? พิจารณา:
นี่เป็นหลักสูตรที่ค่อนข้างมีความเห็นสำหรับการเรียนรู้การพัฒนาส่วนหน้าระหว่าง #100daysofcode เนื่องจากครอบคลุมหัวข้อการพัฒนาส่วนหน้าหลากหลายจึงถือได้ว่าเป็นหลักสูตรสไตล์ "สำรวจ" มากกว่าการดำน้ำลึกเข้าไปในพื้นที่ใดพื้นที่หนึ่ง ตามหลักการแล้ว Takeaway ของคุณจากการจบหลักสูตรนี้จะมีความคุ้นเคยกับแต่ละหัวข้อและความสามารถในการดำน้ำลึกในพื้นที่ใด ๆ ในอนาคตเมื่อจำเป็น
หลักสูตรนี้ได้รับอิทธิพลอย่างมากจากแผนงานนักพัฒนาส่วนหน้าของ Kamran Ahmed โปรดตรวจสอบ-มันยอดเยี่ยม
หมายเหตุ : ฉันรู้ว่าการพัฒนาส่วนหน้าหมายถึงสิ่งต่าง ๆ มากมายสำหรับผู้คนมากมาย! หากคุณเป็นนักพัฒนาส่วนหน้าและคุณคิดว่าคู่มือนี้สามารถปรับปรุงได้โปรดแจ้งให้เราทราบด้วยการเพิ่มปัญหาตามที่อธิบายไว้ในส่วนที่มีส่วนร่วม ขอบคุณ!
ต้องขอบคุณผู้มีส่วนร่วมที่น่าทึ่งหลักสูตรนี้ได้รับการแปลเป็นภาษาต่อไปนี้!
หลักการพื้นฐานของที่เก็บนี้คือการจับเวลา หากคุณใช้เวลาในอดีตที่ผ่านมาพยายามเรียนรู้การพัฒนาเว็บหรือทักษะที่คล้ายกันคุณอาจมีประสบการณ์ในการลงหลุมกระต่ายในหัวข้อใดหัวข้อหนึ่ง ที่เก็บนี้มีวัตถุประสงค์เพื่อกำหนดจำนวนวันให้กับแต่ละเทคโนโลยีและกระตุ้นให้คุณย้ายไปยังอีกครั้งเมื่อจำนวนวันนั้นขึ้น
คาดว่าทุกคนมีความสามารถในระดับที่แตกต่างกันเมื่อเริ่มต้นความท้าทายนี้และไม่เป็นไร นักพัฒนาส่วนหน้าและผู้เชี่ยวชาญด้านการเริ่มต้นและผู้เชี่ยวชาญสามารถได้รับประโยชน์จากการฝึกซ้อมแบบไทม์บ็อกซ์ในแต่ละพื้นที่เหล่านี้
กิจกรรมวันต่อวันที่แนะนำมีดังนี้:
ด้านล่างคุณสามารถค้นหาข้อมูลเล็กน้อยเกี่ยวกับแต่ละหัวข้อในหลักสูตรรวมถึงแนวคิด/คำแนะนำบางอย่างเกี่ยวกับสิ่งที่ต้องทำสำหรับแต่ละคน สำหรับแรงบันดาลใจในโครงการที่ต้องทำควบคู่ไปกับหลักสูตรนี้ดูส่วนแนวคิดโครงการ
เป็นส่วนหนึ่งของหลักการการกำหนดเวลามันไม่เป็นไรถ้าคุณไม่ผ่านรายการทั้งหมดในส่วน "พื้นที่การเรียนรู้และแนวคิด" คุณควรมุ่งเน้นไปที่การได้รับประโยชน์สูงสุดจากจำนวนวันที่กำหนดให้กับแต่ละพื้นที่แล้วไปต่อ
Hypertext Markup Language (HTML) เป็นภาษามาร์กอัปมาตรฐานสำหรับการสร้างหน้าเว็บและเว็บแอปพลิเคชัน ด้วยแผ่นสไตล์ Cascading (CSS) และ JavaScript มันเป็นเทคโนโลยีที่สำคัญสามประการสำหรับเวิลด์ไวด์เว็บ เว็บเบราว์เซอร์ได้รับเอกสาร HTML จากเว็บเซิร์ฟเวอร์หรือจากที่เก็บข้อมูลในเครื่องและแสดงเอกสารลงในเว็บเพจมัลติมีเดีย HTML อธิบายโครงสร้างของหน้าเว็บที่มีความหมายและเดิมรวมถึงตัวชี้นำสำหรับการปรากฏตัวของเอกสาร (ที่มา: Wikipedia)
HTML เป็นรากฐานของการพัฒนาเว็บ แม้ในเฟรมเวิร์กที่ใช้ JavaScript คุณก็จบลงด้วยการเขียน HTML ในรูปแบบเดียวหรืออื่น
Cascading Style Sheets (CSS) เป็นภาษาแผ่นสไตล์ที่ใช้ในการอธิบายการนำเสนอเอกสารที่เขียนด้วยภาษามาร์กอัปเช่น HTML CSS เป็นเทคโนโลยีที่สำคัญของเวิลด์ไวด์เว็บควบคู่ไปกับ HTML และ JavaScript CSS ได้รับการออกแบบมาเพื่อเปิดใช้งานการแยกงานนำเสนอและเนื้อหารวมถึงเลย์เอาต์สีและแบบอักษร การแยกนี้สามารถปรับปรุงการเข้าถึงเนื้อหาให้ความยืดหยุ่นและการควบคุมมากขึ้นในข้อกำหนดของลักษณะการนำเสนอเปิดใช้งานเว็บเพจหลายหน้าเพื่อแบ่งปันการจัดรูปแบบโดยการระบุ CS ที่เกี่ยวข้องในไฟล์. CSS แยกต่างหากและลดความซับซ้อนและการทำซ้ำในเนื้อหาโครงสร้าง (ที่มา: Wikipedia)
CSS เป็นอีกองค์ประกอบสำคัญของการพัฒนาเว็บ ในขณะที่ส่วนใหญ่จะใช้ในการจัดรูปแบบและตำแหน่งองค์ประกอบ HTML แต่ก็มีความสามารถมากขึ้นในการทำงานแบบไดนามิกมากขึ้น (เช่นภาพเคลื่อนไหว) ที่ครั้งหนึ่งจะได้รับการจัดการโดย JavaScript
<style> แท็ก<link>JavaScript มักจะย่อเป็น JS เป็นภาษาการเขียนโปรแกรมระดับสูงที่ตีความซึ่งสอดคล้องกับข้อกำหนดของ ECMASCript มันเป็นภาษาที่มีลักษณะเป็นแบบไดนามิกพิมพ์อย่างอ่อนแอต้นแบบและหลาย paradigm นอกเหนือจาก HTML และ CSS แล้ว JavaScript เป็นหนึ่งในสามเทคโนโลยีหลักของเวิลด์ไวด์เว็บ JavaScript เปิดใช้งานหน้าเว็บแบบโต้ตอบและเป็นส่วนสำคัญของเว็บแอปพลิเคชัน เว็บไซต์ส่วนใหญ่ใช้มันและเว็บเบราว์เซอร์ที่สำคัญทั้งหมดมีเอ็นจิ้น JavaScript เฉพาะเพื่อดำเนินการ (ที่มา: Wikipedia)
จาวาสคริปต์มีความสำคัญมากขึ้นเรื่อย ๆ ในโลกส่วนหน้า ในขณะที่ครั้งหนึ่งเคยถูกใช้เป็นหลักในการสร้างหน้าแบบไดนามิกตอนนี้มันเป็นรากฐานของกรอบการทำงานส่วนหน้าจำนวนมาก เฟรมเวิร์กเหล่านี้จัดการงานจำนวนมากที่เคยได้รับการจัดการโดยแบ็คเอนด์ (เช่นการกำหนดเส้นทางและการแสดงมุมมองที่แตกต่างกัน)
<script> แท็กและตำแหน่งJQuery เป็นไลบรารี JavaScript ที่รวดเร็วเล็กและมีคุณสมบัติ มันทำให้สิ่งต่าง ๆ เช่น HTML Document Traversal และ Manipulation การจัดการเหตุการณ์แอนิเมชั่นและ Ajax ง่ายขึ้นมากด้วย API ที่ใช้งานง่ายซึ่งใช้งานได้กับเบราว์เซอร์จำนวนมาก ด้วยการผสมผสานระหว่างความเก่งกาจและความสามารถในการขยายเวลา jQuery ได้เปลี่ยนวิธีที่ผู้คนนับล้านเขียน JavaScript (ที่มา: jQuery.com)
หลังจากที่คุณใช้เวลากับจาวาสคริปต์ธรรมดา (เรียกอีกอย่างว่า "วานิลลา") คุณอาจพบว่างานบางอย่างยุ่งยากเล็กน้อยโดยเฉพาะอย่างยิ่งสิ่งที่เกี่ยวข้องกับการเข้าถึงและจัดการองค์ประกอบ HTML ในขณะที่ JQuery เป็นห้องสมุดไปสู่การทำให้งานประเภทนี้ง่ายขึ้นและสอดคล้องกันในเบราว์เซอร์ที่แตกต่างกัน ทุกวันนี้ jQuery ไม่จำเป็นต้องเรียนรู้ "บังคับ" เนื่องจากความก้าวหน้าใน Vanilla JavaScript, CSS และ Frameworks JavaScript รุ่นใหม่กว่า (เราจะดูเฟรมเวิร์กในภายหลัง) ถึงกระนั้นก็จะเป็นประโยชน์ที่จะใช้เวลาเล็กน้อยในการเรียนรู้ jQuery และนำไปใช้กับโครงการขนาดเล็ก
Responsive Web Design (RWD) เป็นวิธีการออกแบบเว็บที่ทำให้หน้าเว็บแสดงผลได้ดีบนอุปกรณ์และขนาดหน้าต่างหรือหน้าจอที่หลากหลาย งานล่าสุดยังพิจารณาความใกล้ชิดของผู้ชมซึ่งเป็นส่วนหนึ่งของบริบทการดูเป็นส่วนขยายสำหรับ RWD เนื้อหาการออกแบบและประสิทธิภาพเป็นสิ่งจำเป็นในทุกอุปกรณ์เพื่อให้แน่ใจว่าการใช้งานและความพึงพอใจ ไซต์ที่ออกแบบด้วย RWD ปรับเค้าโครงให้เข้ากับสภาพแวดล้อมการดูโดยใช้ของเหลวกริดสัดส่วนภาพที่ยืดหยุ่นและการสืบค้นสื่อ CSS3 ซึ่งเป็นส่วนขยายของกฎ @media (ที่มา: Wikipedia)
การออกแบบเว็บที่ตอบสนองนั้นเกี่ยวกับการทำให้เว็บแอปพลิเคชันดูและทำงานอย่างถูกต้องบนอุปกรณ์ทุกประเภท ตัวอย่างที่รวดเร็วและสกปรกคือเว็บไซต์ควรมีรูปลักษณ์และทำงานได้อย่างถูกต้องทั้งในเว็บเบราว์เซอร์เดสก์ท็อปและบนเบราว์เซอร์โทรศัพท์มือถือ ความเข้าใจในการออกแบบที่ตอบสนองเป็นสิ่งสำคัญสำหรับนักพัฒนาส่วนหน้า!
การเข้าถึงเว็บเป็นวิธีปฏิบัติที่ครอบคลุมเพื่อให้มั่นใจว่าไม่มีอุปสรรคที่ป้องกันการมีปฏิสัมพันธ์หรือการเข้าถึงเว็บไซต์บนเว็บทั่วโลกโดยคนพิการ เมื่อไซต์ได้รับการออกแบบพัฒนาและแก้ไขอย่างถูกต้องโดยทั่วไปผู้ใช้ทุกคนสามารถเข้าถึงข้อมูลและฟังก์ชั่นได้อย่างเท่าเทียมกัน (ที่มา: Wikipedia)
การเข้าถึงมักเขียนเป็น A11Y เป็นหนึ่งในหัวข้อที่สำคัญที่สุดในการพัฒนาเว็บส่วนหน้า แต่ดูเหมือนว่ามักจะได้รับการเลื่อนระยะสั้น การสร้างเว็บแอปพลิเคชันที่เข้าถึงได้ไม่เพียง แต่มีจริยธรรม แต่ยังทำให้ธุรกิจมีความรู้สึกเป็นจำนวนมากเมื่อพิจารณาจากผู้ชมเพิ่มเติมที่จะสามารถดูแอปพลิเคชันของคุณเมื่อสามารถเข้าถึงได้
Git เป็นระบบควบคุมเวอร์ชันแบบกระจายฟรีและโอเพ่นซอร์สที่ออกแบบมาเพื่อจัดการทุกอย่างตั้งแต่โครงการขนาดเล็กไปจนถึงขนาดใหญ่ด้วยความเร็วและประสิทธิภาพ (ที่มา: git-scm.com)
การควบคุมเวอร์ชัน/รหัสเป็นส่วนสำคัญของชุดเครื่องมือของนักพัฒนาเว็บ มีระบบควบคุมเวอร์ชันที่แตกต่างกันจำนวนมาก แต่ Git นั้นเป็นที่แพร่หลายมากที่สุดในขณะนี้ คุณสามารถ (และควร!) ใช้เพื่อติดตามโครงการของคุณในขณะที่คุณเรียนรู้!
Node.js เป็นสภาพแวดล้อมการรันเวลา JavaScript แบบโอเพนซอร์ซ JavaScript ใช้เป็นหลักสำหรับการเขียนสคริปต์ฝั่งไคลเอ็นต์ซึ่งสคริปต์ที่เขียนใน JavaScript ถูกฝังอยู่ใน HTML ของหน้าเว็บและเรียกใช้ฝั่งไคลเอ็นต์โดยเครื่องมือ JavaScript ในเว็บเบราว์เซอร์ของผู้ใช้ node.js ให้นักพัฒนาใช้ JavaScript เพื่อเขียนเครื่องมือบรรทัดคำสั่งและสำหรับการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์-สคริปต์ที่ใช้เซิร์ฟเวอร์เพื่อสร้างเนื้อหาเว็บเพจแบบไดนามิกก่อนที่หน้าจะถูกส่งไปยังเว็บเบราว์เซอร์ของผู้ใช้ ดังนั้น Node.js จึงแสดงถึงกระบวนทัศน์ "JavaScript ทุกที่" รวมการพัฒนาเว็บแอปพลิเคชันรอบ ๆ ภาษาการเขียนโปรแกรมเดียวแทนที่จะเป็นภาษาที่แตกต่างกันสำหรับสคริปต์ด้านเซิร์ฟเวอร์และไคลเอ็นต์ (ที่มา: Wikipedia)
ในขณะที่ Node.js เป็นที่รู้จักกันดีว่าเป็นโซลูชัน back-end มันถูกใช้ค่อนข้างบ่อยเพื่อรองรับการพัฒนาส่วนหน้า มันทำสิ่งนี้ได้หลายวิธีรวมถึงสิ่งต่าง ๆ เช่นการใช้เครื่องมือสร้างการทดสอบและผ้าสำลี (ทั้งหมดจะได้รับการคุ้มครองเร็ว ๆ นี้!) Node Package Manager (NPM) เป็นอีกหนึ่งคุณสมบัติที่ยอดเยี่ยมของโหนดและสามารถใช้ในการจัดการการพึ่งพาโครงการของคุณ (เช่นรหัสไลบรารีโค้ดโครงการของคุณอาจพึ่งพา - jQuery เป็นตัวอย่าง!)
SASS เป็นส่วนขยายของ CSS ที่เพิ่มพลังและความสง่างามให้กับภาษาพื้นฐาน ช่วยให้คุณใช้ตัวแปรกฎซ้อนกันผสมการนำเข้าแบบอินไลน์และอื่น ๆ ทั้งหมดด้วยไวยากรณ์ที่เข้ากันได้กับ CSS อย่างสมบูรณ์ SASS ช่วยรักษาสไตล์ชีทขนาดใหญ่ที่มีการจัดระเบียบอย่างดีและรับสไตล์ชีทขนาดเล็กและทำงานได้อย่างรวดเร็วโดยเฉพาะอย่างยิ่งด้วยความช่วยเหลือของไลบรารีสไตล์เข็มทิศ (ที่มา: sass-lang.com)
SASS ช่วยให้คุณเขียน CSS ด้วยวิธีการเขียนโปรแกรมมากขึ้น หากคุณทำ CSS บางอย่างคุณอาจสังเกตเห็นว่าคุณจบลงด้วยการทำซ้ำข้อมูลจำนวนมาก-ตัวอย่างเช่นระบุรหัสสีเดียวกัน ใน SASS คุณสามารถใช้สิ่งต่าง ๆ เช่นตัวแปรลูปและทำรังเพื่อลดความซ้ำซ้อนและเพิ่มความสามารถในการอ่าน หลังจากเขียนรหัสของคุณเป็น SASS คุณสามารถรวบรวมได้อย่างรวดเร็วและง่ายดายเป็น CSS ปกติ
* ทางเลือกบางอย่าง: มูลนิธิ, Bulma, เป็นรูปธรรม
Bootstrap เป็นเฟรมเวิร์กส่วนหน้าฟรีและโอเพ่นซอร์สสำหรับการพัฒนาเว็บไซต์และเว็บแอปพลิเคชัน มันมีเทมเพลตการออกแบบที่ใช้ HTML และ CSS สำหรับการพิมพ์, รูปแบบ, ปุ่ม, การนำทางและส่วนประกอบส่วนต่อประสานอื่น ๆ รวมถึงส่วนขยาย JavaScript เสริม (ที่มา: Wikipedia)
มีตัวเลือกมากมายสำหรับการจัดวางสไตล์และการทำให้เว็บแอปพลิเคชันของคุณมีชีวิตชีวา แต่คุณจะพบว่าการเริ่มต้นด้วยกรอบการทำงานช่วยให้คุณเริ่มต้นได้อย่างมาก Bootstrap เป็นหนึ่งในกรอบการทำงาน แต่มันก็ไกลจากตัวเลือกเดียว! ฉันขอแนะนำให้ทำความคุ้นเคยกับเฟรมเวิร์กหนึ่งแบบเช่นนี้ แต่มันสำคัญกว่าที่จะเข้าใจ HTML, CSS และ JavaScript พื้นฐานมากกว่าที่จะติดอยู่ในกรอบใด ๆ
บล็อก, องค์ประกอบ, วิธีการดัดแปลง (โดยทั่วไปเรียกว่า BEM) เป็นอนุสัญญาการตั้งชื่อยอดนิยมสำหรับคลาสใน HTML และ CSS พัฒนาโดยทีมงานที่ Yandex เป้าหมายคือช่วยให้นักพัฒนาเข้าใจความสัมพันธ์ระหว่าง HTML และ CSS ได้ดีขึ้นในโครงการที่กำหนด (ที่มา: CSS-tricks.com)
สิ่งสำคัญคือการรู้การตั้งชื่อและระบบองค์กรอย่าง BEM มีอยู่และทำไมพวกเขาถึงใช้ ทำวิจัยที่นี่ แต่ในระดับเริ่มต้นฉันจะไม่แนะนำให้อุทิศเวลาให้กับเรื่องมากเกินไป
Gulp เป็นชุดเครื่องมือสำหรับงานอัตโนมัติที่เจ็บปวดหรือใช้เวลานานในเวิร์กโฟลว์การพัฒนาของคุณดังนั้นคุณสามารถหยุดการยุ่งและสร้างบางสิ่งบางอย่าง (ที่มา: gulpjs.com)
ในการพัฒนาส่วนหน้าสมัยใหม่คุณมักจะพบว่าตัวเองต้องการทำงานอัตโนมัติเช่นการรวมกลุ่มการย้ายไฟล์และการอ้างอิงในไฟล์ HTML Gulp เป็นเครื่องมือหนึ่งที่สามารถช่วยให้คุณทำสิ่งเหล่านี้ได้!
build Subdirectoryที่แกนกลาง WebPack เป็นโมดูลแบบคงที่สำหรับแอปพลิเคชัน JavaScript ที่ทันสมัย เมื่อ WebPack ประมวลผลแอปพลิเคชันของคุณมันจะสร้างกราฟการพึ่งพาภายในซึ่งแมปทุกโมดูลความต้องการโครงการของคุณและสร้างกลุ่มหนึ่งหรือมากกว่า (ที่มา: webpack.js.org)
ลองนึกภาพว่าคุณมีโครงการพัฒนาเว็บขนาดใหญ่ที่มีนักพัฒนาซอฟต์แวร์ต่าง ๆ จำนวนมากทำงานในงานที่แตกต่างกันมากมาย แทนที่จะทำงานในไฟล์เดียวกันทั้งหมดคุณอาจต้องการทำให้เป็นโมดูลมากที่สุดเท่าที่จะทำได้ WebPack ช่วยเปิดใช้งานสิ่งนี้โดยการให้ทีมของคุณทำงานอย่างเป็นโมดูลแล้วถึงเวลาในการสร้างแอปพลิเคชัน WebPack จะรวมเข้าด้วยกันทั้งหมด: HTML, CSS/SASS, Javasscript, รูปภาพ ฯลฯ Webpack ไม่ใช่โมดูลเดียว แต่ดูเหมือนว่าจะเป็นนักวิ่งหน้าในขณะนี้
ESLINT เป็นยูทิลิตี้เสื้อคลุม JavaScript แบบโอเพนซอร์สที่สร้างขึ้นโดย Nicholas C. Zakas ในเดือนมิถุนายน 2013 รหัสผ้าสำลีเป็นประเภทของการวิเคราะห์แบบคงที่ที่มักใช้ในการค้นหารูปแบบที่เป็นปัญหาหรือรหัสที่ไม่เป็นไปตามแนวทางสไตล์บางอย่าง มีรหัส linters สำหรับภาษาการเขียนโปรแกรมส่วนใหญ่และบางครั้งคอมไพเลอร์รวมการตัดหญ้าไว้ในกระบวนการรวบรวม (ที่มา: eslint.org)
ผ้าสำลีเป็นเครื่องมือที่ยอดเยี่ยมสำหรับคุณภาพของรหัสความสามารถในการอ่านและความสอดคล้อง การใช้ linter จะช่วยให้คุณจับไวยากรณ์และการจัดรูปแบบข้อผิดพลาดก่อนที่จะไปผลิต คุณสามารถเรียกใช้ Linters ด้วยตนเองหรือรวมไว้ในกระบวนการสร้าง/การปรับใช้ของคุณ
* ทางเลือกบางอย่าง: Vue, Angular, Ember
React (หรือที่เรียกว่า React.js หรือ ReactJs) เป็นไลบรารี JavaScript สำหรับการสร้างส่วนต่อประสานผู้ใช้ มันได้รับการดูแลโดย Facebook และชุมชนของนักพัฒนาและ บริษัท รายบุคคล React สามารถใช้เป็นฐานในการพัฒนาแอพพลิเคชั่นหน้าเดียวหรือมือถือ แอพพลิเคชั่น React ที่ซับซ้อนมักจะต้องใช้ไลบรารีเพิ่มเติมสำหรับการจัดการสถานะการกำหนดเส้นทางและการโต้ตอบกับ API (ที่มา: Wikipedia)
เฟรมเวิร์ก JavaScript Front-end อยู่ในระดับแนวหน้าของการพัฒนาส่วนหน้าสมัยใหม่ สิ่งสำคัญอย่างหนึ่งที่นี่คือการตอบสนองแม้จะเป็นที่นิยมอย่างไม่น่าเชื่อ แต่เป็นเพียงห้องสมุดสำหรับการสร้างส่วนต่อประสานผู้ใช้ในขณะที่กรอบงานเช่น Vue และ ANGULAR AIM เพื่อให้เต็มรูปแบบมากขึ้น ตัวอย่างเช่นหากคุณสร้างแอปพลิเคชั่นด้วย React ที่จำเป็นต้องเดินทางไปยังมุมมองที่แตกต่างกันคุณจะต้องนำสิ่งต่าง ๆ เช่น react-router
create-react-app เป็นเครื่องมือที่สะดวกในการนั่งร้านโครงการ React ใหม่Redux เป็นคอนเทนเนอร์สถานะที่คาดการณ์ได้สำหรับแอพ JavaScript ช่วยให้คุณเขียนแอปพลิเคชันที่ทำงานอย่างสม่ำเสมอทำงานในสภาพแวดล้อมที่แตกต่างกัน (ไคลเอนต์เซิร์ฟเวอร์และเนทีฟ) และทดสอบได้ง่าย ยิ่งไปกว่านั้นมันให้ประสบการณ์นักพัฒนาที่ยอดเยี่ยมเช่นการแก้ไขรหัสสดรวมกับดีบักเกอร์การเดินทางข้ามเวลา (ที่มา: redux.js.org)
ในขณะที่คุณสร้างแอปพลิเคชันส่วนหน้าที่ใหญ่กว่าและใหญ่กว่าคุณเริ่มตระหนักว่ามันยากที่จะรักษาสถานะแอปพลิเคชัน: สิ่งต่าง ๆ เช่นถ้าผู้ใช้เข้าสู่ระบบผู้ใช้คือใครและโดยทั่วไปแล้วสิ่งที่เกิดขึ้นในแอปพลิเคชัน Redux เป็นห้องสมุดที่ยอดเยี่ยมที่ช่วยให้คุณรักษาแหล่งเดียวที่แอปพลิเคชันของคุณสามารถใช้ตรรกะได้
Jest เป็นกรอบการทดสอบ JavaScript ที่น่ายินดีโดยมุ่งเน้นไปที่ความเรียบง่าย มันทำงานร่วมกับโครงการที่ใช้: Babel, typenscript, Node, React, Angular, Vue และอีกมากมาย! (ที่มา: jestjs.io)
การตั้งค่าการทดสอบอัตโนมัติสำหรับโครงการส่วนหน้าของคุณเป็นสิ่งสำคัญมาก การตั้งค่าการทดสอบอัตโนมัติจะช่วยให้คุณเปลี่ยนแปลงในอนาคตด้วยความมั่นใจ-หากคุณทำการเปลี่ยนแปลงและการทดสอบของคุณยังคงผ่านไปคุณจะรู้สึกสบายใจที่คุณไม่ได้ทำลายฟังก์ชั่นที่มีอยู่ มีกรอบการทดสอบมากเกินไปในรายการ Jest เป็นเพียงหนึ่งใน favorties ของฉัน
create-react-app , Jest ได้รับการกำหนดค่าแล้ว* ทางเลือก: ไหล
TypeScript เป็นภาษาการเขียนโปรแกรมโอเพนซอร์ซที่พัฒนาและดูแลโดย Microsoft มันเป็น superset syntactical ที่เข้มงวดของ JavaScript และเพิ่มการพิมพ์แบบคงที่เป็นทางเลือกให้กับภาษา TypeScript ได้รับการออกแบบมาเพื่อการพัฒนาแอพพลิเคชั่นขนาดใหญ่และ transcompiles เป็น JavaScript เนื่องจาก TypeScript เป็น superset ของ JavaScript โปรแกรม JavaScript ที่มีอยู่ก็เป็นโปรแกรม TypeScript ที่ถูกต้อง TypeScript อาจใช้ในการพัฒนาแอปพลิเคชัน JavaScript สำหรับการดำเนินการทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ (node.js) (ที่มา: Wikipedia)
JavaScript ถูกพิมพ์แบบไดนามิก อย่างไรก็ตามมันเป็นความเชื่อทั่วไปที่การพิมพ์แบบคงที่ (เช่นการระบุประเภทตัวแปรคลาสอินเทอร์เฟซก่อนเวลา) มีความชัดเจนและลดโอกาสของข้อบกพร่อง/ข้อบกพร่อง ไม่ว่าคุณจะรู้สึกอย่างไรในหัวข้อนั้นเป็นสิ่งสำคัญที่จะต้องรู้สึกถึง JavaScript รุ่นสแตติกเช่น TypeScript โปรดทราบว่า TypeScript รวบรวมลงไปที่ JavaScript เพื่อให้สามารถตีความได้โดยเบราว์เซอร์ (เช่นเบราว์เซอร์ไม่ตีความ typeScript โดยธรรมชาติ)
Next.js เป็นกรอบการทำงานที่เรียบง่ายสำหรับแอปพลิเคชันที่ตอบสนองเซิร์ฟเวอร์ (แหล่งที่มา: Next.js - React Server Side Rendering ทำถูกต้อง)
ตอนนี้เราได้รับความก้าวหน้า! เมื่อถึงตอนนี้คุณได้สร้างแอปพลิเคชัน React (หรือ Vue หรือ Angular) ที่ทำงานได้ค่อนข้างน้อยในเบราว์เซอร์ ด้วยเหตุผลต่าง ๆ (เช่น SEO, ความกังวลเกี่ยวกับประสิทธิภาพของลูกค้า) คุณอาจต้องการให้แอปพลิเคชันส่วนหน้าของคุณแสดงผลบนเซิร์ฟเวอร์มากกว่าไคลเอนต์ นั่นคือสิ่งที่กรอบเช่น Next.js เข้ามา
รายการนี้ควรจะให้คุณเปิดเผยระบบนิเวศส่วนหน้าอย่างกว้างขวาง แต่มันเป็นไปไม่ได้ที่จะตีทุกหัวข้อไม่ต้องพูดถึงเครื่องมือมากมายภายในแต่ละพื้นที่! หากคุณคิดว่าฉันพลาดสิ่งที่สำคัญมากโปรดดูส่วนที่มีส่วนร่วมเพื่อดูว่าคุณจะช่วยให้คู่มือนี้ดีขึ้นได้อย่างไร
เมื่อคุณดำเนินการผ่าน #100DaysofCode คุณจะต้องการหนึ่งหรือหลายโครงการที่คุณสามารถใช้ความรู้ใหม่ของคุณ ในส่วนนี้ฉันพยายามจัดทำแนวคิดโครงการบางอย่างที่คุณสามารถใช้ได้ อีกทางเลือกหนึ่งคุณได้รับการสนับสนุนให้คิดแนวคิดโครงการของคุณเองเนื่องจากความคิดเหล่านั้นอาจสนใจและกระตุ้นให้คุณมากขึ้น
โดยทั่วไปฉันได้พบทรัพยากรต่อไปนี้ที่มีค่าสำหรับการเรียนรู้การพัฒนาซอฟต์แวร์:
หากคุณต้องการข้อมูลของฉันในสิ่งใดอย่าลังเลที่จะเชื่อมต่อกับฉันบน Twitter และฉันจะพยายามอย่างเต็มที่เพื่อพยายามให้ความช่วยเหลือ หากคุณคิดว่ามีปัญหาเกี่ยวกับหลักสูตรหรือมีคำแนะนำให้ดูที่ส่วนที่มีส่วนร่วมด้านล่าง
หากคุณชื่นชมงานที่ทำที่นี่คุณสามารถมีส่วนร่วมอย่างมีนัยสำคัญโดยการกระจายคำเกี่ยวกับที่เก็บนี้รวมถึงสิ่งต่าง ๆ เช่น:
นี่เป็นงานที่อยู่ระหว่างดำเนินการและฉันขอขอบคุณมากในการรักษาฐานความรู้นี้!
เมื่อมีส่วนร่วมในที่เก็บข้อมูลนี้โปรดพูดคุยเกี่ยวกับการเปลี่ยนแปลงที่คุณต้องการทำผ่านปัญหาก่อนทำการเปลี่ยนแปลง มิฉะนั้นมันจะยากมากที่จะเข้าใจข้อเสนอของคุณและอาจส่งผลให้คุณทำงานจำนวนมากเพื่อการเปลี่ยนแปลงที่จะไม่ถูกรวมเข้าด้วยกัน
โปรดทราบว่าทุกคนที่เกี่ยวข้องในโครงการนี้กำลังพยายามเรียนรู้หรือพยายามช่วย-โปรดทำดี!
