플로트: 마르코 재발명

Marko팀은 새로운 렌더링 엔진을 개발해 왔다. 이 엔진은 유사한 방식으로 Marko 핵심 엔진인 Fiber React, Glimmer Ember, Ivy Angular 를 각자의 라이브러리에 사용할 것이다.오늘 나는 너희들에게 이것이 어떤 모습일지 첫눈에 보여주고 싶다.
2017년 마르코4 발표 이후 많은 변화가 있었다.대부분의 작업은 Babel, Webpack, Rollup으로 마이그레이션과 업데이트 도구를 관리하는 것입니다.Marko 5는 알파로 공구체인의 현대화를 대표한다.그런데 건축적인 고려는?
FLUURT(Fast Lean Unified Update and Render Target, Target Unified Update and Render Target, Target University Unified Target) 엔진이 개발 중이며 주요 목표는 다음과 같습니다.

릴리즈된 JavaScript 크기 감소

클라이언트 성능 향상

개발 환경 개선

이것은 고객이 날로 증가하는 동적 상호작용 체험 수요에 대한 인정이다.Marko는 오랫동안 최고의 서버 구현 중 하나였지만 Next 등 프레임워크와 Svelte 등 업데이트된 컴파일링 방법이 등장하면서 다음 단계로 넘어갈 때가 됐다.

접근

Marko는 먼저 상호작용식 템플릿 언어이기 때문에 우리는 자신의 장점을 발휘해야 한다.우리는 필요에 따라 템플릿을 컴파일할 능력이 있다.따라서 우리의 목표를 가장 잘 실현하기 위해 우리는 클라이언트 기기에서 새로운 기초를 구축함으로써 이 문제를 해결하기로 결정했다.

1. 반응성

템플릿 문법과 의미의 반응성을 제어할 수 있는 성명적인 언어로서 우리는 분명히 이 두 가지 목표를 실현할 수 있다.코드가 있는 작은 부분의 반응성 원어에 의존하면 운행할 때의 크기와 복잡성을 크게 줄일 수 있다.
FLUURT에서 사용하는 방법은 내가 말한 입도 컴파일링 시 반응입니다.이것은 기본적으로 Svelte가 컴파일러를 사용하여 하는 작업과 Vue, Solid, MobX 등 라이브러리의 입자 반응성 사이의 혼합이다.
다른 입도 라이브러리와 유사하게, 현식 의존항 추적을 통해 프로그램 상태가 바뀔 때 코드와 관련된 부분만 실행될 수 있도록 합니다.그러나, 이것은 실행할 때 의존항을 추적하는 것이 아니라, 컴파일할 때 의존항 그룹을 생성하는 것이다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

사용 효과 연결은 계수에 달려 있다
리액트가 자동으로 항목을 배열에 넣으면 리액트 연결이라고 상상할 수 있다.이것은 확실히 일부 변두리 상황에 대해 예상을 초과한 재평가를 하는 데 도움이 되지만, 추적의 운행 시 비용도 낮출 수 있다.실행 시 입자 반응성, 예를 들어 MobX는 실제로 실행할 때마다 구독을 취소하고 다시 구독을 합니다.이런 방법은 이런 상황을 완전히 피했다.
Svelte와 마찬가지로 Svelte에는 VDOM이 없지만 Svelte와 달리 구독 목록을 관리합니다.즉, 단일 그룹으로 구성된 슬림한 베이스라인은 더 작지만 FLUURT는 더 나은 성능을 제공합니다.

2.일등작문

언어 디자인은 매우 도전적일 수 있지만, 우리는 일을 일치시키는 것이 매우 중요하다는 것을 안다.이를 실현하기 위해 우리는 반응성을 Marko언어에 확장 가능한 방식으로 도입하기를 희망한다.
우리의 건의는 우리의 원어는 Marko 표기일 뿐이라는 것이다.이것은 그것들이 공존하고, 끼워 넣고, 조합할 수 있다는 것을 의미한다.공동 포지셔닝은 그들이 그들의 템플릿을 사용하여 생활할 수 있다는 것을 의미한다.끼워 넣는 것은 구성 요소의 설치/해제에 독립할 수 있음을 의미한다.어셈블리 파일과 독립적으로 구성 및 추출할 수 있으므로 조합할 수 있습니다.
let 라벨로 반응값(ref/관찰/신호)을 정의할 수 있습니다.const 표시가 있는 파생 (컴퓨터/memo/$).네가 쓴 것도 같은 방식으로 사용하고 소비할 수 있다.
이러한 원어를 템플릿에 끼워 넣는 능력은 잘라서 붙이는 개발 체험을 창조했고 재구성 원가가 크게 낮아졌다. 코드는 기본적으로 마음대로 이동할 수 있고 변경할 필요가 없기 때문이다.

3.자조분수합작용

이 부분에서 라이브러리의 대부분 작업이 구성 요소와 독립된 것을 볼 수 있습니다.한 가지 장점은 이런 방법이 줄어들 수 있다는 것이다the overall overhead of having components.
그러나 더 흥미로운 것은 새로운 수합 작용을 허용한다는 것이다.우리는 성분 경계가 아니라 반응성 경계를 따라 수합할 수 있다.템플릿의 상태 섹션과 정적 섹션을 분할하여 브라우저에 일부 구성 요소와 하위 구성 요소만 전송할 수 있습니다.
클래식한 것은 일부 수합 응용 프로그램에 대해 Marko나 Elder JS에서 본 것처럼 상태가 있는 구성 요소를 만나면 모든 JS 코드를 이 점 이하로 만들어야 한다는 것이다.그러나 플로트는 우리 섬을 더 작게 분할하는 능력을 도입했다.그것은 대만이 아니라 하와이를 닮았다.

클라이언트에 보내는 최종 사용자 코드의 양을 대폭 줄일 수 있다.

요약

FLUURT 엔진의 주요 특징은 다음과 같습니다.그것은 어떤 주요 프레임에도 나타나지 않은 성능 기술을 켰다.이것은 더 적은 코드를 작성하는 것이 제출한 문자 수만과 관련이 있는 것이 아니라 개발 체험을 제공합니다.그것은 마침내 Marko에게 필요한 도구를 제공하여 클라이언트와 서버에서 모두 역할을 발휘할 수 있도록 했다.
이것은 단지 소개일 뿐이다.후속 문장을 기대하며 각 분야를 더욱 깊이 파고들겠습니다.
최신 업데이트를 보려면 Marko on Github, 또는 Join us on Discord를 참조하십시오.