Stimulus.js 소개

웹은 매우 빠르게 움직이며 1년 안에 합리적으로 느껴질 프론트엔드에 대한 접근 방식을 선택하는 것은 까다롭습니다. 개발자로서 나의 가장 큰 두려움은 한동안 건드리지 않은 프로젝트를 선택하고 그들이 사용한 접근 방식에 대한 문서를 찾는 것이 존재하지 않거나 온라인에서 쉽게 찾을 수 없다는 것입니다.

약 1년 전 Stimulus를 사용하기 시작했고 코드를 제공하는 데 정말 만족했습니다. 앱 내에서 재사용 가능한 작은 JavaScript를 권장하는 ~30kb 라이브러리 로, 연결되어 있는 JavaScript를 찾을 수 있는 위치에 대해 액세스 가능한 HTML에 약간의 힌트를 남기는 방식으로 구성되어 있습니다. JavaScript 조각이 의사 코드를 읽는 것처럼 페이지와 상호 작용하는 방식을 이해할 수 있습니다.

Stimulus는 Basecamp 팀이 최근에 HEY 이메일 서비스를 출시하여 웹 애플리케이션용으로 작성한 JavaScript를 유지 관리하는 데 도움을 주기 위해 만들었습니다. 역사적으로 Basecamp는 오픈 소스 프로젝트를 유지 관리하는 데 상당히 능숙했기 때문에 Stimulus가 철저히 테스트되었으며 향후 몇 년 동안 유지 관리될 것이라고 확신합니다.

Stimulus 덕분에 재사용 가능하고 접근하기 쉬운 방식으로 애플리케이션을 구축할 수 있었습니다. Stimulus가 React 및 Vue처럼 웹을 인수할 것이라고는 생각하지 않지만 배울 가치가 있는 도구라고 생각합니다.

술어

모든 프레임워크와 마찬가지로 Stimulus에는 특정 항목을 설명하는 데 선호하는 용어가 있습니다. 운 좋게도(그리고 내가 Stimulus를 좋아하게 된 주된 이유 중 하나), 다음 두 가지만 알아야 합니다.

• 제어 장치
  이것은 애플리케이션의 빌딩 블록인 JavaScript 클래스의 인스턴스를 나타냅니다. Stimulus Controller에 대해 이야기할 때 JavaScript 클래스에 대해 이야기하는 것이 안전합니다.
• 식별자
  이것은 Stimulus 코드베이스에 공통적인 데이터 속성을 사용하여 HTML에서 컨트롤러를 참조하는 데 사용할 이름입니다.
  

자극에 뛰어들자!

다음 몇 가지 예에서는 unpkg.com을 통해 배포된 라이브러리를 통해 바로 시작할 수 있도록 브라우저에 드롭할 수 있는 코드를 사용할 것입니다. 나중에는 코드 구성을 개선할 수 있고 Stimulus Handbook에서 사용되는 접근 방식이기 때문에 매우 권장되는 webpack 접근 방식을 다룰 것입니다.

상용구

위 스니펫의 요지를 이해하면 Stimulus를 사용하는 프로젝트를 쉽게 선택할 수 있는 지식을 갖게 됩니다.

꽤 굉장하죠? 모든 작업에 뛰어들자!

application.start

이 줄은 페이지에 리스너를 추가하도록 Stimulus에 지시합니다. Stimulus 코드를 추가하기 전에 페이지 상단에서 한 번만 호출하면 연결하려는 클래스에 대해 Stimulus에 알리는 데 사용되는 메서드 register 가 포함된 기본 Stimulus 컨트롤러의 인스턴스가 반환됩니다. 그것에.

컨트롤러

data-controller 속성은 HTML 요소를 JavaScript 클래스의 인스턴스에 연결합니다. 이 경우 "counter"라는 식별자를 사용하여 CounterController JavaScript 클래스의 인스턴스를 div 요소에 연결했습니다. 우리는 application.register 메소드를 통해 이 식별자와 컨트롤러 간의 연결에 대해 Stimulus에 알렸습니다.

Stimulus는 이 속성을 가진 요소가 추가 및 제거될 때 페이지를 지속적으로 모니터링합니다. data-controller 속성이 있는 페이지에 새로운 HTML 조각이 추가되면 관련 컨트롤러 클래스의 새 인스턴스를 초기화한 다음 HTML 요소를 연결합니다. 페이지에서 해당 요소를 제거하면 컨트롤러 클래스에서 disconnect 메서드가 호출됩니다.

행위

Stimulus는 데이터 속성 data-action 을 사용하여 컨트롤러의 어떤 기능이 실행될 것인지 명확하게 정의합니다. event->controller#function 구문을 사용하면 HTML을 읽는 모든 사람이 HTML이 하는 일을 볼 수 있습니다. 이것은 다른 파일에서 예기치 않은 코드의 위험을 줄여 코드베이스를 더 쉽게 탐색할 수 있도록 하므로 특히 유용합니다. Stimulus가 권장하는 접근 방식을 처음 보았을 때 의사 코드를 읽는 것처럼 느껴졌습니다.

위의 예에서 버튼이 "클릭" 이벤트를 발생시키면 "카운터" 컨트롤러 내의 addOne 함수로 전달됩니다.

대상

대상은 컨트롤러에서 사용할 수 있는 요소를 명시적으로 정의하는 방법입니다. 역사적으로 저는 이를 달성하기 위해 ID, CSS 클래스 이름 및 데이터 속성을 혼합하여 사용했습니다. 따라서 "이것이 수행하는 방법입니다."라는 단일 항목을 사용하면 코드의 일관성이 훨씬 높아집니다.

이렇게 하려면 targets 함수를 통해 컨트롤러 클래스 내에서 대상 이름을 정의하고 data-target 을 통해 요소에 이름을 추가해야 합니다.

이 두 부분을 설정하면 컨트롤러에서 요소를 사용할 수 있습니다. 이 경우에 "출력"이라는 이름으로 대상을 설정했으며 컨트롤러의 함수 내에서 this.outputTarget 으로 액세스할 수 있습니다.

중복 대상

이름이 같은 대상이 여러 개인 경우 대상 메서드의 복수 버전을 사용하여 대상에 액세스할 수 있습니다. 이 경우 this.outputTargets 를 호출하면 data-target="hello.output" 속성이 있는 두 div가 모두 포함된 배열이 반환됩니다. data-target="hello.output" .

이벤트 유형

JavaScript 메소드 addEventListener를 통해 일반적으로 첨부할 수 있는 이벤트를 수신합니다. 예를 들어 버튼을 클릭했을 때, 양식이 제출되거나 입력이 변경될 때를 들을 수 있습니다.

window 또는 document 이벤트(크기 조정 또는 사용자가 오프라인 상태가 되는 등)를 수신하려면 event 유형에 "@window" 또는 "@document"를 추가해야 합니다(예: resize@window->console#logEvent 는 다음을 호출합니다. 창 크기가 조정될 때 console 컨트롤러에서 함수 logEvent ).

이벤트 유형을 생략할 수 있고 요소 유형에 대한 기본 조치가 있는 공통 이벤트를 첨부하는 약식 방법이 있습니다. 그러나 Stimulus에 익숙하지 않은 사람이 코드에 대해 해야 하는 가정의 양이 증가하므로 이벤트 약식을 사용하는 것을 강력히 권장하지 않습니다.

동일한 요소에서 여러 컨트롤러 사용

꽤 자주 두 개의 논리 조각을 별도의 클래스로 나누기를 원할 수 있지만 HTML 내에서 서로 가깝게 나타나도록 합니다. Stimulus를 사용하면 HTML 내에서 두 클래스에 대한 참조를 배치하여 요소를 여러 클래스에 연결할 수 있습니다.

위의 예에서 바구니에 있는 총 항목 수를 계산하는 것과 관련된 basket 개체를 설정했지만 항목당 가방 수를 표시하는 child 개체도 추가했습니다.

개체에 데이터 전달

Stimulus는 컨트롤러 클래스 내에서 this.data.get 및 this.data.set 메서드를 제공하므로 식별자와 동일한 네임스페이스 내에 있는 데이터 속성을 변경할 수 있습니다. 즉, HTML에서 자극 컨트롤러로 데이터를 전달하려는 경우 HTML 요소에 data-[identifier]-a-variable 과 같은 속성을 추가하기만 하면 됩니다.

this.data.set 을 호출하면 브라우저 개발 도구를 사용하여 요소를 검사할 때 값 변경을 볼 수 있도록 HTML의 값이 업데이트됩니다.

네임스페이스 데이터 속성을 사용하는 것은 어떤 데이터 속성이 어떤 코드에 해당하는지 명확하게 하는 데 도움이 되는 정말 좋은 방법입니다.

초기화, 연결됨, 연결 해제됨

애플리케이션이 성장함에 따라 기본값을 설정하거나, 데이터를 가져오거나, 실시간 통신을 처리하기 위해 '수명 주기 이벤트'에 연결해야 할 수도 있습니다. Stimulus에는 Stimulus 클래스의 수명 주기 동안 호출되는 세 가지 기본 제공 메서드가 있습니다.

Stimulus가 일치하는 data-controller 속성을 가진 요소를 보면 컨트롤러의 새 버전을 만들고 initialize 기능을 호출합니다. 이것은 페이지를 처음 로드할 때 종종 실행되지만 컨트롤러에 대한 참조가 포함된 페이지에 새 HTML을 추가하려는 경우(예: AJAX를 통해) 실행될 수도 있습니다. DOM 내의 새 위치로 요소를 이동하면 실행되지 않습니다.

클래스가 초기화된 후 Stimulus는 이를 HTML 요소에 연결하고 connect 기능을 호출합니다. DOM 내에서 요소를 이동하려는 경우에도 connect 을 호출합니다. 따라서 요소를 가져 와서 한 요소에서 제거한 다음 다른 곳에 추가하면 connect 만 호출된다는 것을 알 수 있습니다.

disconnect 기능은 페이지에서 요소를 제거할 때 실행됩니다. 따라서 예를 들어 HTML의 본문을 바꾸려는 경우 요소가 파일에 없으면 다시 실행해야 할 수 있는 모든 코드를 분해할 수 있습니다. 같은 위치. 예를 들어 요소에 많은 추가 HTML을 추가하는 멋진 WYSIWYG 편집기가 있는 경우 disconnect 가 호출될 때 원래 상태로 되돌릴 수 있습니다.

상속 기능

경우에 따라 Stimulus 컨트롤러 간에 약간의 공통 기능을 공유하고 싶을 수 있습니다. Stimulus의 멋진 점은 (내부에서) 약간의 바닐라 JavaScript 클래스를 HTML 요소에 연결하므로 공유 기능이 친숙하게 느껴질 것입니다.

이 예제에서는 ParentController 라는 이름의 부모 클래스를 설정한 다음 ChildController 라는 자식 클래스에 의해 확장됩니다. 이렇게 하면 ParentController 에서 메서드를 상속할 수 있으므로 내 ChildController 내에서 코드를 복제할 필요가 없습니다.

프로덕션에서 사용하기

나는 위의 Stimulus를 사용하는 방법에 대한 꽤 독립적인 몇 가지 예를 보여 주었는데, 이를 통해 달성할 수 있는 것을 맛볼 수 있습니다. 또한 프로덕션에서 사용하는 방법과 나에게 효과가 있었던 방법에 대해 언급해야 한다고 생각했습니다.

웹팩

Webpack을 사용하고 계시다면 좋은 기회가 될 것입니다! Stimulus는 완전히 Webpack과 함께 사용하도록 만들어졌습니다. 그들의 문서에는 Webpack을 위한 멋진 스타터 키트도 있습니다. 컨트롤러를 별도의 파일로 나눌 수 있으며 Stimulus는 식별자로 사용할 올바른 이름을 결정합니다.

Stimulus를 사용하려는 경우 webpack을 사용할 필요는 없지만 경험을 정리합니다. 개인적으로 Stimulus는 Webpack을 소개하고 웹팩이 제공하는 가치를 실제로 느끼는 데 도움이 된 라이브러리였습니다.

파일 이름 규칙

이 기사의 도입부에서 Stimulus를 사용하는 것이 조직적으로 느껴졌기 때문에 즐겨 사용했다고 언급했습니다. 이것은 컨트롤러의 자동 로딩 및 등록을 가능하게 하는 Webpack과 결합할 때 정말 분명해집니다.

Webpack에서 Stimulus를 설정하고 나면 [identifier]_controller.js 와 같은 파일 이름을 지정하는 것이 좋습니다. 여기서 식별자는 HTML data-controller 속성에 전달할 것입니다.

프로젝트가 성장함에 따라 Stimulus 컨트롤러를 하위 폴더로 옮기고 싶을 수도 있습니다. 마법 같은 방법으로 Stimulus는 밑줄을 대시로 변환하고 폴더 슬래시를 두 개의 대시로 변환하여 식별자가 됩니다. 예를 들어, 파일 이름 chat/conversation_item_controller.js 는 chat--conversation-item 식별자를 갖습니다.

적은 JavaScript 유지

제가 가장 좋아하는 인용문 중 하나는 "최고의 코드는 코드가 없는 것입니다"입니다. 저는 이 접근 방식을 모든 프로젝트에 적용하려고 합니다.

웹 브라우저는 많이 발전하고 있습니다. 저는 오늘 JavaScript를 작성하는 데 필요한 대부분의 것들이 표준화되어 향후 5년 이내에 브라우저에 포함될 것이라고 확신합니다. 이에 대한 좋은 예는 details 요소입니다. 처음 개발을 시작했을 때 jQuery를 사용하여 해당 기능을 수동으로 코딩해야 하는 것이 매우 일반적이었습니다.

그 결과, "오늘은 할 일이지만 5년 후에는 이것을 쉽게 교체하고 싶다"는 마음가짐으로 JavaScript를 약간 뿌려 접근 가능한 HTML을 작성할 수 있다면 개발자. 이것은 Stimulus가 도움이 되는 적은 양의 코드를 작성했을 때 훨씬 더 달성할 수 있습니다.

HTML 먼저, 그 다음 JavaScript

Stimulus가 권장하는 접근 방식에 대해 제가 정말 좋아하는 한 가지 측면은 사용자에게 HTML을 전송하는 데 집중할 수 있다는 것입니다. 그러면 JavaScript로 약간 조정됩니다.

나는 항상 사용자 앞에서 내가 공유해야 하는 것을 얻기 위해 사용자의 주의를 처음 몇 밀리초 동안 사용하는 팬이었습니다. 그런 다음 사용자가 보고 있는 것을 처리하기 시작할 수 있는 동안 상호 작용 계층을 설정하는 것을 걱정해야 합니다.

또한 JavaScript가 어떤 이유로든 실패하더라도 사용자는 JavaScript 없이 계속 컨텐츠를 보고 상호작용할 수 있습니다. 예를 들어 AJAX를 통해 양식을 제출하는 대신 페이지를 다시 로드하는 기존 양식 요청을 통해 제출합니다.

결론

저는 사용자 경험을 향상시키기 위해 유지 관리 가능한 JavaScript를 약간만 필요로 하는 사이트를 구축하는 것을 좋아합니다. 때로는 더 단순하게 느껴지는 것을 구축하는 것이 좋습니다. 가벼운 것이 좋습니다. 너무 많은 인지 부하 없이 파일을 구성하는 방법이 매우 명확하고 JavaScript가 HTML 조각으로 실행되는 방법에 대해 암시하는 작은 이동 경로를 설정하는 것이 정말 좋습니다.

저는 Stimulus와 함께 일하는 것이 정말 즐거웠습니다. 너무 많지 않으므로 학습 곡선이 상당히 완만합니다. 내 코드를 다른 사람에게 전달하면 그들은 행복한 개발자가 될 것이라고 확신합니다. 순수한 호기심이더라도 시도해 볼 것을 적극 권장합니다.

방의 코끼리는 React 및 Vue와 비교하여 스택이 어떻게 쌓이는가지만 제 생각에는 다른 요구 사항에 대한 다른 도구입니다. 제 경우에는 종종 서버에서 HTML을 렌더링하고 경험을 개선하기 위해 약간의 JavaScript를 추가하고 있습니다. 더 복잡한 작업을 수행하고 있다면 다른 접근 방식을 고려할 것입니다(또는 코드를 단순하게 유지하는 데 도움이 되도록 요구 사항을 다시 적용).

추가 읽기

• 스티뮬러스 홈페이지
  그들은 내가 위에서 설명한 개념을 훨씬 더 깊이 있게 설명하는 환상적인 핸드북을 가지고 있습니다.
• 자극기 GitHub 저장소
  Stimulus의 코드를 살펴봄으로써 Stimulus가 작동하는 방식에 대해 많은 것을 배웠습니다.
• 자극 치트 시트
  한 페이지에 요약된 핸드북.
• 자극 포럼
  Stimulus로 작업하는 다른 사람들을 보니 정말 야생에서 사용되고 있는 것 같은 기분이 들었습니다.