5 Productivity Tips for Sencha Architect

May 26, 2016 106 Views

Sencha Architect

Many developers, particularly those with prior experience in Java and .Net, are very familiar with using drag-and-drop environments for prototyping and building applications. The key advantage of a visual builder is that it can generate best practices code efficiently as opposed to coding and recoding similar experiences over and over. Sencha Architect is a visual builder for Ext JS that helps web developers build applications faster and more efficiently with a drag-and-drop environment. Below are some tips to help you be more productive with Sencha Architect.

Update to the Latest Version

Sencha Architect 3.5.1 is now generally available on the Sencha Support portal and also as part of the Ext JS trial. Sencha Architect 3.5.1 now supports Ext JS 6.0.2 Classic toolkit and is bundled with latest Sencha Cmd 6.1.2. If you are new to Architect, you should follow tutorials to build your first desktop app and a responsive dashboard app. For your convenience, I have posted my Architect archive files of these tutorials on GitHub.

Customize Sencha Architect

Architect comes bundled with several templates, samples apps, and a comprehensive toolbox of Ext JS classes and components. The best way to enhance the value of Architect is to start customizing it by adding your apps in the app templates and your classes in the toolbox.

Use Mock Data in Your Apps

Many times as a developer, you need mock data to visualize data-centric components. Architect provides an easy way to generate mock data for stores. You can select your store and invoke “Generate Mock Data” from the menu. In the Generate Mock Data dialog, you can specify the model, data amount, and mock data config to generate data for your store.

Quickly Build Your Grid

As an enterprise developer, you frequently need to build grid-based web applications based on a provided data model. Architect provides an easy way to build columns of grid and binding to mock data. From the grid panel component, you invoke “Grid Builder” from the menu. In Grid Builder, you can select your data source such as an existing model or JSON object and then generate the grid view columns, store, model (if not specified), along with mock data.

Build a Data App in Minutes

In today’s world of agile development, you may want to create a shareable prototype web application within minutes of getting your data model. Architect provides a “Data UI Builder” that gives you a jump start on building complex, data-driven apps and prototypes. You can invoke Data UI Builder from your existing data model menu or Architect toolbar. Data UI builder creates a full web application. It provides an easy way to create grid views, list views, detail views, forms, validation, controllers, stores, and mock data, quickly and easily via a step-by-step visual interface. Below is a screenshot of an app that was generated using a simple Task data model.

Interact with the Active Forum Community

Finally, Architect has an active forum community, and we monitor these forums regularly for your recommendations on improving Architect. We plan to release new versions of Architect that will support Ext JS 6.1 and Modern toolkit by Q3, and we will announce those releases on the forum. So please keep an eye on the forum and share your feedback.