If I use the word amazing then that will be definitely less to describe Sencha Architect. I often love to visually drag-and-drop widgets to implement functional logic and then tweak the code to achieve something very specific. This keeps my focus on the business need rather than the technical complexities. Understanding what Sencha has done in Sencha Architect was one of my long TODO items and I am glad that I finally did take a look at this. Even though there are certain hiccups and having few more things would make it further better, I strongly believe that it will assist techno-functional guys to do their job in a better way.
As part of this article, I am putting some of the things which I really liked and some of the things which I believe will make this product better for my usage.
What I really liked are
1. By launching the architect you can decide whether to create a new project (Extjs or Sencha Touch) or work on an existing project. This really gets you started with the Sencha Architect real quick and you don’t need ANY training!
2. The drag and drop ensure that you are dropping the widgets/components where you should. This helps in avoiding unnecessary confusion and error.
3. Configuring store, model and linking them with the data is very easy
4. The eye symbol next to the store is just amazing as it allows you to check if you were able to load data files for that store or not
5. Wherever possible, the values of models, events, stores, etc are available for selection, which ensure that you know what is available.
6. The handler code where you manually write your desired logic, consist of editor, which highlights the syntax error to ensure that you write correct code
7. The ability to do free text search in Project Inspector as well as the Toolbox is a great time saver
8. Description with link to details in the bottom left corner helps me to be able to make use of the component without actually opening the API document. This is again a great help from someone who directly goes to Sencha’s website to refer to the documentation
9. The Sencha Architect documentation rocks like any other Sencha documents. I found it very useful.
Would have loved more if it would have addressed following as well:
1. While there must be a strong reason for making code read only, having used BPEL designer and few other designers, I was not expecting this. I love two-way designing specially when I am technically aware of stuffs. Sometimes it is quicker to write few lines or code than keep adjusting widgets here and there. Instead of being so strict, if Sencha can build some sort of validator to ensure that the hand written code is compliant with their recommendation and constraints and accept those hand written code as well then it will make this software further reusable in an ongoing project.
2. Resizing is causing issues in general. While some of the issues are due to exact value of sizes getting used, there seem to be a need for more stability in this area.
3. It will be good if we can create data directory as well from the architect interface and create dummy json data from the given model
4. When you have many items expanded in the Inspector and if you try to drag-and-drop something from the toolbox then inspector doesn’t automatically scrolls, which forces you to first select the component (or bring the component in your view) before you drag the component from the toolbox. When I work on my large monitor I don’t find too much issue, but working on small screen does cause some pain.
5. For quick prototyping, it still requires good knowledge about ExtJS and its configuration. If something can be done to bring in a little more abstraction then it will be of more help to the people closer to the business.
6. While undo (Ctrl +Z) command works (in general), the Redo (Ctrl + Y) command doesn’t work. This causes a little pain for the windows user
7. It will be good to have the details of the author creating the class/component and component inside the automatically created file (as per the ExtDocs)
8. It would be helpful to allow user to pick the icons from the local system and internally create iconCls rather than expecting the user to define CSS and then use that. Of course – making the already created CSS or loaded image available for further use will make life easier
9. When you work with extended monitor (for example I hook a large monitor in my laptop, whenever I have to refer a document and work) and if the Sencha architect was launched on the larger monitor then after closing and relaunching the application causes this to be shown on both the monitor and it doesn’t even allow me to position it on one screen. This forces me to first switch to single monitor and then switch back into dual mode to be able to access the architect again.
10. When I renamed the application from MyApp to Collab, it started giving “Failed to load resource: the server responded with a status of 404 (Not Found)” for the file “collaboration/MyApp/view/Messages.js”. I thought I have identified an issue and a close look at the error revealed that it is coming from the code inside the handler, which I have manually typed. Hence, whenever you are doing refactoring you must review your hand written codes as well. It will be good if Sencha can introduce some sort of Warning to the user for possible changes required in the hand written codes.
What skills are needed to use Sencha Architect
- Basic web development concepts, which includes knowledge of HTML, JavaScript, CSS, Apache, JSON, etc
- Familiarity of ExtJS or Sencha Touch components and APIs
- MVC Concepts (refer to the amazing sencha documents)
Summary
Sencha Architect is Sencha’s visual drag-and-drop tool for building HTML5-based applications using Ext JS 4.0 and Sencha Touch 2 frameworks. So, if you intend build either web or touch application then you can use this tool to build your application. With Architect, you can Quickly and easily build application and see the changes instantly. As part of this article I have expressed my immediate findings and feelings and I hope you find them useful. In general, I see that with this tool being available in the market, a lot of people should feel encouraged to take advantage of the great framework like ExtJS and Sencha Touch. When you have to write each and every line of code, sometimes you feel that your focus is more on figuring out the config name, while now the focus will be more on what shall be the values. Now Sencha Architect ensure that your focus remains on the business logic / rules and best practices rather than the spellings and semantics on ExtJS / Sencha Touch.
At WalkingTree, we assist our customers and partners in making effective use of Sencha technologies. In case you need any professional support on Sencha products like ExtJS and Sencha Touch do visit our website and get in touch with us.
References
- http://docs.sencha.com/architect/2-0/
- http://docs.sencha.com/ext-js/4-1/
