Latest Ext JS 7.8 is now available. Learn more

Sencha Architect 2.1 Now Available

August 14, 2012 306 Views
Show

Sencha Architect is now even better! Release 2.1 is finally here and the team is excited to share what we’ve been working on for the past three months. The goal for the first minor release was to improve performance and stability while continuing to add functionality that helps developers do even more. Even though this was a minor release, we’ve fixed over one hundred bugs and added a whole set of new features. Here’s a run down of the most prominent features.


Download Sencha Architect 2.1

What’s New

Ext JS 4.1 Support

Architect now supports Ext JS 4.1, so you can create projects targeting Ext JS 4.1 and get all the performance benefits and other improvements over 4.0.7.

Ext JS 4.0 to 4.1 Auto-Migration

One of the most requested features was the ability to easily migrate from Ext JS 4.0 to Ext 4.1 projects. The Architect and Ext JS teams worked closely to make this capability as simple as possible.

Upgrading is as easy as right-clicking Library in the project inspector and choosing Upgrade. More details are in the Resources guide under Library resource.

Sencha Touch 2.0.1.1

Architect now supports Sencha Touch 2.0.1.1, so you can create projects targeting the latest production version of the Touch framework.

Source Control Improvements

Another goal for this release was to make it even easier for teams to collaborate, and to improve interaction with source control systems. In Architect 2.1, we’ve made the following changes to achieve this goal:

  • Dramatically cleaned up metadata files to make them easier to merge when working in teams.
  • Settings that are particular to a user are now saved in a .architect file, which can be easily ignored in your source control settings.
  • Change identification scheme from serial ids to GUIDs resulting in less merge conflicts.

CSS Rendered in the Project Canvas

We want the canvas to truly represent the design of your application. To improve this, CSS resources are now loaded directly into the canvas. The canvas now truly reflects the design of your app, without having to refresh the browser.

Sample project Loanshark project with custom CSS included

Improved Code Editor

We’re continuing to improve the code editing experience inside of Architect. These feature improvements make it even easy to work with code inside of Architect.

  • Line numbers are now reported with respect to entire file when viewing sub elements (e.g. functions, event bindings, templates).
  • Users can now jump from generated class into editing functions, actions, and more by clicking on the edit icon in the left hand gutter (see image).
  • Better JSHint validations, now reporting warnings and errors.
  • Find/Replace for better refactoring and speed through your code.
The new icon lets you click through to edit

Templates, Objects, Array Configs

We’ve enhanced the user experience for editing and changing advanced configs. Editing these configs now brings up the full code editor giving you plenty of room to work.

Multiple Config Types

Many of the framework configs allow more than one type e.g. string, object, or array. Architect now supports these multi-typed configs, and it’s easy to switch between them. Custom configs inherit this ability.

Class

We’ve added a new item to the toolbox called “Class”. This item allows you to extend items in the framework — such as adding abstract classes. Now every top level instance in the Project Inspector (which is a class) receives several configs from the class system (e.g., requires, mixins, singleton, uses, static functions).

Message Log

  • A log of messages you have received can now be accessed showing a history for the current session.
  • File logging can optionally be turned on that maintains cross session history.

Access the message log by clicking the icon on the bottom left of the Architect. This icon also displays the number of messages.

Cleaner Settings

Various settings have moved in the UI in order for them to be more flexible. Ext Direct, Google Maps API, and framework library settings have all moved out of the project settings and into the Project Inspector as Resources.

Documentation

Documentation, like software, is a continuous process, and we’ve refreshed the Architect documentation. You can view them at the Architect Docs center.

Example Projects

Sencha Architect examples have moved to Github. This will allow community members to fork and collaborate on these examples. We’ve also added new examples and refreshed the existing ones.

Stability

For this release, we made improving the quality of the core product a huge priority. A special thanks to all of our community members who submitted bugs and reported other issues. The Architect team is very confident about the stability and enhancements in 2.1. Plus, new Architect bug reports include more detailed diagnostics that will help the team resolve issues faster.

Performance

Performance is a first class feature, and the team has been hard at work executing on this priority. This performance work in the product should positively effect everyone but it’ll show most notably when working with large projects.

Many of our customers are using Sencha Architect as their complete app builder and have whole project teams working with it. It’s been amazing to watch these projects grow in size and complexity! Some contain hundreds of views, and even more models and stores. In Architect 2.1, we’ve made some major improvements in performance. Thanks to our customers who worked with the Architect team via the forums and/or beta program. This greatly helped us test and improve the speed and reliability of Architect 2.1.

Background

For those that don’t know, Architect is built with Ext JS and is a desktop packaged web app. The packager for Architect is built by our Web Platform Team and runs a purpose-built version of WebKit that gives us the ability to use WebKit features in addition to features that are needed to build desktop applications. Because it runs on WebKit, we’re able to use the amazing tools that come with WebKit, such as the profiler. After profiling, what we noticed is that these large projects spent a lot of their time instantiating configs. This probably doesn’t come as a surprise to anyone, but it gave us a vector of attack to make the config system leaner and faster.

Performance Results

  • A large decrease in initial load times for all apps, making it quicker and easier to get in and out of Architect.
  • Memory footprint that is 55% smaller than before.
  • Much faster open-project speeds and a snappier experience working with the application.

We used two customer projects as testbeds for our measurements, Liftshop and Management and here are some of the results quantified.

faster leaner

Performance is never done, and we’ll keep working to make improvements to the product, and make UX refinements in the releases to come.

Want to Know More?

Sencha Architect 2.1 is a big release with a ton of bug fixes, new features, and more. If you’re looking for the full details, the release notes have all the details for you to find what’s in 2.1. Also, like we mentioned earlier, check out the new and updated examples.

As always, you can find the dev team and the rest of the Sencha and Architect community in the community forums. We’re excited to see what you’ll build with Architect 2.1!