เราเพิ่งเพิ่มหน้า "Getting started" ให้ AppSignal ซึ่งแสดงหน้าเต็มไปด้วยขั้นตอนแนะนำเพื่อช่วยให้ผู้ใช้ใหม่ได้ประโยชน์สูงสุดจากประสบการณ์ AppSignal ของพวกเขา
บางผู้ใช้ชอบมี helping hand เมื่อเริ่มต้นกับ AppSignal ในขณะที่อีกกลุ่มชอบสำรวจ product ของเรา solo หรือมีประสบการณ์กับ AppSignal แล้ว
เพื่อให้ผู้ใช้ทุกคนมีตัวเลือก guided หรือ solo experience เราออกแบบ toggle ที่ซ่อนและแสดงหน้า "Getting started"
The Challenge (ความท้าทาย)
การให้ผู้ใช้สามารถ toggle หน้า "Getting started" จาก personal settings menu ของพวกเขา ท้าทายกว่าที่คุณคิด นั่นเพราะหน้า "Getting started" สร้างด้วย React.js ในขณะที่ personal settings menu เป็น Rails-generated template ที่ rendered นอก React app
เราต้องหาวิธี sync toggle state บน Rails-generated และ React menus โดยที่ไม่ต้อง polling server สำหรับ current state โดยที่สุด
The Solution (วิธีแก้)
สำหรับ non-React interactions ของเรา AppSignal ใช้ StimulusJS ใน "Rails way" เพิ่ม interactive sprinkles ของ JavaScript joy ทั่วแอปพลิเคชันของคุณ
เราเลือก StimulusJS vanilla JS เพราะมันมี standardized structure ที่ documented ดี และสามารถ adopted ได้ง่ายโดย Rails developer ใดๆ ที่มีประสบการณ์ JavaScript บ้าง
เพื่อให้ React.js และ StimulusJS ใน sync เราสร้าง custom events ที่ dispatched บน document body เรากำหนดค่า React และ StimulusJS setups ของเราให้ connect และ listen สำหรับ events hide_getting_started ของเรา
ใน StimulusJS
เมื่อ StimulusJS controller connects เรา listen events บน document เพื่อให้ JavaScript เรียบร้อย เราลบ event listener เมื่อ disconnect:
ใน React.js
เราทำสิ่งเดียวกันใน React.js เหมือนใน StimulusJS โค้ด React.js ของเรา listen สำหรับ events บน document และลบ event listener เมื่อ disconnect:
Toggle On, Toggle Off
ด้วย setup นี้ เราสามารถ emit custom events จากทั้ง independent React.js และ StimulusJS implementations ของเรา ทำให้พวกมัน interact กับกัน และสะท้อน state ที่ถูกต้องเสมอ:
สิ่งยอดเยี่ยมเกี่ยวกับ JavaScript คือแม้ใน scenario เหมือนเรา ที่คุณใช้ frameworks ต่างๆ คุณสามารถใช้ events เพื่อจัดการการเปลี่ยนแปลงนอก React.js หรือ StimulusJS components และ controllers ของคุณ
วิธีแก้ที่ simple และ straightforward นี้ช่วยให้คุณจัดการ state ระหว่าง JavaScript implementations ต่างๆ ได้ โดยไม่ต้อง modify DOM หรือสร้าง solution ที่ซับซ้อนกว่านั้น ที่ส่ง requests ไปมาระหว่าง back-end และ front-end
Monitor Front-end JavaScript ของคุณด้วย AppSignal
คุณอยาก monitor JavaScript front-end ของแอปพลิเคชันด้วยเครื่องมือที่สร้างโดย developers, สำหรับ developers ไหม? Developers บอกว่าพวกเขาชอบใช้ monitoring ของเราเพราะเรามี:
- อินเทอร์เฟซที่เข้าใจง่ายและนำทางสะดวก
- ราคาที่เรียบง่ายและคาดการณ์ได้
- Developer-to-developer support
หากคุณใหม่กับ AppSignal จำได้ว่าให้ขอ free stroopwafels บางส่วนจากเรา! พวกมันอร่อยเกือบเท่ากับการมี metrics ทั้งหมดของแอปพลิเคชันอยู่ที่นิ้วมือ 😉🍪
Connor James
Developer Marketing Manager ที่ AppSignal ผู้ติดพอดแคสต์ รัก cannoli จนคิดจะเปลี่ยนชื่อเป็น Connoli เขาคิดว่ามีตัว 'u' ในคำว่า color คุณอาจพบเขาบนไมค์ บนเวที หรือนอนบนโซฟาเมื่อเขาออฟดิวตี้
บทความทั้งหมดโดย Connor James
Robert Beekman
ในฐานะ co-founder Robert เขียน first commit ของเรา เขายังเป็น support role-model ของเรา และรู้รายละเอียดเล็กๆ ในโค้ด ทั้งเดินทางและถ่ายรูป (พร้อมกัน)
บทความทั้งหมดโดย Robert Beekman
