실천 중의 반응식 응답 디자인: 제2부분

마이클 매더슨 | 내셔널 형태 | 2020년 9월
나의 이전 문장article에서 나는 반응식 응답 디자인의 개념(내가 만든 용어)을 소개했다. 그것이 무엇인지, 그것이 어떻게 작동하는지, 그리고 왜 그것이 중요한지.이제 응답성 사용자 인터페이스를 구축하기 위해 그것을 어떻게 사용하는지 봅시다.우선, 우리는 서비스가 필요하다.
이 서비스의 목적은 화면 크기에 통일된 단점을 제공하는 것이다.이것은 응용 프로그램의 관심의 단점과 코드를 관례에 따르지 않고 통일시킬 것이다.이 서비스는 세 가지 일을 해야 한다.

추적할 크기 정의

표준화된 인터페이스를 갖춘 관찰식 설비 제공

휴대폰이나 태블릿 PC와 같은 관심사의 특정 상태 정의

rxrs는 서비스(ScreenSize 서비스라고 함)를 제공하고 합리적인 기본 설정을 제공합니다.Angular에서 rxrs ng 라이브러리를 사용하면 모든 것이 Angular를 잘 사용할 수 있습니다.
설정하려면 다음을 실행하십시오.

npm install rxrs rxrs-ng

그런 다음 ScreenSize Service를 구성 요소로 가져옵니다.

import { Component, OnInit } from '@angular/core';
import { ScreenSizeService, ScreenWidthEnum } from 'rxrs-ng';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss'],
})
export class MainComponent implements OnInit {
  screenSize$ = this.screenSizeService.size$;

  constructor(private screenSizeService: ScreenSizeService) {}

  ngOnInit() {}
}

서비스의 실제 상황을 이해하기 위해서, 우리는 지난 글에서 토론한 호응성 디자인 문제를 해결하는 측면에서 그것을 연구할 것이다.그들은 다음과 같습니다.

내 코드 어딨어!?

팀은 결국 다른 문제에 부딪힐 수 있다.

화면 폭만 조회할 수 있습니다.

코드는 항상 로드됩니다.

테스트하기 어려워요.

바로 뛰어들래요!

내 비밀번호는!?

이 문제는 내가 말한 미디어 조회의 팽창을 둘러싸고 있다.쿼리 팽창은 css에서 다양한 종류가 서로 다른 미디어 쿼리에서 반복되는 것을 가리킨다.작은 범위 내에서는 괜찮아 보이지만, 페이지/응용 프로그램이 늘어나면서 통제하기 어려워진다.다음은 조회 팽창의 작은 예이다.

.title {
  font-size: 2em;
}

.another-one {
  background-color: red;
}

@media screen and (max-width: 599px) {
  .title {
    font-size: 5em;
  }

  .another-one {
    background-color: aliceblue;
  }
}

@media screen and (min-width: 600px) and (max-width: 1023px) {
  .title {
    font-size: 4em;
  }

  .another-one {
    background-color: antiquewhite;
  }
}

rxrs를 사용하여 쿼리 팽창 문제를 해결하려면 ScreenSize Service를 사용합니다.html에서size$observable를 클래스 설정 템플릿으로 사용하여 동적 클래스를 생성할 수 있습니다.

class=”title title-{{(size$| async)}}”

이것은 title의 기본 클래스와 title의 동적 클래스 {current size}를 만드는 요소입니다.query bloat 예시에서 우리의 클래스에 이 정책을 사용해서 다음과 같은 내용을 생성합니다.

.title {
  font-size: 2em;
}

.title-xSmall {
  font-size: 5em;
}

.title-small {
  font-size: 4em;
}

.another-one {
  background-color: red;
}

.another-one-xSmall {
  background-color: aliceblue;
}

.another-one-small {
  background-color: antiquewhite;
}

팀은 결국 다른 문제에 부딪힐 수 있다

코드 심사에 의존하는 것보다 코드 표준을 자동으로 실행하는 것이 좋다.지연 또는 이의 없이 모든 정합성, 품질 및 속도를 얻을 수 있습니다.팀원들은 미디어 조회에서 다른 단점을 설정하기 쉽다.이로 인해 일부 화면 크기에 부적절한 레이아웃이 생길 수 있습니다.만약 프로그램의 다른 부분이 아닌 다른 위치에서 이동 레이아웃으로 전환된다면 이상한 레이아웃이 나타날 수 있습니다.태블릿PC에서 페이스북을 사용하면 데스크톱 버전의 상단과 모바일 버전의 몸이 있다.대부분의 기능에 액세스할 수 없습니다.
대부분의 경우 단점은 약속에 따라 집행된다.이 약속은 보통 일부 문서에서 정의됩니다. 이 문서들은 confluence에서 잃어버리거나, 문서를 저장하는 어느 곳에서든 단점이 무엇인지 설명합니다.그러나 rxrs에 대해서는 ScreenSizeService의 코드에 정의되어 있기 때문에 승인되지 않은 단점을 사용할 수 없습니다.

화면 너비만 조회 가능

미디어 질의의 실패한 점 중 하나는 뷰포트의 너비만 질의할 수 있다는 것입니다.이것은 미디어 조회만으로 실현할 수 있는 기능을 제한한다.커다란 슬라이딩 창이 열릴 때 프로그램의 홈페이지를 태블릿PC 스타일로 전환하는 페이지를 만들어야 한다고 상상해 보세요.전통적인 미디어 조회에 있어서 당신은 운이 나쁘기 때문에 이런 상황을 위해 다른 전략을 생각해 내야 한다.
rxrs의 화면 크기를 사용하면 타자 스크립트 코드에서 볼 수 있습니다.이것은 응답 페이지 모드에 쉽게 적응할 수 있는 선택이 많다는 것을 의미한다.예를 들어, 슬라이드아웃 상태를 고려하여 관찰할 수 있는 객체를 매핑size$할 수 있습니다.

screenSize$ = this.screenSizeService.size$.pipe(
  switchMap((screenSize) => {
    return toolBarOpen$.pipe(
      map((toolBarOpen) => {
        return screenSize === ScreenWidthEnum.large && toolBarOpen ?
          ScreenWidthEnum.medium :
          screenSize;
      })
    )
  })
);

더 복잡한 예시를 위해 관찰 가능한 보기 상태를 구축할 수 있습니다.이 화제는 뒤의 문장에서 토론할 것이다.관찰 가능한 보기 상태를 사용하는 것은 매우 큰 주제로 뒷글에서 소개할 것이다.동시에, 당신은 rxjs 현장에서 나의 강연을 보아야 합니다!

코드는 항상 로드됩니다.

이 점의 영향을 보여주기 위해 이런 문제들을 생각해 보세요.

웹 사이트를 사용하는 최소 성능 장치의 화면 크기는 얼마입니까?

화면 크기가 페이지의 요소를 줄일 수 있습니까?

문제1 모바일 기기를 지원할 경우 최하위 기기의 화면 크기는 작은 화면이 있는 휴대전화일 수 있습니다.제한된 비율로 인해 작은 화면의 요소는 일반적으로 비교적 적다.프로그램의 데스크톱 버전에 있는 요소가 모바일 버전의 미디어 조회에 숨겨져 있음을 깨달을 때까지 이 모든 것은 문제없을 것 같습니다. 미디어 조회는 이 요소에 설정되어 있을 뿐입니다. visibility: none;즉, 어셈블리는 프레임에서 생성되어 DOM에 추가된 다음 숨겨집니다.
비록 이것은 너에게 있어서 큰 문제가 아닐 수도 있지만, 그것의 영향은 네가 상상한 것보다 더 클 것이다.이런 상황을 고려하면 모바일 버전에서는 이 요소에 대한 대량의 데이터 요구가 필요하지 않다.당신은 rxrs를 사용하여 이런 상황을 해결할 수 있습니다!size$ Observable 패키지 미디어 조회를 사용하면 *ngIf에 숨겨진 요소를 선택하거나 프레임워크에 있는 같은 요소를 선택합니다.

<!-- Don't generate this component if in mobile -->
<big-component *ngIf="!(size$ | async) === 'small'"></big-component>

이렇게 하면 화면 크기가 적지 않은 상황에서만 구성 요소를 만들고dom에 추가할 수 있습니다.이것은 너의 앱을 휴대전화에서 더욱 잘 표현할 수 있게 할 수 있다.

테스트하기 어려움

나는 테스트에 열중하기 때문에 만약 응용 프로그램의 사진을 찍지 않고 낡은 사진과 비교하지 않는다면 css를 진정으로 테스트할 수 없다. 이것은 나를 미치게 한다.rxrs는 구성 요소의 단위 테스트에서 레이아웃 테스트를 직접 할 수 있습니다.이것은 테스트 문장이 아니지만 rxrs를 사용하여 테스트를 진행하는 것은 관찰할 수 있는 테스트일 뿐입니다!viewState Observable와 함께 사용할 때 복잡한 레이아웃에 사용할 수 있는 강력한 도구입니다. 다음 글은 더 많은 내용을 소개합니다!

결론

css에서 미디어 조회 대신 rxrs를 사용하면 팀과 더 빠르고 일치하는 개발, 더 유연하고 테스트 가능한 레이아웃을 볼 수 있습니다.
오늘 해보자rxrs!

뮤지컬이 곧 옵니다.

ng conf: 뮤지컬은 2021년 4월 22일과 23일 이틀간 회의를 연다.ng-conf.org로 문의하십시오.

엘릭 슬랙 덕분이에요.