🎉 Welcome to the Mobify DevCenter, our new home for v2.0 documentation and developer resources! (For now, the site is desktop-only.) Switch to old site
close
Mobify DevCenter
DocumentationAPI & SDK ReferenceHow-To Guides
search_icon_focus

Core Technologies

The Mobify Platform uses several core technologies that are written in JavaScript and distributed through Node Package Manager (NPM). Some of these technologies were developed by the open-source community and others were developed by Mobify. In this overview, we’ll explain the key concepts behind each core technology and highlight the related NPM packages that extend their functionality and help you build your applications.

React

React is a framework developed by Facebook to create single-page apps that deliver fast, fluid, and immersive user interfaces.

In a React app, the user interface is built with discreet components that are typically arranged in complex hierarchies. In a well-designed React app, each component is only responsible for one job—and often that job is just to contain other components.

The base class for a React component takes one argument, an object called props (short for “properties”). All the data needed to render a React component must come from the props object.

Component hierarchy

Let’s walk through the React component hierarchy used in a Mobify application, starting with the Router and App components at the top of the hierarchy followed by a look at the UI components that you’ll be including on your pages.

React Component Hierarchy

Mobify applications are built from a hierarchy of React components with the Router component at the root.

Router component

At the root of the hierarchy is an internal Router component which has its routes provided by the project. In a Mobify project, these routes get defined within the file app/routes.jsx.

AppConfig component

Wrapping your App, the _App-Config is the entry point into the application. It provides functions to inject properties for Mobify’s Commerce Integrations connectors, or for state management.

App component

The App component renders the app’s global UI, such as your site’s header, or its sidebar navigation. It’s defined in app/index.jsx. When any given route is rendered, it renders with App as its top-level component.

As a developer working with the Mobify Platform, you’ll rarely need to edit the App component. You may do so during initial configuration of the site, or you may use it to modify the global level of your application.

This is where app-level elements, such as the SVG sprite sheet or the SkipLinks component for accessibility are rendered. In addition, the App component handles offline mode detection, rendering an OfflineBanner component with an offline status screen if a page is not available.

User interface components

Throughout your build, you’ll be working with the UI components included in Mobify’s Progressive Web SDK, as well as building your own custom UI components. These UI components are the building blocks of your app and its pages.

Mobify’s UI components can be found in your project’s src/components directory. When using these components, you inherit a set of props and methods for pre-built UI features, designed for accessibility and lightning-fast performance. For example, you can customize a pre-designed Carousel, Banner, Image—or any of the 70+ components we offer. Check out the detailed documentation for each one in our Component Library.

You can also develop completely custom UI components for your project. These custom components can be found in the app/components directory.

When creating custom components, run the following command to generate all the files you need in the right place:

Putting it all together

Now that we’ve seen each component in the hierarchy, let’s review how they build upon each other:

  • The Router component wraps the entire app and defines the URL routing for the app
  • The App component is rendered on all routes and manages the global UI
  • SDK components and custom components render the UI of the app and its pages

For more information about React, see the official Getting Started documentation.

ReactDOM

  • Provides DOM-specific methods that can be used at the top level of your application
  • Package name: react-dom
  • Developed and maintained by: Facebook

ReactDOMServer

  • Provides the method renderToString() that can pre-render HTML on the server
  • Package name: react-dom/server
  • Developed and maintained by: Facebook

React Helmet

  • Helps you manage changes to the document’s <head> tag
  • Package name: react-helmet
  • Developed and maintained by: NFL Engineering

Loadable Components

  • Speeds up performance through code-splitting of larger bundles
  • Package name: @loadable/components
  • Developed and maintained by: Greg Bergé

React Router

  • Maps URL paths to React components
  • Package name: react-router
  • Developed and maintained by: ReactTraining

State management

While building your project, you can choose to manage global state through a state management library, or through React on its own.

To manage global state with React, you can use React’s Context API, which is based on React Hooks.

There are also many state management libraries out there such as Redux and MobX.

For more information about managing state, read our article on Managing Global State in a React App.

Node.js

All the server-side code for a Mobify application is run on top of Node.js, an open source JavaScript runtime environment. The runtime environment omits browser-specific JavaScript APIs and includes APIs to access features of the host operating system (such as the file system) in a cross-platform way.

Node.js uses a non-blocking or asynchronous architecture, which is ideal for building highly-scalable and data-intensive backend apps. Its package ecosystem, npm, is the largest collection of open source libraries in the world.

Express.js

Express is a popular open-source web server framework, written in JavaScript and hosted within the Node.js runtime environment. It allows developers to handle HTTP requests for different URL paths (routes).

Express allows you to configure common web server settings, such as the port to use for connecting, and the location of templates for rendering the response. It also allows you to add additional request processing middleware at any point within the request handling pipeline.

Developer tools

The Mobify Platform includes a variety of developer tools, including the following packages:

Babel

  • Converts your Javascript code into a backwards-compatible version so that it can be run in a wide range of browsers. Specifically, it converts JSX syntax to Javascript syntax and ES6 syntax to ES5 syntax.
  • Package name: babel-*
  • Developed and maintained by: Babel

Bluebird

  • A promise-handling library which enables task-splitting in your application, a key method to optimize performance. In Mobify projects, it’s used to ensure we have promises, and to standardize how the promises work.
  • Package name: bluebird
  • Developed and maintained by: Petka Antonov

Eslint

  • Provides a “linter,” an analysis tool that helps highlight code syntax and style issues without having to execute it
  • Package name: eslint
  • Developed and maintained by: Eslint

Jest

  • A testing framework for JavaScript code
  • Package name: jest
  • Developed and maintained by: Facebook

Webpack

  • Consolidates Mobify’s application modules into one or more bundles for the end user to download
  • Package name: webpack
  • Developed and maintained by: Webpack

Styling

The Mobify Platform uses several technologies for styling, including:

Classnames

  • Makes dynamic and conditional className props simpler and easier to work with
  • Package name: classnames
  • Developed and maintained by: Jed Watson

Node-Sass

  • Allows fast and automatic compiling of CSS preprocessor files (Sassy CSS, or .scss) files to css. CSS preprocessors enable you to become more productive with CSS, through the added convenience of variables, modularity, and inheritance.
  • Package name: node-sass
  • Developed and maintained by: Sass

Susy

Mobify technologies

In addition to all the open-source technologies we’ve looked at already, the Mobify Platform includes a number of technologies developed and maintained in-house by Mobify, including:

Analytics Integrations

  • Provides an abstraction layer between your application and your analytics platform(s)
  • Package name: included within progressive-web-sdk

Commerce Integrations

  • Provides an abstraction layer between your ecommerce backend and your Mobify application
  • Package name: commerce-integrations

Progressive Web Component Library

  • Includes 70+ user interface components for building ecommerce applications
  • Package name: included within progressive-web-sdk

Sandy Tracking Pixel Client

  • An API for sending analytics data to Mobify’s Engagement Engine
  • Package name: sandy-tracking-pixel-client