독특하고 사랑스러운 웹 비트

어제는 이전 게시물에서 사용한 애니메이션hamburger_icon 버튼의 문서를 완성하고 싶었습니다.

처음부터 모바일 웹 앱 레이아웃

{Gene} ・ 2018년 7월 22일 ・ 2분 읽기

#showdev #webdev #javascript #zuix

자주 발생하는 것처럼 문서화는 이를 개선하는 데 도움이 되며 마지막 순간에 몇 가지 변경이 필요합니다. 이 경우 다른 버거 애니메이션과 색상을 선택하기 위한 추가 옵션을 추가하는 것이었습니다. 결과를 사용할 수 있습니다here.

하지만 잠깐만요... 저는 Glitch의 3가지 예제 프로젝트 모두와 GitHub 페이지의 다른 두 프로젝트에서 이 hamburger_icon 버튼을 사용했습니다.

Does that mean I've to copy the new code all over the different projects that are using the hamburger_icon and publish all of them once again?

운 좋게도 해당 프로젝트 중 어느 것도 사용된 비트의 복사본을 보유하고 있지 않고 각각의 원본 소스에 대한 직접 링크를 보유하고 있지 않기 때문에 그렇지 않습니다.

고유한 비트

이것은 또한 이전 게시물의 마지막 예에서 헤더 막대를 구현하는 데 사용된 HTML 코드에서 볼 수 있는 것입니다.

<header data-ui-include="//zuix-app-1.glitch.me/layout/header"></header>

zuix-app-3.glitch.me에서 호스팅되는 index.html의 "비트"
data-ui-include="//zuix-app-1.glitch.me/layout/header"는 layout/header가 첫 번째 예제를 호스팅하는 서버에서 직접 가져오고 다음 두 파일로 구성됨을 의미합니다.

https://zuix-app-1.glitch.me/layout/header.html

https://zuix-app-1.glitch.me/layout/header.css

하지만 header.html를 보면

<div class="logo">
    <a href="/">app-logo</a>
</div>
<div data-ui-load="@lib/components/hamburger_icon"
     data-ui-options="options.menuButton"
     class="menu-button"></div>

여기서 data-ui-load="@lib/components/hamburger_icon"는 헤더가 components/hamburger_icon(zKit 구성 요소 수집 서버에 대한 바로 가기)에서 @lib를 로드함을 의미합니다.

따라서 zuix-app-3는 layout/header 호스트의 zuix-app-1를 포함하고 zuixjs.github.io/zkit의 hamburger_icon 구성 요소도 로드합니다.

즉, layout/header가 호스트zuix-app-1에서 수정되면 zuix-app-2 및 zuix-app-3 모두에서 자동으로 업데이트되지만 components/hamburger_icon가 zuixjs.github.io/zkit에서 업데이트될 때마다 , Glitch에서 호스팅되는 모든 예제에서 매끄럽고 즉시 업데이트됩니다!



따라서 구성 요소에 대한 고유한 참조를 사용하면 동일한 서버에서 또는 서로 다른 여러 서버에서 호스팅될 때 생산성과 창의성 모두에 분명한 이점이 있습니다.

사랑스럽지만...

문제 없이 이 작업을 수행하려면 배포된 구성 요소가 업데이트될 때마다 100% 이전 버전과의 호환성을 보장해야 합니다. 이것이 가능하지 않으면 업데이트된 구성 요소에 새 경로를 할당해야 합니다.

또한 신뢰성이 불확실한 여러 호스트에서 리소스를 다운로드하면 특히 네트워크 문제가 있는 경우 성능이 저하될 수 있다는 점을 고려해야 합니다. 이는 CDN을 사용하여 이미 배운 오래된 교훈입니다.

따라서 성능이 애플리케이션에 대한 실제 관심사인 경우 다른 전략을 채택할 수 있으며 이는 사용된 모든 리소스를 다운로드하고 단일 로컬 파일에 압축하는 것으로 구성됩니다.

하지만 내가 빌드 시스템, 패키지 관리자, 웹 패커 등에 대해 이야기할 것이라고 생각하기 전에 그렇지 않다는 것을 안심시켜 드리고 싶습니다.

음, 그것도 옵션이 될 수 있지만 아직 이러한 빌드 도구를 다루지 않으려면 zUIx.js를 사용하여 브라우저 콘솔에서 직접 애플리케이션 번들을 생성할 수 있습니다.



그것이 내가 브라우저 내 번들링(또는 클라이언트 측 번들링)이라고 부르는 것이지만 나중에 이에 대해 쓸 것입니다.

다음 읽기:

웹 앱에 ViewPager 추가

{Gene} ・ 2018년 7월 28일 ・ 2분 읽기

#showdev #webdev #javascript #zuix