큰 프런트 엔드인가?
간단히 말해, 큰 프런트 엔드는 등등 안드로이드, 아이폰 OS, 웹, 시계와, 사용자에게 가장 가까운 층으로 모든 프런트 엔드에 대한 집단 이름이 UI 층이된다, 다음의 Unify, 그것은 큰 프런트 엔드입니다. 가장 큰 특징은 큰 프런트 엔드 개발, 모든 플랫폼에 적용한다는 것입니다, 개발자는 걱정에 APP Android 및 iOS 모드로 수행 할 필요가 없습니다. 대형 웹 프론트 엔드는 모바일 애플리케이션과 모바일 엔드 측 웹 응용 프로그램을 개발하는 것이 아니라 전용 웹 사이트의 사용을 개발할 수 있지만 통일의 시대입니다.
왜 큰 프런트 엔드 등장?
때문에 노드의 존재 엔지니어는 전방 및 후방 단부가 분리되도록, 전단 및 직접 실행 프로그램의 후단에 의존 할 필요가있다. 따라서 서비스가 하나를 작성해야하지만, 사용자 중심의 제품이 많은 그런 웹 사이트, 안드로이드 클라이언트, 아이폰 OS 클라이언트와 작은 마이크로 채널 프로그램이 될 수있는 경우 새로운 제품을 개발할 때. 각 플랫폼에 사용되는 기술 스택이 다른 것처럼, 코드는 재사용 인력과 물적 자원의 낭비 그렇게 할 수 없습니다. 그래서이 고통 점을 해결하기 위해 어떤 기술이 없다? 대형 프론트 엔드는 부드럽게에 각 플랫폼의 차이는, 개발자는 기술 스택이 여러 플랫폼을 위해 개발 될 수있다 필요 사실, 크로스 플랫폼 기술, 대형 프런트 엔드 크로스 플랫폼 기술의 주요 핵심입니다,에 출현 클라이언트.
크로스 플랫폼 프로그램 프로파일
현재 주류 크로스 플랫폼 용액 : 코도 / 폰갭은 그 원리에 따라, 네 가지 범주로 나누어 질 수 등 원주민 Weex 작은 마이크로 채널 프로그램 PWA 플러터를 반응한다.
- H5 + 네이티브 (코도 이온 성 마이크로 채널 애플릿)
- 자바 스크립트 개발 + 기본 렌더링 (기본, Weex, 빠른 애플리케이션 반응)
- 자동 绘 UI + 원생 (Flutter)
- 향상된 웹 응용 프로그램 (PWA)
다음으로, 네 개의 크로스 플랫폼 솔루션에 대한 간략한 소개.
H5 + 네이티브 복합 용도 개발
이 모델은 또한 하이브리드 개발로 알려져, 많은 응용 프로그램은 일반적인 마이크로 채널, Taobao의, 미국 그룹, iQIYI 다른 잘 알려진 모바일 응용 프로그램을 개발하기 위해이 모델을 사용하고 있습니다. 등 Dcloud, AppCan, Inoic처럼, 기본적으로 참조 코르도바 혼합 된 개발 프레임 워크에서 파생 된 사용하는 개발자를위한 개발 플랫폼에 하이브리드 모델을 사용하는 많은 회사가있다.
이러한 프레임 워크의 주요 원칙은 동적으로 컨텐츠 요구가 기본 페이지 부하 제어 웹보기 (안드로이드) 또는 WKWebView (IOS)에 의해 부하에, H5 달성 APP의 일부를 변경하는 것이있다, H5 부분은 그래서 지방 버전없이 언제든지 변경 될 수 있습니다 때문에 H5 코드 만 개발하면 필요한 반면, 동적 요구를 해결하기 위해, 또한 개발 비용을 절감 할 수있는, Android 및 iOS 두 플랫폼을 실행할 수 있습니다, 우리는 복합 용도 개발이 H5 + 네이티브 개발 모델을 호출 . APP 개발 한 하이브리드 모델은 우리가 하이브리드 응용 프로그램 또는 하이브리드 APP를 호출합니다.
네이티브 개발 플랫폼 H5 코드가 웹보기에서 실행중인 모든 기능을 혼합 개발에 액세스 할 수 있으며, 웹보기는 대부분 때문에 본질적으로 여전히 제한된 권한을 가진 샌드 박스에서 자바 스크립트를 실행하는 브라우저 커널이기 때문에, 시스템에 액세스 할 수있는 기능은 파일 시스템에 액세스 할 수없는 경우, 당신은 블루투스를 사용하는 등 수 없습니다 없습니다. H5 기능을 달성 할 수 없기 그래서, 우리는 고유 할 필요가있다. 하이브리드 프레임은 일반적 있도록 웹보기는 자바 스크립트와 네이티브 API 간의 통신을위한 다리가되었다, 자바 스크립트 호출에 대한 웹보기에 노출 된 후 액세스 네이티브 코드 번호를 API의 시스템 용량을 미리 구현하고, 책임있는 자바 스크립트와 기본이다 메시지 사이의 전송을 호출하고 형식을 정의하고 메시지의 의미 표준 프로토콜을 따라야하는 메시지를 전달, 우리가 웹보기에 의존는 자바 스크립트와 네이티브 사이의 통신에 사용 및 메시징 프로토콜을 달성 도구는 또한 혼합 된 개발 프레임 워크의 핵심입니다, JsBridge이 언급 된 웹보기 자바 스크립트 다리를했다.
동적 콘텐츠 H5, 웹 기술 스택의 사용을 것을 하이브리드 애플리케이션의 장점은 개발 및 풍부한 사회 자원 할 수 있습니다, 단점은 복잡한 사용자 인터페이스 나 애니메이션, 웹보기 곰 책임에 대한 성능 저하입니다.
기본 렌더링 자바 스크립트 개발 +
주로 페이스 북과 같은 오픈 소스 프레임 워크의 대표가 네이티브, 알리 Weex 반응 물론,하지 피카소 미국의 그룹 수익 및 최신의 빠른 응용 프로그램이있다.
방법의 기본 렌더링 + 자바 스크립트 개발을 주요 장점으로 다음과 같습니다 :
- 웹 개발 기술 스택, 빠른 거대한 커뮤니티, 상대적으로 낮은 개발 비용의 사용.
- 기본 렌더링 성능 비교 H5을 많이 향상시킬 수 있습니다.
- 동적 더 뜨거운 업데이트를 지원.
다음과 같이 물론, 단점이 있습니다 :
- 렌더링 자바 스크립트와 네이티브를 필요로 할 때 사이의 통신은, 같은 드래그와 같은 일부 장면에서 Caton 잦은 통신이 발생할 수 있습니다.
- 자바 스크립트 JIT, AOT 코드 실행의 효율성과 여전히 격차의 구현을 필요로하는 스크립트 언어입니다.
+ 렌더링 기본 컨트롤을 의존하기 때문에, 다른 컨트롤은 별도의 플랫폼을 유지해야하고, 경우에 시스템 업데이트, 커뮤니티 제어 지연 할 수있다 또한, 제어 시스템은 네이티브 UI 시스템의 한계, 예를 들어, 안드로이드, 제스처 될 것입니다 충돌 동음이 규칙은 중첩 된 컨트롤을 쓰기 위해 다른 사람을 사용하는, 고정, 제스처 충돌이 매우 어려울 것이다.
기본 반응
페이스 북 4 월 2015 년 크로스 플랫폼 모바일 애플리케이션 개발 프레임 워크 오픈 소스 (RN으로 함) 기본 반응, 페이스 북은 JS 프레임 워크는 네이티브 모바일 애플리케이션 플랫폼에서 파생 된 제품을 반응 이전 오픈 소스, 현재 iOS 및 Android 플랫폼을 지원합니다. RN은 모바일 응용 프로그램 개발 분야를 입력 할 수있는 자바 스크립트 HTML JSX와 유사한 언어 및 모바일 응용 프로그램을 개발하기 위해 CSS, 그리고 약간의 학습과 웹 프런트 엔드 개발 및 기술 인력에 따라서 잘 알고를 사용하여.
반응 네이티브, 설계 원칙과 일관성을 반응 가상 DOM은 결국 브라우저 DOM 트리에 매핑됩니다 반응 및 RN 가상 DOM은 JavaScriptCore는에 의해 네이티브 컨트롤 트리에 매핑됩니다.
JavaScriptCore는, 그것의 기본 반응의 두 가지 역할을 자바 스크립트 인터프리터 가지고있다 :
- 자바 스크립트에 대한 운영 환경을 제공합니다.
- 이 같은 사실, 아이폰 OS, 많은 JsBridge 구현이 JavaScriptCore는 기반으로 자바 스크립트와 통신, 역할의 기본 응용 프로그램 다리와 JsBridge 사이에있다.
원격 노드는 두 단계의 가상 DOM 기본 제어로 매핑 될 것이다 :
- 가상 DOM 레이아웃 기본에 전송하는 정보, 레이아웃을 메시징
- 레이아웃 정보에 따라 대응하는 네이티브 제어에 의한 기본 렌더링 컨트롤 트리
기본 렌더링 기본 컨트롤 반응 때문에 단지 여러 플랫폼에서 사용할 수있는 코드를 유지하기 위해, 기본 웹 개발 기술 스택이다 반작용하는 동안, 그래서 성능이 훨씬 더 응용 프로그램 H5 혼합보다됩니다.
Weex
Weex 알리바바 2016 년 말 크로스 플랫폼 모바일 개발 프레임 워크, 아이디어와 원칙에 출시과 유사한 기본 반작용, 가장 큰 차이점은 구문 수준, 개발 프레임 워크와 같은 기본 React.js 사용 반응 및 개발 Weex 사용 Vue.js로 프레임 워크. 뷰와 자바 스크립트 프레임 워크 분야의 가장 뜨거운 프런트 엔드라는 반작용, 사용 기능의 용이성은 Taobao의에 Weex도 널리 사용되는, 매우 강력하다.
빠른 응용 프로그램
빠른 응용 프로그램은 화웨이, 기장, OPPO, MEIZU 및 기타 (9 개) 국내 주요 주류 휴대 전화 회사가 함께 마이크로 채널 애플릿에 대해 목표 경량 응용 프로그램의 표준을 개발하는 것입니다. 또한 기본 및 Weex 반응에 비해 두 가지 차이점이 있습니다, 기본 컨트롤을 렌더링, 자바 스크립트를 사용하여 언어 발달이다 :
- 빠른 응용 프로그램 자체가 뷰를 지원하거나 기본 자바 스크립트 개발을 사용하여 문법, 반응하지 않고, 같은 개발 프레임 워크 및 마이크로 채널 애플릿, 그것은 애플릿이 이제 뷰 문법 개발 (mpvue), 원칙적으로 뷰를 사용할 수 있음을 언급 할만큼 가치입니다 구문은 또한 빠른 애플리케이션에 이식 할 수 있습니다.
- 네이티브 및 Weex 표현 / 레이아웃 엔진이 프레임에 통합되어 반응하여, 각 패키지는 APP 부피 설치 패키지를 필요로하고, 빠른 렌더링 애플리케이션 / 레이아웃 엔진은 ROM에 통합되는 애플리케이션 요구는 포장하지 이다 작은 설치 패키지, 왜, 같은 시간에 신속한 유통을 보장하기 위해 빠른 애플리케이션 성능을 달성하기 위해있다.
자동 绘 UI + 원생
당신은 UI 서로 다른 플랫폼의 일관성을 달성 할 수 있도록 UI를 그리는 다른 플랫폼에 통합 된 인터페이스를 달성하기 위해 렌더링 엔진으로 시스템은, 기본 컨트롤에 의존하지 않습니다. 자기 그린 엔진은 크로스 플랫폼 UI의 문제를 해결하기 위해, 그리고 여전히 다른 시스템에 전화를 네이티브 개발을 포함 할 수있는 기능을 포함하는 경우 있습니다. 다음과 같이 플랫폼 기술의 장점은 다음과 같습니다
- 고성능, 엔진에서 그림 가까운 성능 및 기본 컨트롤 있도록 UI 시스템 API를 그리는 직접 호출이기 때문이다.
- 유연하고 구성 요소 라이브러리 쉬운 유지 보수, 높은 충실도 UI 모양과 일관성, 네이티브 UI 렌더러 따라 제어가 아니므로 코드가 유지 관리가 용이하므로, 다른 플랫폼의 제어에 별도의 구성 요소 라이브러리를 유지 관리 할 필요가 없습니다. 구성 요소 라이브러리 코드의 동일한 집합이기 때문에 디스플레이의 모양이 서로 다른 플랫폼에 높은 충실도와 일관성을 달성 할 수 있도록, 같은 렌더링 엔진, 구성 요소, 그들은 기본 컨트롤에 의존하지 않기 때문에 추가로, 기본 레이아웃 시스템을 제한하지 않습니다 이 레이아웃은 매우 유연합니다.
단점 :
- 동적 불충분;하지 동적 코드 발행 언어의 개발을위한 프레임 워크로서 하이브리드 RN 그 사용 자바 스크립트 (JIT)처럼 그렇게 애플리케이션 게시 한 후, 그 배포 패키지를 컴파일 성능 자체 그린 UI 시스템은 일반적 AOT 모드에 적용되는 렌더링 UI를 보장하기 위해서 .
실룩 거리다
떨림은 구글의 오픈 소스 모바일 애플리케이션 개발 프레임 워크, 크로스 플랫폼, 고성능, 높은 성능의 일련이다. 앱 개발자는 다트 언어, iOS 및 Android 플랫폼에서 실행하는 것이 코드의 집합으로 개발할 수 있습니다. 떨림 구성 요소, 풍부한 인터페이스를 제공하며, 개발자들은 신속하게 떨림 네이티브 확장을 추가 할 수 있습니다.
떨림도 웹보기는 운영 체제의 기본 컨트롤을 사용하지 마십시오. 대신, 플러터 위젯을 끌기 위해 자신의 고성능 렌더링 엔진을 사용합니다. 이것은 Android 및 iOS UI에 일관성을 보장 할뿐만 아니라, 높은 유지 보수 비용을 초래 기본 제어 및 제한에 대한 의존을 피하기 위해.
자사의 2D 렌더링 엔진으로 떨림 사용 라이브러리에 의존, 구글의 라이브러리에 의존하는 2D 그래픽 라이브러리 글꼴, 좌표 변환 포함하고, 비트 맵은 고성능과 컴팩트 한 성능이며, 라이브러리에 의존는 크로스 플랫폼이며, 매우를 제공합니다 친화적 인 API, 현재 구글 크롬 브라우저와 안드로이드 그것은 가치가 떨림 때문에 이는 더 이상 필요로 할 때 APK (안드로이드 응용 프로그램 설치 패키지), 포장, 때문에 라이브러리에 의존 내장 된 안드로이드 시스템에, 그것을 언급하지, 그 그래픽 엔진으로 라이브러리에 의존을 사용하는 APK는하지만 라이브러리에 의존 아이폰 OS 시스템에 라이브러리에 의존 빌드 IPA 있도록, 또한 인 라이브러리에 의존을 함께 포장되어야하며, 내장되지 않는 이유 iOS의 주된 이유는 작은 설치 패키지에 비해 안드로이드 떨림 APP 설치 패키지.
그러나 떨림 또한 동적 업데이트 실행 코드와 핫을 지원하지 않는 단점이있다.
무게 (진행 웹 응용 프로그램)
PWA 위의 크로스 플랫폼 개발의 특정 종류에 속하지 않는,이 개념은의 PWA는 기본적으로 웹 응용 프로그램은 또한 가지고 일부 기능 네이티브 앱, 등의 오프라인 기능, 로컬 캐시, 푸시 알림 등 몇 가지 새로운 기술을 사용하는 것입니다 네이티브 앱과 같은 장점과 네이티브 앱 웹 응용 프로그램의 외모와. 프런트 엔드 기술 스택의 PWA 전체를 사용하지만 휴대 전화와 브라우저를 지원해야하고, 현재뿐만 아니라 PWA를 사용할 수 이상의 11.3 아이폰 OS 폰을 운반로, 구글 플레이 서비스 ServiceWorker 안드로이드 폰을 지원합니다. 때문에 전화 제조 업체 및 브라우저 벤더 국내 이동의 문제의 단합, 나라에서 PWA 개발은 매우 좋은 것이 아니라 외국에서가 아니라 이러한 문제를 가지고있다.
대형 프런트 엔드 동향
대형 프런트 엔드 모바일 개발은 웹 프런트 엔드의 발전 추세가되지 않습니다, 그것은 기술 동향 디스플레이 장치 단자의 미래 개발 될 것입니다. 대형 프런트 엔드 터미널은 단지 웹 페이지를 개발하기 위해, 더 개발, 엔지니어링 및 기타 작업을 할 것입니다. 대형 프론트 엔드 엔지니어는 모두 끝 개발자를 얻을 수있을 것입니다. 논란이 전체 스택 엔지니어들과 비교하면 더 가능하다. 그러나 동시에 개발자를, 같은 네이티브 iOS 또는 안드로이드 개발 기술을 배울 필요가 HTML, CSS, JS 등의 프런트 엔드 개발자의 지식을 배울 수있는 기본 프론트 엔드 개발자로 더 기술 스택이 될 것입니다, 그리고 일반적인보고 크로스 플랫폼 기술, 더 나은 가족 대형 프론트 엔드에 통합 할 수있는 유일한 방법.
