웹 표준을 사용하여 iOS 및 Android 용 Flutter Apps를 개발하는 방법

Prologue : Kraken은 Tao Department of Technology Department의 프론트 엔드 엔지니어링 그룹이 만든 Flutter에 의존하는 고유 한 시스템입니다. 이 기사는 크라켄을 알고 이해하고 크라켄의 계획 생각의 일부와 Flutter 및 웹 혁신 도킹 행위를 공유합니다.

크라켄이란?

크라켄 벤처는 2018 년 말에 착안했습니다. 그 후,이 그룹은 "Later on Store"작업에 관심을 갖고 품목 데이터, 지속적인 비용 및 제한된 시간 데이터를 표시하기위한 많은 전자 랙 스크린 답변을 제공 할 것으로 예상했습니다. 크라켄은 기본 GCanvas API부터 TS 활용을 비롯하여 전체 Flutter Framework를 실행하기위한 현재 배열에 이르기까지 많은 IoT 배열 고유 렌더링 배열을 형성 할 것입니다. 우리는 그것을 이해하기 전에 전문화 된 배치에 대해 수많은 집중적 인 레크리에이션을 경험했습니다. 올해의 프론트 엔드 네트워크에서 Flutter는 매우 흥미로운 문제였으며 몇몇 그룹은 모임 내에서 게를 먹었습니다. 잘 알려진 크로스 엔드 렌더링 구조, 대조 및 현재 표준 배열 (Weex / React Native)은 가장 큰 차이점은 자체 드로잉 하이라이트에 따라 멀티 엔드 일관성 문제를 처리한다는 것입니다. 동시에 Flutter는 매끄럽게 렌더링 렌더링 파이프 라인을 가지고있어 주변의 업데이트, 형식 및 렌더링 계산에 능숙하며 전시회는 중요하지 않은 기록과 같은 상황에서 Android / iOS 로컬 렌더링보다 취약하지 않습니다.

팁 :이 문서는 Kraken을 이해하고 이해하는 데 도움이되는 Kraken의 아는 기사이므로 사용 표준 및 배열에 대해서는 계속 설명하지 않습니다.

Flutter에 따른 동적 구조 :

Ali, 특히 Taobao는 온라인 비즈니스에 압도적 인 조직으로서 역동적 인 앱 콘텐츠에 대한 오랜 비즈니스 관심을 가지고 있습니다. 비즈니스주기가 빠르 든 웹 문제를 수정하든 관계없이 두 가지 핵심적인 생각 만 있습니다.

고객 배출주기를 축약하십시오.

클라우드 보급을 통해 비즈니스 근거를 동적으로 업데이트합니다. 앱 변형 자체가 도착하면 연결이 다소 길어지고 경우에 따라 일부 전원 문제로 인해 제한됩니다. 클라이언트 측의 업데이트 속도가 문제인지 여부에 관계없이 요소를 통한 실제 업데이트는 거의 앱의 관심사가되었습니다.

Vacillate는 고유 한 배열을 제공하지 않습니다. 마찬가지로 네트워크에서 Flutter를 동적으로 조사하는데도 수많은 선구자가 있습니다. 배열이 추가로 다릅니다. Kraken은 많은 JS 엔진 반사 레이어를 사용하여 이론적 근거의 동적 실행 문제를 처리합니다. 다트와 JS는 두 개의 별도 설정으로되어 있습니다. 운 좋게도 JS 모터에는 C ++와의 대화에 대한 개발 된 답변이 있습니다. Kraken은 Dart FFI (Foreign Function Interface)를 사용하여 JS와 Dart 간의 생산적인 2 경로 대응을 달성합니다. 더 짧고, 더 높은 변속기 생산성과 Flutter Engine의 맞춤 조정이 필요없는 방식과 대조적이며 일반적인 배치.

"제로"학습 비용 :

1 W3C 표준 세부 사항 (이름 / 스타일 / DOM)

모든 것은 인터넷에 달려 있으며 W3C 표준은 인터넷에서 가장 중요한 표준입니다. Kraken은 무료 엔지니어를 위해 W3C 표준 세부 사항을 간단하게 활용하여 향상 시켰습니다. 따라서 비즈니스 연구 부서는 Kraken의 "제로"학습 비용으로 개선을 시작할 수 있으며 웹 혁신을 사용하여 생성 된 응용 프로그램도 Kraken으로 효과적으로 이동할 수 있습니다.

2. 도킹 프론트 엔드 환경 : 100W + npm 번들 :

Kraken은 세계에서 가장 역동적 인 엔지니어 네트워크 웹 디자이너와 거대한 프론트 엔드 환경을 통해 디자이너가 네트워크에서 현재 100W + npm 번들을 활용하여 조직의 생산성 향상을 지원할 수 있도록합니다. 예를 들어 첨부 된 비디오를 수락하십시오. 예제 응용 프로그램은 애니메이션 js 네트워크 JS 활기 차 모터의 공식 사례를 반복합니다. 크라켄에서의 실행의 영향은 실제로 프로그램의 영향과 동일합니다.

활기찬 모델 (애니메이션 JS 활용)

 

독특한 모델 : codepen.io/juliangarnier/pen/dwKGoW

동시에 알리바바 내부에서 Rax는 원격 이벤트 전환을 위해 선호되는 구조이며 Kraken + Rax의 혼합은 비즈니스의 발전 생산성을 더욱 중요한 수준으로 끌어 올렸습니다.

3. 프론트 엔드 지원 발전 장치 개발 :

최선을 다해야하는 노동자들은 처음에기구를 연마해야합니다. 재능있는 엔지니어에도 불구하고 생산적인 개선을 위해서는 적절한 발전 장치가 추가로 필요합니다. 또한 W3C 표준을 파악함으로써 이익을 얻는 크라켄 벤처의 개선은 실제로 프론트 엔드 벤처의 발전과 동일합니다. VSCode 및 WebStrom을 사용하여 코드를 작성하고, 코드 통찰력 및 ESLint 규칙 발견을 사용하여 코드 품질을 보장하고, 단위 테스트 장치 (예 : 농담)를 사용할 수 있습니다. 코드 묶음 등에 웹팩을 사용하십시오.

모임에서 Rax는 디자이너를 위해 모든 개선 단위를 마련했습니다.

4. 잘 배치 된 문제 해결 조건 (Devtools 중단 점 조사);

문제 해결과 관련하여 Kraken은 진행중인 JS 중단 점 조사를 뒷받침하고 sourceMap을 신속하게 찾기 위해 sourceMap을 지원합니다. 프로그래밍 된 핫 리로드 HMR을 강화하고 허브 트리 조사가 아직 실현되지 않은 프로그램 개선 경험을 통해 문제 해결 경험을 완전히 예측할 수 있습니다. 다음으로 요소 상자 모델 기능과 허브 트리 문제 해결에 시간이 허락하는 한 빨리 도움을 줄 수있는 용량을 추가합니다. W3C 표준을 실행하는 렌더링 모터로서 대비와 프로그램이 합리적입니다. 현재의 표준 프로그램이 렌더링 실행에 끔찍하지는 않지만 검증 된로드로 인해 직관적 인 경험을 면밀히 조사했습니다. 지능적인 경험의 문제는 대부분 통제되지 않은 커뮤니케이션, 엉뚱한 래스터 화 및 압도적 인 형식의 이론적 부분에 반영됩니다.

1. 직관적 인 제어

통제 된 직관적 경험은 실제로 경험의 길입니다. 프로그램에는 프론트 엔드 엔지니어가 겪고있는 수많은 문제가 있습니다. 당연히 원격 웹 페이지의 순간에 300ms의 문제가 연기됩니다.

멀티 모터 :

가장 최근의 0.3.0 형식에서 V8 + JavaScriptCore의 이중 JS 모터 조정을 강화합니다. JSA 심의 계층이 존재하기 때문에 새로운 JS 모터를 얻는 것이 추가로 간단합니다.

간단한 문제 해결 :

JSC 모드에서는 macOS의 사파리 문제 해결 기능을 합법적으로 활용하여 런타임 코드의 중단 점을 조사 할 수 있습니다. V8에서는 Chrome DevTools 문제 해결 기능을 제공합니다. 비즈니스 발전 경험을 다음과 같은 수준으로 끌어 올립니다.

다단계 조정 :

Flutter의 독창적 인 크로스 스테이지 기능을 통해 Kraken은 Android, iOS, macOS, Linux ..., 실제로 한 번 발전된 멀티 엔드 활동으로 조정됩니다.

후속 단계 :

꾸준한 렌더링 모터는 우리의 초기 단계입니다. 우리는 강력한 프레임 워크를 구축하기 위해 약 수천 가지의 프로그램 렌더링 능력 실험을 진행했으며 개발을 진행하고 있습니다. 다음으로, IoT 그룹이 웹에서 조사하고 직관적 인 대형 스크린 비즈니스 상황 등을 조사 할 수 있도록 도와주는 정통한 장비 상황에 계속 자원을 투입 할 것입니다. Kraken은 뛰어난 장비 상황의 능력을 충족시키기 위해 표준화 된 API의 진행을 제공 할 것입니다. .

Easings animations with anime.js