25 Mar 2010 2:25 PM #1
Help me understand the Role of Extjs Designer...
Granted we have only had access to the trial version (waiting for sales to update pre-orders) for a couple of days. Even with this limited amount of time we are still having trouble seeing exactly where this fits into our development life cycle. Now before I dive into our feedback I wanted to call out that I am happy we purchased ExtJs Designer and have no regrets in pre-ordering. Anyone that can look towards the future should really consider supporting ExtJs to allow them to continue improving this tool. I also understand that this is version 1.x and that a public beta was not conducted. Regardless of that choice, it was released for production use, which is what prompted our feedback.
Throughout this post I reference "a design tool" and a "mock up tool". In this context I associate a design tool to something similar to products like PhotoShop or Fireworks, which allow you to create something 'complete' from scratch. For a mock up tool I reference Balsamic, having personal experience with this product, as something that lets you visually represent an unfinished design.
Use Case 1 - From the Business Analyst
For us, at the start of our development process, we have the role of Business Analyst(BA), which is the person looking at all of the requirements and features, writing user stories, helping plan sprints, things like that. We all probably wear this hat in some fashion either as a Freelancer, or simply when we work with our customers to gather the requirements and building out your backlog.
So far they like the tool as it makes creating Extjs mock ups very easy. The issue comes down to the usability of what is created. An example, the BA using ExtJS Designer puts together a mock up of a simple Viewport with a border layout. You have a few buttons in West and a tab panel in Center. Nothing complex as far as design goes.
After using the designer for the first time here is what happens:
1. Creates Mock up in ExtJS Designer
2. Take Screenshots for each 'page'
3. Either printing or using a graphics tool, Draw what the expected actions or behaviors the UI would perform. Such as saying that Click on "Button 1" on the left, which should open a new tab in the center, which then contains the view from page 5 (or screenshot 7).
4. Deliver these designs to the developer, through your ticket tracking system (or email), who then programs them out to have the behavior
Even when you look at the aspect of working directly with your customers, either showing them or asking for feedback. While you now have pretty ExtJS designs, how much of your time is spent answering what this button is supposed to do, or how this form will work. How many additional notes, paperwork, or post production ExtJs Designer project work (ex. Fireworks, PhotoShop) is required to get right point across.
We currently use Balsamiq as our mock up tool. This is not a 'plug' for this company, because I really see these two products solving different needs. Balsamiq allows for Drag and Drop UI mock ups, which allow you to link between mock ups. Meaning that you click on 'button 1' and that links you automatically to 'mock up 2', or to display an error message, etc. This allows for our BA to toss together a full interactive UI (with no coding at all), and place virtual 'post-it' notes to explain more complex behavior.
The trade off is that this comes with no code. The developer must 'start from scratch' to create these screens and behaviors. Unlike with ExtJS Designer, you get code, but that brings me to point 2.
Use Case 2 - Maintainable
1. ExtJS Designer is used to create a design
2. Developer takes that, programs and builds out the behaviors, listeners, back end integration, etc.
3. You finish with your sprint with the developers delivering what was asked for as well as cleaning up the UI a bit more, etc. You are now out beta testing the application.
3. Scope Creep happens and the BA (from the client) wants to change the design around to account for the new changes. Now comes the dilemma:
A. Do you work from the initial ExtJS project, which is no longer the same as what is in production,
B. Redesign the Mock up to reflects the new requirement,
D. Not use ExtJS Designer,
4. Now as a developer you get one of the options above...
A. or B. Outdated code that didn't reflect the new changes from Production and either way you now have to sort through new code that you have to refactor into your old prodction code. Or you simply have to use the designs as examples and reprogram it.
D. or E. Really removes the benefits of ExtJS Designer.
The second half of this comes from the developer who wants to use this as a tool in their workflow. I know that in my experience developers 'should be' Testing, Programming, Verifying Tests, Refactoring, and Repeat. Even in other development methods programmers are always coding and refactoring. If I use ExtJs Designer I cannot really do that, since as soon as a I program anything after the initial designer export, I cannot go back in and make changes. Let's say that I make a bunch of changes like adding listeners, or other behavior to my objects, and then I want to go back and add a few more fields to my form, update the layout or tabs, I now have again two branches of code I have to manually bring together. Copying and pasting the differences. You can see the time overhead that comes with this as it is today.
In a real world environment that last thing you want to do is maintain more code. It's costly to the entire development cycle. Reinventing the wheel or creating something that is not reusable(or circular) negates some of the benefits of a tool like this. Tools like this should remove overhead to the process, not add to it.
In short, I hope that this shows how important it is for ExtJS Designer to import code that developers create to truly create value across the life cycle of the project. Today you are left with, First time designs risking the overhead of keeping everything up-to-date, or keeping your use of ExtJs Designer as a code helper to simply give a developer the framework of code for components, and the overhead of merging.
Use Case 3 - Representing Abstract
I touched on this briefly in Use Case 1 with the ability to add non-ui 'notes'. A key issue that I can see in the future is the balance between a design tool and a mock up tool. Currently your site lists that your target audience as "business managers and non-programmers". The problem is that these roles don't often know what exactly they are looking for, because they are trying to analyse and interpret customers who are not sure what they want... Now in trying to find a use for ExtJs Designer I feel caught up in an "Identity Crisis" and asking myself should I be trying to pitch this tool to upper management as a Mock up tool, or as a Design Tool?
Let's say for a moment that a customer has two requirements:
1. "As an Web Administrator I need a way to see a list of all registered users."
2. "As an Web Administrator I want to be able to group users by department."
The BA might say, "Well that is a great way to use a data grid and I have seen a lot of websites out there that use drag and drop, so you should be able to drag and drop users into group buckets on the same page." Trying to use ExtJS Designer the BA might find that you can simply drag and drop a data grid into the workspace, then wait... looking through the buttons, you cannot find a way to create drag and drop targets. You find yourself thinking that "...I thought that ExtJs could do drag and drop, well I guess not. I guess I will just have a pull down menu here for setting the group." and move on. You might also try and ask one of your developers directly, who would say yea we can do drag and drop, you just can do it in the designer. And now you are left having to partially design it using ExtJs Designer and for some parts using paper, or words, to define the requirement.
We have two things here:
First we have the feature gap that exists between ExtJs and ExtJs Designer. This can results in a non-programmer just not knowing what can be done with ExtJS, and in turn missing out on key benefits of using ExtJS. How does the user of ExtJs Designer know that you can have form validations, charts, listeners, etc. How much additional training is expected of a non-programmer, should they know to look at the ExtJs API, Samples Page, etc. If this is a design tool like PhotoShop, just think about how much most of us don't know about what can be done in PhotoShop, (Learning Curve, which needs lots and lots of documentation and training materials to help with adoption.) If this is a mock up tool why should I use this tool over others on the market. (Sell me on the benefits and let me know what you are going to solve my needs)
Second, you also have no way easy way to represent abstract concepts. Sure, some of this is a training issue. Teaching the non-programmer to create a panel and put a label inside of it saying 'custom widget here, see ticket #7545', or what ever the best practices might be. And this compliments my confusion over is this a design tool or mock up tool.
I know that it's always so much easier looking from the outside and think you know best. With that note, here are a few non-personal feedback.
1. If you do not already practice agile software development methodologies, such as Scrum or XP, I strongly recommend that you look into this for the future. I personally have been part of a startup companies adoption and an enterprise 100+ developer plus web application company. In short, both adoptions were successful and you would be amazed and how quickly our releases were on time and actually met customers needs. I could go on about this and would love to share if interested, send me an email.
2. Provide a few examples of where you see ExtJS Designer working in the Software Development Life-cycle. Create a couple of user-story based blogs or studies on how this would be used in the real world. This let's people like me really understand the expected use of the product.
3. In your next release take an internal project, maybe something that you have had in the parking lot for ExtJs Samples. Or even better would be to survey ExtJs users on another 'Sample' they would love to have. Then run through a full development cycle, using ExtJs Designer as the central focus, how is it used, what gaps or problems were found, then document it and improve. It's the time old saying of 'eat your own dog food'.
4. Implement an 'Idea' requirements solution to get more feedback from your LARGE community. A great model of this would be SalesForces idea exchange "http://sites.force.com/ideaexchange"
I hope that this is taken as constructive feedback because we are really glad that we have this tool and are really excited to see how it grows in the future.
Last edited by cwestbrook20; 27 Mar 2010 at 11:45 AM. Reason: had to correct the bundle of option c. under use case 2.
25 Mar 2010 3:25 PM #2
- Join Date
- Feb 2009
- Amsterdam, The Netherlands
- Vote Rating
Bravo! Exactly my thoughts.
I would just wish ExtDesigner would be as simple as Balsamic Mockups with Drag and Drop, because I still think that although Balsamic is very simple and intuitive (hats on for that), the UI's look kind ugly.
25 Mar 2010 3:45 PM #3
@Grolubao I know what you mean about the resulting Mock ups from Balsamiq and I don't want to get too off topic of the main thread, but I didn't want to use it at first until my co-worker shared with me that this 'child-like' design was actually a conscious choice. It turns out studies show that when measuring or gather user experience feedback, the 'less polished' the design, the more accurate and valuable feedback returned. In summary, something about the nature of people and not wanting to 'hurt another's feeling' when put on the spot. It sort of makes sense, if everyone is looking at you for feedback on an area, the 'better' things look, the more you might feel bad about saying that it just doesn't feel right, because you 'mentally' think that a lot of effort went into it.
If you have any interest in this topic I recommend any book on "Human–computer interaction" or HCI, as they cover the actual 'peer-reviewed' aspects of user interaction/ user experiences. Of course you can always Google to find tons of blogs about the subject as well.
To keep this on the 'ExtJs side of things, If it comes back that the role of ExtJs Designer is to be more of a Mock Up tool, then I would be the first one in line to request a 'non-polished' theme for designer components (or ExtJs) to help us when trying to capture feedback from our users.
25 Mar 2010 4:34 PM #4
Excellent topic! I am very interested in hearing people’s thoughts on this. And thanks for the info on Balsamiq; I hadn’t heard of it before and I’ll have to check it out.
Most of my experience comes from a Java EE background. I find the current state of affairs fascinating. It seems to me the mantra has always been that markup and other client-side artifacts are difficult / distasteful / hard / whatever, so the best option is to somehow abstract it away in the server side code using JSF, the custom tags from Spring MVC, or other solutions. Even more modern and adventurous solutions like GWT are a variant on this approach. This is probably at least in part due to the relative maturity of tools for strongly typed languages like Java.
I, too, pre-ordered the Designer and am happy with it so far, though I see several issues and enhancements I would like to see worked out in the near future. However, integrating it into my workflow will be challenging because it is such a shift. For my own development purposes, I plan to use it for two things. One is simple things that I throw together that I plan to integrate into existing applications. The layout options in ExtJS haven’t always been intuitive to me, so I think it will be very nice to visually design a simple panel or form for an existing page, granted with the expectation that I might not be able to use it in the designer anymore once I’m ‘done’ and integrate it.
Now, for entirely new applications or pages, I plan to treat things similarly to say VB6 (I say this because I have experience with it; I’m sure there are other examples) where you have binary / metadata files that you are absolutely not supposed to edit by hand, but some other files / pieces of files that you can enter code in via the IDE. So, I plan to treat the ExtJS Designer artifacts as read-only. I will put my behavior for the designer components in other .js files and that way we can hopefully be assured that designer files are in sync with production and can use the Designer for maintenance as well as new work / mock ups. I think I may write some simple Java build scripts to grab the attributes from the generated artifacts that I care about on the server side (mostly the names / id’s) and generate Java artifacts based on those. That way I can at least get compile errors if the names change and perhaps a primitive form of code completion if I put the other js artifacts in some file format like jsp that understands Java syntax. The process isn’t as elegant as just double clicking on something in an IDE and entering behavior, but I’ll give it a shot on a new project and see how it goes.
26 Mar 2010 12:35 AM #5
- Join Date
- Jan 2010
- Rotterdam, The Netherlands
- Vote Rating
go for the road of a fully featured design tool
I would go for the road of a fully featured design tool. I think that matches with most requested uses cases as cwestbrook20 describes in his first post. The Ext designer allows for early prototyping. That's a win! Later on when the developers have taken the exported code and started developing and new requirements for UI or logic or coming from the customer, we don't want to lose the time we gained prototyping! As cwestbrook20 puts it:I now have again two branches of code I have to manually bring together. Copying and pasting the differences. You can see the time overhead that comes with this as it is today.
Designer now reminds me of the Visual Basic editor but without being able to add your own code behind the buttons.
Great job though for what you have accomplished so far. I think the Ext Designer has great potential adding value to quality of software and reducing time needed for developing it.
29 Mar 2010 12:28 AM #6
Wow, wonderful post! Thanks for such an elaborative (and educational) point of view. Are you by any chance employing?
The way I see Ext designer:
1) It's really a one-of-a-kind piece of software/tool. I think the developers really wanted this-and-that and now have thrown it to the lions at an early stage to figure out what the paying lions really want to pay for
2) It's a nice showcase of what can be done with ExtJS as it's made on it
3) It's a tool for junior developers or developers is stage of learning, or even enthusiasts who feel to be developers. Quite frankly, I seem to know many more of those who feel like developers just because they've managed to tweak a demo component/app. If Ext designer should fit the needs you stated, a really doubt it would be so "cheap"
4) Microsoft sponsors too many universities and colleges. They provide with their point-and-click development software, point-and-click OS, point-and-click everything. It's a nice idea they have. I wish my wife was point and click, but it just doesn't work that way. However, developers out of college are usually thought to point and click and Ext designer makes it easier for them to adopt and learn what ExtJS can actually do for them without looking at API as much
5) Some development companies do not have positions that you described. Rather they have a developer or two and a person with an idea. The latter one passes on the idea to one of the developers, presumably the one with more experience or understanding and together they try to figure out what UI should look like
6) You can always try to create objects with Ext Designer that you can later extend in the code. When you need to refactor something, you'll do it in designer and export back to app. I know this feature may not be worth of Ext Designer, but still...
I've paid for it anyway. At least it's a contribution to Ext, and I think they really deserve it. However, I'm sure I'll find a good usage for Ext Designer.
29 Mar 2010 9:04 PM #7
- Join Date
- Jan 2010
- Rotterdam, The Netherlands
- Vote Rating
29 Mar 2010 9:29 PM #8
- Join Date
- Jan 2010
- Rotterdam, The Netherlands
- Vote Rating
http://www.extjs.com/forum/showthread.php?t=95480 . I think he might be right. Just make sure I can use NetBeans (check out attached image)
1 Apr 2010 9:52 AM #9
I am currently reviewing the trial for how it would benefit our development department...this post has actually answered a lot of the underlying questions I had about the actual functionality and use of the designer.
I have to say it is a great tool, and has saved me some time on creating components...but I can not see with a one time development of a component and missing some listener/handler items and not really using this as a code editor, more of a "this is how it should look, spit out the design, now code the back end and make it functional"
Unfortunately my understanding was that this would be like the Dreamweavers / Visual Studios / Eclipses / etc for ExtJS.
Now if the future development of this software (2.0, 3.0, etc.) becomes a tool of that caliber, I would be more than happy to push my company to use this product for our development.
I would say, it looks VERY promising, but with what I need to use it for...it does not fill my need as a programmer.
1 Apr 2010 12:07 PM #10
With that in mind, the Designer is not intended to be a code editor. The Designer complements your favorite tool of choice to make you even more productive.
Please continue to send any ideas our way.