ทรัพยากรใหม่สำหรับนักออกแบบและพัฒนาเว็บ (มกราคม 2018)

ปีใหม่ปี 2018 อยู่ที่นี่ ถ้าเราดูความคืบหน้าในการพัฒนาเว็บเมื่อห้าปีที่แล้วมันแตกต่างอย่างสิ้นเชิงกับสิ่งที่เรามีในปัจจุบัน วันนี้มีของใหม่ วิธีการเครื่องมือและแม้แต่กระบวนทัศน์ใหม่ทั้งหมด ที่เปลี่ยนวิธีการที่เราสร้างเว็บไซต์ในวันนี้ - และ VirtualDOM เป็นหนึ่งในนั้น.

DOM (Document Object Model) คือ โมเดลต้นไม้ที่กำหนดโครงสร้างของเว็บไซต์. การเลือกการสำรวจและจัดการ DOM อาจเป็นการเลือกที่แพงมากและอาจ ขัดขวางประสิทธิภาพการแสดงผลเว็บไซต์ของคุณ.

อย่างไรก็ตามในโพสต์นี้เราจะไม่พูดถึงการทำงานของ VirtualDOM แทนพร้อมกับเครื่องมืออื่น ๆ เราจะพิจารณา ไลบรารีที่อนุญาตให้คุณใช้งาน VirtualDOM ทันที ตรวจสอบพวกเขาออก.

MaquetteJS

การใช้งานของ VirtualDOM ที่ช่วยให้คุณสามารถสร้างส่วนต่อประสานกับผู้ใช้ที่มีการอัปเดตด้วยข้อมูลที่อยู่รอบตัว มันเป็นจาวาสคริปต์ที่บริสุทธิ์และ unopiniated ห้องสมุดจึงเป็นไปได้ที่จะ ใช้พร้อมกับภาษาสังเคราะห์เช่น CoffeeScript, TypeScript และ JSX. ห้องสมุดทางเลือกที่ยอดเยี่ยมเพื่อ React.js; MaquetteJS มีขนาดเล็กกว่ามาก (เฉพาะ 3KB) เปรียบเทียบ.

ReDOM

นี่เป็นหนึ่งในห้องสมุด VirtualDOM ที่ฉันชอบเพราะง่ายต่อการรับเพียงแค่ดูที่ไวยากรณ์. ด้วยเพียง 2Kb, คุณสามารถสร้างเว็บเพจที่แสดงผลเร็วหรือองค์ประกอบ HTML ที่กำหนดเองได้ ห้องสมุดประกอบด้วย สองฟังก์ชั่นหลัก เอล, เพื่อสร้างหรือจัดการองค์ประกอบ, และ ภูเขา เพื่อเพิ่มลงในองค์ประกอบที่เลือก คุณสามารถโหลดได้ในเบราว์เซอร์และฝั่งเซิร์ฟเวอร์ด้วย NodeJS.

ReactiveJS

เทมเพลต ไลบรารี UI เพื่อสร้างเว็บแอปพลิเคชันที่มีการโต้ตอบสูง. เดิมทีสร้างขึ้นสำหรับ TheGuardian นั้น ReactiveJS นั้นถูกสร้างขึ้นเพื่อใช้งานกับเบราว์เซอร์และอุปกรณ์พกพา เพื่อให้คุณสามารถพึ่งพาความน่าเชื่อถือของมัน ReactiveJS ยังมาพร้อมกับ คุณสมบัติมากมายที่จำเป็นสำหรับเว็บแอปพลิเคชั่นที่ทันสมัยออกมาทันที, เช่น Scoped CSS, Custom Components, SVG และแอนิเมชัน.

RiotJS

RitoJS เป็นที่พอใจในการทำงานกับและง่ายต่อการเรียนรู้ห้องสมุดสำหรับผู้เริ่มต้นตามที่ อนุญาตให้กำหนดองค์ประกอบที่กำหนดเองด้วยองค์ประกอบ HTML และแอตทริบิวต์ HTML ในขณะที่ห้องสมุดก่อนหน้านี้จะบังคับให้ใช้ไวยากรณ์ JavaScript ที่แท้จริง.

RiotJS เข้ากันได้กับสภาพแวดล้อม Node.js หรือในเบราว์เซอร์และอาจเป็น ทางเลือกที่ยอดเยี่ยมสำหรับ Vue.js คือสิ่งที่คล้ายคลึงกัน.

HyperHTML

hyperHTML, เป็นชื่อที่แสดงถึง, คุณสมบัติประสิทธิภาพเมื่อแสดงผลและจัดการ DOM. คุณสามารถใช้มันเพื่อสร้างองค์ประกอบที่กำหนดเองและองค์ประกอบของเว็บ มันใช้งานง่ายเหมือน jQuery ที่สามารถใช้ในเบราว์เซอร์ได้ โหลดสคริปต์จาก CDN และเข้าถึง hyperHTML. ไม่จำเป็นต้องมีความซับซ้อน การขับรถ.

มิ ธ ริล

เท่อย่างที่มันฟังมิ ธ ริลเป็น ห้องสมุด JavaScript ที่มีประสิทธิภาพ. นอกเหนือจาก VirutalDOM และส่วนประกอบแล้ว Mithril ยังติดตั้ง Routing และ XHR ด้วย คุณสามารถสร้างเว็บแอปพลิเคชันหน้าเดียวโดยไม่ต้องพึ่งพาไลบรารีอื่น ๆ. เกณฑ์มาตรฐานแสดงให้เห็นว่ามันมีประสิทธิภาพสูงกว่าห้องสมุดยอดนิยมบางแห่งเช่น Vue.js, React.js และ Angular.

SlimJS

SlimJS เป็นไลบรารี JavaScript สำหรับ สร้างองค์ประกอบเว็บที่กำหนดเองโดยใช้ Native Web Component API. เนื่องจากมันถูกสร้างขึ้นโดยรอบส่วนประกอบเบราว์เซอร์ดั้งเดิม SlimJS ติดตั้ง polyfill ซึ่งกำหนด API ในเบราว์เซอร์ที่ยังไม่รองรับ. มันเป็นกรอบที่ดีถ้าคุณต้องการที่จะใช้วิธีการดั้งเดิม.

VSVG

แม้ว่ามันจะมีรูปแบบคล้ายกับ HTML แต่ SVG ก็เป็นสัตว์ร้ายอีกชนิดหนึ่งที่มีนิสัยแปลก ๆ ไลบรารีนี้ตามชื่อแนะนำจะ ช่วยให้คุณสร้างและจัดการ SVG ได้ทันที.

EmotionSH

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

ตอบโต้ Starter Kit

หากคุณได้ติดตามเว็บในช่วงสองสามปีที่ผ่านมาคุณจะพบกับการตอบสนอง (เกือบ) ทุกที่ มันคือ หลักสูตรวิดีโอสั้น 5 หลักสูตรที่แนะนำ React. หากคุณต้องการติดตามอุตสาหกรรมเหล่านี้อาจเป็นสถานที่ที่เหมาะสมในการเริ่มต้น.

องค์ประกอบ

องค์ประกอบคือชุดของ ส่วนประกอบ iOS เพื่อสร้างต้นแบบแอป iOS ใน Sketch. มันสร้างโดยคนโดย Sketch และอัปเดตด้วย iPhone X UI.

Modaal

Modaal เป็นห้องสมุด JavaScript ที่สร้างขึ้นโดยคำนึงถึงความน่าเชื่อถือ มันเคยเป็น ตรวจสอบแล้วสำหรับ “การสนับสนุน WCAG 2.0 ระดับ AA” ที่ (ฉันคิดว่า) มากที่สุด สามารถเข้าถึงได้ “เป็นกิริยาช่วย” ห้องสมุดวันนี้ มัน น้ำหนักเบารองรับ jQuery และสามารถใช้กับรูปภาพวิดีโอและแม้แต่ Instagram. นอกจากนี้หลักสูตรระยะสั้นจาก Google นี้จะช่วยให้คุณเริ่มต้นใช้งานการเข้าถึงเว็บและเหตุผลที่สำคัญ.

WordPressify

แพคเกจ NPM ที่ช่วยให้คุณได้รับการพัฒนาสภาพแวดล้อม WordPress และทำงานในไม่กี่นาที ทุกอย่างพร้อมแล้ว เครื่องมือที่ทันสมัยเช่น Gulp, LiveReload, PostCSS, Babel เพื่อให้คุณสามารถมุ่งเน้นการพัฒนาโครงการของคุณค่อนข้างปรับแต่งการตั้งค่า.

ลันโด

Lando ยังเป็นเครื่องมือที่มีประโยชน์ในการพัฒนาสภาพแวดล้อมการพัฒนาอย่างรวดเร็วและง่ายดาย WordPressify ที่เราเพิ่งกล่าวถึงข้างต้น แต่แทนที่จะใช้ Node.js ข้อได้เปรียบของนักเทียบท่าการบรรจุตู้ที่มีน้ำหนักเบา เทคโนโลยีและมีความยืดหยุ่นมากขึ้นในแง่ของสแต็คที่คุณต้องการใช้ในการพัฒนาของคุณ.

ตัวอย่างเช่นคุณสามารถ ระบุรุ่น PHP เปิดใช้งาน XDebug และติดตั้งนักแต่งเพลง.

WP-Docklines

WP-Docklines เป็น คอลเลกชันของรูปภาพที่คุณสามารถใช้เป็นพื้นฐานในการดำเนินการรวมและจัดส่งอย่างต่อเนื่อง สำหรับธีม WordPress และลูกเล่นในการบริการเช่น Bitbucket, CircleCI และ Gitlab ภาพแต่ละภาพนั้นมาพร้อมกับ เครื่องมือที่จำเป็นทั่วไปเมื่อพัฒนา WordPress เช่น PHP Code Sniffer, PHPUnit และ WP-CLI.

WP-Locker

WP-Locker เป็นตัวตั้งค่า Docker Compose เพื่อหมุนสภาพแวดล้อมการพัฒนา WordPress ในเวลาไม่กี่นาที มันคือ ตั้งค่าด้วย Apache, MySQL และ phpMyAdmin และเนื่องจากมันขยายภาพ WP-Docklines มันจึงมีเครื่องมือพิเศษในภาพนอกกรอบ.

ง่ายดาย ชนิด bin / เริ่มต้น เพื่อปล่อยให้กำหนดค่า localhost และติดตั้งปลั๊กอิน และธีมที่คุณกำหนดค่าไว้ในไฟล์กำหนดค่า.

Docusaurus

โครงการโอเพนซอร์สอื่นจาก Facebook, Docusaurus เป็นเครื่องมือในการสร้างเว็บไซต์เอกสารของโครงการของคุณ. สร้างด้วย React และ Markdown คุณสามารถเขียนเอกสารดูแลรักษาและแม้แต่สร้างบล็อกสำหรับเว็บไซต์ของคุณและ เผยแพร่ไปยัง Github Pages.

VSCode Yo

Yeoman เป็นแพ็คเกจโหนดที่ช่วยให้คุณเริ่มโครงการได้อย่างรวดเร็ว การเลือกนั่งร้านสำเร็จรูปที่เหมาะกับโครงการของคุณ. หากคุณใช้รหัส Visual Studio ปลั๊กอินนี้จะปรับปรุงเวิร์กโฟลว์การเริ่มต้นให้ดียิ่งขึ้นตามที่คุณสามารถทำได้ เรียกใช้ “โย่” คำสั่งจากหน้าต่าง Visual Studio Code.

BluebirdJS

ไลบรารี JavaScript ที่ อนุญาตให้คุณใช้ คำมั่นสัญญา, รอคอย, async วันนี้ในเบราว์เซอร์ทั้งหมด; บอกว่ามันใช้งานได้แม้ใน Netscape. คำมั่นสัญญา เป็นหนึ่งในจุดที่แข็งแกร่งที่สุดในข้อกำหนด JavaScript ล่าสุดที่จะ ทำให้โค้ดของคุณผอมลงสามารถอ่านได้และบำรุงรักษาได้ง่าย.

สวย

Prettier เป็นเครื่องมือในการ จัดรูปแบบรหัสของคุณเพื่อให้สอดคล้องกับมาตรฐานการเข้ารหัสของภาษา. มันจะเขียนโค้ดของคุณใหม่จาก scracth ตามกฎที่อนุญาตให้คุณและทีมของคุณเป็น มีประสิทธิภาพมากขึ้นแทนการโต้วาทีมากกว่ารูปแบบการเขียนรหัส.