Answering the most commonly asked questions about the SPA editor
Today I am going to answer some FAQ that I get a lot from customers, that are not addressed in the latest post / archetype updates. Disclaimer: As the solution gets updated frequently, these answers might become outdated.
Are Content Fragments supported?
As of today just recently, for react yes, for angular not yet. (PR is pending) Check the PR for react here and for Angular here to see how it's used. Note: this is for the spa editor only because it depends on the component-mapping.
Are Experience Fragments supported?
As of today just recently, yes. They require you to overload a resource type from the spa-core project, and to provide 3 HTL files. No more Java hacking required. This is baked into the latest AEM archetype release now, so you don't need to worry about it if you use this as a base. Otherwise, you can generate a project and see how it's done there with minimal code.
I hate Java! How do I avoid having to develop or even see Java Code?
It is my personal opinion (not Adobe's) that you should accept that on your job, you don't always get to work with the stuff you love. A good balance in my life is: 90% of what you do you can love but there always will be 10% of stuff that you hate (long boring meetings anyone?). This is life, it's not always a party. AEM is a big CMS with lots of features that firms come to rely upon, and you can't just say "I don't want to see Java" if you want cool customers.
Answer to the question: I will write a separate blog post on this on how to avoid Java as much as possible as it deserves a post by itself.
Are non SPA components supported?
Officially no. My answer is: Yes and no. This core components example demonstrates how you can support static (html / css only) non SPA components. Prerequisite is that you can specify a sling:resourceSuperType on that component.
The way it's done is that an internal request is created to the component itself with a HTML selector. That HTML is then exported in JSON, and the HTML is injected onto the DOM element in React / Angular. Not the prettiest but works.