PowerPoint Presentation

What is a Reusable Component?Justin EdelsonTechnical ArchitectAdobe Consulting Services

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.

1

About Me

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.Why are we here?

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.As it says in your programs, I'm going to be talking about reusable components. But why is this important?Here's why. If we were only building a single AEM site, that'd be one thing. But we're building dozens or hundreds or3

Why are we here?

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.Thousands4

Lets get one thing straight

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.So before we get into it, lets get one thing straight.

Developing reusable code is not easy. And its actually gotten harder, at least in the organizations I work with. Im going to walk you through the evolution of a company I worked for. Your organization maybe hasnt gone through exactly these steps, but Im willing to bet youve ended up in the same place.5

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.When I first started with web development, I worked in a very large media company with a dozen or so subsidaries different cable channels, a book publisher, a chain of movie theaters, and so on.

This is a vastly simplified version of what our org chart looked like in 1996. We had an engineering manager and some developers. The engineering manager reported, maybe not directly like this simple diagram shows, up into the CTO. Then we had the Chief Marketing Officer, the title Chief Digtal Officer hadnt been invented yet, who was driving requirements.

Then at some point, each subsidary got its own Chief Digital Officer. 6

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.This made things, shall we say interesting because the engineering manager had to balance the needs of all of these different people. And at some level this was a zero sum game. Theres a fixed pool of developers and despite all the time we spend multitasking, we developers really are single-threaded.

So at some point this became untenable.7

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.And this is what we ended up with. Each subsidiary now has their own engineering team. And in one case, the subsidiary has completely outsourced their development to an external agency. And since the engineering teams are part of the subsidiaries, the power dynamic between the CDO and the CTO has been inverted.

I should say that one deritive of this model is where one of the subsidiaries is the Intranet and the other is a public facing presence. In these cases, the Intranet team may very well report into the CTO. But Id suggest that this doesnt change the fundamental problem you now have multiple disjoint development teams developing for the same delivery platform the web. Add in mobile and were really in trouble.

And while the one development team had a resource contention problem, this model isnt particularly efficient. For one thing, although each subsidiary has different requirements, logically they also have a lot in common so theres a lot of duplication of effort going on here. And for another, if you disaggregate to this extent, you end up with multiple runtime platforms. Maybe Subsidary 3s Agency likes Drupal and Subsidary 2 likes Wordpress and Subsidary 1 likes CQ (remember, this is in the past, so Im still going to call it CQ).

So fast forward a bit and some organizations have realized that they need to have some kind of core or platform team responsible for core technology.8

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.And, more often than not, this core team reports into the CTO. Which is either a good thing or a bad thing, depending upon whether or not youre the CTO.

This takes care of the development site, but what about the runtime platform? Well thats where AEM comes in, right?9

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.So once you standardize on AEM, what is the work of that core development team in AEM deployments? In general, that team is responsible for creating some reusable library.10

Parts of a Reusable LibraryAEM ComponentsDialogs, JSP / Sightly ScriptsExtJS Widgets / GraniteUI ComponentsData / Content ServicesImporters, Exporters, IntegrationsCommon Configuration

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.In this library, you will typically see a few different things. The highlights include:

You have your literal AEM components which get added to a page, including dialog definitions and scripts.

You have some custom ExtJS widgets or now GraniteUI components

You have custom services, typically those with import or export content as well as integrate with third party systems.

Finally, you would have common configuration which is applied across projects.

Im going to focus on the first item.

11

Models for Reusable ComponentsDirect ReusePrimitives (Mostly)Example: Foundation Image ComponentDirect Reuse w/ ContextExample: Foundation Column ControlExtensibleDesigned for Extension per ProjectExample: Foundation List ComponentSamplePattern LibraryExample: Geometrixx *

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.I see that there are four separate models for building reusable components. These arent necessarily mutually exclusive, but they are from my perspective useful buckets.

The first is direct reuse. So you have a component which can just be dropped into any site. These typically represent primitive elements images, videos, text. The most obvious example of this is the Foundation Image component.

The second is direct reuse with some notion of site context. So again, the component can just be dropped into any site, but there is some extra bit of configuration which allows for some options to be defined per site or per template. The Column Control component is an example of this as it picks up the available column layouts from the design settings. Another example is the Generic Text component we have in ACS AEM Commons which obviates the need to create multiple text components because different sites want different options in the Rich Text Editor.

The third is extensible components. These may or may not be directly reusable, but they do make it easy for other components to be created which extend them. The best example of this in the Foundation components is the List component. Extending components can just create some scripts, following a particular naming convention, to define how items in the list appear.

And then finally, we have components which arent actually reusable, but are designed to illustrate a concept. These effectively form a pattern library, for example, if you want to implement a tab component, you should start by looking at the Geometrixx Outdoors Tabs component. Now to be honest, I think we can all agree that the Geometrixx components are of, shall we say, varying quality, so think of this as what they *should* be rather than what they necessarily *are*.12

Direct ReuseMinimal MarkupSemantic Markup

Text - i18n & OverrideableIntelligent DefaultsBut Lots of Dialog Options

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.When building, or trying to build a resuable component, you should keep these things in mind.

The HTML your component produces should be minimal. The less HTML, the more likely that HTML will work across sites.

What markup does exist should be semantic. Which means, among other things, not embedding framework-specific classes like large-12 or col-md-6 or whatever. Foundation, Bootstrap, and specialty grid systems like Semantic dot GS support mixins to avoid this kind of dependency.

Reusable components shouldnt include a lot of text, but what text does exist will generally need to be both internationalized and overrideable.

And in general, you want intelligent defaults

But a high level of customization, especially for complex components.13

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.This is perhaps an extreme example, but here are some examples of a search component I built for a customer which was intended to be used across 5 different sites, all of which had different branding and features. As you can see, I had to allow for each site to decide how they wanted the search results displayed, how many results to display, as well as change the individual text pieces displayed on the results page.14

Direct Reuse w/ Context - Toolscomponentstyles widgetExample: Foundation Text Componentslingscriptinclude widgetExample: Page Properties Dialog, ACS AEM Commons Generic Text Component

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.When adding Context-specific features, there are a few tools you can use out of the box the componentstyles and slingscriptinclude widgets, along with their Granite UI counterparts.

15

componentstyles

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.For those of you not familiar with the componentstyles widget, it allow you to declaratively define some styles in the design settings for a template and then make those styles available as drop-down lists in the components dialog . When an option is selected, it ends up in the cq CSS Class property, and then as an extra class on the container element. 16

slingscriptinclude

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.The slingscriptinclude widget allows for a fieldset within a dialog to be dynamically generated. These are some sample requests to populate Page Properties dialogs for a few pages and a Generic Text component. Since these requests are made to the page content node, you have a lot of flexibility in terms of what gets returned. Whether that be different fields or different options in the same fields or whatever.17

Extensible ComponentsComponent scripts are like Java classesEach include is a methodConsider partials convention

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.When thinking about extensible components, I find it helpful to conceptualize of a component just like I would a Java class where each include is effectively a method. I also try to make the includes I expect extending components to override follow a convention where they go in a folder called partials.18

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.Heres the files which make up the ACS AEM Commons Audio component along with a very rough UML diagram. 19

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.Heres essentially the same thing, but for the search component I referenced earlier.20

Anti-PatternsDependencies on a particular CSS or JS framework.Login/Registrationrelated componentsLack of GovernanceOverly Aggressive Goals

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.I lastly want to touch on a few anti-patterns Ive seen. These are things to avoid if you want to make reusable components. And if you find yourself needing to do them, youll be better off going more of the sample slash pattern library route.

I touched on this before, but avoid heavy dependencies on a particular CSS or JS framework. Itd be great if everyone could standardize on something, but it isnt going to happen in my lifetime.

My experience has been that login and registration components are tough to reuse due to specific business rules.

Another anti-pattern is not having any governance structure for defining how reusable components are maintained. You cant just throw a bunch of stuff together and call it a library. Theres management effort involved.

Finally, you should be realistic about how much reuse you are really going to get. Think about how many of the foundation components you actually use. And maybe reuse isnt the right model for you.

21

CIRCUIT An Adobe Developer EventPresented by CITYTECH, Inc.I hope youve found this interesting. Have a great day and enjoy the rest of the conference.22