모범 사례 best-practices
NOTE
단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: React)이 필요한 프로젝트에 SPA 편집기를 사용하는 것이 좋습니다. 자세히 알아보기.
AEM Mobile On-demand Services 앱을 빌드하는 것은 Cordova(또는 PhoneGap) 셸에서 직접 실행되는 앱을 빌드하는 것과 다릅니다. 개발자는 다음 사항에 익숙해야 합니다.
- 기본적으로 지원되는 플러그인과 AEM Mobile 관련 플러그인이 있습니다.
-
플러그인 기능을 사용하는 템플릿은 플러그인 브리지가 없는 브라우저에서 계속 작성할 수 있도록 작성해야 합니다.
- 예를 들어 가 deviceready 플러그인의 API에 액세스하기 전에 함수를 호출합니다.
AEM 개발자를 위한 지침 guidelines-for-aem-developers
다음 지침은 모바일 앱 템플릿 및 구성 요소를 빌드하려는 숙련된 AEM for sites 개발자에게 도움이 됩니다.
재사용 및 확장성을 유도하기 위해 AEM 사이트 템플릿을 구조화합니다.
-
단일 모놀리식 스크립트보다 여러 구성 요소 스크립트 파일 필요
- 다음과 같이 빈 확장 포인트가 여러 개 제공됩니다 customerlibs.html 및 customfoterlibs.html- 가능한 한 적은 핵심 코드를 복제하면서 개발자가 페이지 템플릿을 변경할 수 있도록 해줍니다
- 그런 다음 Sling을 통해 템플릿을 확장 및 사용자 지정할 수 있습니다 sling:resourceSuperType 메커니즘
-
템플릿 언어로서 JSP보다 Sightly/HTL을 선호함
- 이를 사용하면 마크업과 XSS 보호 기능을 갖춘 오퍼를 분리하고 보다 친숙한 구문을 사용할 수 있습니다
장치 내 성능 최적화
- 문서 특정 스크립트 및 스타일시트는 dps-article contentsync 템플릿을 사용하여 문서 페이로드에 포함해야 합니다
- 두 개 이상의 문서가 공유하는 스크립트 및 스타일시트는 dps-HTMLRessources contentsync 템플릿을 통해 공유 리소스에 포함해야 합니다
- 렌더링 차단 상태인 외부 스크립트를 참조하지 마십시오
NOTE
렌더링 차단 외부 스크립트에 대해 자세히 알아볼 수 있습니다 여기.
웹용 JS 및 CSS 라이브러리보다 앱별 클라이언트측 JS 및 CSS 라이브러리 선호함
- jQuery Mobile과 같은 라이브러리의 오버헤드를 방지하기 위해 매우 광범위한 장치와 브라우저를 처리합니다
- 템플릿이 앱의 웹 보기에서 실행되는 경우 해당 앱이 지원할 플랫폼과 버전 및 JavaScript 지원이 있다는 지식을 제어할 수 있습니다. 예를 들어, Bootstrap보다 jQuery Mobile 및 Onsen UI보다 Ionic(아마도 CSS)을 선호합니다.
NOTE
jQuery 모바일에 대해 자세히 알아보려면 여기.
전체 스택보다 마이크로 라이브러리 선호
- 컨텐츠가 장치 유리에 도달하는 데 걸리는 시간은 문서가 의존하는 모든 라이브러리에 의해 느려집니다. 모든 문서를 렌더링하는 데 새 웹 보기를 사용하는 경우 이러한 둔화는 가중되므로 각 라이브러리를 처음부터 다시 초기화해야 합니다
- 문서가 SPA(단일 페이지 앱)로 빌드되지 않은 경우 Angular과 같은 전체 스택 라이브러리를 포함할 필요가 없습니다
- 처럼 페이지에 필요한 상호 작용을 추가하는 데 도움이 되도록 작은 단일 목적 라이브러리를 선호합니다 Fastclick 또는 Velocity.js
문서 페이로드 크기 최소화
- 합리적인 해상도로 지원할 가장 큰 뷰포트를 효과적으로 커버할 수 있는 가장 작은 자산을 사용하십시오
- 과 같은 도구 사용 ImageOptimizer 이미지에 추가 메타데이터를 제거하려면
앞으로 나아가기 getting-ahead
다른 두 역할과 책임에 대한 자세한 내용은 아래 리소스를 참조하십시오.
recommendation-more-help
547b817b-14b5-4d82-aa0f-a64750e0e592