Meet the Falcon Progressive Web App Platform For BigCommerce
In October 2019 BigCommerce and DEITY shared some exciting news: they announced their partnership and with that a promise to change the world of eCommerce forever: to bring full Progressive Web App technology to all BigCommerce merchants. Cutting edge technology that will not only allow merchants to build astonishing and highly engaging experiences but also puts every webshop on FIRE 🔥by making it Flexible, Integratable, Reliable, and Extensible.
Merchants are struggling more and more with fast-changing markets, new technologies popping up daily and high demands by their customers. The speed of development is barely keeping up, while the code is getting more complex by the day. Building brand new, super fast and highly engaging user experiences, while safeguarding all the SEO rules and business demands, can be often a true uphill battle.
I am proud to announce that as of today we are bringing you the solution: meet Falcon, a complete and ultra-fast Front-End Platform that not only brings you a full Progressive Web App out of the box but also gives you complete freedom to build what your business truly needs, without any restrictions.
The Falcon Platform for BigCommerce is a fully packed, hosted, front-end platform, which allows you to create the best front-end experience for your shop. You can use the carefully composed design as your basis while having full freedom to adjust or rebuild to make it fit for your brand. The Falcon Platform is not just a theme, it is a complete front-end platform, enabling you to build the best shopping experience with top performance and unlimited flexibility, enabling your future growth while keeping ahead of the competition.
Get ready for a deep dive into Falcon for BigCommerce.
What Is Falcon For BigCommerce?
The Falcon Platform is a fully hosted front-end platform that has been carefully architectured, decoupled and built up from different components.
On a high level the architecture of the Falcon Platform consists out of three layers:
- The third-party integrations layer, such as BigCommerce, Algolia, Stripe, and Wordpress
- The Falcon Server, this is the middleware layer, processing data and connecting the different services.
- The actual front-end, the Falcon Client, the Progressive Web App shop.
It’s worth knowing that while most data is from BigCommerce, the blog content is directly fetched from Wordpress. This integration has been done using the Falcon Server package, so no direct integration between BigCommerce and Wordpress was needed to establish this result.
We did the same for Algolia, which does not have a direct integration with BigCommerce available, but can be used in combination with BigCommerce by using the Falcon Platform.
For the Falcon server, every third party integration is a fully separate and stand-alone extension, reducing not only complexity but also decreasing risks, improving ease of development, improving flexibility and decreasing time-to-market for new integrations drastically.
At the same time, by not integrating Algolia, Wordpress, Stripe or any other service directly into BigCommerce, we are reducing the load on the BigCommerce server, securing high-level performance at all times.
Experience The Falcon Platform in Action
To experience the Falcon Platform yourself with true native app performance and highly engaging functionalities such as ‘add to homescreen’ and ‘push notifications’ see our live demo of Falcon for BigCommerce. In this demo, you will experience not only a high performing Progressive Web App webshop but also an intuitive design, full of features and a unique combination of services and tools: all presented in one layer.
The Progressive Web App is designed using the ‘mobile-first’ principle, where intuitive interactions will guide your customer through a seamless customer journey while completing their order without any efforts or hick-ups.
Your Shop On FIRE
The basic principles of the Falcon Platform are designed for fast-growing companies, who need the best tools to excel and keep ahead of the competition. Therefore we set the basics of the Falcon Platform on F.I.R.E.:
Flexible: You can build whatever your business needs: there are no restrictions on either design or functionality.
Integrable: You can integrate the Falcon Platform with any data source or service. It’s fully platform-agnostic and integration is fast and intuitive.
Reliable: The Falcon Platform for BigCommerce is by design, the most reliable front-end platform on today’s market. It can scale infinitely and withstand any level of traffic without compromising on performance.
Extensible: In this fast-changing market, it is crucial to be able to extend and innovate your shop in a fast and efficient way. Falcon for BigCommerce allows you to customize and extend in an intuitive way, without adding any complexity.
So How Does It Work?
The Falcon Platform has a unique decentralized architecture. Such architecture makes the platform extremely reliable, flexible and unlimitedly scalable, while at the same time reducing complexity.
In Falcon, you will find the two main layers: Falcon Client and Falcon Server.
Falcon Middleware Server
Tech stack: Node.JS, Koa, Apollo Server, GraphQL, REST, 100% TypeScript
Falcon Middleware Server acts as the middleware layer between the front-end (Falcon Client) and the back-end services providing data, including BigCommerce, but simultaneously this could also be Wordpress, Algolia, Stripe or any other your business requires.
The Falcon Server is the force behind Falcon Client and will make sure your data is always fresh and accurate, it will allow you to pull in any service you need and will assure you the super high performance and blazing fast loading times.
Falcon Client Server
Tech stack: Node.JS, Babel, ReactJS 16.10 (including hooks support), Apollo Client (supporting Apollo 2.0 hooks), GraphQL, Webpack, Jest, loadable-components, Formik, React-router v4
The Falcon Front-End Client is the front-end service responsible for handling front-end related tasks such as rendering the user interface. Falcon Client is a full Single Page Application. This means that each time a user interacts with the site, the current page is dynamically re-written rather than requesting an entire new page from the server. This approach avoids interruption of the user experience between successive pages, giving not only huge performance advantages but also a much more intuitive user experience. For development mode, Falcon is integrated with the latest version of Webpack.
The Falcon Front-End Client is fully equipt with many great features:
- Server Side Rendering — As the front-end is fully JavaScript-based, Google SEO value might be at risk. To protect this value and make sure bots of any kind can crawl and correctly index shops built with Falcon, we have integrated full Server Side Rendering.
- Dynamic Routing — This feature allows you to use different services simultaneously, without adding any complexity or dependencies. You can serve content via Falcon from different services (e.g. products from BigCommerce, blogs from Wordpress) under the same URLs as configured in those sources. Falcon Client takes care of fetching the requested content from the correct source and seamlessly integrates it in the UI. You do not have to connect Wordpress directly with BigCommerce, just connect to Falcon Client.
- Web Cache and Vendors Bundle (long term cache) — To optimize performance even further, Falcon Client is fully equipped with web caching capabilities. Including Vendors Bundle for long term cache, so you can keep parts of the app for a long period of time on the client to avoid re-downloading them every time.
- Code splitting and loadable (asynchronous) components — You can use multiple backend types or services, and performance is still not at risk. Code-splitting and loadable components make sure your bundle size will not increase drastically, as it automatically splits your code into various bundles which are then be loaded (asynchronous) on-demand or in parallel.
- State management based on Apollo and React context — State Management can be one of the most complex problems in UI development when applications become more complex. With fully optimized Apollo and React state Management, we have made sure you can manage your states in a unified way, no matter if the data is local in the browser or remotely loaded from the server, and your UI components will always react accordingly. There is no need for tools such as Redux. Apollo Client will be pre-configured and does not require any additional setup.
- Dynamic Meta Tags — Falcon Client makes sure your meta tags change automatically based on the “route” or “URL” the visitor is at. With a single page application, this can be tricky since it’s technically only “one page”, giving you potential problems with tracking, analytics, dynamic (personalized) content and ads. With dynamic meta tags, we make sure this is fully covered and easy to change.
- Google Tag Manager and Analytics — Falcon Client has a full integration with Google Analytics and Google Tag Manager.
- Optimized for performance and Lighthouse — One of the main priorities of user experience, and with that conversion rates, is performance. Falcon Client is fully optimized to deliver the best performance and scores 100/100 on Google Lighthouse.
- More SEO optimizations — Falcon comes with full support for canonicals, structured data and more. Making sure your technical SEO is 100% covered.
- Internationalization — Falcon Client fully supports multi-language and cross border approach with i18n. Among other things, it can detect the user language, load the translations dynamically (with code splitting) and can cache translations. additionally, it supports the BigCommerce basic multi-store functionalities.
The Falcon Progressive Web App
At its core, a Progressive Web App (PWA) is simply a web application that uses the latest web capabilities to deliver native app-like experiences to users. They are reliable, incredibly fast and highly engaging. It is the technology that will bring consistency between web and native apps. It gives businesses the opportunity to target a mass market and opens a whole new world of marketing possibilities. Read more about Progressive Web Apps here.
After installing Falcon for BigCommerce, you will immediately see a new front-end theme with your products. The front-end theme is a full Progressive Web App and out of the box includes the following features by default:
- Add to Home with the Web App Manifest — A Falcon shop contains a Web App Manifest. With this feature, the store can be installed on a user’s home screen and behave like a true native app.
- Offline mode — The Falcon PWA Theme fully supports offline mode. With the use of service workers, Falcon can serve content while the user client is offline. As a developer, you have the total freedom to decide what data will be served in offline mode.
- Pre-cache — The Falcon PWA Theme will be pre-cached, optimizing performance to the fullest, also on the first hit.
- Push Notifications — with PushPro, the Falcon PWA Theme delivers push notification capabilities to your store on mobile and desktop devices. With an intuitive portal, full audience segmentation and a 5-minute installation, you can start sending push notification to your website visitors directly.
- Support for custom ServiceWorker logic — Based on the FIRE principle, Falcon makes sure you have the full capability to add any custom service worker logic, without adding complexity or creating complex dependencies.
How to Theme Your Store With Falcon For BigCommerce?
One of the things that makes the Falcon Platform unique is its theming capabilities and (visual) theme editor. The Falcon Platform ships with powerful theming tools.
Within Falcon Front-End Client you will find two packages: the Falcon Front Kit and the Falcon UI Kit.
Falcon Front Kit (ReactJS)
In the Falcon Front Kit you will find all functional components, which gather, pass, query and mutate data from the back-end to the front-end. The purpose of this package is to provide functional components that work tightly with the Shop Extension types to ensure the correct data flow but at the same time, it does not expose any UI elements, leaving this part to be implemented on the project level.
Falcon UI Kit
The Falcon UI Kit has the actual smart UI components, which allow for customization of the UI and represent shop elements. Every component has a default theme built-in, providing a consistent and pleasing look out of the box while allowing the possibility to customize it in every detail. UI elements are primitive components (such as a button or a panel), while UI kit is a set of UI components combined into complex elements, such as Product Items or Filters.
Visual Theme Editor
To make it even easier, the Falcon Platform includes a visual theme editor as a React component. Once it is embedded in an application that uses Falcon UI, you can tweak your UI in a fast and easy way while seeing the changes immediately in real-time.
To help developers with the initial stage of the development, we have created a library of UI components, with built-in theming capabilities that will allow you to quickly prototype shops. Once you have built a shop using the UI Kit, you can change the globally defined theme for all components which gives you the possibility to fully change the look and feel of the shop in no-time. Theming at this moment covers color schemes, responsiveness, spacing, fonts, layout (with css grid properties) and much more. With this set of features you are able to change the full layout of a shop without touching any code.
Developer Experience
For the Falcon Platform the first true user is the developer. Developer experience, the ease, comfort and speed with which a developer can work with Falcon is one of our main priorities. Falcon comes with ‘batteries included’: a great set of tools for a great developer experience.
As described before, creating front-end experiences with the Falcon Platform is intuitive, easy and highly flexible due to the component-based architecture. You will find ReactJS based UI components that are fully composable, themeable and responsive. Additionally, the Falcon Platform allows overriding of any component used in Falcon Client. You can easily override any component in all other files and even packages where it exists with just one setting.
Every good platform needs logging, so we have that covered, but as an extra feature, we added performance measurements to Server-Side Rendering so you can see how long your GraphQL queries are executed and thus how long certain processes on the server take. This gives you a very detailed insight in how your app is performing and what needs optimization.
Adding to the developer experience is that Falcon comes pre-integrated with JEST for testing, it has configurable Babel transformations, allowing you to change and add custom presets and plugins, ánd Falcon fully supports CSS, CSS-modules and SCSS Support. Giving you the freedom and flexibility you need for your projects.
How To Get Started?
Falcon for BigCommerce is available in 3 packages:
- Sandbox Version — Allowing you to build and test your PWA BigCommerce shop
- Business Version — Allowing you to build, test ánd publish your PWA BigCommerce shop. This version comes with full open-source access to the Falcon Client, all the UI Theming Capabilities and is by default, alongside BigCommerce as the core, pre-installed with Stripe, Algolia, and Wordpress.
- Enterprise Plus Version — Additional to all the features of the Business version, Enterprise Plus comes with full access to the Falcon Server as well, allowing you code-level access to add functionalities, third party services and more.
In a few weeks, Falcon for BigCommerce will be directly available via the “Channel Management” functionality in the BigCommerce control panel. With one click of a button, you can set up your environment automatically and get access to the Falcon code to build amazing Progressive Web App customer experiences for your BigCommerce shop. Please stay tuned for the official release soon!
If you can’t wait and would like to jump in right now, or are looking for Enterprise Plus versions, please contact our team! We will help you to get everything set up and running smoothly within just one business day.
Are You Ready For The Future of Commerce?
When mobile page load time goes from 1 second to 3 seconds, 52% of your visitors are leaving your webshop. When customers get held up by a slow checkout, the sale is at risk.
The enhanced user experience and fast page speeds of a Progressive Web Apps allow the customer to complete their desired task quickly and efficiently. Falcon for BigCommerce delivers two to four times faster page speeds, ensuring hard-earned users to stay engaged and convert while enabling merchants and developers with the full freedom to build astonishing and highly engaging user experiences.
By bringing Progressive Web App technology to BigCommerce with Falcon, merchants can now provide the same high-converting, app-like experience of a native app to its much larger audience on the mobile web.
The future of the web is fast, intuitive, engaging and highly flexible. The future of the web is here: Falcon for BigCommerce.
