인텔리전트 툴팁 및 팝업 상자

4년 전에 저는 첫 번째 버전의 라이브러리를 발표했는데 목표는 간단하면서도 복잡한 문제인 포지셔닝 포퍼스를 해결하는 것입니다.도구 설명, 팝업 창, 드롭다운 목록 및 추가 요소는 문서 흐름에서 팝업되며 참조 요소(예: 버튼) 옆에 있는 기존 UI의 맨 위에 덮어씁니다.
포퍼는 일상 네트워크의 일부분이다.우리는 사용자 인터페이스가 공간을 더욱 잘 이용하도록 돕기 위해 매일 사용하는 모든 사이트와 응용 프로그램에서 그것들을 볼 수 있다.만약 사용자가 모든 컨트롤을 즉시 볼 수 있다면, 우리의 인터페이스는 매우 혼란스러울 것이다.하지만 이 작은 부품들 뒤에는 무엇이 숨겨져 있을까?

그것들을 구성하는 가장 복잡한 부분 중 하나는 포지셔닝 논리이다. 이 코드는 포플을 촉발하는 원소 근처에 부동시킨다.우리는 그들 부분이 페이지 밖에 위치하고 스크롤 막대에 끼어 있는 것을 몇 번이나 보았는데, 페이지 조정이 큰 시간 동안 응답하지 않고 내용이 잘라지는 것을 보았습니까?나는 셀 수 있다.지금은 더 줄어들 수도 있고, 일부 원인은 보플 같은 도서관이 이 문제를 해결했기 때문일 수도 있지만, 과거에는 더욱 흔했다.
보플은 문제의 이 부분에 주목했다.이것은 신뢰할 수 있고 경량급이며 확장 가능한 위치 추적 엔진 라이브러리로 도구 알림과 팝업 창이 가장 좋은 위치에 있는지 확인할 수 있습니다.

채택하다

도서관은 거대한 입양을 겪었다!수량:

GitHub 저장소 650000개 이상

매주 npm 다운로드 300만 건 이상

100000000회 이상 평생 CDN 클릭

대형 프로젝트는 도구 알림과popor가 필요로 하는 첫 번째 라이브러리로 선택합니다.사실 지난 몇 년 동안 개발자나 인터넷 사용자로서 Popper를 사용한 적이 있을 가능성이 높다. 설령 당신이 그 존재를 모른다 하더라도.
가장 유행하는 UI 라이브러리인 Bootstrap, Foundation, Material UI는 사용자 체험 문제가 없는 포퍼를 만드는 데 사용하기로 결정했다.그리고 CMS, 예를 들면 Drupal과 Joomla!누가 그것을 채택하기로 결정했는지, 그리고 마이크로소프트의 웹 클립퍼와 유창한 사용자 인터페이스, Atlassian의 AtlasKit, GitLab 등 대기업을 채택하기로 결정했다.

그럼 문제는 뭐예요?

문제가 해결되어 모두들 매우 기뻤다.그럼 남은 건 뭐 할 거예요, 그렇죠?응, 완전히 그렇지는 않아.
API는 역사상 가장 우호적인 것이 아니다. 자동으로 생성된 문서는 많은 사람들이 직업을 바꿀 수 있다. 버그를 복구하는 것은 가장 강력한 영웅만이 완성할 수 있는 장거이다.어쨌든, 코드 라이브러리는 네 살이고, 네 살 젊고, 경험이 적은 내가 작성한 것이다.
소프트웨어가 없는 것은 영원한 것이다. 그래서 2018년 초, 즉 v1.0이 발표된 지 1년이 지난 후에 나는 구글에 가서 Git로 깨끗한 지점을 만드는 방법을 배웠다. 며칠 후에 새로운 Git 지점은 Popper의 미래를 위탁 관리할 준비가 되었다!

18개월 후...

비록 최초의 발전 추세가 강력했지만, 생활은 바빠졌고, 다시 쓰는 일도 오랫동안 고요해졌다.어쨌든 포플1은 여전히 운행이 양호하고 점점 더 많이 채택되고 있다.
지금은 2019년 중입니다. 제가 다음 Popper 버전을 개발한 지 1년이 넘었습니다.v1은 점점 더 많이 사용되고 있지만 점점 더 많은 버그와 API 결함이 드러나기 시작했다.수백만 명이 이 라이브러리를 사용하고 의존하고 있지만, 줄마다 코드에 문제가 생겼다.나는 죄책감을 느낀다.나는 보플을 이런 상태로 둘 수 없다. 나는 그것을 복구해야 한다.
2019년 6월에 나는 도움을 요청하는pull 요청을 제출했다. 왜냐하면 나는 라이브러리의 다음 버전의 관건적인 부분, 즉 포퍼가 주어진 경계에 비해 넘치는 논리를 검출하는 데 갇혔기 때문이다.아무도 도움을 줄 수 없다.
보푸르 2의 상황은 보기에 그다지 좋지 않다.그것의 발전은 완전히 멈추었다.Popper 1은 정말 개발자와 사용자가 체험해야 할 유일한 도구 알림과 포지셔닝 엔진 버전입니까?승용차랑 너무 가볍지 않아요?
마침내, 어느 날, 5개월 후, 라디에이터의 요청은 아무런 진전이 없었고, 나는 마침내 해결 방안을 생각해냈다.이렇게 보푸르 2의 개발이 재개되었다.You can view the pull request here .
@atomiks 멤버로 합류하여 합작을 시작하여 최종적으로 Popper2를 발표하였다.나는 그에게 큰 소리로 외치고 싶다. 왜냐하면 그는 많은 수정기(기능)를 개발하여 보프르2와 v1을 막상막하로 만들었기 때문이다. 그러나 버그는 없었다😅.

수적 발전

당신은 숫자를 갈망합니까?Popper 2 개발 재개 2개월 이내:

🐞 38 bugs fixed

↩️ 70개 이상의 요청 제기

🎁 후속 릴리즈 20개

✏️ 600개 이상의 제출 푸시

⚡ 업데이트 속도 2배 향상

🔽 기본 라이브러리 크기 70% 감소

저희가 개선을 했어요.

그럼 무슨 변화가 생겼어요?매사새로운 코드 라이브러리는 완전한 재작성이다.이것은 더욱 모듈화된 방식으로 작성되고 자동으로 생성된 TypeScript 정의를 통해 흐름을 통해 유형 검사를 진행하며 수식자 API가 더욱 강력하다. 가장 중요한 것은 라이브러리가 가볍고 나무가 떨리기 쉬우며 속도가 빠르다는 것이다.
API에 대한 두 가지 주요 변경 사항을 살펴보겠습니다.
1. 클래스를 함수로 바꿨습니다.

// Old - bye classes!
const popperInstance = new Popper(reference, popper);

// New - hello closures!
const popperInstance = createPopper(reference, popper);

2. 수식자는 phase와 requires의 속성을 가진 대상 수조로 이러한 속성은 그들의 의존 관계에 따라 수식자를 정렬한다.

const offsetModifier = {
  name: 'offset',
  enabled: true,
  // core phases: read, main, write
  phase: 'main',
  // dependencies
  requires: ['popperOffsets'],
  // core logic
  fn({state}) {}
};

createPopper(reference,  popper, {
  modifiers: [offsetModifier],
});

따라서 order 속성은 더 이상 수정할 필요가 없습니다.
사용자 Nikhil Aggarwal이 수정기 정렬을 위한 알고리즘을 넘쳐서 감사합니다.물론, 그는 그것이 무엇에 쓰였는지 모르겠지만, 1년 반 후, 우리는 이 도서관에서 그것을 사용했다.You can view its adaption here .

포플에게 다이어트를 시키다

포플1은 더 많은 기능을 얻고 믿음직해졌지만 사이즈도 커졌다.그것은 3kB의 작은 라이브러리에서 7kB의 라이브러리로 바뀌었다!우리의 많은 사용자들이 간단한 도구 알림 라이브러리가 어떻게 이렇게 무거울 수 있느냐고 물었다.비록 이 문제는 라이브러리가 지원해야 할 수량의 놀라운 논리와 변두리 사례를 고려하지 않았지만, 이 문제는 여전히 유효하다.
라이브러리의 크기를 줄이기 위해서 우리는 두 가지 다른 방법을 채택했다. 코드를 완전히 다시 쓰고 모듈화하는 것이다.

유류 해커 삭제

라이브러리 전체를 다시 쓰는 것은 여러 해 동안 도입된 대량의 유류 코드와 해커 공격, 특히 유류 브라우저를 대상으로 하는 작업이다.많은 포지셔닝 논리에 결함이 있거나 잘못된 각도에서 출발한다.

확장 가능한 코어

새로운 방법은 의미 있는 코드를 작성하고 조정할 필요가 없다.이것은 분명히 보일 수 있지만, 우리가 좋아하는 브라우저의domapi를 사용할 때, 코드를 작성할 때, 각종 악몽이 일어난다.비대한 코드 라이브러리에서 이 문제들을 해결하는 가장 효과적인 방법은 전체 코드 블록을 다시 쓰는 것이 아니라 논리를 추가하여 처리하는 것이다.이 하나만으로도 창고의 크기를 약 35퍼센트 줄이는 데 도움이 되지만, 이것만으로는 충분하지 않습니다!그래서 우리는 포플을 모듈화했다.
새 라이브러리의 디자인 방식은 핵심이다. 포퍼의 생명주기 운행에 필요한 논리와 수식자 작업에 필요한 가장 기본적인 논리를 포함한다.가장 중요한 것은 Popper에 기능을 추가할 수 있는 수정기(또는 플러그인)가 있지만 완전히 선택할 수 있다는 것이다.이것은 포퍼를 가져올 수 있음을 의미합니다. 포퍼는 매우 기본적인 위치 계산만 할 수 있고, 넘침 탐지기, 이벤트 탐지기, 반전 행위, 사용자 정의 편이 지원 등 필요한 모든 논리를 줄일 수 있습니다. 이 변경으로 핵심 라이브러리는 현재 2kB 작아졌습니다!가장 흔히 볼 수 있는 수정기 버전은 3kB밖에 없다.

우리는 문서를 복구했다

모두가 알다시피 Popper v1 문서는 읽기와 이해가 매우 어렵다.

이제 Gatsby 및 MDX를 사용하여 문서를 완전히 다시 작성하므로 쉽게 이해할 수 있습니다.우리는 가능한 한 초보자를 돕기 위해 완전하고 완전하며 복제할 수 있는 예시 강좌를 추가했다.너는 https://popper.js.org/docs/v2/tutorial/에서 그것을 찾을 수 있다.
우리는 v1 문서를 참아야 하는 모든 사람들에게 미안합니다!🙈

우리는 팝콘과 놀이공원에 대한 사랑을 안았다

우리는'팝콘'이라는 이름을 완전히 받아들여 사이트로 하여금 팝콘을 주제로 하게 했다. 왜냐하면 좋아, 누가 팝콘을 좋아하지 않겠니?
다음 사이트를 방문하십시오. https://popper.js.org.
만약에 React/Gatsby와 합작하는 것을 좋아한다면 언제든지 사이트에 힘을 기여하여 놀이공원의 주제와 즐거움을 더욱 가지도록 하세요!GitHub 저장소는 다음 위치에서 사용할 수 있도록 완전히 오픈되어 있습니다.https://github.com/popperjs/popper-core.

끝내다

이것은 상당히 긴 여정이지만, 나는 오늘 모두에게 《보푸르2》를 발표할 수 있어서 매우 기쁘다.언제든지 피드백을 남겨 주십시오.우리는 너의 생각을 매우 듣고 싶다.