모범 사례 best-practices

Last update: Tue Sep 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

작성 대상:

NOTE

Adobe 단일 페이지 애플리케이션 프레임워크 기반 클라이언트측 렌더링(예: React)이 필요한 프로젝트에는 SPA Editor를 사용하는 것이 좋습니다. 자세히 알아보기.

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

NOTE

플러그인에 대해 자세히 알아보려면 다음 리소스를 참조하십시오.

플러그인 기능을 사용하는 템플릿은 플러그인 브리지가 없어도 브라우저에서 계속 작성할 수 있는 방식으로 작성되어야 합니다.
- 예를 들어 다음을 기다리십시오. deviceready 플러그인의 API에 액세스하기 전에 함수를 호출했습니다.

AEM 개발자를 위한 지침 guidelines-for-aem-developers

다음 지침은 모바일 앱 템플릿 및 구성 요소를 빌드하려는 사이트에 대해 유능한 AEM 개발자를 지원하는 데 도움이 됩니다.

재사용 및 확장성을 장려하기 위한 AEM 사이트 템플릿 구성

단일 모놀리식 스크립트보다 여러 구성 요소 스크립트 파일 선호
- 다음과 같이 여러 개의 빈 확장 지점이 제공됩니다. customheaderlibs.html 및 customfooterlibs.html 를 사용하여 개발자는 가능한 한 적은 코어 코드를 복제하면서 페이지 템플릿을 변경할 수 있습니다
- 그런 다음 Sling을 통해 템플릿을 확장 및 사용자 정의할 수 있습니다. sling:resourceSuperType 메커니즘
템플릿 언어로서 JSP보다 Sightly/HTL 선호
- 이를 사용하면 마크업에서 코드가 분리되고, 내장된 XSS 보호를 제공하며, 더 익숙한 구문이 있습니다

온디바이스 성능 최적화

dps-article contentsync 템플릿을 사용하여 아티클별 스크립트 및 스타일 시트를 아티클 페이로드에 포함해야 합니다
둘 이상의 문서에서 공유한 스크립트 및 스타일 시트는 dps-HTMLResources contentsync 템플릿을 통해 공유 리소스에 포함되어야 합니다
렌더링 차단되는 외부 스크립트를 참조하지 않음

NOTE

렌더링 차단 외부 스크립트에 대해 자세히 알아볼 수 있습니다 여기.

웹별 라이브러리보다 앱별 클라이언트측 JS 및 CSS 라이브러리 선호

jQuery Mobile과 같은 라이브러리에서 오버헤드를 방지하여 광범위한 디바이스와 브라우저를 처리합니다.
템플릿이 앱의 웹 보기에서 실행될 때 앱이 지원할 플랫폼 및 버전을 제어하고 JavaScript가 지원된다는 지식이 제공됩니다. 예를 들어, jQuery Mobile보다 Ionic(CSS만 해당), Bootstrap보다 Onsen UI를 선호합니다.

NOTE

jQuery mobile에 대해 자세히 알아보려면 여기.

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

콘텐트가 장치 유리에 표시되는 데 걸리는 시간은 문서가 의존하는 모든 라이브러리에 의해 느려집니다. 이 둔화는 새 웹 보기를 사용하여 모든 문서를 렌더링할 때 혼합되므로 각 라이브러리를 처음부터 다시 초기화해야 합니다
문서가 SPA(단일 페이지 앱)로 빌드되지 않은 경우 Angular과 같은 전체 스택 라이브러리를 포함할 필요가 없을 수 있습니다
다음과 같이 페이지에 필요한 상호 작용을 추가하는 데 도움이 되는 작은 단일 목적 라이브러리를 선호합니다. Fastclick 또는 Velocity.js

문서 페이로드 크기 최소화

다른 두 가지 역할과 책임에 대한 자세한 내용은 아래 리소스를 참조하십시오.

recommendation-more-help

2eeeb575-8007-40cc-a72d-206fbc4ddd4b