ที่มา: Nocodefunctions เรานำเสนอบทความเกี่ยวกับประสบการณ์การพัฒนาเว็บแอปพลิเคชันอิสระโดยใช้ Java ![คอฟฟี่เบรค #157. การใช้ Java สำหรับเว็บแอปพลิเคชันส่วนหน้าในปี 2022 - 1]()
![Java-университет]()
Java สำหรับส่วนหน้า - เป็นไปได้จริงหรือ?
หลายๆ คนเชื่อว่าการใช้ Java สำหรับการพัฒนาส่วนหน้านั้นเป็นไปไม่ได้เลย เพราะท้ายที่สุดแล้ว Java ได้รับการออกแบบสำหรับส่วนหลัง ใช่ นานมาแล้ว Java Applet และ Java Webstart อนุญาตให้คุณเรียกใช้แอปพลิเคชัน Java จากเบราว์เซอร์ แต่นี่คือประวัติศาสตร์โบราณ เก่าแก่เท่ากับปลั๊กอิน Flash แต่ถึงแม้จะไม่มีแอปเพล็ต แต่ก็ยังมีวิธีใช้ Java สำหรับส่วนหน้า - นี่คือ JSP (Java Server Pages) ซึ่งเด็กนักเรียนหลายคนเรียนในบทเรียนวิทยาการคอมพิวเตอร์ อย่างไรก็ตาม แม้ว่า JSP ยังคงถูกกล่าวถึงในหนังสือ Java บางเล่ม แต่เทคโนโลยีนี้ก็เลิกใช้ไปแล้วตั้งแต่ปี 2010 มันเป็นทางตันอีกจริงๆเหรอ? นอกจากนี้ยังมีเฟรมเวิร์กที่ช่วยให้นักพัฒนา Java สามารถ "transpile" (แปลงในรูปแบบที่ซับซ้อน) โค้ดของตนเป็น JavaScript โดยใช้ Google Web Toolkit (GWT ก็ไม่ใช่เรื่องใหม่ เช่นกัน ) หรือผ่านทางJ2Cl (จาก Google เช่นกัน) สิ่งสำคัญที่ควรทราบคือ GWT และ J2Cl ไม่เหมาะสำหรับผู้เริ่มต้น แต่เป็นเครื่องมือระดับองค์กรที่ Google พัฒนาขึ้นเพื่อใช้ในโครงการขนาดใหญ่ฮีโร่ที่ไม่มีใครร้องของ Java สำหรับส่วนหน้า: Jakarta Faces (JSF)
Java Server Faces (JSF) ซึ่งปัจจุบันรู้จักกันในชื่อ “Jakarta Faces” มีมาตั้งแต่อย่างน้อยต้นปี 2010 ฉันประหลาดใจอยู่เสมอที่ไม่ค่อยมีใครรู้จักและไม่ค่อยมีใครพูดถึง เนื่องจากเฟรมเวิร์กนี้ทำให้ง่ายต่อการพัฒนาเว็บแอปพลิเคชันอย่างรวดเร็ว ปลอดภัย และเชื่อถือได้ JSF นั้นง่ายต่อการเรียนรู้และใช้ประโยชน์จากระบบนิเวศ Java ได้อย่างเต็มที่ ต่อไปนี้คือวิธีการสร้างเว็บเพจที่มีเนื้อหาแบบไดนามิก:
- สร้างเพจ html (ด้วยนามสกุล .xhtml)
- เปลี่ยนแท็ก html <head> และ <body> เป็นแท็ก <h:head> และ <h:body>
- ตอนนี้ หากต้องการแสดงเนื้อหาแบบไดนามิกโดยการเรียกคุณสมบัติบางส่วนในแบ็กเอนด์ เพียงวางโค้ดนี้ไว้หลังแฮชแท็กและระหว่างแถบควบคุม:
#{backendscript.myText}
JSF ซับซ้อนหรือไม่? ข้อดีของมันคืออะไร?
JSF ไม่ได้ซับซ้อนเลย นอกจากนี้:- มีการผสานรวมอย่างดีกับ Java IDE แบบคลาสสิก (NetBeans, IntelliJ IDEA และ Eclipse) IDE แต่ละอันมี:
- โครงการเทมเพลตที่กรอกเทมเพลตสำหรับการกำหนดค่า Maven (ซึ่งโดยวิธีการนั้นง่ายมาก)
- เครื่องมือแก้ไขข้อบกพร่อง (พร้อมการรีโหลดแบบร้อน อย่างน้อยสำหรับ NetBeans)
- เครื่องมือการเติมข้อความอัตโนมัติ การรีแฟคเตอร์ การนำทาง และการเน้นข้อผิดพลาดที่มีประสิทธิภาพสำหรับระบบนิเวศ Java IDE สามารถให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับคลาสใดๆ ที่คุณกล่าวถึงในหน้า html (เช่น#{backendscript.myText}ที่กล่าวถึงข้างต้น) หน้า HTML จะรวมเข้ากับโค้ดเบสที่เหลือของคุณจริงๆ!
- มันจัดการรูปแบบโค้ดที่ซับซ้อนบนหน้า html ได้อย่างง่ายดาย
- คุณจำเป็นต้องรีเฟรชบางส่วนของหน้าด้วยการคลิกปุ่มง่ายๆ หรือไม่? เพิ่มคุณสมบัติการอัปเดตให้กับปุ่มของคุณ ตามด้วย ID ของส่วนประกอบที่คุณต้องการอัปเดต
- เกี่ยวกับการอัปเดตและเนื้อหาแบบไดนามิก: ฉันชอบความเรียบง่ายของ JSF มาก: ส่วนหน้าอัปเดตส่วนหลัง อัปเดตตัวเอง หรือส่วนหลังจะอัปเดตส่วนหน้า ทั้งหมดนี้เป็นข้อกำหนดพื้นฐานของเว็บแอปพลิเคชันและมีอยู่ที่นี่
- หากคุณต้องการให้ผู้ใช้สามารถดาวน์โหลดไฟล์หรือหลายไฟล์ที่มีเงื่อนไขสำหรับประเภทและขนาดไฟล์ เพียงเพิ่มหนึ่งบรรทัดในโค้ดที่มีพารามิเตอร์ที่ชัดเจน
- จำเป็นต้องสร้างเว็บไซต์ในหลายภาษาหรือไม่? เพิ่ม แท็ก <f:view>ให้กับ html ของคุณและรับภาษาของผู้ใช้โดยมีเพียงบรรทัดเดียวในแบ็กเอนด์
- คุณสามารถเพิ่มและผสมแท็ก HTML, สคริปต์ JS และ CSS ได้ และทั้งหมดนี้ได้รับการปรับให้เหมาะสมสำหรับ SEO
Primefaces: รายการส่วนประกอบและธีม JSF ฟรีจำนวนมาก
JSF มาพร้อมกับรายการส่วนประกอบที่พร้อมใช้งานจำนวนมากซึ่งสร้างส่วนคลาสสิกของหน้า html ดังนั้นคุณจึงไม่จำเป็นต้องทำเอง ตัวอย่างเช่น ใช้ แท็ก<h:dataTable>เพื่อสร้างตารางที่แสดงข้อมูลเฉพาะที่โหลดจากแบ็กเอนด์ของคุณ โดยไม่ต้องสร้างใหม่ตั้งแต่ต้น และมีตัวเลือกที่ดีกว่า: Prime Tek ได้พัฒนาชุดส่วนประกอบโอเพ่นซอร์สที่เรียกว่าPrimefaces มาพร้อมกับคุณสมบัติเพิ่มเติมและมีข้อดีหลายประการ ตัวอย่างเช่น แทนที่จะใช้ <h:dataTable> เพียงใช้แท็ก Primefaces <p:dataTable> ซึ่งจะสร้างตารางข้อมูลพื้นฐานที่คุณสามารถเพิ่มสวิตช์คอลัมน์คอลัมน์ไดนามิกหรือแก้ไขฟังก์ชันในตาราง ได้อย่างง่ายดายแต่ Java นั้นช้าและหนักใช่ไหม?
1. Java ช้าหรือไม่?
เลขที่ สิ่งที่ตลกก็คือเฟรมเวิร์ก JS เช่น React, Angular และ Vue ถูกสร้างขึ้นโดยสัญญาว่าจะเร็วกว่าและชาญฉลาดกว่า JSF ใน Java เพราะพวกเขาส่งตรรกะของแอปพลิเคชันทั้งหมดไปยังเบราว์เซอร์ของผู้เยี่ยมชมไซต์ทันที JSF ทำงานแตกต่างออกไป: เมื่อผู้ใช้เรียกเพจ (เช่น https://nocodefunctions.com) แอปพลิเคชันในส่วนแบ็กเอนด์จะสร้าง html สำหรับเพจนั้นเท่านั้นและส่งกลับ สิ่งนี้เรียกว่า “การเรนเดอร์ฝั่งเซิร์ฟเวอร์” (SSR) ในทางปฏิบัติ แอปพลิเคชันหน้าเดียวอาจใช้เวลานานมากสำหรับผู้ใช้ในการดึงข้อมูลและโหลดไฟล์จาวาสคริปต์ที่ประกอบขึ้นเป็นแอปพลิเคชันทั้งหมด สิ่งนี้อาจนำไปสู่ประสบการณ์การใช้งานที่ไม่ดี (ต้องรอโหลดหน้าแรก) และปัญหา SEO ด้วยเหตุนี้ การเรนเดอร์ฝั่งเซิร์ฟเวอร์สไตล์ Java จึงได้รับความนิยมอีกครั้ง เนื่องจากถือว่าเหนือกว่าการเรนเดอร์ฝั่งไคลเอ็นต์ในแง่ของความเร็วและประสิทธิภาพ เฟรมเวิร์ก SSRใหม่ กำลังเกิดขึ้น ซึ่งต้องการให้นักพัฒนาคุ้นเคยกับการเรนเดอร์ฝั่งไคลเอ็นต์เพื่อจัดการและผสมผสานตรรกะที่แตกต่างกันทั้งสองนี้2. Java ยากไหม?
เลขที่ สิ่งที่คุณต้องการในการปรับใช้แอปพลิเคชัน JSF:- แอปพลิเคชันนั้นเอง แอปพลิเคชัน JSF “hello world” แบบธรรมดาอาจมีขนาด 10KB หรือน้อยกว่า
- ทางเลือกคือ Primefaces (ตามที่กล่าวไว้ข้างต้น) หากคุณต้องการส่วนประกอบคุณภาพสูงกว่า นี่เป็นอีก 4.5 MB
-
มีเซิร์ฟเวอร์ในระบบคลาวด์หรือที่อื่น สำหรับเวอร์ชันทดสอบของ Nocodefunctions (https://test.nocodefunctions.com) ฉันใช้ Hetzner โดยที่ฉันเช่าเซิร์ฟเวอร์ Bare Metal ที่มี RAM 2 GB ในราคา 4.15 ยูโรต่อเดือน ฉันสามารถใช้ RAM น้อยลงได้ แต่แอปพลิเคชันของฉันให้บริการที่ต้องใช้ข้อมูลจำนวนมาก และจำเป็นต้องพอดีกับหน่วยความจำ nocodefunctions เวอร์ชันจริง (ไม่ใช่การทดสอบ) ทำงานบนเซิร์ฟเวอร์ขนาดใหญ่ (รวมถึง Hetzner ด้วย) เพื่อรองรับงานที่ต้องใช้ข้อมูลมากของผู้ใช้มากขึ้นในแบบคู่ขนาน - ในราคาต่ำกว่า 50 ยูโรต่อเดือน
-
คุณต้องติดตั้ง Java นี่เป็นการดาวน์โหลดไฟล์เดียวที่มีขนาดต่ำกว่า 200 MB สำหรับ Mac, Win หรือ Linux ซึ่งฟรีอย่างสมบูรณ์แม้ใช้ในเชิงพาณิชย์
-
คุณต้องมีเว็บเซิร์ฟเวอร์ Java เพื่อรัน เยอะมาก. โดยส่วนตัวแล้วฉันใช้ Payara Micro (Community Edition) ซึ่งฟรีและดาวน์โหลดไฟล์เดียวขนาด 77MB
-
เปิดแอปพลิเคชันของคุณ
GO TO FULL VERSION