Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: major-changes #1446

Merged
merged 1 commit into from
Aug 30, 2022
Merged

docs: major-changes #1446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 147 additions & 0 deletions apps/docs/docs/beta/about.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
---
sidebar_position: 0
hide_table_of_contents: true
sidebar_label: Home
editCurrentVersion: false
title: FastStore, WebOps & Headless CMS Beta Program
hide_title: true
---

import FaqQuestion from '@site/src/components/FaqQuestion/FaqQuestion'
import Link from '@docusaurus/Link'
import InfoCard from '@site/src/components/InfoCard/InfoCard'
import CardGrid from '@site/src/components/CardGrid/CardGrid'


<div className="grid grid-cols-2">
<div className="my-auto">
<div>
<h1 className='font-VTEXTrust text-sm text-details !m-0'>Closed Beta Program</h1>
<h2 className="text-5xl text-fontSecondary leading-tight font-VTEXRegular break-normal">
FastStore, WebOps & Headless CMS
</h2>
<p className="text-lg mb-6"> Discover a new way to build, manage and evolve lighting-fast storefronts on VTEX.</p>
<Link to="/beta/overview" className="button-primary">
PROGRAM OVERVIEW
</Link>
<Link to="https://content.vtex.com/vtexio-headless-cms-closed-beta/" className="button-tertiary">
JOIN THE WAITING LIST
</Link>
</div>
</div>
<img className="w-full px-28" src="https://vtexhelp.vtexassets.com/assets/docs/src/future___97855ed352fb2914dc82829c5ebeac4c.png"/>
</div>

---

<h2 className="text-4xl text-fontSecondary leading-tight font-VTEXRegular">Now available for selected customers</h2>

VTEX IO FastStore, WebOps, and VTEX Headless CMS are now available for selected customers. People from all around the world can already [preview](https://www.vtexfaststore.com/) and [test](/playground) the new technologies before their release in Open Beta. [Understand the new technologies](/beta/features-and-capabilities) and [explore our starters](/starters).

![Program timeline](https://vtexhelp.vtexassets.com/assets/docs/src/program-overview___279d9bf770ce2ec6e401983d62ed9c35.jpg)

<p className="text-sm text-details float-right">
DISCLAIMER: All dates are subject to change.
</p>
<Link to="/beta/features-and-capabilities" className="button-tertiary">See Program Overview</Link>

<div className="relative w-full h-0 p-32 lg:p-64 my-12">
<iframe
src="https://player.vimeo.com/video/723083396?&h=a1725d4a3f&title=0&byline=0&portrait=0"
className="absolute top-0 left-0 w-full h-full"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

<div className="grid grid-cols-2 gap-4 my-8">
<div>
<img className="w-8" src="https://vtexhelp.vtexassets.com/assets/docs/src/capabilities___20c7e979b6a53f604272baa79eaf97ef.png"/>
<h1 className='font-VTEXTrust text-sm text-details !m-0'>What's new</h1>
<h2 className="text-fontSecondary font-VTEXRegular text-xl !m-0">Explore the new capabilities</h2>
<p className="text-details text-base py-3">
Discover how FastStore, WebOps, and Headless CMS can help developers and marketing teams build and manage faster storefronts.
</p>
<Link to="/beta/features-and-capabilities" className="button-tertiary">Learn more</Link>
</div>

<div>
<img className="w-8" src="https://vtexhelp.vtexassets.com/assets/docs/src/changes___5c7d44453baefeca5df2ba911bea6fb9.png"/>
<h1 className='font-VTEXTrust text-sm text-details !m-0'>What changes</h1>
<h2 className="text-fontSecondary font-VTEXRegular text-xl !m-0">Understand the behavior changes</h2>
<p className="text-details text-base py-3">
Learn what is changing and what is new in comparison to Store Framework and other VTEX solutions for storefront implementation
</p>
<Link to="/beta/features-and-capabilities" className="button-tertiary">Learn more</Link>
</div>
</div>

---

<h2 className="text-4xl text-fontSecondary leading-tight font-VTEXRegular">What to expect from a Beta</h2>

Like any Beta Program, a restricted group of selected customers will have early access to new features and use a set of products still under development. However, it's important to remember that the experience in a Beta Program might not be as smooth and self-service as using the final version of a product.

Currently, our program is in Closed Beta, meaning it's only available for selected customers. Once all scheduled key capabilities are thoroughly tested and included, our Open Beta phase will start. Over this period, there will be multiple Beta releases, each of which will be an improvement over the previous version.

<h2 className="text-4xl text-fontSecondary leading-tight font-VTEXRegular">Beta activities</h2>

We count on you as a member of the Beta Program to help us gather helpful insights and feedback regarding performance, usability, and new capabilities. Check some of our Beta Activities below to understand how you can help us develop better solutions and fix issues affecting your projects' development.

<div className="grid grid-cols-2 gap-8 mt-8 mb-16">
<div>
<img src="https://vtexhelp.vtexassets.com/assets/docs/src/reporting-issues___5bef9ccadc080f246f5013c5de684af2.png"/>
<h2 className="text-fontSecondary font-VTEXRegular text-xl !m-0">Reporting issues and giving feedback</h2>
<p className="text-details text-base py-3">
Help the FastStore team gather helpful insights and feedback about new features.
</p>
<Link to="/beta/feedback-and-issue-tracking" className="button-tertiary">Learn more</Link>
</div>
<div>
<img src="https://vtexhelp.vtexassets.com/assets/docs/src/customer-inv___efd92672ffeec04b32705ce03c6ed2a2.png"/>
<h2 className="text-fontSecondary font-VTEXRegular text-xl !m-0">Inviting customers</h2>
<p className="text-details text-base py-3">
Bring in new customers to FastStore and help them increase their sales conversion rate.
</p>
<Link to="/beta/customer-invitation" className="button-tertiary">Learn more</Link>
</div>
</div>

---

<h2 className="text-4xl text-fontSecondary leading-tight font-VTEXRegular">FAQs</h2>

<FaqQuestion
question="Who can join the Closed Beta Program?"
answer="Since support from our product team is closer and therefore limited to a maximum number of customers during the Closed Beta, only clients who have been chosen from our <a href='https://content.vtex.com/vtexio-headless-cms-closed-beta/'>waiting list</a> can join the Closed Beta Program."
></FaqQuestion>
<FaqQuestion
question="What does it cost to participate in the closed beta program?"
answer="For VTEX customers, there is no additional cost to participate in the Closed Beta Program. New customers must check our <a href='https://vtex.com/br-pt/precos/'>subscription plans</a>."
></FaqQuestion>
<FaqQuestion
question="When will the release be available for all customers?"
answer="The program is expected to move to an Open Beta availability in 2023."
></FaqQuestion>
<FaqQuestion
question="Can I use another CMS or deployment solution along with FastStore?"
answer="Yes, as FastStore is an open-source, headless, Jamstack solution. However, implementing a non-VTEX solution is the customer's responsibility and must be agreed upon with the third party. VTEX does not assume any responsibility for the project implementation in these cases."
></FaqQuestion>
<FaqQuestion
question="What is the level of support to Closed Beta customers?"
answer="During the Closed Beta, customers and partners have direct support from the VTEX product team with a lower SLA. As we move to Open Beta, support will roll into the standard VTEX support cycle."
></FaqQuestion>
<FaqQuestion
question="Why did VTEX decide to create a new product for storefront implementation?"
answer="Highly customized stores need an architecture specifically focused on performance. We decided to rely on open-source frameworks to give more flexibility so that development teams could optimize performance in minor details."
></FaqQuestion>
<FaqQuestion
question="Can I sell the new products to new merchants?"
answer="We recommend not offering the technology to new customers during the Closed Beta. During this phase, support from the product team is closer and therefore limited to a maximum number of customers."
></FaqQuestion>
<FaqQuestion
question="Can I publish content and success stories about the new products?"
answer="Yes, but while the product is in Closed Beta, the content must be reviewed by the VTEX team before being published. In case of publication without deliberation, we recommend unpublishing the content until a new assessment."
></FaqQuestion>
127 changes: 127 additions & 0 deletions apps/docs/docs/beta/changes-from-store-framework.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
---
sidebar_position: 3
---

# Changes from Store Framework

## Main differences

<table className="text-sm shadow-lg text-left rounded-lg">
<thead >
<tr className="font-VTEXMedium uppercase bg-rebelPink">
<th className="text-white w-1/2">FASTSTORE</th>
<th className="text-white w-1/2">STORE FRAMEWORK</th>
</tr>
</thead>
<tbody>
<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Closed Beta:</span> essential features for ecommerce are still lacking.
</td>
<td>
<span className="text-rebelPink">General Availability:</span> a large variety of features are already available for all customers.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Decoupled solution:</span> integrates with any CMS and deployment platform.
</td>
<td>
<span className="text-rebelPink">Coupled solution:</span> integrates with the Site Editor only.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Open-source:</span> freely available for possible modification and redistribution.
</td>
<td>
<span className="text-rebelPink">Mix of proprietary and open-source:</span> available for possible modification and redistribution inside the VTEX environment.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
Extensible via external <span className="text-rebelPink">plugins and libraries.</span>
</td>
<td>
Extensible via <span className="text-rebelPink">IO apps.</span>
</td>
</tr>


<tr>
<td className="bg-tagHighlight">
No native support for cross-border and multi-language stores yet.
</td>
<td>
<span className="text-rebelPink">Native support</span> for cross-border and multi-language stores.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Performance-focused:</span> easier to add customizations without degrading performance.
</td>
<td>
<span className="text-rebelPink">Composability-focused:</span> flexible and easily customizable, but with a performance price.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Jamstack architecture:</span> serves pre-rendered content to a CDN using Git workflows and modern build tools. It is made dynamic through APIs and serverless functions.
</td>
<td>
<span className="text-rebelPink">Server-side rendered:</span> generates the full HTML for a page on the server in response to a URL request.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">CMS integration:</span> Compatible with VTEX Headless CMS and other market Headless CMS solutions.
</td>
<td>
<span className="text-rebelPink">Site Editor:</span> Compatible with Site Editor only.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Deployment platforms:</span> Deployed on WebOps.
</td>
<td>
<span className="text-rebelPink">IO deployment:</span> Deployed as a VTEX IO app.
</td>
</tr>

<tr>
<td className="bg-tagHighlight">
<span className="text-rebelPink">Improved deployment observability:</span> by connecting with a Git provider, it's possible to track historical changes and diagnose when and why regressions happened.
</td>
<td>
<span className="text-rebelPink">Limited deployment observability.</span>
</td>
</tr>

</tbody>
</table>

> Both **Store Framework** and **FastStore** performance are above Google's Core Web Vitals baseline metric for high-performing websites.

## FastStore

Based on the **Jamstack architecture**, FastStore is an **open-source** toolkit for developing headless storefronts. It can therefore be integrated by anyone with any CMS and deployment platform. However, in order to benefit from the VTEX guarantee and support, enrollment in the **FastStore, Webops, and Headless CMS Beta Program** is required.

FastStore was built with **performance** in mind. It leverages the Jamstack architecture to deliver fast, secure and reliable storefronts by default. In addition, it comes with several tools and resources designed for this purpose, including the WebOps pipeline and Starter packs optimized for performance.

However, because FatsStore, WebOps and Headless CMS are still in beta, several essential features, such as My Account customizations and full integration with IO apps and Intelligent Search, are still lacking.

## Store Framework

Built on top of the VTEX IO platform, Store Framework is an **opinionated** React-based storefront framework and the most modern solution in **General Availability** for building storefronts at VTEX.

Store Framework was designed with **composability** in mind and is extensible via globally available **IO apps**. In addition, Store Framework has native support for **multi-language** and **cross-border** stores.

The two main drawbacks of Store Framework are the requirement for understanding a **VTEX proprietary technology** and the **risk of harming performance** while adding customizations without deliberation.
11 changes: 11 additions & 0 deletions apps/docs/docs/beta/customer-invitation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
sidebar_position: 5
---

# Customer invitation

FastStore is an open-source toolkit that works with any CMS or deployment platform. In this regard, everyone is free to explore the toolkit with different Jamstack solutions. In these cases, however, **VTEX does not assume any responsibility for the project implementation**.

Therefore, the client must be part of the Closed Beta to use FastStore along with WebOps and Headless CMS and benefit from VTEX's support.

**Currently, however, we recommend not offering the technology to new clients** as support from the product team is closer and therefore limited to a maximum number of customers, which has already been reached.
56 changes: 56 additions & 0 deletions apps/docs/docs/beta/features-and-capabilities.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
---
sidebar_position: 2
hide_table_of_contents: true
---

# Features and Capabilities

<img className="md:w-1/2 md:pl-4 float-none sm:float-right" src="https://vtexhelp.vtexassets.com/assets/docs/src/faststore___7d49ee0f13307a7553726c6fc4b159ba.png"/>

## VTEX IO FastStore

**VTEX IO FastStore** is an **open-source toolkit** for headless storefront development composed of **three independent packages (UI, SDK, and API)** optimized for speed and conversion.

- Use **FastStore UI** to add accessibility-ready components to your storefront.
- Use **FastStore SDK** to manage the states related to your store behavior.
- Use **FastStore API** to connect to VTEX's native APIs and other external services (like CMSs, search engines and more).

**Coming soon:**
- FastStore UI theming and tokenization;
- Industry-specific starters (Grocery, B2B, etc);

---

<img className="md:w-1/2 float-none sm:float-right sm:pt-5" src="https://vtexhelp.vtexassets.com/assets/docs/src/webOps___d9166e9f1cb68fd1749de2158add883b.png"/>

## VTEX IO WebOps

**VTEX IO Webops** is a **managed CI/CD Platform** for building, testing, deploying, and serving FastStore websites. With Webops, key stakeholders from all business areas, from developers to commerce managers, have the autonomy to make data-driven decisions around performance and code quality together.
Once connected to a **Git repository**, WebOps builds the project and runs **quality checks on every Pull Request** through four main steps:

- **Build** - builds the website and provides a deploy preview.
- **SonarQube** - measures and analyzes code quality with static analysis, aiming to prevent bugs and bad practices from going into production.
- **Lighthouse CI** - runs Lighthouse audits, showing how the new developments impacted the website performance.
- **Integration tests** - combines individual applications and tests them as a group with Cypress to evaluate the project compliance as a whole.

**Coming soon:**
- Dashboard for monitoring deploys;
- Interface to create and manage projects;

---

<img className="sm:w-1/2 float-none sm:float-right pl-4" src="https://vtexhelp.vtexassets.com/assets/docs/src/headless-cms___c176e57979a4cbebdbca6ae781212670.png"/>

## VTEX Headless CMS

**VTEX Headless CMS** is a **no-code management system** for creating, editing and publishing web pages. It delivers content data to headless applications through an intermediary data layer decoupled from the frontend.

VTEX Headless CMS main features include:
- Autonomy for non-technical teams to maintain storefronts.
- Native integration with the Releases module.
- Versioning control.

**Coming soon:**
- New publishing workflow.
- New personalization capabilities.
- Multi-language/Multi-region support.
Loading