2020 FEconf Review


空前の盛況
トラックA
A1. Webビューからダークモード継承を取得:一貫したユーザー体験を得る

  • CSS Variable

  • IEはサポートされていません

  • prefers color scheme:AOS 10、iOS 13以降のサポートでは、ユーザーがアプリケーションをダークモードでのみ使用したい場合、最終的に使用するのはちょっと気まずいかもしれません.

  • CSS Varialbe例
    :root {
    --main-bg-color: brown;
    }
    
    .one {
      color: white;
      background-color: var(--main-bg-color);
      margin: 10px;
      width: 50px;
      height: 50px;
      display: inline-block;
    }
    
    .two {
      color: white;
      background-color: black;
      margin: 10px;
      width: 150px;
      height: 70px;
      display: inline-block;
    }
    .three {
      color: white;
      background-color: var(--main-bg-color);
      margin: 10px;
      width: 75px;
    }
    .four {
      color: white;
      background-color: var(--main-bg-color);
      margin: 10px;
      width: 100px;
    }

  • jsを使用してCSS変数にアクセス
    .five {
      background-color: var(--main-bg-color);
    }
    
    // 인라인 스타일에서 변수 얻기
    element.style.getPropertyValue("--my-var");
    
    // 어느 곳에서나 변수 얻기 
    getComputedStyle(element).getPropertyValue("--my-var");
    
    // 인라인 스타일에 변수 설정하기
    element.style.setProperty("--my-var", jsVar + 4);

  • CSS変数がサポートされていない場合、fallbockコード
    .adaptive-color-900 {
    	color:$grey900;
      color:var(--adaptiveGrey900);
    }

  • ライトモードから暗いモードに切り替えると、白い画面のエラーが発生し、ユーザーの体験に不利です.そこで,最終的にSSR時にCSSを動的にダウングレードし,キャッシュポリシーを紹介した.
  • A2. iframeを使用して、まったく異なるサービスを統合します。
  • XSS攻撃防御のための砂箱属性の設定
  • 属性値理解できない
  • ただし、allow-scriptとallow-ston-originを使用するとセキュリティが脆弱になる可能性があるので、srcの検証が必要です.
  • A4. Relay、それからDeclarativeを考え直す
  • GraphQLとRelay
  • Vue Relay
  • A5. フロントエンドでTDDが可能であることを示します。
    A6. Statechorts:複雑なUI状態を制御する方法
  • statecharts
  • XState
  • B1. React NativeでPinch Zoomを実施したときに学んだこと