Turbolinks와 진행률 표시줄을 결합하여 개발이 상당히 순조롭다

Deprecated

터보링크s2.5.2부터 터보링크스 호스트에 진행률 표시줄 기능이 추가돼 일반적으로 이용되기 때문이다.3.0.0부터 기본적으로 사용될 것으로 예상됩니다.
자세한 내용은 TurbolinksREADME를 참조하십시오.

nprogress-rails

당사 서비스BOOTH.pm에서 @geta6 가능하므로 공유

Rails View의 gem

에 진행률 막대를 간단히 추가할 수 있음

Youtube like의 진행률 표시줄

터보링크스와 투연성이 좋다

Youtube 진행률 표시줄

Turbolinks를 사용하여 자주 발생하는 문제

Turbolinks를 사용할 때 Turbolinks에서 이동할지 페이지 전환할지 모른다

Javascript로 이벤트를 쓸 때 ready인지 page:load인지 깨닫는 것이 매우 번거롭기 때문이다.

Turbolinks로 이동할 때 Ajax에 시간이 걸리면 처리가 멈추는 것처럼 보입니다.

진행률 표시줄 추가

Turbolinks 변환 시 진행률 표시줄을 표시하고 그렇지 않으면 표시하지 않습니다

.

사용자에 대한 처리가 가시화되어 처리가 중단된 거죠?이런 불안은 어느 정도 경감될 수 있다.

개발자에게 이런 변화는 터보링크스이고 시각적으로 이런 변화는 그렇지 않다

내부 처리

페이지:fetch에서 진도표 시작

page:change를 통해서만 진도표를 종료

는 매우 간단한 처리

Tips

진도표가 어느 정도 전진하고 완성되기 전에 페이지를 전환하는 경우 터보링크에서 정확하게 이전할 수 없기 때문에 이를 제거함으로써 터보링크스를 잘 활용할 수 있다.

대부분의 경우 css와 js는 서로 다른 페이지를 방문한다.(데이터turbolinks-track가 한 내용의 내용이 다르다).Turbolinks를 사용할 때 적용합니다.js, application.css에 집중하는 것이 가장 좋은practice입니다.

총결산

터보링크는 꼭 nprogres-rails!