Uberflip Front End V1 vs. V2 explained

Follow

Currently, Uberflip uses 2 different front end applications to render Hubs for visitors. This is part of a phased transition that’ll result in all Hubs being moved to the newer, more robust version. This article outlines the difference between the two front end versions and what this transition means for you.

What is Front End V1 vs. V2? 

The Uberflip Hub Front End is the technology that powers the visitor-facing elements of all Uberflip Hubs. This includes basically everything in your Hub that your visitors can see and interact with: the home page, the navigation menu, Stream and Item pages, Item and CTA tiles, and so on.

There are currently two versions of this technology:

  • Front End V1 was the original version of Uberflip's Hub front end technology. It was originally developed in 2012, when Uberflip first launched the Hubs product. 
  • Front End V2 is Uberflip's next-generation Hub front end framework, which was redesigned from the ground up. Front end V2 brings essential additions such as:
    • Built in accessibility features
    • Improved page speed 
    • Improved SEO performance

Front End V2 also opens up the ability for us to continue to innovate and bring new features–features that can’t exist in V1.

The differences between these two versions are almost entirely "under the hood": while Front End V2 Hubs are more accessible and faster, they are designed to look and feel just like Front End V1 Hubs.

Why is this upgrade necessary?

Increased page performance and improved SEO are both features of V2 Hubs, but the accessibility upgrades may be the most important. 

Accessibility has become non-negotiable, both online and IRL. Uberflip is committed to growing our accessibility capabilities, so you can deliver great content experiences to everyone. Uberflip uses Website Content Accessibility Guidelines (WCAG) to inform our accessibility choices.

Website Content Accessibility Guidelines were developed as part of a global initiative that aims to make online content more accessible for everyone. This includes the use of screen readers, tabbed browsing, closed captioning, and more. To align with these standards, Front End V2 brings: 

  • Aria labels
  • Screen reader compatibility 
  • All necessary accessibility tags 
  • Accessibility features like skip links and improved tab abilities
  • Improved page flow structure 
  • And more

Accessible content affects everyone. This includes you and your hub. Web pages created within the Uberflip platform need to be at minimum Double-A compliant. 

This update is also required to access new features that won’t be available on V1 Hubs.

Do I have to do anything to upgrade?

As of March 2020, all newly created Hubs run on Front End V2. So if all of your Hubs were created after that—you’re already living in the future.

If you’re currently using any V1 Front End Hubs, you're Hub will be upgraded in a not-so-distant future. Nothing is needed from you at this time.  

Will I lose anything when I'm upgraded?

The following legacy features are not supported on V2 hubs. These are older, low use features that are being phased out:

  • Metrics (legacy)
  • Left-side navigation Hub menu (only top nav is supported in V2 Hubs)
  • Hubs Lab - Sticky Footer 
  • Hubs Lab - Hide banner on iframe embed
  • Hubs Lab - Dark Theme
  • Item Tile share links
  • AddThis sharing integration

How can I know which Hub version I use?

If you want to check which version of the Uberflip Hub Front End your Hub is running, use the following method:

  1. In any browser, visit your hub's home page
  2. Right-click anywhere, then click on View Source or View Page Source (depending on your browser) to view the page's source HTML
  3. When you're viewing the page source coude, press Ctrl+F (Cmd+F on Mac) and search for <body
  4. In the source HTML, the string <body should be highlighted (there should only be one result) Take a look at the text that appears after this string to identify your Hub Front End version:
    • If you see <body class="hub-page, your Hub is running Front End V1:
      image.png
    • If you see <body id="uf-hub-page", your Hub is running Front End V2:
      image.png
4 out of 4 found this helpful