PWA 대 Flutter: 세부 비교
게시 됨: 2020-07-10목차
이 기술들 사이에서 모든 복잡한 과정이 진행되기 때문에 프로그레시브 웹 앱과 Flutter라는 두 기술의 차이점을 배우려고 할 때 처음에는 약간 혼란스러울 수 있다는 점을 이해할 수 있습니다. 결국 하나의 단일 코드 기반을 사용하여 장치 전반에 걸쳐 매력적인 경험을 제공하는 데 둘 다 사용할 수 있기 때문에 이론상 매우 유사하게 들립니다.
이 두 가지를 구별하기 위해 오늘 우리는 작동 방식에서 실제 사용에 이르기까지 이 두 가지 기술에 대해 자세히 알아볼 것입니다. 바로 들어가 보겠습니다.
간략한 개요
PWA 란 무엇입니까?
간단히 말해서 프로그레시브 웹 앱은 앱처럼 보이고 느껴지는 웹사이트입니다. 이 기술은 웹과 기본 응용 프로그램의 최고의 기능이 혼합되어 있습니다. 즉, PWA를 사용하는 사용자는 푸시 알림, 지리적 위치 등과 같이 이전에 기본 응용 프로그램에 독점적이었던 모든 기능을 그대로 유지하면서 혜택을 받을 수 있습니다. 웹의 최고의 기능
유망한 신기술 입니다 . 최근에 Windows에 PWA를 밀어넣은 Microsoft를 비롯한 모든 대기업의 대규모 채택과 결합하여 이제부터는 PWA를 더 많이 보게 될 것이라고 확신할 수 있습니다.
플러터란?
픽셀 완벽한 개발 기능으로 유명한 Flutter는 네이티브 애플리케이션의 모양과 느낌을 그대로 유지하면서 모바일 앱을 만들고자 할 때 작업을 완료할 수 있는 Google의 최신 오픈 소스 SDK(소프트웨어 개발 키트)입니다. 사용 가능한 크로스 플랫폼. 이는 Flutter 앱이 하나의 단일 코드 기반을 염두에 두고 구축되어 개발 비용을 크게 절감한다는 것을 의미합니다.
이것은 Progressive Web App과 매우 유사해 보일 수 있지만 이러한 모든 기본 앱 경험을 가능하게 하는 기본 메커니즘은 크게 다릅니다.
구체적으로 들어가면
언어
앞서 언급했듯이 프로그레시브 웹 앱은 웹의 새로운 표준에 가깝고 어떤 프로그래밍 언어로 코딩해야 하는지에 대한 엄격한 규칙은 없습니다. 그러나 여전히 근본적으로 웹의 기술이기 때문에 웹, JavaScript 와 같은 기반 언어는 여전히 PWA 개발의 기본입니다.
반면 Flutter는 Dart 프로그래밍 언어를 사용합니다. Dart는 완전한 객체 지향 프로그래밍 언어이며 C 기반 구문 스타일을 가지고 있기 때문에 유사한 구문 스타일에 익숙하다면 쉽게 배우고 익힐 수 있습니다. 또한 Dart는 ARM 및 x86 코드로 컴파일할 수 있으며 최신 버전의 Flutter를 사용하면 Dart 코드를 웹에서 효과적으로 실행할 수 있도록 JavaScript로 변환할 수도 있습니다.
복잡성
PWA는 더 오래되고 더 성숙한 언어인 JavaScript를 기반으로 하기 때문에 선택할 수 있는 JavaScript 프레임워크와 라이브러리가 많기 때문에 학습 곡선이 더 관대할 것이라고 기대할 수 있습니다. 훨씬 새로운 언어인 Flutter는 UI에서 로직 코드에 이르기까지 모든 것이 Flutter에서 다소 혼합되어 보일 수 있기 때문에 언뜻 보기에는 조금 더 복잡해 보일 수 있습니다. 그리고 모든 것이 기본적으로 Flutter의 위젯 이기 때문에 비정상적으로 크고 깊고 복잡한 '위젯 트리'가 발생하는 상황에 처할 수 있습니다.
성능
성능에 관해서는, 이 둘은 서로 발끝을 맞대고 있으며 예상대로 일방적인 경기가 아닙니다. Flutter 앱과 비교할 때 일반적인 PWA는 네이티브 코드와 직접 '대화'하려고 할 때 약간의 성능 저하가 있습니다. , 예: GPS, 카메라 등
그러나 벤치마크를 보면 NodeJS 와 같은 JavaScript 프레임워크가 여러 경우에 Dart(Flutter 앱의 중추)보다 낫지 않더라도 동등하게 수행할 수 있다는 것이 분명합니다.
이는 JavaScript가 기본적으로 단일 스레드 언어임에도 불구하고 최신 CPU의 멀티코어 특성을 더 잘 활용하고 워크로드를 더 고르게 분산할 수 있기 때문입니다. JavaScript 프로세스의 병렬 실행을 위한 스레드 사용을 가능하게 하는 NodeJS가 도입한 최근 worker_threads 모듈을 통해 JavaScript는 이제 CPU 집약적 워크로드를 더 잘 처리할 수 있으며 실제로 Dart와 같은 언어를 능가할 수 있습니다.
특징
의심할 여지 없이 Flutter(모바일 앱의 플랫폼 간 개발을 위해 특별히 제작된 SDK)는 웹 기술을 기반으로 구축된 PWA보다 훨씬 더 기능적입니다. Flutter 앱은 시스템과 더 긴밀하게 통합되어 있으므로 장치의 더 많은 기본 기능을 활용할 수 있습니다.
또한 전반적인 사용자 경험과 관련하여 Flutter는 iOS 및 Android 플랫폼의 사용자가 동일한 원활한 경험을 경험할 수 있는 완벽한 픽셀 철학을 채택하기 때문에 여기에서 우위를 점하고 있습니다.
이는 네이티브 플랫폼 구성 요소를 사용하는 대부분의 다른 프레임워크와 달리 Flutter가 자체 UI 구성 요소를 렌더링한다는 사실 때문입니다. 이러한 방식으로 Flutter 앱은 여러 장치에서 훨씬 더 일관성이 있지만 결과적으로 일반적인 Flutter 앱 크기는 일반적인 PWA보다 훨씬 큽니다. 간단한 "Hello, world!" 예를 들어 Flutter 앱의 크기는 최대 7MB일 수 있지만 동일한 콘텐츠의 PWA는 1MB 표시를 깨뜨리지 않습니다 .
사용 사례
그렇다면 언제 둘 중 하나를 선택해야 할까요? 글쎄, 이것은 그들이 서로 다른 플랫폼과 다른 장치에서 거의 동일한 사용자 경험을 제공할 수 있기 때문에 (그녀가 말한 대로) 어려운 부분입니다. 핵심 포인트는 도달 범위 또는 사용자 경험 중에서 이러한 기술의 장점 중 어느 것을 더 선호하는지입니다.
당연히 PWA는 웹 기술에 의존하기 때문에 더 넓은 범위의 청중에게 다가갈 수 있고 심지어 Microsoft Store에서도 구할 수 있습니다. 따라서 PWA는 거의 7억 명에 가까운 월간 활성 사용자인 전체 Windows 10 설치 기반으로 각각에 대한 도달 범위를 효과적으로 확장합니다.
반면에 Flutter 앱은 픽셀이 완벽하다는 철학을 바탕으로 인앱 경험을 훨씬 더 매력적으로 만드는 동시에 Android와 Android 모두에 단 하나의 코드 기반만 필요하기 때문에 기업을 위한 비용 효율적인 솔루션이 될 수 있습니다. iOS 플랫폼.
예
우리가 수집한 PWA 및 Flutter 앱 중 다음은 해당 기능을 가장 잘 나타낼 수 있다고 생각하는 더 눈에 띄는 앱입니다.
Flutter—뉴욕 타임즈
Flutter는 New York Times의 KENKEN 게임의 새로운 Flutter 웹 버전으로 그 잠재력이 검증되었기 때문에 2019년 중반에 아주 최근에 새로운 장을 시작했습니다.
Flutter 앱의 웹 버전을 만들기 위해 노력해 온 개발자들에게 이것은 Flutter 프레임워크가 최대로 푸시될 때 무엇을 할 수 있는지 보여주기 때문에 좋은 소식입니다.
PWA—트위터 라이트
Twitter Lite는 PWA가 가장 잘하는 일을 수행하므로 가장 성공적인 PWA 구현이라고 할 수 있습니다. Twitter PWA를 경험하고 싶은 사용자는 데스크톱, 모바일, 태블릿 등 생각할 수 있는 모든 기기에서 앱을 실행할 수 있습니다.
그리고 동일한 성능의 Flutter 앱과 비교할 때 최고 성능의 PWA의 핵심적인 차이점은 PWA의 전체 크기가 기기에서 2MB를 넘지 않아야 한다는 것입니다.
웹사이트를 PWA로 전환한 후 Twitter는 인상적인 결과를 얻었습니다. 숫자가 스스로 말해줍니다.
- 이탈률 20% 감소,
- 세션당 페이지 수 65% 증가,
- 전송된 트윗이 75% 증가했습니다.
관련 기사: 영감을 주는 12가지 프로그레시브 웹 앱 예제
Flutter PWA, 가능합니까?
Flutter에 대한 웹 지원은 이미 논의 중이며 베타 단계에 있습니다. 웹에서 Flutter를 사용할 수 있도록 하는 프로세스는 모바일 애플리케이션에 사용되는 ARM 기계 코드로 컴파일하는 대신 Dart를 JavaScript로 컴파일하는 것만큼 간단할 수 있습니다.
그러나 여전히 이 모든 것을 달성하기가 조금 더 어렵게 만드는 몇 가지 합병증이 있습니다. 그러나 위의 New York Times의 KENKEN 게임에서 관찰된 바와 같이 Flutter 앱의 적절한 웹 구현을 만드는 것이 가능 하며 Flutter PWA는 조만간 실현될 것입니다.
결론
둘 다 잠재력이 많은 비교적 새로운 기술이므로 더 많은 옵션을 탐색하고 개발 요구 사항에 가장 적합한 옵션을 직접 확인하는 것이 좋습니다.
SimiCart는 Google에서 인정한 PWA 개발 에이전시로서 귀하의 Magento 매장에 차세대 쇼핑 경험을 제공할 준비가 되어 있습니다.
더 읽어보기:
PWA 대 전자: 심층 분석
PWA 란 무엇입니까? 프로그레시브 웹 앱에 대해 알아야 할 모든 것
Magento PWA Studio 대 Vue Storefront: 어느 것이 당신에게 적합합니까?