รู้เบื้องต้นเกี่ยวกับเฟรมเวิร์กเว็บ
แผนที่ถนน
- อภิปรายว่าเฟรมเวิร์กคืออะไรและทำไมพวกเขาถึงช่วยเราเขียนแอปพลิเคชัน
- เรียนรู้ความแตกต่างระหว่างกรอบส่วนหน้าแบ็กเอนด์และเฟรมเวิร์ก CSS
- เรียนรู้ว่าเฟรมเวิร์กใดเป็นที่นิยมในตอนนี้และทำไม
- รู้วิธีการตัดสินใจเกี่ยวกับกรอบงานที่จะใช้สำหรับโครงการ
คุณจะสร้างแอพประเภทใด
หากคุณไม่แน่ใจที่นี่และที่นี่มีความคิดที่ดี! นอกจากนี้ใช้เวลาคิดเกี่ยวกับสิ่งที่จะทำให้แอปของคุณประสบความสำเร็จมากที่สุด พูดคุยเกี่ยวกับความคิดของคุณกับผู้คนที่โต๊ะของคุณ
ความคล้ายคลึงกันของเว็บแอปพลิเคชัน
ดูที่ Facebook, Twitter, LinkedIn และ GitHub และแสดงรายการความคล้ายคลึงกันบางอย่างที่คุณเห็นกับผู้คนที่อยู่ใกล้คุณ
เฟรมเวิร์กคืออะไร
หากเราดูเว็บแอปพลิเคชันที่แตกต่างกันสองสามรายการเราจะเห็นได้ว่ามีคุณสมบัติที่ซ้ำกันมากมาย ทุกสิ่งที่เราดูข้างต้นมีการตรวจสอบสิทธิ์ของผู้ใช้มุมมองที่แสดงผลพวกเขาเชื่อมต่อกับฐานข้อมูลพวกเขามีโปรไฟล์ที่คุณสามารถดูได้พวกเขาทั้งหมดมีฟีดข้อมูลที่มีสไตล์เป็นต้นถ้าฉันต้องการฉันสามารถเขียนตรรกะทั้งหมดด้วยตัวเองทุกครั้งที่ฉันต้องการสร้างแอปพลิเคชันใหม่ อย่างไรก็ตามยังมีเครื่องมือมากมายที่สามารถทำได้เพื่อเราแทน นอกจากนี้หลายครั้งที่เราสร้างแอปพลิเคชันที่เราต้องการจัดรูปแบบรหัสของเราในบางวิธีที่ช่วยให้เรามีประสิทธิภาพและช่วยให้นักพัฒนาอื่นเข้าใจโค้ดของเราได้ง่ายขึ้น เฟรมเวิร์กเว็บช่วยให้เราบรรลุโครงสร้างสำหรับแอปพลิเคชันของเราและพวกเขาให้คุณสมบัติเพิ่มเติมแก่เราที่เราสามารถเพิ่มลงในแอปพลิเคชันของเราโดยไม่ต้องทำงานพิเศษมากเกินไป เฟรมเวิร์กให้สถานที่เริ่มต้นด้วยแอปพลิเคชันของเราเพื่อให้เราสามารถมุ่งเน้นไปที่คุณสมบัติสำหรับแอปพลิเคชันของเรามากกว่ารายละเอียดการกำหนดค่า
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
จาก awwards
แบ็กเอนด์กับส่วนหน้า
ส่วนหน้า ของเว็บแอปพลิเคชันเป็นส่วนที่คุณเห็นและโต้ตอบด้วย ประกอบด้วยการออกแบบเว็บและการโต้ตอบของเว็บไซต์ ในแง่ของภาษาการเขียนโปรแกรมสิ่งนี้มักจะประกอบด้วย CSS, HTML และ JavaScript ของหน้า
แบ็กเอนด์ ประกอบด้วยเซิร์ฟเวอร์ฐานข้อมูลและรหัสที่โต้ตอบกับพวกเขา นอกจากนี้ยังประกอบด้วยรหัสที่ให้ข้อมูลแบบไดนามิกไปยังส่วนหน้าของเว็บไซต์ สิ่งนี้สามารถจัดการได้ใน Langues การเขียนโปรแกรมส่วนใหญ่ สิ่งที่เราจะพูดถึงเป็นหลักในวันนี้คือ Python, Ruby และ Node JavaScript แต่มีคนอื่นนับไม่ถ้วน
เฟรมเวิร์กอินเทอร์เฟซของผู้ใช้
เฟรมเวิร์กอินเทอร์เฟซผู้ใช้ช่วยสร้างเว็บแอปพลิเคชันที่ดูมีสไตล์และเป็นมืออาชีพ ส่วนใหญ่รวมถึงระบบกริดบางประเภทเพื่อให้คุณสามารถจัดเรียงองค์ประกอบได้ดีพวกเขามีโทนสีเพื่อให้คุณได้รับการจัดการและพวกเขาจัดแต่งองค์ประกอบ HTML ของคุณเพื่อให้ดูสะอาดและเป็นมืออาชีพ
บางส่วนของสิ่งเหล่านี้รวมถึง:
- รองเท้าบู๊ต
- เป็นที่รู้จักกันดีและสร้างโดย Twitter
- ง่ายต่อการเรียนรู้และดูเป็นมืออาชีพ
- สามารถมองเห็น "ไซต์ bootstrap" ได้ง่าย
- อาจเป็นเรื่องยากที่จะปรับแต่งส่วนประกอบ
- ทำให้เป็นจริง
- ดูสะอาดตา
- "สนุก" มากกว่า bootstrap เล็กน้อย
- ตัวเลือกสไตล์และสีมากมาย
- ตามคำแนะนำรูปแบบวัสดุของ Google
- พื้นฐาน
- ตัวอย่างมากมาย
- เป็นมืออาชีพ
- UI ความหมาย
- ในตัวล็อตใน
- สร้างขึ้นในธีมเพื่อให้ปรับแต่งได้
- การเดินเล่น
- มีจุดสนใจอย่างมากในการเข้าถึง
- ดูสะอาดจริงๆ
- ไม่ได้ใช้เหมือนคนอื่น ๆ
- สร้างขึ้นเพื่อ React JS (เฟรมเวิร์กอื่นที่เราจะดูในภายหลัง)
การเลือกกรอบ UI
การเลือกเฟรมเวิร์ก UI ส่วนใหญ่จะลงไปตามความชอบส่วนตัวในรูปลักษณ์และเป้าหมายของเว็บไซต์ รูปแบบที่แตกต่างกันอาจดึงดูดอุตสาหกรรมที่แตกต่างกันมากขึ้นหรืออาจถ่ายทอดข้อความที่แตกต่างกัน
ใช้เวลาสองสามนาทีในการพูดคุยเกี่ยวกับการปรากฏตัวของสิ่งที่แตกต่างกันและเลือกซึ่งจะดีที่สุดสำหรับแอพตัวอย่างของคุณ
กรอบส่วนหน้า
- ความเต็ม
- เรียนรู้ง่าย
- เร็วมาก
- เครื่องมือทั้งหมดที่เกี่ยวข้องกับมันได้รับการบรรจุอย่างดี
- นำชิ้นส่วนจากเชิงมุมและตอบสนองและปรับให้เหมาะสม
- มีการนำไปใช้อย่างกว้างขวางน้อยกว่าคนอื่น ๆ
- ยืดหยุ่น - คุณสามารถใช้มันได้หลายวิธี
- AngularJs
- สร้างโดย Google
- รองรับได้ดี
- คุณสมบัติจำนวนมาก
- ปรับปรุงความสามารถในการปรับขนาดของแอปพลิเคชัน
- ยากต่อการดีบัก
- เส้นโค้งการเรียนรู้ขนาดใหญ่
- Angular 2+
- สร้างโดย Google
- รองรับได้ดี
- ส่งเสริมความสามารถในการนำกลับมาใช้ใหม่
- ปรับปรุงความสามารถในการปรับขนาดของแอปพลิเคชัน
- เส้นโค้งการเรียนรู้ขนาดใหญ่
- ตอบโต้
- สร้างโดย Facebook
- การรวมรหัสส่วนหน้าเป็นส่วนประกอบ
- จัดระเบียบรหัสและข้อมูลเพื่อให้รหัสนำกลับมาใช้ใหม่ได้มากขึ้น
- เส้นโค้งการเรียนรู้ขนาดใหญ่
- มีข้อโต้แย้งบางประการกับข้อมรณะทางปัญญา
- ถ่าน
- ให้ฟังก์ชั่นจำนวนมากนอกกรอบ
- ความคิดเห็น (คุณต้องใช้การจัดรูปแบบ)
- เส้นโค้งการเรียนรู้ที่สูงชัน
การเลือกกรอบส่วนหน้า
ผ่านสิ่งเหล่านี้และดูรหัส นอกจากนี้ยังค้นคว้าข้อดีข้อเสียของแต่ละคน คิดว่าจะเรียนรู้หรือรวมเข้ากับแนวคิดแอปของคุณได้ดีที่สุด
เฟรมเวิร์กแบ็กเอนด์
- ฤดูใบไม้ผลิ MVC
- Java (ภาษาที่ยากขึ้นในการเรียนรู้)
- เร็วมาก
- มีความเห็นน้อยลง
- Django
- Python (ภาษาที่ง่ายกว่าในการเรียนรู้)
- สื่อที่มีความสุขระหว่างการมีความคิดเห็นมากและมีโครงสร้างน้อยกว่า
- ให้ฟังก์ชันการทำงานมากมายนอกกรอบ (เช่นการตรวจสอบผู้ใช้การเชื่อมต่อฐานข้อมูลและดูการแสดงผล)
- อาจเป็นเรื่องยากที่จะรวมส่วนหน้าแฟนซี
- การจัดการข้อมูลของ Python นั้นยอดเยี่ยมมาก
- ขวด
- Python (ภาษาที่ง่ายกว่าในการเรียนรู้)
- มีความคิดเห็นน้อยลงและปรับแต่งได้น้อยกว่า Django
- ให้คุณน้อยลงจากกล่อง (คุณต้องสร้างเพิ่มเติม)
- ทับทิมบนราง
- ทับทิม (ภาษาเรียนรู้ง่ายขึ้น)
- มีความเห็นมาก
- มีเครื่องมือที่ยอดเยี่ยมเช่นการนั่งร้านเพื่อให้คุณสามารถสร้างสิ่งต่าง ๆ ได้อย่างรวดเร็ว
- ให้ฟังก์ชันการทำงานมากมายนอกกรอบ (เช่นการตรวจสอบผู้ใช้การเชื่อมต่อฐานข้อมูลและดูการแสดงผล)
- ท่อสินทรัพย์ช่วยในการพัฒนาส่วนหน้า
- ทับทิมใช้เวลานานกว่าการรันโปรแกรมมากกว่าภาษาการเขียนโปรแกรมอื่น ๆ
- ดาวตก
- JavaScript (ภาษาที่ง่ายกว่าในการเรียนรู้)
- ให้ฟังก์ชันการทำงานมากมายนอกกรอบ (เช่นการตรวจสอบผู้ใช้การเชื่อมต่อฐานข้อมูลและดูการแสดงผล)
- ผสมผสานเข้ากับหน้าผากที่ทันสมัยได้เป็นอย่างดี
- ด่วน
- JavaScript (ภาษาที่ง่ายกว่าในการเรียนรู้)
- ปรับแต่งได้มาก
- มีน้ำหนักเบามาก
- คุณสมบัติในตัวน้อยลง
- โหนดเร็วมาก
การเลือกเฟรมเวิร์กแบ็คเอนด์
ผ่านสิ่งเหล่านี้และดูรหัส นอกจากนี้ยังค้นคว้าข้อดีข้อเสียของแต่ละคน คิดว่าจะเรียนรู้หรือรวมเข้ากับแนวคิดแอปของคุณได้ดีที่สุด
ทรัพยากรเพิ่มเติม!
- บทช่วยสอน Django Girls
- Code Academy
- TODOMVC
- Codenewbie Podcast
- ผู้หญิงที่เขียนรหัส DC
- ภาษาการเขียนโปรแกรมที่แตกต่างกันเร็วแค่ไหน?
ติดต่อกัน!
- aspittel.github.io
- @aspittel บน Twitter
- Aspittel บน GitHub
- Ali Spittel บน LinkedIn