Introducing Open Storefront Framework (OSF) from Oracle

Oracle’s Open Storefront Framework (OSF) is a new modern, front end framework for Oracle Commerce. This innovative new structure is designed for better commerce performance, more flexibility, and quicker time to build. Enabling faster, more customized, and innovative customer commerce experiences as well as improved experience for the business user.   

OSF is a modern framework that combines the robust power of Oracle Commerce with a modern front end architecture.  

Key benefits include: 

  • Faster, responsive, rich user experiences 
  • Built with React (and ability to develop in any front-end JavaScript library)
  • Separation between the presentation layer and the state model for local development and testing
  • Reduce the need for new code: with micro (rather than macro) updates to simplify how experiences are assembled and delivered with reusable, granular components

Plugin Architecture

OSF runs exclusively on Oracle Cloud Infrastructure (OCI) and uses a plugin architecture where multiple plugins (Node.js servers) are used to perform server-side page rendering for commerce sites. The Node.js server operates in the same Oracle-hosted environment as the Commerce servers. When it renders a page, it then sends the data to the shopper’s browser to be displayed.

Oracle provides out-of-the box plugins that can also be expanded upon or customized to fit an organization’s desired user experience. This plugin structure allows for pages to be rendered quickly and is flexible enough to support a digital team’s ever-evolving user experience development.

Site performance is paramount when building a commerce experience. When there is code coming from multiple systems, agencies and business, performance issues are to be expected. OSF’s cloud-based infrastructure and plugin ecosystem allows for a faster, more flexible experience.

Business Benefits of OSF

 Empowering Digital Creativity

The agility and flexibility created by Oracle’s OSF allows content writers, designers, developers and other across the UX team to build innovative user experiences. With a robust set of fast, flexible and powerful tools at their disposal, digital teams can create user experiences that best serve their customer journeys. With testing, optimization, and reporting, the front end experience can be design for key business KPIs: conversion, retention, engagement, etc.

Testing and Iterating

Oracle’s OSF encourages an environment of constant testing of new digital experiences. Developers can use, expand upon or even customize out-of-the-box plugins to enhance the user experience. Once that is complete, the UI layer provides a clean separation between the production and testing environments. This allows for digital teams to test out a myriad of new functionality with no impact to the customer facing platform.

Expanding the Hiring Pool

In a competitive hiring environment, developers are looking to gain experience in new technologies. The React-based framework opens a market for new and experienced developers that are eager to work in new technologies. It also allows organizations to tap into their existing talent pool across a range of frameworks - so developers can bring their own skillsets to maximize the tools, without needing to learn or specialize in new technologies.

Technology Benefits of OSF

Improved Performance

Oracle’s OSF uses server-side rendering to improve the commerce site performance. Using performance metrics including First Contentful Paint (FCP), First Meaningful Paint (FMP), Time to Interactive (TTI), and Cumulative Layout Shift (CLS), Oracle tracked site speed. Each of these metrics improved greatly with the upgrade to OSF.

Easily Scalable

One of the greatest benefits to Oracle’s OSF is that it’s framework agnostic. A survey by Stack Overflow found that ReactJS is the most desired framework amongst developers, Oracle’s OSF is interoperable with any Java-based framework. This agnostic setup allows for flexibility and true enterprise scalability. Digital teams can build upon the existing user experience without having to worry about potential technological roadblocks in the future.

Robust Developer Tools

With OSF, digital teams can leverage the breadth of the fully featured Oracle Commerce solution. Developers can build and customize rich user experiences with more streamlined and robust tools. Developer tools include drag-and-drop experience tools, context-aware preview, merchandising, product catalogs, inventory, reporting, and more.

What to consider in migrating to OSF:

The upgrade to OSF is a frontend-only migration. Said another way, implementing OSF occurs without touching any of your backend tooling. But what do you need in order to successfully migrate to OSF? In order to proceed efficiently, we recommend this checklist.

Checklist for Migrating to OSF

  • Detailed list of business and technology requirements
  • Detailed list of third-party tools and integrations that impact your user experience
  • Library of content and design assets
  • Process and program for Quality Assurance (QA) and regression testing for your existing and upgraded site

Redesigning Your Front End Experience

With an OSF migration, your business can use this opportunity to do a complete redesign or rebrand of your existing assets. OSF makes it easy to create a library for your existing assets or design system, or even create all new assets.

Now may be the time to consider a design system - a structured, holistic approach to design that creates a single source of truth for designers and developers. A design system defines a unified look and feel through a single repository, allowing designers and developers to work more quickly and efficiently. By organizing your assets in one place, an enterprise’s digital team creates a consistent and well-planned user experience.

Design systems are comprised of 5 components:

  • Atoms - basic building blocks, including: shapes, colors, icons, and fonts.
  • Molecules - simple groups of UI elements that function as a unit, like Input Groups.
  • Organisms - more complex components composed of groups of molecules.
  • Templates - page-level objects that layout the underlying content structure.
  • Pages - specific instances of templates that represent a design in its final form.

OSF is based on industry-standard JavaScript tools such as Yarn, Node.js, React, and Redux, and supports popular design patterns through an extensible architecture that uses modular building blocks. Once you have successfully migrated to OSF and have launched your new commerce site, you will need to ensure you have the proper tools in place to capture analytics, and to ensure your content is being optimized and properly managed.

About the Author

Blue dotted circle

Sarah Falcon

VP, Marketing Global

Sarah is a nimble and creative marketing leader with 15 years of experience in a mix of agencies, B2B, and B2C enterprises. She brings a background in building and driving impactful marketing practices and processes for growing businesses. Sarah has expertise in brand, content marketing, lead generation, and marketing operations. She’s a co-author of the 2019 book on B2B eCommerce Digital Branch Secrets: eCommerce Playbook for Distributors.

Latest Posts

Looking for help?

We're here for you. Schedule a quick call.

SCHEDULE NOW