최근 AppSignal에 "시작하기" 페이지를 추가하여 새로운 사용자에게 AppSignal 경험을 최대한 활용하는 데 도움이 되는 권장 단계가 포함된 페이지를 보여줍니다.
AppSignal을 시작할 때 도움을 받는 것을 좋아하는 사용자도 있고, 단독으로 제품을 살펴보는 것을 선호하거나 이미 AppSignal을 사용한 경험이 있는 사용자도 있습니다.
모든 사용자에게 안내 또는 단독 경험 옵션을 제공하기 위해 "시작하기" 페이지를 숨기고 표시하는 토글을 디자인했습니다.
도전
사용자에게 개인 설정 메뉴에서 "시작하기" 페이지를 전환할 수 있는 기능을 제공하는 것은 예상보다 조금 더 어려웠습니다. 그 이유는 "시작하기" 페이지가 React.js에 내장되어 있고 개인 설정 메뉴가 React 앱 외부에서 렌더링된 Rails 생성 템플릿이기 때문입니다.
우리는 이상적으로는 현재 상태에 대해 서버를 폴링하지 않고 Rails 생성 메뉴와 React 메뉴에서 토글 상태를 동기화하는 방법을 찾아야 했습니다.
해결책
비React 상호작용의 경우 AppSignal은 "Rails 방식"으로 StimulusJS를 사용합니다. , 애플리케이션 전체에 JavaScript 즐거움을 대화형으로 추가합니다.
우리는 StimulusJS 바닐라 JS가 잘 문서화되어 있고 JavaScript 경험이 있는 모든 Rails 개발자가 쉽게 채택할 수 있는 표준화된 구조를 가지고 있기 때문에 선택했습니다.
React.js와 StimulusJS의 동기화를 유지하기 위해 문서 본문에 전달되는 맞춤 이벤트를 만들었습니다. hide_getting_started를 연결하고 수신하도록 React 및 StimulusJS 설정을 구성했습니다. 이벤트.
StimulusJS에서
StimulusJS 컨트롤러가 연결되면 문서의 이벤트를 수신합니다. JavaScript를 깔끔하고 깔끔하게 유지하기 위해 연결이 끊어지면 이벤트 리스너를 제거합니다:
React.js에서
StimulusJS에서와 마찬가지로 React.js에서도 동일한 작업을 수행합니다. React.js 코드는 문서의 이벤트를 수신하고 연결이 끊어지면 이벤트 리스너를 제거합니다.
켜기, 끄기
이 설정을 사용하면 독립적인 React.js 및 StimulusJS 구현 모두에서 사용자 정의 이벤트를 생성하여 서로 상호 작용하고 항상 올바른 상태를 반영할 수 있습니다.
JavaScript의 가장 큰 장점은 다양한 프레임워크를 사용하는 우리와 같은 시나리오에서도 이벤트를 활용하여 React.js 또는 StimulusJS 구성 요소 및 컨트롤러 외부의 변경 사항을 처리할 수 있다는 것입니다.
이 간단하고 간단한 솔루션을 사용하면 DOM을 수정하거나 백엔드와 프런트엔드 간에 요청을 주고받는 더 복잡한 솔루션을 만들지 않고도 다양한 JavaScript 구현 간의 상태를 관리할 수 있습니다.
AppSignal을 사용하여 프런트엔드 JavaScript 모니터링
개발자가 개발자를 위해 만든 도구를 사용하여 애플리케이션의 JavaScript 프런트엔드를 모니터링하고 싶으십니까? 개발자들은 다음과 같은 이유로 모니터링을 즐겨 사용한다고 말합니다.
- 탐색하기 쉬운 직관적인 인터페이스
- 간단하고 예측 가능한 가격 책정
- 개발자 간 지원.
AppSignal을 처음 사용하신다면 무료 스트룹와플을 요청하는 것을 잊지 마세요! 애플리케이션의 모든 측정항목을 손끝에서 확인할 수 있는 느낌만큼 맛도 좋습니다 😉🍪
코너 제임스
AppSignal의 개발자 마케팅 관리자. 카놀리를 너무 좋아해서 이름을 코놀리로 바꾸는 것을 고려 중인 팟캐스트 중독자. 그는 색깔에 'u'가 있다고 생각합니다. 마이크 위에 있거나, 무대 위에 있거나, 근무 외 시간에 소파에 누워 있는 그를 볼 수 있습니다.
Connor James의 모든 기사
로버트 비크먼
공동 창립자로서 Robert는 우리의 첫 번째 커밋을 작성했습니다. 그는 또한 우리의 지원 역할 모델이며 코드의 작은 세부 사항에 대해 모두 알고 있습니다. 여행과 사진(동시에).
모든 기사:Robert Beekman