Menu
Menu Sheet Overlay
Search
Search Sheet

Components

Component Architecture

    The Mobify AMP SDK provides a variety of components to build your AMP pages with.

    The App Container #

    The App container is rendered on all routes and includes various components including navigation, header, and footer.

    This is where app-level elements such as the SVG sprite sheet and accessibility skip links are rendered.

    The routed template is passed as a child element of the App component.

    Templates #

    The main content of the page, for any given route, is that page’s template (container). This template is chosen at route-time and is rendered as a child of the App container.

    Templates are React components. They are composed of local and SDK components.

    Currently, templates and non-templates are mixed together in the app/containers/ directory; in the future this will change.

    Partials #

    Ideally, each top-level template component should have minimal logic, only rendering the high-level parts of the page. These parts are React components called partials, stored in the subdirectory of the same name. We recommend each partial’s name begin with the name of the template component for disambiguation purposes. There may be multiple levels of components in the partials directory,

    Partials should get their props by directly connecting to the the Redux store, rather than passing them in from the store through their parent components. Avoid gathering all data from the store in the template component. This allows us to optimize updates and removes clutter from the code.

    Local and SDK Components #

    Any custom components that are not tied to a specific template can be built in the app/components/ directory. This directory can also include styling for the SDK components used in the project. The project-specific stylesheets should be in the app/components/ directory in a subdirectory matching the component name, i.e. styles for the Button component should be in app/components/button.

    All components are wrapped in a higher-order component called ampComponent. This higher-order component handles tracking all components used in the template. This list is used to build a template-specific stylesheet, and a template-specific list of AMP component JS files required to build the page.