우수 사례

노트

단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: 응답)이 필요한 프로젝트에는 SPA 편집기를 사용하는 것이 좋습니다. 추가 정보.

AEM Mobile On-demand Services 앱을 빌드하는 것은 Cordova(또는 PhoneGap) 셸에서 직접 실행되는 앱을 빌드하는 것과 다릅니다. 개발자는

  • Plugins that are supported out of the box and the AEM Mobile specific plugins.
노트

플러그인에 대한 자세한 내용은 다음 리소스를 참조하십시오.

  • 플러그인 기능을 사용하는 템플릿은 플러그인 브리지가 없는 브라우저에서 계속 저작할 수 있는 방식으로 작성해야 합니다.

    • 예를 들어 플러그인의 API에 액세스하기 전에 deviceready 함수를 기다려야 합니다.

AEM 개발자를 위한 지침

다음 지침은 모바일 앱 템플릿 및 구성 요소를 빌드하려는 사이트를 위한 숙련된 AEM 개발자에게 도움이 됩니다.

AEM 사이트 템플릿을 구조화하여 재사용 및 확장성 촉진

  • 단일 모놀리식 파일 대신 여러 구성 요소 스크립트 파일 필요

    • 개발자가 가능한 한 작은 코어 코드를 복제하는 동안 페이지 템플릿을 변경할 수 있는 customheaderlibs.htmlcustomfoterlibs.html​과 같은 빈 확장 지점이 여러 개 제공됩니다
    • 그런 다음 Sling의 sling:resourceSuperType 메커니즘을 통해 템플릿을 확장하고 사용자 정의할 수 있습니다
  • 템플릿 언어로 JSP보다 Sightly/HTL을 선호함

    • 이를 사용하면 마크업과 코드가 분리되고, XSS 보호 기능이 내장되어 있으며, 보다 익숙한 구문이 있습니다

디바이스 내 성능 최적화

  • 아티클 전용 스크립트 및 스타일 시트는 dps-article contentsync 템플릿을 사용하여 아티클 페이로드에 포함되어야 합니다
  • 두 개 이상의 아티클에서 공유되는 스크립트 및 스타일 시트는 dps-HTMLResources contentsync 템플릿을 통해 공유 리소스에 포함되어야 합니다
  • 렌더링 차단 중인 외부 스크립트를 참조하지 마십시오
노트

렌더링 차단 외부 스크립트에 대한 자세한 내용은 여기를 참조하십시오.

웹 전용 JS 및 CSS 라이브러리 대신 앱 전용 클라이언트측 JS 및 CSS 라이브러리 선호

  • jQuery Mobile과 같은 라이브러리의 오버헤드를 방지하여 다양한 디바이스와 브라우저를 처리할 수 있습니다
  • 앱이 앱의 웹 뷰에서 실행되는 경우, JavaScript 지원이 제공된다는 점은 물론, 앱이 지원할 플랫폼 및 버전을 제어할 수 있습니다. 예를 들어 jQuery Mobile보다 Ionic(아마도 CSS)을 선호하고 Bootstrap보다 온센 UI를 선호합니다.
노트

jQuery Mobile에 대한 자세한 내용을 살펴보려면 여기를 클릭하십시오.

전체 스택보다 마이크로 라이브러리 선호

아티클 페이로드 크기 최소화

  • 지원할 가장 큰 뷰포트를 효과적으로 처리할 수 있는 가장 작은 에셋을 합리적인 해상도로 사용
  • 이미지에서 ImageOptim과 같은 툴을 사용하여 초과 메타데이터를 제거할 수 있습니다.

경쟁력 제고

다른 두 역할 및 책임을 자세히 알아보려면 아래 리소스를 참조하십시오.

이 페이지에서는