Testing the intelligent, buggy Ant Design Landing Editor
I like trying new things. From the grocery store cereal aisle to cell phones, the intrinsic value of “latest and greatest” wins out in my mental arguments. This mentality then carries over to the software development world.
You know when you go to download software and all the versions show up? I wave away the warnings about possible problems and boldly select the beta version. I never know what’s new, but no chance I will be behind. And with web development, yarn package manager dangerously enables me to update everything at once with just one simple command: yarn upgrade --latest.
To redesign the CameraKit website, we wanted to go towards a component library that easily integrated with Next.js. The choices narrowed down to Google’s wonderful Material Design and the “enterprise-class UI design language and React implementation” of Ant Design. During that search, I was struck by a “NEW” badge.
Alright Ant Design, you win this time. I’ll check it out. Ant Design’s Landing greets you with a great landing page! Other documentation from Ant Design is nicely translated, but since Landing is still in early stages of development the effort of gracious editors haven’t gotten to all of the content yet. There are three other major categories to explore before we get to the editor.
Templates
There are currently eight templates to choose from. These are all well thought out websites that are easy to preview for both desktop and mobile. The first two can be edited with the all NEW landing editor! (More on that later.) The other ones are available to download from their respective GitHub repositories. These are ready-to-go react projects with testing and linting. npm i && npm start is all you need to get up and running.
Design Guide
The second category is a well laid out documentation page that is unfortunately not translated. The guide seems to lay out the foundation of how the user interacts with, and how a landing page will look. The content in these guides, however, is far from the depth of Material Design.
Sketch
Here you are able to download a Sketch file with all of the components available in the editor.
Editor
Finally the editor! It’s very similar to other WYSIWYG editors, but this editor tries to follow all of the Landing guidelines. Here is an overview of what it looks like.
What I like
The amount of styling options is fantastic. Changing the style happens instantly and there are well thought out dropdowns, button groups, and input fields for different properties. The output CSS is shown, but cannot be edited.
Moving around and adding templates is an easy drag-and-drop action with some pre-populated text and images for inspiration. You can choose from all of the components that are used to create the two sample sites.
Each individual node of the component can be edited and styled to give you very granular control of how each part of the site will look.
You are able to save, preview, and download your site as well. When downloaded, the resulting file includes individual .jsx files for each component as well as a corresponding .less file.
For the astute readers, you have noticed the data.source.js file which is where the components get their data to display. For example, here is the footer data.
export const Footer00DataSource = {
wrapper: { className: 'home-page-wrapper footer0-wrapper' },
OverPack: { className: 'home-page footer0', playScale: 0.05 },
copyright: {
className: 'copyright',
children: (
<span>©2018 <a href="https://motion.ant.design">Ant Motion</a> All Rights Reserved</span>),
},
};In the Footer0.jsx file, here is what the React component renders.
<div {...props} {...dataSource.wrapper}>
<OverPack {...dataSource.OverPack}>
<TweenOne
animation={{ y: '+=30', opacity: 0, type: 'from' }}
key="footer"
{...dataSource.copyright}
>
{dataSource.copyright.children}
</TweenOne>
</OverPack>
</div>As you can see, the component has no static data inside it, but instead uses everything in the dataSource object to set the className and content. Overall I do not know if this is better or worse, but is interesting nonetheless.
What I do not like
The style customization is nice, but this isn’t an editor for someone who isn’t already pretty familiar with CSS. Some of the options do not make sense to be put onto text, and other options do not make sense to put onto images. Settings like border will not appear to be working until you specify the width, color, and style which is confusing at first.
The amount of components you are able to add is only 24. There are three navs, four banners, fourteen different content containers and three footers. So not much customization there.
The editor does not allow any movement or addition of individual components on the pre-made templates. This leads to websites that are incredibly hard to differentiate from any other created by this editor. Also, when styling these components you can change the padding and margins around which seems to be at odds with the design principles in the first place.
What bugs me
When I was trying to create a landing page for our site to test out this editor, I spent a good amount of time adding, removing, and rearranging elements to get it just the way I wanted. I did not change any styling because I only wanted the complete layout to start with. There were some minor inconveniences along the way, but there was a huge problem.
After downloading and integrating the code within our existing development site, the output was of a version I previously had been working on. It seemed to not save anything I had done. Now this is clearly my fault — I should have done a better check of the files before blindly copy/pasting. This only wasted about an hour of my time, but I can’t recommend this for any serious work. I even tried downloading it again, but the same problem appeared.
This is still a work in progress
The direction this project is headed looks awesome! I know that eventually this editor will be great, but right now it will just be a very fun tech showcase!
