Chrome 개발자 회의 사이트: 사례 연구

9829 단어 webdevjavascript
구글은 2013년 이후 매년 11월쯤 크롬 개발자 회의(CDS)를 주최해 왔다.크롬 엔지니어와 인터넷 사용자와 상호작용하는 곳인 check out the recordings here입니다.
회의당 its own website명이 필요합니다.CDS의 경우 일부 정보와 일정 데이터를 포함하는 정적 사이트입니다.예약은 다른 시스템에서 처리된다.2018년에 우리는 이전의 업무를 바탕으로 사이트를 재편성했고 다음과 같은 요구를 제기했다.
  • 신속(뚜렷)
  • Progressive(기존 브라우저 지원)
  • 인덱스 가능 (talks are SEO'ed)
    • 우리가 어떻게 그것을 만들었는지 봅시다.👍

    기초 지식


    CDS 사이트는 간단한 노드에서 실행됩니다.JS 서버, 페이지와 하위 페이지를 나타내는 순수한 HTML.모든 내용은 일반적인 문제 해결이든 강연자에 대한 정보든 브라우저가 실제 URL을 통해 불러올 수 있는 내용이다.우리는 어떤 특정한 프레임워크도 사용하지 않았다. 우리는 단지 순수한 HTML을 원했을 뿐이다.
    우리는 일찌감치 무자바스크립트 체험을 지원하기로 결정했다.이것은 우리에게 매우 중요합니다. 브라우저의 긴 끝, KaiOS를 실행하는 저가 장치 (엔진 뚜껑 아래에서 Firefox 48을 실행) 를 포함합니다. - 아래의 고품질'캡처'를 참고하세요!😮📸

    물론 JS가 필요합니다. 이 사이트는 주로 정보를 제공하는 데 사용되지만 몇 군데는 좋습니다.

    점진적 향상


    우리 JS는 <script type="module" src="code.js">을 사용하여 발송합니다."모듈"유형을 사용하는 것은 매우 중요합니다. 왜냐하면 이것은 ES6 모듈을 지원하는 브라우저만을 대상으로 하기 때문입니다. 약 2018년 초부터 시작된 현대 브라우저입니다.
    이것은 매우 의도적인 선택이다.
  • 대부분의 CD에 접근하는 사용자는 현대 브라우저를 사용한다(CD는 기술 시청자를 대상으로 하고 갱신률이 높음)
  • 이 기능을 사용하면 await 및 Promise 같은 ES6 기능을 사용할 수 있으며 추가 코드는 포함되지 않습니다(high water marks에 대한 자세한 정보 보기)
  • 은 모듈의 현대, 상청 브라우저를 지원하거나 JS 브라우저가 없는 두 가지 목표만 있습니다.표면적을 줄이고 중간지대가 없으면 우리는 두 극단을 더욱 적극적으로 테스트할 수 있다.

    • 향상된 환경


    따라서 CDS 사이트 (이 empty page) 를 불러오고 링크를 클릭하면 페이지 간의 변화가 회의 주제와 일치하는 과도 효과를 볼 수 있습니다.JavaScript가 없는 경우 링크는 다음과 같습니다. 새 HTML이 로드됩니다.

    향상된 경험은 다음과 같습니다.
    a, window.fetch을 통해 새 페이지를 불러오기 시작하고 Promise을 누르십시오
    b. CSS 변환을 사용하여 현재 페이지를 페이드아웃하고 간행물 이미지를 포화하지 않음(filter: grayscale(1))
    c, await에서 Promise을 획득한 후 전체 다른 페이지의 <main> 표지에서 내용을 추출합니다. 저희는 여기에서 부분을 요청하지 않기 때문에 <head>을 다시 요청하면 적은 비용이 발생합니다
    이것은 실제로 다른 페이지의 전체 HTML을 가상 요소에 삽입함으로써 이루어진다.
    // just dump the HTML into a tag so we can look for main
const node = document.createElement('div');
node.innerHTML = raw;

const recievedMain = node.querySelector('main');  // main from incoming DOM
realMain.innerHTML = recievedMain.innerHTML;
    d, 새 URL로 history.pushState으로 전화하여 CSS로 새 내용 페이드 인
    위의 모든 프로세스가 실패하면 커다란 try/catch 블록을 통해 브라우저의 위치를 새 URL로 설정할 수 있습니다.이것은 단지 하나의 예일 뿐이지만, 우리의 모든 JS는 type="module"에 첨부된 같은 방법으로 점차적으로 작업하고 시종 안전 블록에 포장한다.

    JavaScript 구축


    우리의 JavaScript는 하나의 입구점을 가진 여러 파일에 존재합니다. (사이트의 모든 페이지는 실제적으로 같은wiki 스타일의 내용이기 때문입니다.)앞에서 말한 바와 같이, 우리는 ES 모듈을 사용하는데, 입구점은 src/bundle.js에 위치하고 있으며, 이것은 정태적으로 더 많은 파일 (node_modules 폴더에서 온 일부 파일 포함) 을 포함하여 우리의 코드가 좋은 레이아웃을 가지도록 할 것이다.
    ⚠️ 우리는 node_modules의 ES 모듈을 포함하지만, 당신은 extra rollup plugin이 없는 상황에서 비교적 낡은 스타일의 require()/module.exports 코드를 천진난만하게 가져올 수 없습니다. 심지어 개발 중에도 구축 절차가 필요합니다.
    구축하기 위해서, 우리는 Rollup을 사용하여 모든 원본 코드를 한 파일에 연결하기만 하면 된다.따라서 코드에 ES 모듈이 필요하더라도 생산에서 가져오기 또는 내보내기를 사용하지 않습니다.이것은 단지 기능의 높은 수위선일 뿐, 우리의 클라이언트 브라우저는 파일 하나만 가져오면 사이트를 실행할 수 있다.

    전위성


    익명 창에 one of our sessions을 로드합니다 (중요!).세션 팝업 창 뒤에 아무런 내용이 없다는 것을 알 수 있습니다. 이것은 세션 자체일 뿐입니다.
    이 페이지는 실제로는 AMP으로 매우 잘 작동한다. 이 페이지는'잎 노드'이고 AMP는 그것을 위해 설계한 것이다.
    이 페이지를 다시 로드하거나 the schedule 자체에서 이 페이지로 이동하면 세션이 팝업 창으로 표시됩니다.이것은 또 다른 향상된 기능입니다. 그 중 몇 가지 부분은 다음과 같습니다.
  • 페이지를 불러온 후, 우리는 모든 네트워크 데이터(주의, 서비스)
    • 을 제어하여 사이트를 오프라인으로 불러올 서비스 직원을 설치할 것이다
  • 은 /devsummit/schedule/session-name과 같은 URL에 대해 일반적인 계획 페이지
    • 만 제공합니다
  • 스케줄링 페이지의 JavaScript에서 새 URL 경로를 식별하고 세션 팝업 창
    • 을 표시합니다.
    이런 방식으로 우리의 세션은 자바스크립트를 사용하는 SPA의 일부로 증강된 방식으로 표시할 수 있다.이러한 흐름이 지원되지 않으면 항상 반환 옵션이 있습니다: 원시(AMP) HTML. 이것은 모든 검색엔진과 브라우저에서 이해할 수 있는 것입니다.

    CSS 및 설계


    우리는 CSS로 Less CSS을 사용합니다.개발 과정에서 우리는 현재 진행 중인 구축 과정을 진행하지 않고 원본 코드와 실행 시 해상도를 직접 포함한다.
    <!-- dev less -->
<link rel="stylesheet/less" type="text/css" href="./static/styles/cds.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"></script>
    prod에서 컴파일된 CSS 파일을 발표했습니다.

    도전하다


    오래된 브라우저나 검색엔진에 JS가 없는 솔루션을 제공하는 것은 좋지만, 일부는 전통적으로 매우 복잡하다.

    대화식 사이드바


    작은 장치에 CD를 불러오면 (예를 들어 KaiOS 장치... 또는 창을 축소하는 것) 상호작용이 강하고 내비게이션에 필요한 구성 요소인 사이드바를 발견할 수 있습니다.
    실제로 우리는 스크립트를 전혀 쓰지 않아도 된다.기본적으로 우리는 CSS의 adjacency selector을 이용할 수 있다.
    이게 어떻게 된 일입니까?사이드바 열기 버튼 ('햄버거 메뉴',☰) 실제로는 투명(하지만 숨기지 않음)을 가리키는 <label>이다.선택하면 인접 요소를 뷰로 가져오는 CSS 규칙을 추가할 수 있습니다.
    input#sidebar + .sidebar {
  transform: translate(100%);  /* offscreen if not checked */
  opacity: 0;
}
input#sidebar:checked + .sidebar {
  transform: translate(0);     /* visible if checked */
  opacity: 1;
}
    다음은 자세한 프레젠테이션입니다.
    실제로 우리는 사이드바가 화면 밖에 있을 뿐만 아니라 닫힐 때도 DOM에서 정확하게 삭제될 수 있도록 더 많은 작업을 했다.주의할 점은 애니메이션이 사라질 때 <input type="checkbox">으로 설정하기 위해 visibility 속성의 애니메이션을 설정했습니다.
    여기 무슨 배달이 있습니까?모든 브라우저는 표를 이해하기 때문에 우리는 그것들이 우리를 위해 일하게 할 수 있다.👍

    유감스럽다


    대부분의 CD는 정적으로 생성됩니다(예: FAQ 또는 다른 페이지). 그러나 세션과 스피커 팝업 창은 어느 정도 visibility: hidden의 DOM 사고 목록의 원본 호출을 통해 수동으로 생성됩니다.
    우리가 이렇게 하는 데는 두 가지 이유가 있다.
  • 템플릿 언어를 사용하지 않습니다. - 다시 시작하면 querySelector('#foo').textContent = '...';을 간단한 방법으로 사용하여 복잡한 HTML 트리
    • 을 제거합니다.
  • 에는 뚜렷한 동구 템플릿 방법이 없다.예를 들어 lit-html(작성시까지)은 노드에서 실행되지 않습니다.JS 백엔드 - 기본 DOM이 없습니다.

    • 감사합니다.


    나는 네가 이 단문을 좋아하길 바란다.내가 뭘 놓쳤지?
  • 은 팀에 따라 구글이 서로 다른 원인과 창고를 바탕으로 그 사이트를 구축했다. 나도 2019년 I/O 사이트에 참여했지만 우리는 Preact을 사용했다.
  • 나는 이 사이트의 서비스 인원을 포함하지 않았지만, 우리는 이 사이트의 오프라인 작업이 매우 좋다는 것을 확실히 가지고 있다.주의해야 할 것은 SPA 스타일의 팝업 창이 이 상황에서 연결될 수 있기 때문에 단일 세션 HTML을 캐시하지 않는다는 것이다.
  • 이 사이트는 Koa server 위탁 관리를 사용하고 구축 설명은 Gulp를 통해 지정되지만 우리는 그 어느 것과도 관계가 없다.
  • 코드on GitHub-를 보실 수 있습니다. 주의하십시오. 저희는 "dev-summit-18"지점에 있습니다.
    • 읽어주셔서 감사합니다!🎉 만약 당신에게 더 많은 문제가 있으면 저에게 전화하세요.
    Oracle Function Result Cache
    BOM의 세 가지 프롬프트 창

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage