소개하다.

2011년에 우리는 MURAL을 설립했는데 목표는 단 하나였다. 기능이 풍부한 디지털 화이트보드를 만드는 것이다. 이를'MURAL'이라고 하는데 실시간 온라인 협업에 사용된다.회사가 발전함에 따라 우리 공사팀은 점점 실적 최적화를 중시한다.그러자 코로나-19 대유행으로 세계 곳곳의 회사들이 원격 근무에 신속하게 적응하게 됐다.벽화의 인기가 급증하면서 대량의 신규 사용자와 합병 사용자가 뒤따랐다.점점 더 많은 대형 팀들이 갑자기 MURAL에서 합작하여 갈수록 복잡하고 다양한 내용을 창조하고 있기 때문에 우리의 응용 프로그램 속도가 느려졌다.성능은 현재 우리의 최우선 임무이기 때문에 우리는 가능한 한 빨리 이 문제를 해결해야 한다.

문제의 소재

처음에 우리가 벽화를 개발한 것은 이용하기 위해서였다DOM.HTML의 기본 프로그래밍 인터페이스로서 웹 개발자에게 익숙해져서 우리 응용 프로그램의 실용적인 출발점이 되었다.그러나DOM의 디자인은 대량의 도형 구성 요소로 구성된 동적 변화를 지원하는 인터페이스가 아니다. 벽화 사용자들이 수천 수만의 새로운 요소를 창조하고 있다.벽화에 추가된 모든 메모, 이미지, 텍스트 상자는 응용 프로그램의 성능을 더욱 떨어뜨려 곤경에 빠지고 낙담할 수 있다.
동결 또는 정체된 협동 설계 사고 도구는 사용되지 않는 협동 설계 사고 도구이다.우리는 우리의 방법을 갱신해야 한다.DOM의 한계를 해결하기 위해서, 우리는 그것을 돌려 응용 프로그램을 HTML5 canvas 로 이전하기로 결정했다.단 한 가지 문제: 우리는 DOM을 둘러싸고 전체 코드 라이브러리를 설계했다.

맞춤형 문제 맞춤형 솔루션

하룻밤 사이에 MURAL은 대규모 멀티플레이어로 변신해 병발성과 지연 문제가 있었다.대형 팀이 벽화에서 함께 일하면서 서로 속도를 늦추고 있다는 얘기다.우리는 많은 사용자들이 한 폭의 벽화에서 동시에 협업할 수 있도록 해야 한다. 이것은 비디오 게임 업계가 자주 겪는 도전이다.누가 게임 개발자보다 게임 개발자의 문제를 더 잘 해결할 수 있습니까?

Why performance in game development is important

Performance is often highly prioritized in game development; because games are a time-based medium, developers need to make sure their code doesn't slow down the frame rate.

연방 택배 입력

Fede는 기존 엔진으로 제품을 구축하는 데 익숙하지만 기존 제품에 엔진을 구축한 적이 없는 게임 개발 업체였다.도전의 자극을 받아 그는 자신의 방법을 연구하고 기획하기 시작했다.'저급 자바스크립트'부터

What is an engine?

The definition of an engine can get a bit nebulous. For both the purposes of this piece and game development, an engine can be thought of as a set of code libraries that handles low-level code. This code includes rendering, object management, audio, and user input.

저급 프로그래밍은 일반적으로 웹 개발과 무관하다.만약 그렇다면, 통상적으로 WebAssembly (WASM)이 참여한다는 것을 의미한다.그러나 페덱스는 당시 자바스크립트에 비해 브라우저에 대한 지원이 제한적이기 때문에 WASM의 가능성을 배제했다.그렇다면 그가 말한 낮은 수준은 무슨 뜻일까?
핀테크 업계의 프로그래밍 수요를 떠올리게 하는 저급 자바스크립트는 코드를 설명하는데 그 중의 성능이 모든 선택을 결정한다.예를 들어 Fede는 map와 reduce 등 불필요한 원형 방법을 삭제하고 for 순환을 바꾸며 코드를 구조화하여 일류 함수를 사용하지 않고 코드의 가독성과 유지보수성을 유지했다.일반적인 웹 개발에서 이런 금욕주의적인 방법을 취하는 것이 항상 필요한 것은 아니지만, MURAL처럼 대량으로 동시에 사용하는 응용 프로그램에 있어서는 매우 중요하다.

What is "C-like" JavaScript?
JavaScript automatically handles garbage collection. Therefore, web developers typically aren't concerned about memory allocation and the speed of method calls. However, when speed is the highest priority, techniques borrowed from low-level languages can powerfully boost performance. Some of these techniques include removing prototypal methods, avoiding passing functions as arguments, and ruthlessly managing memory (e.g., mutating an array in place rather than creating a new one).

Here's an example. Compare the following two programs, which both identify the first character of every animal type that is exactly three letters long:

     // Common JavaScript approach
     const animals = ['fish', 'dog', 'cat', 'giraffe'];
     const firstCharOfThreeLetterNames = animals
       .filter(animal => animal.length === 3)
       .map(animal => animal[0]);


     // C-like JavaScript approach
     const animals = ['fish', 'dog', 'cat', 'giraffe'];
     const threeLetterAnimalTypes = [];
     for (let i = 0; i < animals.length; i++) {
       if (names[i].length === 3) {
         threeLetterAnimalTypes.push(names[i][0]);
       }
     }

Benchmarking these programs against each other shows the second solution runs roughly 50% faster.

엔진

우리의 기존 해결 방안은 처음에 사용자 입력을 도형으로 변환하여 DOM에 보여주는 실험이었다.이런 DOM 기반의 방법은 지금까지 줄곧 우리를 위해 잘 서비스해 왔지만, 결국은 새로운 수요로 인해 시대에 뒤떨어졌다.기존 코드도 DOM 그리기를 둘러싸고 설계된 거대한 바위인데 벽화 개념을 과장된 내용으로 바꾸는 기존 논리의 복잡성 때문에 응용 프로그램의 업데이트와 테스트가 까다롭다.따라서 Fede는 벽화를 캔버스에 유지 보수할 수 있는 방식으로 이식하기 위해 두 개의 엔진으로 구성된 맞춤형 시스템을 다시 시작하기로 결정했다. 하나는 삼각형과 원형 등 도형 원어를 처리하는 데 사용되고, 다른 하나는 벽화 대상(예를 들어 메모지와 GIF)을 원어로 바꾸는 데 사용된다.

렌더링 엔진

렌더링 엔진은 목표에게 시각적 효과를 보내는 직책이 있다.다른 엔진과 달리 이 엔진은 벽화의 특정 개념을 처리하는 처리 프로그램이 없다.
렌더 엔진은 벽화 엔진이 출력한 도형 원어를 필요로 하고, 이를 지정한 '표면' 으로 렌더링해야 한다. 사용자는 벽화의 어느 곳에서든 볼 수 있다.
잠재 표면은 다음과 같습니다.

화포: 벽화 응용에 사용

PDF 또는 SVG: 이러한 파일 형식으로 내보낼 때 사용

WebGL: 아직 실현되지 않았지만 흥미로운 잠재적 3차원 응용 프로그램을 제공

벽화 엔진

MURAL engine는 사용자를 위한 개념을 그래픽 원어로 변환해 가장 기본적인 특징인 AST로 간소화했다.
예를 들어 앞에서 언급한 메모는 컬러 사각형, 테두리, 텍스트 상자로 분해할 수 있다.

What is an AST?
An Abstract Syntax Tree, or AST, is a structure that describes how data relates semantically to itself, or in other words, where each datum fits in a hierarchy with the rest. For example, an AST of a sentence might be broken down into verbs, adjectives, and nouns. Read more.

처음에는 벽화 논리를 도형 원어로 바꾸고 이 원어를 렌더링 목표에 보내는 이중 직책을 엔진이 처리했다.그럼 왜 저희가 지금 얘네를 두 부분으로 나눠야 돼요?
Separating the concerns는 두 개의 서로 다른 엔진으로 나뉘어 각 엔진 주위에서 유지보수, 갱신과 추가 지원 인프라를 구축하여 미래의 비용을 줄일 수 있다.이 새로운 디자인으로 Fede는 렌더링 엔진과 함께 테스트 자동화 시스템을 구축할 수 있게 되었다. 이것은 새로운 방법의 관건적인 부분으로 Fede가 예상한 대로 작동하고 미래의 변경이 성능을 떨어뜨리지 않도록 하는 것이다.

도전하다

물론 이 작업의 가장 좋은 해결 방안이 된 것은 canvas가 쉽게 통합되는 것을 의미하지는 않는다.교체와 실험을 장려하기 위해 A/B 테스트는 이렇게 중대한 변경으로 인해 커다란 합병 충돌을 초래할 수 있기 때문에 새로운 개발이 생산에 점차적으로 합병된다는 것은 낡은 방법과 새로운 방법이 작업이 끝날 때까지 어깨를 나란히 해야 한다는 것을 의미한다.
우리의 용례의 다른 복잡성은 canvas가 내장된 접근성 지원이 완전히 부족하고 우리는 회사로서committed to addressing.이것은 rendering text subpixel level 텍스트 처리에서 across devices and resolutions. 텍스트 처리에 대한 차등 지원도 CSS specification 에서 설명이 부족하다. 예를 들어 모든 브라우저가 언제, 어떻게 줄이 바뀔지 자유롭게 결정할 수 있다는 것을 의미한다.비록 우리는 본래 변통 방법을 구축할 수 있지만, 그것들은 대량의 테스트와 유지 보수 비용을 증가시킬 것이다. 특히 오늘날의 상청 브라우저 환경에서, 우리 사용자들은 브라우저의 보물단지에서 벽화를 창작한다.
Fede는 Chrome로 그의 개발 진도를 추적했다. 왜냐하면 이것은 우리의 80%의 사용자 그룹을 대표하고 GPU를 이용하여 속도를 가속화하기 때문이다.모든 사용자가 원활한 사용자 체험을 할 수 있도록 그는 정기적으로 다른 브라우저와 장치에서 테스트와 구축을 진행한다.이러한 수동 테스트는 리눅스, 윈도, 맥스, 안드로이드, iOS를 각종 하드웨어 규격으로 운행하는 장치를 포함한다. 왜냐하면 우리의 지연 문제는 하드웨어 문제이지 네트워크 문제가 아니기 때문이다.
이렇게 함으로써 그는 사파리의 변수canvas renders 등 브라우저에 대한 추가 제한을 발견하고 해결했다. 예를 들어 완전한 벽화를 보면 피드는 hardware limitation for renderable assets를 통해 이 문제를 해결하고 이 축소 단계의 굴림 속도를 낮추어 응용 프로그램이 계속 안정적으로 실행되도록 할 것이다.

일부 과장된 직책을 화면 밖으로 옮기다 결실

DOM 중심의 전체 구조에서 맞춤형 캔버스 렌더링 엔진으로 이전한 후, 우리는 성능 (30fps 또는 더 높은 프레임 비율로 평가) 을 80% 향상시켰다.개발 과정에서 Fede가 크롬에서 인물화 문제를 만났을 때 그는 믿을 만한 복제 사례를 포함하여 문제 해결에 기여한 상세한 보고서를 제출했다.
렌더링 프로세스는 특정 응용 프로그램의 논리와 분리되기 때문에 서로 교차하지 않습니다.자동화된 단말기부터 단말기까지의 테스트와 시각화 테스트를 통해 코드 라이브러리는 유지보수와 테스트가 더욱 쉬워지고 여러 목표를 나타낼 수 있는 시스템을 창설함으로써 내부와 외부 개발자들이 다양한 흥미로운 방식으로 벽화 기능을 활용할 수 있는 새로운 기회를 열었다.