We receive two documents as our project brief from the client: a wireframe and a set of criteria to meet. A wireframe is the layout of our application in broad strokes, as shown here:
Wireframe graphic for "Architecture CMS"
Immediately, we know that this is a very simple single-page application with a tree view, editor panel, and a search bar. The criterion fleshes out as follows:
- REST backend API provided
- The treeview to show all pages
- Search that will highlight the matching page in the treeview
- The required HTML editor
- URLs that must be customizable
- Pages that can be published or unpublished
- User must be able to create, view, update, and delete pages
Let's assess these criteria in terms of Ext JS. Firstly, we know that REST support is available in Ext JS via Ext.data.proxy.Rest, which we can use through our models and stores. However, note that the second point requires a tree view representing the hierarchical structure. While Ext JS provides a TreePanel component and there's a dedicated TreeStore to handle hierarchical data, there may be a possibility that loading this kind of nested data via a REST API could have some complications.
With this cleared up, we now look at the requirement for search. We know that Ext.data.NodeInterface, the class that powers nodes in a TreePanel, has a findChildBy method that allows you to traverse a tree from the root and perform an arbitrary action when we find what we need.
The customer specified that an HTML editor is required, which is fine as Ext JS ships with a well-featured WYSIWYG HTML editor in Ext.form.field.HtmlEditor. For the URL customization, we don't have to do anything special other than be aware that the client has asked for this field to be included when editing; likewise the same with the published/unpublished flag.
Finally, we know the operations that the customer would like to perform on pages, which dictates how our application will interact with the existing backend. Given the REST API available to us, supporting the required create, read, update, and delete (CRUD) actions should be trivial with an implementation of Ext.data.Model.
As we've reviewed the client's criteria against the tools available to us, we can confidently accept the challenge laid down for us. Without performing due diligence on customer requirements, we could begin a project without being 100 percent certain of whether we could complete it, potentially risking the success of the project and costing valuable time and money.