This is AEM development best practices. These practices do not cover standard like jsp, js & java development practices. This is an effort to consolidate our learning in CMS domain.
Last updated on Dec 12, 2014
The Sightly template language, shipped with Adobe Experience Manager 6.0, simplifies a lot the component development workflow by allowing front-end developers to edit components themselves directly.
Learn about the main features of that template language, and about the tools available to make project development work more efficient.
Adobe Experience Manager Core ComponentsGabriel Walt
Components for AEM Sites that cover the most common web content needs.
Discover which components exist, what features they offer, how they work technically and how they can be extended by a developer.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
Version 6 of Adobe Experience Manager (AEM 6) is a major release that introduces significant innovations. Sightly is a new template system to be used in place of (or together with) JSP. Along with Sling Models, SIghtly strongly improves the separation between the logic and presentation. The development effort is reduced because a Sightly template is an HTML 5 document, easily maintainable even by front-end developers.
The presentation provides an overview of the basic features of Sightly and introduces the fundamentals of the new development model with the support of tools released release together with AEM 6.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
The document provides information about HTML Template Language (HTL) in AEM, including what HTL is, why it was introduced, its main features and syntax. HTL is the preferred templating language for AEM that enforces separation of concerns between presentation and business logic. It uses HTML5 syntax along with additional data attributes and expressions to add dynamic functionality.
Sightly - AEM6 UI Development using JS and JAVAYash Mody
Sightly is an HTML templating language used for building templates in AEM. It uses expression language, data attributes, and includes to build templates with dynamic content. Tools like Brackets and Eclipse plugins can be used to develop Sightly templates, which are HTML files that make use of expression language, data attributes, and includes to insert dynamic content. Sightly templates also leverage the WCMUse API to interact with the AEM page manager, properties, and other core features.
This document discusses Sling Models in AEM, including what they are, why they are useful, how to use them, and examples of Sling Model annotations. Sling Models allow mapping of Sling objects like resources and requests to plain Java objects using annotations. They reduce coding efforts and make code more maintainable by avoiding redundant code. The document covers the necessary dependencies, common annotations like @Model, @Inject, @Optional, and examples of injecting resources, child resources, and retrieving values from the request.
Last updated on Dec 12, 2014
The Sightly template language, shipped with Adobe Experience Manager 6.0, simplifies a lot the component development workflow by allowing front-end developers to edit components themselves directly.
Learn about the main features of that template language, and about the tools available to make project development work more efficient.
Adobe Experience Manager Core ComponentsGabriel Walt
Components for AEM Sites that cover the most common web content needs.
Discover which components exist, what features they offer, how they work technically and how they can be extended by a developer.
Presented at 3|SHARE's EVOLVE'14 - The Adobe Experience Manager Community Summit on Tuesday November 18th, 2014 at the Hard Rock Hotel in San Diego, CA. evolve14.com
Version 6 of Adobe Experience Manager (AEM 6) is a major release that introduces significant innovations. Sightly is a new template system to be used in place of (or together with) JSP. Along with Sling Models, SIghtly strongly improves the separation between the logic and presentation. The development effort is reduced because a Sightly template is an HTML 5 document, easily maintainable even by front-end developers.
The presentation provides an overview of the basic features of Sightly and introduces the fundamentals of the new development model with the support of tools released release together with AEM 6.
Learn the best practices and advanced techniques.
* Passing data to client libs, use the data attribute
* Expression contexts, choose wisely
* Use statement best practices, what fits best your needs
* Template & Call statements advanced usage
* Parameters for sub-resources, featuring resource attributes and synthetic resources
The document provides information about HTML Template Language (HTL) in AEM, including what HTL is, why it was introduced, its main features and syntax. HTL is the preferred templating language for AEM that enforces separation of concerns between presentation and business logic. It uses HTML5 syntax along with additional data attributes and expressions to add dynamic functionality.
Sightly - AEM6 UI Development using JS and JAVAYash Mody
Sightly is an HTML templating language used for building templates in AEM. It uses expression language, data attributes, and includes to build templates with dynamic content. Tools like Brackets and Eclipse plugins can be used to develop Sightly templates, which are HTML files that make use of expression language, data attributes, and includes to insert dynamic content. Sightly templates also leverage the WCMUse API to interact with the AEM page manager, properties, and other core features.
This document discusses Sling Models in AEM, including what they are, why they are useful, how to use them, and examples of Sling Model annotations. Sling Models allow mapping of Sling objects like resources and requests to plain Java objects using annotations. They reduce coding efforts and make code more maintainable by avoiding redundant code. The document covers the necessary dependencies, common annotations like @Model, @Inject, @Optional, and examples of injecting resources, child resources, and retrieving values from the request.
This document discusses Sling Models, which provide a simplified way to adapt Sling resources and other objects into domain models. Key points:
- Sling Models use annotations to inject properties from resources and other sources into POJOs rather than requiring custom adapter factories.
- Common annotations include @Model, @Inject, @Optional, @Source, and @Filter to customize property injection.
- Sling Models are included in AEM and their usage has simplified adapting resources from over 30 lines of code to just 13 lines.
- The API supports extensions like custom injectors, annotations, and future additions like grandchild resource lists.
This document provides an introduction to Adobe Experience Manager (AEM), formerly known as CQ5. It discusses key aspects such as installation, prerequisites, content authoring, templates, components, workflows and more. The technical underpinnings including OSGi, JCR, Apache Sling, and ExtJS frameworks are also overviewed. Common terms are defined and the overall architecture and technology stack are depicted in detail.
The Sling Rewriter is an Apache Sling module included in AEM that performs transformations on rendered content like HTML. It uses a pipeline-oriented approach based on SAX events to apply transformers without knowledge of specific components. The document discusses how rewriter pipelines are configured and customized transformers can be implemented to transform content according to use cases.
This document discusses Sling Models, which provide a simplified way to adapt Sling resources into domain objects in AEM. Some key points:
- Sling Models allow resources to be adapted to POJOs with minimal code using annotations like @Model and @Inject. This is cleaner than previous "adapter factory" approaches.
- Common use cases like injecting resource properties, child resources, services and more are supported out of the box via standard injectors.
- Sling Models are pluggable, so custom injectors can be added to inject non-standard dependencies.
- They allow resources and requests to be adapted to either classes or interfaces, keeping domain objects simple POJOs.
This document discusses integration patterns in Adobe Experience Manager (AEM), including using Sling Models for dependency injection and accessing resources from different locations through a single ResourceResolver. It provides examples of integrating with backend APIs, databases, file systems and forms using techniques like ResourceProviders, Sling Filters and custom SlingServlets. It also covers accessing files from bundles and the filesystem using BundleResourceProvider and FsResourceProvider respectively.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Sling Models Using Sightly and JSP by Deepak KhetawatAEM HUB
This document discusses using Sling Models with Sightly and JSP templates in AEM. It provides an overview of Sling Models, including their purpose, design goals, and key annotations. It also describes the standard injectors available in Sling Models and how to create custom injectors. The document outlines how to add Sling Model dependencies and use Sling Models within JSP and Sightly templates, including code examples. It concludes with a demonstration of Sling Models in action and information for appendix materials and questions.
Sling is a RESTful web application framework that uses JCR repositories like Apache Jackrabbit as its data store. Sling maps HTTP requests to content resources in the repository and uses the resource type to locate the appropriate rendering script. The request URL is decomposed into the resource path, selectors, extension, and suffix path. Sling searches for a node matching the resource path and then locates a script based on the resource type and any selectors. Sling scripts cannot be called directly and must be resolved through the resource to follow REST principles. This document discusses how Sling maps URLs to content resources and scripts to process requests.
The New Way of Developing with AEM 6.0 | Sightly | Beautiful MarkupSenol Tas
This document summarizes the key features of Sightly, a templating language for Adobe Experience Manager (AEM) 6.0. Sightly provides lightweight, secure, code-less templating that allows for separation of concerns between logic and markup. It uses standard HTML5 and an intuitive expression language for logic. Sightly aims to reduce development time and costs through a simplified workflow between designers and developers. The document outlines Sightly's expression language and block statements for building templates.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
This document provides an overview of key features in Sightly, an HTML templating language used in Adobe Experience Manager (AEM):
- It describes Sightly statements like data-sly-use, data-sly-attribute, data-sly-element, and data-sly-resource that allow manipulating elements, attributes, and including resources.
- Expression options like @context, @format, @join, and @i18n that control output are also covered.
- URI manipulation using options like @scheme, @domain, @path, @query, and @fragment is explained.
- Other topics include template and call statements, external templates, and the
This presentation gives you an overview of reasons why you should migrate the Adobe Experience Manager digital marketing platform to version 6.1 if you are still working on previous versions.
CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT
Bryan Williams - ICF Interactive
Many sites need to expose their AEM repository content through a flexible remote API whether it be for consumption by mobile apps, third parties, etc. This presentation will walk through setting up a custom, extensible, secure and testable API utilizing various open source tools that are at your disposal.
This document discusses client-side libraries in AEM and best practices for their use. It explains that clientlibs allow logical organization of JavaScript and CSS files and avoid duplicate includes. Key points covered include using cq:ClientLibraryFolders to define libraries, including them via cq:includeClientLib, dependencies vs embedding, debugging tools, themes, and minification. Best practices include placing component code in clientlibs, embedding to reduce requests, requesting from /etc, defining dependencies, and minification on publish.
Sample code: https://github.com/cqsupport/webinar-aem-monitoring-maintenance
Webinar Recording: https://my.adobeconnect.com/p9du34yji38
Monitor and maintain your AEM optimally. Eliminate performance slowdowns
To manage and deliver content swiftly, you need a steady CQ environment. You can maximize the performance using the built-in monitoring and maintenance tools.
The document discusses three developer tricks for CQ5/WEM: 1) front-end optimization techniques like concatenating, minifying, and gzipping client-side libraries, 2) mobile detection using the Wireless Universal Resource File to determine device capabilities and serve tailored content, and 3) mobile content synchronization to keep mobile versions of content in sync with their desktop counterparts.
8 ways to accelerate Adobe CQ5 / AEM site deployments following an initial AEM site launch. Focused on multi-site strategy, AEM component reuse, and team alignment for increasing speed and reducing risk when migrating subsequent domains to AEM.
This document provides an introduction and overview of Ruby on Rails, including what it is, its key features and benefits, and how to get started building a basic web application with Rails. Some of the key points covered include Rails' emphasis on productivity through conventions over configuration, scaffolding, and its implementation of the MVC framework and full-stack capabilities. Examples are also given of generating a controller and view to output basic text and dynamic content.
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
AEM Architecture slides for Sydney Adobe Meetup 16/9/2015
Discusses architectural components, considerations and philosophies to consider when designing for an AEM implementation
This document discusses Sling Models, which provide a simplified way to adapt Sling resources and other objects into domain models. Key points:
- Sling Models use annotations to inject properties from resources and other sources into POJOs rather than requiring custom adapter factories.
- Common annotations include @Model, @Inject, @Optional, @Source, and @Filter to customize property injection.
- Sling Models are included in AEM and their usage has simplified adapting resources from over 30 lines of code to just 13 lines.
- The API supports extensions like custom injectors, annotations, and future additions like grandchild resource lists.
This document provides an introduction to Adobe Experience Manager (AEM), formerly known as CQ5. It discusses key aspects such as installation, prerequisites, content authoring, templates, components, workflows and more. The technical underpinnings including OSGi, JCR, Apache Sling, and ExtJS frameworks are also overviewed. Common terms are defined and the overall architecture and technology stack are depicted in detail.
The Sling Rewriter is an Apache Sling module included in AEM that performs transformations on rendered content like HTML. It uses a pipeline-oriented approach based on SAX events to apply transformers without knowledge of specific components. The document discusses how rewriter pipelines are configured and customized transformers can be implemented to transform content according to use cases.
This document discusses Sling Models, which provide a simplified way to adapt Sling resources into domain objects in AEM. Some key points:
- Sling Models allow resources to be adapted to POJOs with minimal code using annotations like @Model and @Inject. This is cleaner than previous "adapter factory" approaches.
- Common use cases like injecting resource properties, child resources, services and more are supported out of the box via standard injectors.
- Sling Models are pluggable, so custom injectors can be added to inject non-standard dependencies.
- They allow resources and requests to be adapted to either classes or interfaces, keeping domain objects simple POJOs.
This document discusses integration patterns in Adobe Experience Manager (AEM), including using Sling Models for dependency injection and accessing resources from different locations through a single ResourceResolver. It provides examples of integrating with backend APIs, databases, file systems and forms using techniques like ResourceProviders, Sling Filters and custom SlingServlets. It also covers accessing files from bundles and the filesystem using BundleResourceProvider and FsResourceProvider respectively.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
Sling Models Using Sightly and JSP by Deepak KhetawatAEM HUB
This document discusses using Sling Models with Sightly and JSP templates in AEM. It provides an overview of Sling Models, including their purpose, design goals, and key annotations. It also describes the standard injectors available in Sling Models and how to create custom injectors. The document outlines how to add Sling Model dependencies and use Sling Models within JSP and Sightly templates, including code examples. It concludes with a demonstration of Sling Models in action and information for appendix materials and questions.
Sling is a RESTful web application framework that uses JCR repositories like Apache Jackrabbit as its data store. Sling maps HTTP requests to content resources in the repository and uses the resource type to locate the appropriate rendering script. The request URL is decomposed into the resource path, selectors, extension, and suffix path. Sling searches for a node matching the resource path and then locates a script based on the resource type and any selectors. Sling scripts cannot be called directly and must be resolved through the resource to follow REST principles. This document discusses how Sling maps URLs to content resources and scripts to process requests.
The New Way of Developing with AEM 6.0 | Sightly | Beautiful MarkupSenol Tas
This document summarizes the key features of Sightly, a templating language for Adobe Experience Manager (AEM) 6.0. Sightly provides lightweight, secure, code-less templating that allows for separation of concerns between logic and markup. It uses standard HTML5 and an intuitive expression language for logic. Sightly aims to reduce development time and costs through a simplified workflow between designers and developers. The document outlines Sightly's expression language and block statements for building templates.
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
JavaScript basics
JavaScript event loop
Ajax and promises
DOM interaction
JavaScript object orientation
Web Workers
Useful Microframeworks
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016.
http://www.ivanomalavolta.com
This document provides an overview of key features in Sightly, an HTML templating language used in Adobe Experience Manager (AEM):
- It describes Sightly statements like data-sly-use, data-sly-attribute, data-sly-element, and data-sly-resource that allow manipulating elements, attributes, and including resources.
- Expression options like @context, @format, @join, and @i18n that control output are also covered.
- URI manipulation using options like @scheme, @domain, @path, @query, and @fragment is explained.
- Other topics include template and call statements, external templates, and the
This presentation gives you an overview of reasons why you should migrate the Adobe Experience Manager digital marketing platform to version 6.1 if you are still working on previous versions.
CIRCUIT 2015 - Content API's For AEM SitesICF CIRCUIT
Bryan Williams - ICF Interactive
Many sites need to expose their AEM repository content through a flexible remote API whether it be for consumption by mobile apps, third parties, etc. This presentation will walk through setting up a custom, extensible, secure and testable API utilizing various open source tools that are at your disposal.
This document discusses client-side libraries in AEM and best practices for their use. It explains that clientlibs allow logical organization of JavaScript and CSS files and avoid duplicate includes. Key points covered include using cq:ClientLibraryFolders to define libraries, including them via cq:includeClientLib, dependencies vs embedding, debugging tools, themes, and minification. Best practices include placing component code in clientlibs, embedding to reduce requests, requesting from /etc, defining dependencies, and minification on publish.
Sample code: https://github.com/cqsupport/webinar-aem-monitoring-maintenance
Webinar Recording: https://my.adobeconnect.com/p9du34yji38
Monitor and maintain your AEM optimally. Eliminate performance slowdowns
To manage and deliver content swiftly, you need a steady CQ environment. You can maximize the performance using the built-in monitoring and maintenance tools.
The document discusses three developer tricks for CQ5/WEM: 1) front-end optimization techniques like concatenating, minifying, and gzipping client-side libraries, 2) mobile detection using the Wireless Universal Resource File to determine device capabilities and serve tailored content, and 3) mobile content synchronization to keep mobile versions of content in sync with their desktop counterparts.
8 ways to accelerate Adobe CQ5 / AEM site deployments following an initial AEM site launch. Focused on multi-site strategy, AEM component reuse, and team alignment for increasing speed and reducing risk when migrating subsequent domains to AEM.
This document provides an introduction and overview of Ruby on Rails, including what it is, its key features and benefits, and how to get started building a basic web application with Rails. Some of the key points covered include Rails' emphasis on productivity through conventions over configuration, scaffolding, and its implementation of the MVC framework and full-stack capabilities. Examples are also given of generating a controller and view to output basic text and dynamic content.
AEM Best Practices for Component DevelopmentGabriel Walt
This presentation describes how to easily get started with an efficient development workflow with Adobe Experience Manager 6.1.
The tools and technologies presented are:
* Project Archetype – https://github.com/Adobe-Marketing-Cloud/aem-project-archetype
* AEM Eclipse Extension – https://docs.adobe.com/docs/en/dev-tools/aem-eclipse.html
* AEM Brackets Extension – https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html
* Sightly Template Language – http://www.slideshare.net/GabrielWalt/component-development
* Sightly REPL Tool – https://github.com/Adobe-Marketing-Cloud/aem-sightly-repl
* Sightly TodoMVC Example – https://github.com/Adobe-Marketing-Cloud/aem-sightly-sample-todomvc
AEM Architecture slides for Sydney Adobe Meetup 16/9/2015
Discusses architectural components, considerations and philosophies to consider when designing for an AEM implementation
A presentation given at the adaptTo() 2014 tech meetup on the topic of developing dynamic AEM components using concepts borrowed from the SPA philosophy.
Adobe Source 2016 - Building a Corporate Site Solution Using Multi Site ManagerMichael Leroy
Slides from my Adobe Source 2016 presentation regarding the use of AEM's Multi Site Manager to build a corporate site solution. It also covers additional improvements such as the use of Sling Mappings and various ACS Commons services.
MongoDB Days Silicon Valley: Using MongoDB with Adobe AEM CommunitiesMongoDB
Presented by Kevin Nennig, AEM Technical Instructor, Adobe
Experience level: Introductory
In Adobe Experience Manager 6.1, a new approach has been taken for user generated content (UGC) for better security, higher availability, and ease of use for community members and administrators. The Social Resource Provider API for AEM Communities can be implemented 3 different ways to create a UGC cloud, two of which use a MongoDB backend. Utilizing MongoDB, companies can implement an on prem UGC common store with a Mongo and a Solr server. UCG is then stored and accessed from this UGC cloud. In this session we’ll explore the Social Resource Provider framework and implement the Mongo Social Resource Provider (MSRP) for AEM Communities.
Build single page applications using AngularJS on AEMconnectwebex
The document discusses building single page applications using AngularJS on Adobe Experience Manager (AEM). It provides an overview of what single page applications are and their pros and cons. It then details the technical reasons for choosing to build an SPA, including creating a native-like user experience on all devices and making the application search and social friendly. The document outlines the proof of concept built, which combines Sling with AngularJS on AEM. It describes the base page component used and how it conditionally includes full pages or just content partials. The routing and use of AngularJS to control navigation between views is also summarized.
The document discusses customizing the user interface in AEM 6.1. It covers extending component dialogs by providing a diff instead of copying the entire dialog structure. It also covers customizing page properties by using flags to control which properties are shown in different views. Additionally, it discusses customizing search forms by leveraging reusable search predicates and the Sling resource merger to overlay forms.
One of the top new features in the AEM 6.2 release is in the introduction of a unified search experience for content authors called OmniSearch which provides a consistent and continuous search experience across the entire AEM user interface. This session will cover the significant points in OmniSearch. We will cover both backend extension to create new search sources and front end extension to define how search results are visualized. This will be an intermediate-level session and attendees will come out of it with a clear understand as to how to extend this new capability.
This document introduces two open source development tools for Adobe Experience Manager (AEM): AEM Fiddle and AEM Live Reload. AEM Fiddle provides a read-eval-print loop (REPL) environment for testing AEM code. AEM Live Reload automatically refreshes AEM pages and client libraries in the browser when changes are made without having to manually reload. Both tools are designed to improve the development experience and speed for AEM projects.
Omnisearch in AEM 6.2 - Search All the ThingsJustin Edelson
This document provides an overview of Omnisearch in AEM 6.2, including how to use it, add new locations, and implement a custom Omnisearch handler. Omnisearch provides a unified search experience across AEM authoring tools and content. Key points covered include how to build queries for search results, suggestions, and spell check, as well as configure the UI display of search locations and results. The presentation includes code examples for implementing a custom Omnisearch handler that searches content fragments. It concludes with a demonstration and overview of potential future enhancements.
This document provides an overview of how to customize the user interface in AEM 6, including extending administration pages, creating custom admin screens, and extending the page authoring interface. It discusses using the Sling Resource Merger to override and extend existing UI components. It also covers creating custom toolbar actions, inplace editors, layers, and asset groups. The document aims to explain the key extension points and objects involved in customizing different aspects of the AEM UI.
AEM (CQ) Dispatcher Security and CDN+Browser CachingAndrew Khoury
This presentation cover Adobe AEM Dispatcher security and CDN and browser caching.
This presentation is the second part of a webinar on AEM Dispatcher:
http://dev.day.com/content/ddc/en/gems/dispatcher-caching---new-features-and-optimizations.html
Visit url above to view the whole presentation. Domique Pfister the primary engineer developing AEM Dispatcher covers the first part on new features.
This document discusses Sling Models in AEM, including what they are, why they are useful, how to use them, and examples of Sling Model annotations. Sling Models allow mapping of Sling objects like resources and requests to plain Java objects using annotations. They reduce coding efforts and make code more maintainable by avoiding redundant code. The document covers the necessary dependencies, common annotations like @Model, @Inject, @Optional, and examples of injecting resources, child resources, and properties into Sling Models.
This session will share large scale architectures from the author's experiences with various companies like Cisco, Symantec, and EMC and compare and contrast the architecture across : Infrastructure Architecture Scaling, Ecommerce integrations and migration approach from legacy into AEM, Digital Marketing Cloud Integrations such as personalization, analytics, and DMP.
Touching the AEM component dialog by Mateusz ChromińskiAEM HUB
This document discusses various aspects of working with AEM component dialogs, including:
- How component configuration is stored in the JSON format before AEM 6.0 and rendered via JSP files.
- Types of data sources that can be used to populate select boxes in dialogs, either statically defined or dynamically from a servlet.
- Techniques for including external content in dialogs like using a servlet to dispatch requests.
- Differences between classic and Touch UI approaches to dialogs in areas like data formats, rendering, styling and interactivity.
This document discusses new features in Adobe Experience Manager (AEM) 6, including the new Oak content repository which provides improved scalability, performance, and distributed capabilities. Oak is based on Apache Jackrabbit and uses a microkernel architecture with pluggable node and data storage options like TarMK and MongoMK. It also covers new search capabilities via pluggable index providers like Lucene and Solr. The presentation demonstrates improvements in areas like operations dashboarding, one-click setup, developer mode, and Eclipse tooling. It provides a sneak peek at the new Granite.JS micro engine for building lightweight Node.js-based server applications on AEM.
The document provides tips and best practices for configuring multiple farms in AEM Dispatcher. Key points include:
- Splitting the Dispatcher configuration into multiple farms based on different caching needs, such as separate farms for DAM assets and pages.
- Configuring different caching parameters and cache folders for each farm to optimize caching behavior.
- Handling cache invalidation requests and vanity URLs across multiple farms.
- Different approaches for flushing caches from Author and multiple Publishers to Dispatchers, and avoiding race conditions.
- Bypassing the Dispatcher cache for select clients by rewriting URLs to include parameters checked by the Dispatcher configuration.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
Salesforce is built on the Lightning Platform. This session will provide you with the same training that Salesforce engineers receive during on-boarding. We are bringing this training to you in a two part series. Part 1 will provide detailed information about Component Definition including component-based architecture, component structure, component implementation and key components.
High Performance Ajax Applications 1197671494632682 2Niti Chotkaew
The document provides tips for developing high performance Ajax applications. It discusses planning for performance, measuring performance, optimizing page load speed, and optimizing JavaScript performance. Specific tips include making fewer HTTP requests, minifying assets, lazy-loading code, optimizing the initial rendering, reducing the amount of symbolic lookup in JavaScript, and optimizing regular expressions and string concatenation.
The document discusses techniques for optimizing JavaScript and AJAX performance. It recommends planning for performance from the start, measuring performance during development, reducing unnecessary code, optimizing assets, and handling long-running processes by breaking work into chunks. Specific tips include minimizing HTTP requests, leveraging caching, optimizing regular expressions, and using innerHTML for document modifications instead of DOM methods.
This document discusses object-oriented programming concepts in Objective-C, including classes and objects, properties, methods, interfaces, implementations, memory management, and properties. It provides code examples for defining a Car class with properties like model and methods like drive(). It demonstrates creating instances of the Car class, setting properties, and calling methods.
This document provides an overview and instructions for a workshop on building Instagram filters using JavaScript, including introducing the speaker and teaching assistant, describing the goals of learning HTML, JavaScript basics and using third-party libraries to build a photo filtering application, and outlining the Thinkful program for learning web development through individual mentorship.
Stencil the time for vanilla web components has arrivedGil Fink
This document discusses how Stencil can help solve problems with creating custom web components. Stencil is a compiler that generates standard-compliant web components from components written with features like JSX and TypeScript. It addresses issues like verbose syntax and lack of framework features by generating code that includes capabilities like virtual DOM and reactivity. Stencil works at build time so generated components can be used by any framework and are suitable for building reusable infrastructure components.
The document provides guidelines and techniques for optimizing web page performance, including recommendations for CSS and JavaScript best practices, optimization of resources, and use of the Firebug tool to inspect pages and identify issues. It discusses strategies like minimizing HTTP requests, optimizing CSS and JavaScript, using JSON over XML, image sprites, caching, and more. The Firebug tool is highlighted as a way to analyze pages and debug JavaScript, CSS, and performance issues.
This document provides an overview and instructions for building basic image filters using the CamanJS library and JavaScript. It begins with downloading the necessary tools and introducing the presenter. It then covers HTML basics like tags and attributes before introducing JavaScript functions. It explains what third-party libraries are and introduces CamanJS. It provides instructions for importing CamanJS and documentation resources. It demonstrates basic functions for applying and reverting filters. Challenges are presented to modify the starter code by changing images, filters, and adding multiple filter buttons.
This document summarizes a presentation on JavaScript essentials for Java developers. It discusses JavaScript object literals, core objects like Array and Date, JSON, and JavaScript classes. Object literals allow creating objects without classes by using this and properties/methods. Core objects like Array, Date, Math and String are explored. JSON is introduced as a lightweight data interchange format. JavaScript classes are explained using the constructor function pattern and prototype properties to add methods to all objects.
This document provides an overview and instructions for a workshop on building Instagram filters using JavaScript. It introduces HTML and JavaScript basics like tags, attributes, and functions. It discusses using the CamanJS library to apply filters to images. Attendees are guided through setting up a static web page with starter code, importing the CamanJS library, and defining functions to apply and remove filters. Challenges encourage applying different built-in filters, adding multiple filter buttons, and cropping images. The goal is to build the first version of an Instagram-like photo filtering application using HTML, JavaScript and third-party libraries.
This document provides an overview of JavaScript and jQuery. It covers JavaScript syntax, values, operators, expressions, keywords, comments, objects, functions, conditions, arrays, and the Date object. It also discusses using JavaScript for dynamic web pages, DOM manipulation, and DHTML. Additionally, it provides examples of simple JavaScript programs for adding numbers and using prompt boxes. jQuery is also listed as a topic covered but not described.
- The original vision of the World Wide Web was as a hyperlinked document retrieval system, not for presentation, sessions, or interactivity. If it had stayed true to this vision, modern sites like Yahoo would not exist.
- Browser wars in the 1990s led to proprietary technologies that frustrated developers. The introduction of JavaScript in 1995 allowed for dynamic and interactive web pages.
- By the 2000s, Microsoft's Internet Explorer dominated the browser market, bringing some stability through standards like DOM and DHTML. However, cross-browser differences still posed challenges for developers.
This document provides an overview of layout managers and skins in Oracle ADF Faces. It discusses:
1) The benefits of using layout managers such as abstraction from HTML, consistent layout behavior across browsers, and managing browser geometry. It describes stretchable vs flowing layouts.
2) Tips for working with layout managers such as starting with a stretchable outer frame and placing flowing islands inside.
3) An introduction to skins including how they work, the artifacts that make up a skin, and how skinning differs from regular CSS. It provides examples of using different selectors to style parts of a component.
DSC Charusat brings out a "Learning React" Series workshop for you all. So the first workshop of the series is on 19th Sept,20 (Saturday) and it will cover Basics of HTML, CSS and JS with ES6
Software Design Patterns. Part I :: Structural PatternsSergey Aganezov
In a nutshell, software design patterns are generally reusable solutions to a commonly occurring problems. And this says it all! We are going to learn when it is completely unnecessary for you to reinvent the wheel, and what are the best ways to approach each particular problem during software development process.
The document describes Flamingo Carotene, which provides a frontend build pipeline for Flamingo projects using the Pug template engine. It introduces modular npm packages for features like Pug templating, Sass for CSS, and Webpack for assets and bundling. The tutorial then walks through steps to set up a basic Flamingo Carotene project, including writing a template, passing data, introducing an atomic design pattern with components like a button atom, and using the development mode.
The document discusses best practices for developing jQuery plugins. It covers defining a private scope, using a template, understanding the plugin syntax, adding options through object literals, and iterating through matched elements using this.each(). The key steps are to make the plugin easy to use, use good naming conventions, define a closure, set default parameters, allow chaining by returning this, document the code, and thoroughly test the plugin.
This document discusses component-driven web development and HTML5 Web Components. It defines what components are and their characteristics of being independent, composable, and deployable. It explains how to break a web page into reusable components and represent them as a tree structure. It also covers different types of components, data flow patterns like two-way binding and Flux, and emerging HTML5 Web Component standards like templates, imports, shadow DOM, and custom elements to build encapsulated and reusable components.
Gen Z and the marketplaces - let's translate their needsLaura Szabó
The product workshop focused on exploring the requirements of Generation Z in relation to marketplace dynamics. We delved into their specific needs, examined the specifics in their shopping preferences, and analyzed their preferred methods for accessing information and making purchases within a marketplace. Through the study of real-life cases , we tried to gain valuable insights into enhancing the marketplace experience for Generation Z.
The workshop was held on the DMA Conference in Vienna June 2024.
Instagram has become one of the most popular social media platforms, allowing people to share photos, videos, and stories with their followers. Sometimes, though, you might want to view someone's story without them knowing.
Ready to Unlock the Power of Blockchain!Toptal Tech
Imagine a world where data flows freely, yet remains secure. A world where trust is built into the fabric of every transaction. This is the promise of blockchain, a revolutionary technology poised to reshape our digital landscape.
Toptal Tech is at the forefront of this innovation, connecting you with the brightest minds in blockchain development. Together, we can unlock the potential of this transformative technology, building a future of transparency, security, and endless possibilities.
Discover the benefits of outsourcing SEO to Indiadavidjhones387
"Discover the benefits of outsourcing SEO to India! From cost-effective services and expert professionals to round-the-clock work advantages, learn how your business can achieve digital success with Indian SEO solutions.
Meet up Milano 14 _ Axpo Italia_ Migration from Mule3 (On-prem) to.pdfFlorence Consulting
Quattordicesimo Meetup di Milano, tenutosi a Milano il 23 Maggio 2024 dalle ore 17:00 alle ore 18:30 in presenza e da remoto.
Abbiamo parlato di come Axpo Italia S.p.A. ha ridotto il technical debt migrando le proprie APIs da Mule 3.9 a Mule 4.4 passando anche da on-premises a CloudHub 1.0.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
2. AEM Components
JSP’s
• Avoid Text In JSP Files
• One of the goals of using CQ5 is to enable the author to author the text that is displayed on the web
site. Hardcoding text strings in jsp files prevents that goal from being met.Variables that derive their
values from dialog widgets should be named the same as the widget
o If a dialog has a pathfield called url Path, for example, the variable that gets
this value should also be called url Path.
• Allow CQ to write image tags whenever possible using img.draw(out)
• By default, CQ will output name and alt properties as the same name the image has in the DAM. Set a
user defined alt tag with setAlt().
3. Conti……
Code Style
• Avoid using jsp:useBean to set the page context. It only creates a singleton bean in the page
context. Thus using the same component more than once on different pages will create bugs.
• Instead import the page using <%@page import=" the page you want the context from" /%> and
use the jstl tag <c:set var="" value="" scope="" /> to set the pages context.
• <%@page session="false" %> to avoid "IllegalStateException Page needs a session" errors
in the logs. (for JSP's commonly used across many pages, this can cause 80% of the logged
exceptions on production publish instances). All global-*.jsp files include this, so it maybe free if
you @include them..
4. Conti…..
Code Style
• Avoid javax.jcr.Node in JSP's - there are better abstraction layers:
● properties, pageProperties [org.apache.sling.api.resource.ValueMap] to get node property
values
● Resource, Resource.adaptTo(ValueMap.class) gives equivalent to above, especially if you need
to getParent/child/something
• try {...} catch(Exception) {...} is a code smell. Generally, shouldn't have to handle exceptions in
JSP's, so look for alternative API's, or work with better, safer structures.
• If your render script needs complex logic based on the properties of the resource being
rendered or its descendants, you should create a component model to extract the logic into a
java/groovy class.
5. Develop for authors.
Context
• Create a user interface that allows the author to edit content within the context of the resulting page. Add
author cues whenever possible (red/italics text for areas a user needs to add content if not apparent).
Dialogs / widgets
• When creating a dialog, the first panel should always be the most dominant content of the final output. In
most cases, this is the image associated with the component.
• A SmartImage widget should be used for any images that will be main pieces of content. When creating
smartimage widgets, ensure there is a corresponding resType node.
Use Templates to provide default page structure
• A template contains a jcr:content (cq:PageContent) node which is used to initialize the content of pages
created from the template. So, multiple templates can be used to provide the author different options for
default content for the same underlying page type.
6. Develop for Reusability
Develop at the smallest level
Break a component down to its smallest logical parts. For example, if a component has a call to action
button, text area, headline and a background image, it will often make the most sense to develop each
of these components individually and assemble them under an composite component. This a.) keeps
dialogs small; and b.) ensures maximum reusability.
Favor composition over inheritance
If you want a list-image component for example, don’t take a list component, copy it, and hack it to have an
image. A reasonable approach is to create a new component and add the necessary components to it.
When you upgrade CQ to a new version, you’ll have no changes to make – it’ll automatically use the
new version. (From Antony Hutchinson)
Reuse dialogs in composite components
If a new component is necessary because it is not possible/feasible/best to stack a bunch of components on
top of each other for UI reasons, reuse the dialogfrom the simpler component to ensure a consistent
editing experience across all like components.
7. Conti….
Remove Style Specific Class Names from Component JSPs
Avoid using style specific class names (like "blue") in the component JSPs which prevents the
components from being used in different places and on different sites. Wherever possible, these
kinds of class names need to change to reflect the structure of the component (like "label") not
how it should be styled
Overlay to extend the functionality of out-of-the-box components
Avoid modifying anything under /libs. Avoid copying anything from /libs to /apps. Extend the
functionality of out-of-the-box components by overlaying them.
8. BackEnd Models (Java & groovy)
• Sling Model
• Java/Groovy Bean
• When to create model:
- If the JSP is just accessing properties on the Resource, do NOT create a model.
- If you have to do more processing but there is a logical way of doing it without a model (e.g.,
creating custom tags), do that and do NOT create a model.
- If you have processing that needs to be done and there is just no other reasonable home, then
you should create a component model object as a home for it.
9. Java/Groovy best practices
If designing an object, make sure that it does exactly one thing
• Corollary: If you're adding a method to an object, make sure that it's the right place to put it. It's not a
bad thing at all for an object to have only one method if that's the best way to keep things cohesive.
• If you're passing more than a small handful of parameters (~4) into something, it's a very good bet
that the method is doing too much. Of course merely sidestepping the problem (such as passing in
an object that is then deconstructed as if the parameters had been passed in individually) doesn't
help. If it can't be cleanly cleaned up, the object itself if likely doing too much.
• Use the semantics of the type and collections systems.
• JodaTime is a preferred API vs the crappy Java DateTime stuff for anything involving dates if
possible
• Never declare an implementation collection type for a variable when you can use a more generic
interface instead
• For instance, do not declare a variable as a type of HashMap: use Map instead
10. JavaScript Best practices
• Javascript that implements component behavior should be packaged in the form of a jquery plugin defined
in an immediately invoked function expression (iife):
;(function($){
"use strict";
$.fn.component = function(opts) {
var options = $.extend({
// plugin options set here
// option1 = 'value',
// option2 = 'value'
}, opts);
return this.each(function() {
// component implementation
});
};
}(jQuery));
11. Conti…
• The component plugin should be attached to each instance of the component specifically. This can most
easily be done by generating a unique id that can be used as a selector in the jsp file:
<script>
jQuery(document).ready(function() {
jQUery('.component').plugin();
});
</script>
• Always declare and use namespaces for all Javascript objects, which we'll call packaging. Do not write
objects without packages.
• Var Havells = Havells || {};
• Havells.Package = Havells.Package || {};
• Havells.Package.formatNumber = function() {
};
• Havells.Package.constants = {
'name1' : 'value1',
'name2' : 'value2'
};
12. General Javascript Coding Practices
• Explicitly use "var" when declaring variables. This refines the scope, is better for predictability, and
increases performance.
• Use single quotes instead of double-quotes when declaring values (i.e. var val = 'value')
• Do not include trailing commas in JSON or JS objects, because IE will not compile the JavaScript
file.
• Javascript should be well factored. Common functions should be moved to <Project>.Utils.
Common objects can be created in apps/responsive/residential/javascript.
• On publish instances, jQuery is loaded in the footer of the page where most JS is loaded. So
using the "$" short-alias for jQuery doesn't always work. Usually, the long-form "jQuery" is
necessary for triggering document.ready events.
13. CSS Best practices
• Do not include inline styles in an element's "style" attribute. Inline styles are difficult to override, and all styles should
be contained within and referenced from external CSS files.
• Do: <div id="content" class="bordered"></div>
• Do Not: <div style="border: 5px solid #ccc"></div>
• Never use an ID more than once in any given HTML document. Use class names to target more than one element.
• Use hyphens ("-") to separate multi-word class/ID names (i.e. "person-info-large". Do not use camelCase or
underscores ("_").
• For colors, attempt to use 3-digit hex codes before its 6-digit equivalent. For example, use "#aaa" instead of
"#aaaaaa". Do not use "gray" or word-based color values.
14. Conti..
• Distinguish between proper use of class-based CSS selectors vs ID-based selectors.
• classes
• Use to define elements that would reappear on multiple pages or templates
• Use to define elements that appear more than once on a particular page ids
• Use to target elements of a specific template that only applies to one page and would not apply to
other pages using the template.
• Use to target one particular element in a page that has identical class declarations as other similar
elements. For example, a list of <div class="item" /> elements where one element has ID "item-
322".