Daffodil

Table of contents

• Introduction
  • Features
  • Prerequisites
  • Getting started
• Uses
• Packages
  • PWAs
  • Angular and Ecommerce
  • Better Frontend UX
  • Less Re-Platforming
  • Table of Packages

What is Daffodil?

In general, Daffodil is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.

Specifically, Daffodil is a frontend toolkit that accomplishes three things:

1. Improve developer workflow when writing frontend software for Ecommerce stores.
2. Provide a consistent frontend developer tool-chain regardless of a business's chosen ecommerce platform.
3. Drastically improve the end-user experience of online-shopping.

What are Daffodil's features?

Daffodil's features include the following:

• :free: Forever Free, Open Source, and MIT Licensed
• :hammer: Platform Agnostic Drivers for your platform of choice
  • Shopify
  • Magento 2
  • In-Memory Backend
    • Prebuilt
    • :zap: Great for lightning fast iteration and concepting
• :cake: Decoupled and Composable Packages for your use case
  • Product
  • Cart
  • Checkout
• :books: Well Documented
  • Example Implementation
  • API References
  • Tutorials
• :bulb: Component Kit
  • Purely Functional
  • Themeable
  • Accessible
  • Supports Server-side Rendering
  • Well Tested
  • Fantastic Performance
  • IE 11+ Support

What do I need before I start using Daffodil?

Daffodil was developed so you can get started without connecting to a platform. Because of its driver-like nature, all you need is the following:

1. Node.js v18+
2. npm
3. An Angular 17 project

How do I start using Daffodil?

After installing the prerequisites, you can choose the packages that you want and get started using Daffodil with your new or existing Ecommerce store.

• To use Daffodil to build your own Ecommerce store, follow the steps in the Installation instructions.
• To view our progress of an example store or contribute one of your own, see the Developer documentation.

Who uses Daffodil and why?

The target devopers for Daffodil include, but are not limited to, the following:

1. Developers who want to explore and experiment with Progressive Web Apps (PWAs).
2. Developers who are comfortable with Angular and are interested in job opportunities in Ecommerce.
3. Developers who work with businesses that have existing websites but want a better user interface and experience.
4. Developers who are forward-thinking, have gone through a re-platforming, and want to deflect future re-platforming.

What packages do I use?

For a basic Ecommerce site, you need all of the most commonly used packages (common packages), which are the following:

• @daffodil/cart
• @daffodil/category
• @daffodil/geography
• @daffodil/navigation
• @daffodil/product
• @daffodil/core
• @daffodil/driver

Note: Both the core and driver packages are dependencies for most other packages. Developers do not interact with these packages directly.

Referring to the aforementioned use cases, here are some lists and explanations of recommended Daffodil packages.

1. To explore and experiment with PWAs

If you don't have a project in mind and want to see something in Daffodil working, then use:

• @daffodil/core
• @daffodil/driver
• @daffodil/product

2. To expand Ecommerce opportunities

If you want to expand your portfolio for more Ecommerce opportunities, then use the common packages and optionally include:

• @daffodil/design (optional)

You won't need to use more than the aforementioned common packages(#pwapackages) until you have a specific business use or requirement. However, if you are design-focused, then you can either use your own design framework or use the design package.

3. To improve the user experience for existing business sites

If you have an existing site, either your own or backed by a business, then there are a few working assumptions about the site: it has SEO and specific URLs, and the product pages need to show lists of related products. So, in addition to the common packages, you may need the following packages:

• @daffodil/external-router
• @daffodil/seo
• @daffodil/related-products****
• @daffodil/upsell-products
• @daffodil/design
• @daffodil/contact

4. To prevent future re-platforming

If you want to prevent future re-platforming of your Ecommerce site, there are a few assumed advanced requirements. For example, the business has complex product configurations and has marketing email campaigns. So, in addition to the common packages and the packages for improving user experiences, you may also need the following packages:

• @daffodil/newsletter
• @daffodil/product-composite
• @daffodil/product-configurable

Packages

Below is a table of currently available Daffodil packages.

Package	Version	Stability
@daffodil/analytics
@daffodil/analytics-provider-data-layer
@daffodil/auth
@daffodil/authorizenet
@daffodil/cart
@daffodil/cart-customer
@daffodil/cart-store-credit
@daffodil/category
@daffodil/checkout
@daffodil/contact
@daffodil/content
@daffodil/core
@daffodil/customer
@daffodil/customer-auth
@daffodil/customer-order
@daffodil/customer-payment
@daffodil/customer-payment-authorizenet
@daffodil/customer-store-credit
@daffodil/design
@daffodil/driver
@daffodil/external-router
@daffodil/forms
@daffodil/geography
@daffodil/navigation
@daffodil/newsletter
@daffodil/order
@daffodil/payment
@daffodil/paypal
@daffodil/product
@daffodil/product-composite
@daffodil/product-configurable
@daffodil/related-products
@daffodil/reviews
@daffodil/router
@daffodil/search
@daffodil/search-category
@daffodil/search-product
@daffodil/search-product-composite
@daffodil/search-product-configurable
@daffodil/seo
@daffodil/upsell-products

Note: About the checkout package, it is currently a legacy package; there is no reason to use it. However, the checkout package eventually may be filled with extracts from the cart and order packages.