Gần đây, chúng tôi đã thêm trang "Bắt đầu" vào AppSignal. Trang này hiển thị cho người dùng mới một trang chứa đầy các bước được đề xuất nhằm giúp họ tận dụng tối đa trải nghiệm AppSignal của mình.
Một số người dùng thích được giúp đỡ khi bắt đầu với AppSignal, trong khi những người khác thích tự mình khám phá sản phẩm của chúng tôi hoặc đã có kinh nghiệm với AppSignal.
Để cung cấp cho tất cả người dùng tùy chọn trải nghiệm có hướng dẫn hoặc trải nghiệm một mình, chúng tôi đã thiết kế một nút chuyển đổi ẩn và hiển thị trang "Bắt đầu".
Thử thách
Việc cung cấp cho người dùng khả năng chuyển đổi trang "Bắt đầu" từ menu cài đặt cá nhân của họ khó khăn hơn bạn tưởng một chút. Đó là vì trang "Bắt đầu" được tích hợp trong React.js và menu cài đặt cá nhân là mẫu do Rails tạo được hiển thị bên ngoài ứng dụng React.
Chúng tôi phải tìm cách đồng bộ hóa trạng thái chuyển đổi trên các menu do Rails tạo và React, lý tưởng nhất là không thăm dò máy chủ về trạng thái hiện tại.
Giải pháp
Đối với các tương tác không có React của chúng tôi, AppSignal sử dụng StimulusJS theo "Rails way" , thêm những niềm vui JavaScript mang tính tương tác xuyên suốt ứng dụng của bạn.
Chúng tôi đã chọn StimulusJS vanilla JS vì nó có cấu trúc được tiêu chuẩn hóa được ghi chép đầy đủ và có thể dễ dàng được áp dụng bởi bất kỳ nhà phát triển Rails nào có một số kinh nghiệm về JavaScript.
Để giữ cho React.js và StimulusJS được đồng bộ hóa, chúng tôi đã tạo các sự kiện tùy chỉnh được gửi đi trên nội dung tài liệu. Chúng tôi đã định cấu hình thiết lập React và StimulusJS để kết nối và lắng nghe hide_getting_started của chúng tôi sự kiện.
Trong StimulusJS
Khi bộ điều khiển StimulusJS kết nối, chúng tôi sẽ lắng nghe các sự kiện trên tài liệu. Để giữ cho JavaScript gọn gàng và ngăn nắp, chúng tôi xóa trình xử lý sự kiện khi ngắt kết nối:
Trong React.js
Chúng tôi làm điều tương tự trong React.js cũng như trong StimulusJS. Mã React.js của chúng tôi lắng nghe các sự kiện trên tài liệu và xóa trình xử lý sự kiện khi ngắt kết nối:
Bật, tắt
Với thiết lập này, chúng tôi có thể phát ra các sự kiện tùy chỉnh từ cả quá trình triển khai React.js và StimulusJS độc lập của mình, cho phép chúng tương tác với nhau và luôn phản ánh trạng thái chính xác:
Điều tuyệt vời về JavaScript là ngay cả trong trường hợp như của chúng tôi, khi bạn sử dụng các khung khác nhau, bạn vẫn có thể sử dụng các sự kiện để xử lý các thay đổi bên ngoài các thành phần và bộ điều khiển React.js hoặc StimulusJS.
Giải pháp đơn giản và dễ hiểu này cho phép bạn quản lý trạng thái giữa các cách triển khai JavaScript khác nhau mà không cần sửa đổi DOM hay tạo một giải pháp phức tạp hơn gửi yêu cầu qua lại giữa back-end và front-end.
Giám sát JavaScript giao diện người dùng của bạn bằng AppSignal
Bạn có muốn giám sát giao diện người dùng JavaScript của ứng dụng của mình bằng một công cụ do nhà phát triển tạo ra dành cho nhà phát triển không? Các nhà phát triển cho biết họ thích sử dụng tính năng giám sát của chúng tôi vì chúng tôi có:
- Giao diện trực quan dễ điều hướng.
- Định giá đơn giản và có thể dự đoán được.
- Hỗ trợ giữa các nhà phát triển.
Nếu bạn mới sử dụng AppSignal, hãy nhớ yêu cầu chúng tôi cung cấp một số stroopwafels miễn phí! Chúng gần như ngon như bạn cảm thấy có tất cả số liệu của ứng dụng trong tầm tay 😉🍪
Connor James
Giám đốc tiếp thị dành cho nhà phát triển tại AppSignal. Người nghiện podcast yêu thích bánh cannoli đến mức đang cân nhắc việc đổi tên thành Connoli. Anh ấy nghĩ rằng có một chữ `u` có màu. Bạn có thể tìm thấy anh ấy trên mic, trên sân khấu hoặc nằm trên ghế sofa khi anh ấy không làm nhiệm vụ.
Tất cả bài viết của Connor James
Robert Beekman
Với tư cách là người đồng sáng lập, Robert đã viết ra cam kết đầu tiên của chúng tôi. Anh ấy cũng là hình mẫu hỗ trợ của chúng tôi và biết tất cả về những chi tiết nhỏ trong mã. Du lịch và chụp ảnh (cùng lúc).
Tất cả bài viết của Robert Beekman