2017년 프런트 엔드. . . 보고

그런데 FrontEndHandbook 2017이 공개되었네요. 나도 파라파라 읽고 있었는데.

위를 읽고 몰랐던 것을 조사한 기록입니다.

dynamic-import



TC39 Process는 stage 3까지 와서 ES2017에 들어가는 느낌입니까?
이런 식으로 import를 함수처럼 이용하여 지연 로드를 할 수 있는 것 같습니다.
<!DOCTYPE html>
<nav>
  <a href="books.html" data-entry-module="books">Books</a>
  <a href="movies.html" data-entry-module="movies">Movies</a>
  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>

<main>Content will load here!</main>

<script>
  const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }
</script>

React Fiber



ReactTeam이 2년 이상 연구하고 있는 React의 핵심 알고리즘을 재구성하고 있는 프로젝트입니다.
Introduction만 읽으면 애니메이션이나 레이아웃 등의 적합성을 보다 높이기 위해서 렌더링을 복수로 분할해 복수의 프레임에 분산시켜 렌더링시키는 것 같습니다.
조금 모르기 때문에 나중에 읽는다. . .

Inferno



9kb React와 같은 라이브러리입니다. insanely fast 라고 써 있는 대로 어쨌든 퍼포먼스와 경량함이 판매입니다.
소스 코드도 경량급이므로 소스 확인해 보자고 생각했습니다.

Vue.js



개인적으로 아직 사용한 적은 없습니다. npm trend 그럼 이런 느낌이었습니다.



React 때문에 축척하는 엉망이지만 늘어나는 것은 틀림없습니다.

CSS 분화



BEM기법, Sass, PostCSS, CSS-in-JS, CSS Modules, styled-components 등 CSS는 혼돈이 계속되고 있는 것처럼 느낍니다.
확실히 이 근처는 따라갈 수 없기 때문에 좀 더 침착할 때까지 울고 살 것이라고 생각합니다.
자바스크립트는 일단 침착하고 있다는 것은 조금이면서 이해(그래도 흐름은 빨리 느끼지만) 할 수 있어, 향후는 WebAssembly가 일반적이 되고 나서 또 여러가지 울릴지도 모릅니다.

Svelte



React 등의 프레임워크와 달리 라이브러리 자체를 로드하지 않고 JavaScript의 런타임만으로 움직일 수 있는 프레임워크입니다.
이미지적으로는 Babel과 같이 JS를 트랜스파일해 JavaScript를 토해내는 느낌입니다.
이렇게하면 여분의 프레임 워크를로드하지 않고 작동하므로 더 가벼운 자바 스크립트를 생성 할 수 있습니다.
링크의 블로그에서는 ReactTodoMVC의 코드를 제외한 상태로 45kb(zipped), Svelte는 3.6kb (zipped)인 것 같습니다.
HelloWord의 변환 후의 JavaScript 보고 있으면 이것도 재미있을 것 같습니다. . .

HelloWorld
h tps : // sゔぇl. ch의 gy / re pl /?ゔぇ시온 = 1.6.8 & st = 0에 d5146 아 22c28410dfc f2050f3d2f8

JAM Stack



들은 적도 없는 개념이었습니다만, 유행(이라고) 하는 것입니까. . .
정의를 조금 잘 모르겠지만, JavaScript와 API와 MarkUp로 만들어진 애플리케이션 즉 SPA의 것 같습니다.
SPA? 아 JAMStack의 일이 일어날까요? . .
JavaScript로 API 혹은 데이터베이스를 (직접) 조작할 수 있어, 뒤에는 쌍방향의 API가 존재해 리얼타임인 데이터의 교환을 한다고 하는 것이 향후의(지금 현재도) 트렌드가 된다고 하는 것입니다.

요약



프런트 엔드를 두껍게 풍부한 (브라우저) 애플리케이션의 트렌드는 끝나지 않을 것입니다.
이것을 읽고 React와 WebAssembly와 서버 측 렌더링과 Reactive 프로그래밍과 정적 사이트 생성기와 GraphQL과 Vue와 PostCSS와 최신 CSS 사정과 Svelte와 TC39의 책정 상황의 확인이 필요하다는 것을 알았기 때문에 나는 프론트 엔드 엔지니어가 될 수 없어 다시 생각했습니다.
가능한 한 공부하고 싶습니다.

좋은 웹페이지 즐겨찾기