Things have been really busy around Wembassy since we won 2nd place at the Drupal Hackathon in Manilla. One of those things was learning some new technology to help us supercharge our work with creating Drupal's first Live page editor. We recently decided to switch from standard jQuery development and move into developing the application using Typescript. This allows us to organize the code, integrations, and core plugins for Dragon Drupal a bit easier and should let us get some speed when it comes to adding features to the tool. When we first started working on the project most of us were fighting the Flu and so the code quality suffered due to the time constraints, which was another reason we decided to start refactoring things so that they work a bit cleaner and were easier to read.
Dragon Drupal is a project that aims to be Drupal's first Live page editor, what we mean by that is not only do you see what the page will look like as your editing it, but you have the ability to update Nodes, Entities, and upload media files quickly and easily without having to jump around from page to page. There are a lot of challenges to get to this point. Many due to just how Drupal is organized. We are leveraging the GrapesJS to help provide a user experience similar to what you would find on Wordpress, Squarespace, and other platforms making Drupal a much more competitive option when displayed side by side with these platforms.
Dragon can utilize be used to style any ContentEntity that a Drupal platform has, once complete you then click the Build Theme button, and Dragon goes to work exporting a fully Drupal compliant theme. All layout, css, js, and image assets are stored in the theme and ready to easily be shared across different environments for your site or with a completely new site. Another one of the big features we are working on is also utilizing the ability to create needed content types, views, and other supporting elements when the theme is installed on a site. This is done through Drupal 8's new configuration management system and ensures that your theme won't break when you import it into a new platform. This is done in an additive way so as to not destroy pre-existing configurations.
Key Features Roadmap:
- Complete refactor from jQuery to Typescript
- Integration with Drupal 8's filesystem for image, video, and audio handling
- Integration with Drupal 8's QuickEdit module to allow Dragon to know when you want to place static text or when you need to update an entity's field data.
- Ability to create Drupal 8 themes, static site templates, and more
- Ability to create and attach Javascript behaviors to elements during page building
- Ability to import flat html, css, and js from HTML5 compatible templates and generate the initial canvas for page building.
- Ability to integrate with A/B testing service providers to allow for easy setup of A/B testing on the theme level
- Special Drag and Drop elements for popular contrib projects Like Commerce, Organic Groups, Views, etc
You can see some of the demos and the work we are doing on our Youtube Channel's Playlist for Dragon Drupal.