Date of launch: October 2018
Tech stack: Node.js, React.js, Webpack and Babel, GraphQL (via Apollo GraphQL — ApolloClient and ApolloServer), Koa (web-server), Jest (testing library)
Last week, October 2018, we hit a major milestone in our journey by releasing our open source version: DEITY Falcon. DEITY Falcon is a set of tools, a library which enables developers to build Progressive Web Apps for any type of website or web application: a blog, a webshop or any other use case.
We started DEITY as a proof of concept for headless products, building a front-end made with NodeJS and ReactJS, and a back-end based on Magento 2, Wordpress and Algolia. Although our main goal was to share our product Open Source, we decided to release this product exclusively to our partners so we could see in a controlled way what happens and gather feedback on what should change. During the last year, this version has been used in several projects. Ranging from full shop implementations to comparison websites, blog websites and even a modular headless checkout.
Based on those projects we gathered feedback from our partners and our own experience, and identified we had some problems which were caused by our architecture. DEITY-core was a monolith, everything was in one package and it was quite hard to extend the solution with new custom features. We also knew time was running out, we had to go open source soon, so we had to take an important decision. What to do next? Work on more features, add functionalities so we can showcase a full list of features — but with an architecture we know is giving us problems and should change anyway? Or take a step back, refactor the whole architecture to make it flexible and service oriented, but then not have a shiny list of features?
For us the first true user is the developer. So developer experience, quality of code, flexibility and extensibility are more important then the marketing value of having a shiny list of features to showcase to end-users. We stand for quality — so decided to take one step back so we could take two steps forward by changing the architecture fully: and DEITY Falcon was born.
So what is DEITY Falcon?
DEITY Falcon is a tool and library for building Progressive Web Apps, not just limited to e-commerce, but any kind of PWA you may need: webshops, blogs, portfolio’s, comparison platforms — really anything you can imagine.
We started building with a principle we called F.I.R.E:
-Flexible: Because people using DEITY Falcon should be able to build any kind of PWA you want.
-Integrable: Because people using DEITY Falcon should be possible to integrate any kind of data source with it.
-Reliable: Because people using DEITY Falcon should not have to worry about high traffic and scalability
-Extensible: Because people using DEITY Falcon should be able to extend it with as many custom features as the need.
With these core principles in mind, we started splitting our codebase into small self-contained packages that provide a predefined set of features and can be reused in any way. Next we decided to split the application architecture itself: creating Falcon Server and Falcon Client.
Falcon Server
Falcon Server acts as the API server which glues the whole platform together. It acts as the middleware layer between the front-end what you see in the browser and the back-end services providing data like Magento, Wordpress, Algolia, Elastic Search etc.
It is build on top of ApolloServer which gives us all the features that ApolloServer provides like for example the possibility to do schema stitching. Schema stitching allows us to create a single GraphQL schema from multiple GraphQL sources. Since our extensions return a partial schema, they then will be merged into a single one during the build process. More specifically we use Apollo DataSource REST to map our remote REST APIs — for example Magento and Wordpress to our schema. So it gives the extension the freedom to decide how to deliver its part of the Schema — either mapping each Query to a remote REST API endpoint or deliver a remote GraphQL schema directly
Falcon Server also has a built-in extensions framework which provides an abstraction layer for extensions providing the possibility for anybody to build extension and connect them easily.
These extensions can extend GraphQL schemas, provide resolvers and do any kind of modifications of the GraphQL structures, thus giving developers the full freedom to connect any kind of data source. Additionally, it provides a thin layer of abstraction for REST calls that will simplify using external REST endpoints within the extensions code. Users of DEITY Falcon are not stuck with a data source or structure we choose for them: DEITY Falcon is truly platform agnostic.
For the basic shop features, we provide Falcon Shop Extension that delivers GraphQL data types. The Falcon Shop Extension is also back-end agnostic — it can be connected to any kind of API that is capable of providing shop features. By default we connected it with the Magento 2 API, for which we created a separate package — allowing the Falcon to interact with Magento 2.
Falcon Client
The DEITY Falcon Client is the front-end service responsible for handling front-end related tasks such as connecting with back-end, HTML rendering etc. For development mode it was integrated with the latest version of Webpack. 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 sites built with DEITY Falcon, we have integrated Server Side Rendering. This feature works seamlessly and nothing has to be modified: it just works within the app. An easy way to test it is to turn of your JavaScript in DevTools and you will still see the full content appearing.
Additionally we built in dynamic routing for your content. Since it’s pretty complex we will write another blog about it soon, but in basics the main advantage is that you can serve the content via DEITY Falcon from various services — e.g. product pages from Magento and blog posts from WordPress — under the same urls as configured in those sources. Then DEITY Falcon takes care about fetching the requested content from the correct source. This then allows you to integrate the front-end of both your shop and blog inside DEITY Falcon, but still manage the content from Magento and WordPress back-ends as you do right now. One good thing: you do not have to worry about having too many backend types in your app, your bundle size won’t be increased drastically — we got it covered for you, code-splitting is also being handled by Falcon.
As an extra feature and to help developers, 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. For you to be able to manage your state in a unified way, no matter if the data is local in the browser or remote loaded from the server, we changed the state management to Apollo Link State. And of course we built-in Progressive Web App features such as basic offline mode, add to home screen, service workers, manifest etc.
But there is more!
While building shops for many years we figured out that a lot of webshops are similar at least when it comes to the visual part. Especially the initial stage of the development such as the Proof of Concept and moving from PoC to the first MVP, the visual structure is very similar for most shops.
To help you with this 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 our UI library, you are able to 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, spacings, fonts, layout (with css grid properties) and many more. With this set of features you are able to change even the full layout of the shop without touching any HTML structure.
The most important thing about this is that the UI library is based on CSS in JavaScript, it does not use any conventional CSS. We did this to achieve a next level of customizability and performance. With CSS in JS you get:
Truly scoped styles — you define styles only for particular components so you don’t need to worry that styles from one component will affect other areas of your HTML document.The library can be used for building any kind of UI — shops, blogs, websites, webapps — anything you can build with JavaScript.
To make it even easier, we included a visual theme editor as a React component. Once it is embedded in your application that uses Falcon UI, you can tweak your UI in a super fast and easy way while seeing the changes immediately in real time.
Great performance out of the box, without needing to rely on any services underneath to speed up your performance. This is because:
Only CSS required for the rendering of the current object is loaded
CSS selectors are very simple, the browser does not have to care about the parsing or matching of complex CSS selectors.
Critical CSS is always loaded within the HTML — there are no ugly flashes during page loading because you get a complete HTML with CSS that is required to render your page. No CSS pre or post processors are needed. This makes the build process much simpler and thus faster.
So how to start using DEITY Falcon?
If you are as excited by this launch as we are and would like to start using DEITY Falcon immediately, please go to our Github: https://github.com/deity-io/falcon or you can generate an example project with our CLI tool by doing
- npx create-falcon-app my-app
This will generate a base application that connects to our demo backend servers so you can check out how DEITY Falcon and all the tools work together.
We are very proud of what we achieved and are happy we took the decision a few months back to change the architecture rather than just adding more features. However, this project is still (heavily) ongoing and we are working hard to get an even better version and more components out there soon. Would you like to help us in our mission to change the web forever? Please join us, become a partner or start contributing!
Please contact us at: contribute@deity.io and we are happy to talk to you!
This blog is the first of a brand new series. In our next blogs we will discuss the roadmap and show what you can expect from us next, we will update you on new features and tools, and we will dive deeper into why we believe service isolated Architectures are the future of e-commerce.
Stay tuned!
Top comments (0)