Sencha Architect 2.2: Better, Faster, Stronger

Yesterday, we announced new versions of Sencha Architect and Ext JS. We gave a brief summary of Architect 2.2 new features in our Sencha March Madness blog post, and today we want to dive deeper into all of the improvements we’ve made over the last few months.

As Architect matures, we find many developers using it to develop large projects — frequently in collaboration with other developers. As these projects grow in complexity, developers face new challenges in managing them. Architect 2.2 is squarely focused on improving the experience for these users — in everything from Architect’s raw performance, to ease of navigation, to better source control integration, and new features to make development easier.

The first thing we did was improve Architect’s performance by using the newest version of Sencha Desktop Packager to package Architect. This brought significant improvements in memory footprint and performance. When opening real-world sample projects we are seeing Architect use only a quarter to a third as much memory as it used to. (For those who don’t know: Architect is built with Ext JS, and this newest version replaces an older packaging technology with our own modern and fast Desktop Packager. We think Architect 2.2 is a pretty good demonstration of what can be accomplished with the Sencha frameworks and the packager. Eating our own dogfood and turtles all the way down — with great payoff in performance.)

Open and Save Projects Faster Than Ever

We also changed the way Architect opens and saves projects and files to get more performance improvements. When opening a project in Architect 2.2, only the project components that are selected are opened — making it much faster to open large projects. We were pleasantly surprised to see a full order of magnitude improvement in project load time: projects that used to take 30 to 50 seconds to open now open in 3 to 5 seconds.

Now that Architect is only opening project components as needed, we also made it more efficient when saving a project. Now when you click “Save”, Architect only saves out metadata and application files that have been modified, making this much faster, especially if you are a frequent saver. Of course, there will still be times when you want to regenerate the entire application, and the “Build” button does exactly that.

Intelligent Source Control Integration

More efficient saving also improves integration with source control, as you are no longer changing all the generated application code each time you save a small change. We did one more thing to help with source control integration. We not only made Architect aware of file changes on disk, but also made sure Architect is able to handle those changes intelligently. Architect now watches your project folder so that it notices when items are changed by anything other than Architect itself (e.g., by your source control system). If the change detected is made to a component that isn’t currently open, but is modified in Architect, Architect simply accepts the change and notes it in the log files. If the detected change is in a component that the developer is actively editing, Architect alerts the developer and lets them decide whether to keep the version detected on disk or the changes they are working on in Architect. This makes it much easier to collaborate with other Architect users on the same project without stepping on each other’s toes.

Improved Project Navigation

Performance and source control improvements are helpful, but if you have a massive project it is still hard to keep track of all your components. To help you find them we added a “Quick Open…” search box in the Project Inspector which helps you easily find and open top level components.

Once you’ve found your component, you often need to switch back and forth between different components, for example between the canvas layout of a view component and the related function code in a controller. To make this easier, Architect now allows you to open multiple tabs in the Canvas. You can open and then easily switch between the tabs using keyboard shortcuts.

Easier Coding

We’ve also learned that as Architect projects get bigger and more complicated, developers sometimes have to create custom overrides to accomplish their goals. We’ve made a change in in Architect 2.2 that will improve these situations. One of the scenarios that often generated overrides was bringing in external code into Architect (e.g., third-party JavaScript components or extensions). In Architect 2.2, you can add your component as a JavaScript resource and specify the alias to create it using Architect’s new CreateAlias and CreateClass configs.

Additionally, when a component starts its lifecycle, it’s now easier to insert your custom behavior code using the new processConfig (Ext JS) or initialize (Touch) configs in Architect. There is more information about this new functionality in the Architect docs.

Are You Mocking Me?

Architect already makes it easy to get store data from varied data sources, but sometimes it can be hard to get valid source data to Architect during development, which makes developing an application’s user interface hard. For example, the backend store might require an authentication token or geo-location data to provide useful information. Architect now allows the developer to enter mock data for a store’s data config. This mock data is displayed inside the Architect canvas in views that consume the store, but when you ship your app you don’t want to ship the mock data, so Architect does not include it in the code it generates.

Deep Support and Tight Integration for Latest Frameworks

Last, but by no means least, Architect now supports the latest releases of the Sencha frameworks. If you are as excited as us about the new Neptune theme, big data grids, and Right-to-Left (RTL) support in Ext JS 4.2, then you’ll love how easy it is to work with Ext JS 4.2 in Architect 2.2. If you started your Architect project in an older version of the framework, then don’t worry. Architect will happily take care of all the details of upgrading to Ext JS 4.2.

That wraps up all the major new improvements we’ve made to Architect 2.2. Stay tuned for an upcoming blog post about the Ext JS 4.2 changes, and then try them out in Architect 2.2 — it’s a great way to see the new functionality in the framework.

You can download Architect 2.2 today, either to buy or as a 30 day trial. Architect is also a part of Sencha Complete and the new Sencha Touch Bundle. For existing users we will start pushing auto updates in about a week.

Lastly, we’ve reset expired Architect evaluations and extended existing Architect evaluations for an additional 30 days. To re-activate Architect, simply select “change user” in the Architect splash screen and enter your user credentials.