2022년 베스트 프로그레시브 웹 앱 프레임워크 선정

현재의 채택 속도로 인해 귀하와 같은 신규 이민자는 PWA를 구축할 견고한 기반을 찾는 것이 어렵다는 것을 알게 될 것입니다. 물론 우리는 너무 많은 다른 PWA 프레임워크가 있다는 것을 이해합니다. 각 프레임워크에는 선택할 수 있는 고유한 특전이 있습니다.

이러한 이유로 전체 프레임워크 선택 프로세스를 훨씬 쉽게 찾을 수 있는 포괄적이고 최상의 선택 목록을 제공해야 합니다.

바로 들어가 볼까요?

PWA 개발을 위한 최고의 프레임워크

1. 앵귤러

초기의 가파른 학습 곡선을 거친 후 Angular는 작업하기에 좋은 프레임워크입니다. 각 Angular 요소는 다른 프레임워크를 사용하여 빌드된 프로젝트와 완벽하게 호환되므로 본질적으로 완전히 모듈식입니다. 단조롭고 반복적인 작업을 처리하는 번거로움을 덜어주기 위해 Angular를 사용한 전체 개발 프로세스도 훨씬 쉬워졌습니다. Angular를 사용하여 구축된 프로그레시브 웹 앱은 브라우저가 앱을 다운로드하고 실행하기 전에 Angular HTML 및 TypeScript 코드를 효율적인 JavaScript 코드로 변환하여 더 빠른 애플리케이션 렌더링을 가능하게 하는 고유한 컴파일 방법인 AOT(Ahead of Time)의 이점도 크게 누릴 수 있습니다.

장점:

• 잘 짜여진 방법론
• 크고 활동적인 개발자 커뮤니티
• 대규모 프로젝트에 적합한 복잡한 인프라
• 선택할 수 있는 타사 확장의 훌륭한 아카이브
• 속도와 보안에 최적화된 독창적이고 뛰어난 개념인 'Ahead of Time Compiler'
• 코드 효율성 및 모듈성을 높이기 위한 종속성 주입
• 완전 모듈식 요소

단점:

• TypeScript에 대한 이해가 필요합니다.
• 가파른 학습 곡선
• SEO 친화적이지 않음

Angular를 사용하여 구축한 라이브 PWA 프로젝트 : Corona Statistics, Google Cloud

2. 반응

Angular 커뮤니티는 규모가 클 수 있지만 React 커뮤니티에 촛불을 들고 있지는 않습니다. 프로그레시브 웹 앱 개발 영역에서 React는 'Create a new React 앱' 생성기와 PWA를 웹의 새로운 표준으로 만들기 위한 모든 이니셔티브로 인해 일류 시민으로 잘 알려져 있습니다.

그리고 React가 PWA 개발자들 사이에서 인기 있는 이유는 Angular와 같은 본격적인 프레임워크가 아니라 라이브러리 에 가깝다는 특성 때문에 React가 개발 유연성을 더 많이 허용할 수 있는 방법과 관련이 있습니다. 즉, Angular의 Model-View-Controller 모델에 비해 React 라이브러리에는 View만 있고 HTML을 가상 DOM 서버 측 렌더링으로 JavaScript Works로 가져올 수만 있습니다.

장점:

• 배우기 쉬움: React의 구문은 간단하고 많은 HTML 작성 기술이 필요합니다.
• 인터랙티브하고 매력적인 PWA 생성의 핵심인 적절한 서버 측 렌더링 지원
• 개발 유연성 향상
• 가상 DOM과 다양한 렌더링 최적화를 사용하여 성능 면에서 상위권
• 오픈 소스 라이브러리 및 인기 — 전 세계의 거대한 React 개발자 커뮤니티에서 매일 기여합니다.

단점:

• HTML을 더 쉽게 작성하고 추가할 수 있도록 JSX에 대한 이해
• 문서 부족
• SEO 친화적이지 않음

React를 사용한 라이브 PWA 프로젝트 : Starbucks, Twitter Lite

읽기 권장:

• [튜토리얼] React, Node.js 및 Firebase를 사용하여 첫 번째 PWA 만들기
• 프로그레시브 웹 앱: 영감을 주는 실제 브랜드의 12가지 예

3. 뷰

React와 마찬가지로 VueJS는 핵심에서 많은 유사점을 공유하며 둘 다 실제 DOM을 가볍고 효율적으로 표현하기 위해 Virtual DOM을 사용합니다. Vue가 HTML 및 CSS와 같은 기존 웹 기술을 수용하고 개선하는 방식인 반면 React는 주로 JavaScript를 사용하는 고급 경로를 사용합니다. 이것은 또한 프론트엔드 초보자가 Vue에서 PWA를 배우고 개발하는 것이 더 친숙한 시간임을 알 수 있기 때문에 결과적으로 Vue의 학습 곡선이 초보자에게 더 관대합니다.

장점:

• 가장 배우기 쉬운
• 괜찮은 문서
• JSX 및 Typescript와 결합하여 최상의 결과 생성 가능
• 애니메이션
• Virtual-DOM으로 인한 향상된 렌더링 성능

단점:

• 너무 유연함: 대규모 프로젝트에서 보고되고 해결되지 않은 통합 문제가 너무 많습니다.
• 소규모 개발팀

Vue를 사용하여 구축한 라이브 PWA 프로젝트 : Zadig & Voltaire, Tally Weiji

 추천 자료: Magento PWA Studio vs Vue Storefront: 어느 것이 당신에게 적합합니까?

4. 프리액트

React에 대한 가볍고 성능 지향적인 대안으로 사용 가능한 Preact는 가볍고 빠르며 대부분의 요구 사항을 충족해야 하므로 PWA 개발에 이상적인 프레임워크입니다. PWA 커뮤니티 내에서 매우 훌륭하고 추천되는 이유는 React와 완벽하게 호환되며 React에서 Preact로의 전환은 기존 코드에 대한 호환성 레이어 preact-compat를 구현하는 것만 큼 간단하기 때문입니다.

장점:

• 가볍고 빠름
• 원활한 호환성을 위해 React와 동일한 ES6 API를 사용합니다.
• 즉시 사용할 수 있는 탁월한 PWA 성능을 제공하는 Preact CLI
• 자체 서버 측 렌더링, 라우팅 및 추가 기능과 함께 제공

장점:

• Preact의 많은 '혁신'은
• React 구성 요소 또는 패키지를 사용하려면 preact-compat가 필요합니다.

Preact를 사용한 라이브 PWA 프로젝트 : 공식 웹사이트는 Preact PWA, Code and Comment

5. PWA빌더

Microsoft가 PWA 채택을 추진하기 위해 자체적으로 설립한 PWABuilder는 웹 사이트를 여러 플랫폼에서 빠르고 기능적이며 매력적인 PWA로 변환하는 작업에 최선을 다하도록 구축되었습니다. 최근에 출시된 PWA Builder 2.0은 또한 WebKit에 의해 구동되는 Mac 데스크탑 플랫폼으로 공식 지원을 확장합니다. 이 프레임워크는 Microsoft Store 및 Mac과 같이 불가능해야 하는 장소에서의 가용성을 포함하여 플랫폼 간 PWA를 만드는 것을 목표로 합니다. 예, macOS, 최근 출시된 PWA Builder 2.0 버전이 WebKit 기반 브라우저로 공식 지원을 확장했습니다.

장점:

• 직관적이고 포괄적인 구축/변환 프로세스
• 광범위한 문서
• 전담 Microsoft 팀의 지원
• 웹 개발을 위해 Vuejs를 사용하고
• Vue.js 및 Node.js를 사용하여 빌드

단점:

• 제한된 유연성
• 관리를 조금 더 어렵게 만들 수 있는 자동화된 프로세스

결론

그리고 그것이 우리의 목록입니다. 프레임워크를 선택하는 것은 나중에 PWA의 속도와 응답성을 결정하는 가장 중요한 단계입니다. PWA 개발을 위해 잘못된 프레임워크를 선택한 것을 후회하고 싶지 않기 때문에 지금 다양한 옵션을 조사하는 데 시간을 보내는 것이 좋습니다.

사이트가 Magento 매장인 경우 여기 SimiCart에서는 Magento PWA Studio를 사용하여 PWA 구현을 전문으로 하며, 이를 사용하여 매장의 최종 결과는 빠르고 간편하며 매력적입니다.