When we started working on the next release of Ext Designer, we had very ambitious goals: we wanted to build a great visual tool to help you build web applications faster that didn’t get in the way. We wanted to make the development process more inclusive by lowering the barrier to collaborate, allowing UX designers to work effectively in the same environment that you use.
We wanted you to be able to create complete applications — not just the UI. We wanted a tool that would let you build an application quickly out of standard components, but also allow you to easily customize those components with your own code, right from within the tool. This is all part of Ext JS which we think is the best javascript framework.
What we created is no longer just a rapid interface designer, but a complete application builder, a place where the architecture *and* the interface of an application can be created and properly structured for development.
For this reason, the name “Designer” no longer accurately captured what the product enabled: it’s now much, much more than a simple UI designer. And so, it is our pleasure to introduce the all-new Sencha Architect 2.
Table of Contents
Sencha Architect 2: What’s Changed, What’s New
A tool that works the way you do.
The foundational concept behind Architect 2 is simple: a visual app building tool that creates code as clean and well structured as the code that a Lead Architect at Sencha would write by hand. Architect 2 is visual where it makes sense, but also gets out of your way when you need to dive into code.
This philosophy led to the creation of a tool that lets you iterate solutions with very low overhead and with instant visual feedback; all assisted by inline documentation and quick links to the API reference.
But the best part is that it’s a tool where experimentation is safe. All code generated by Architect is guaranteed to work out of the box. You can’t arrange components in a way that will break the frameworks’ conventions. There’s also a wealth of new features that makes the experience of creating apps a lot more enjoyable and immediate.
The hub of all activity: the Project Inspector
The Project Inspector has been greatly enhanced to show views, controllers, models, and stores all in one place, along with information about the project’s structure. All components and their relationships are right there, where you can see and analyze them.
Framework Support & Creation Tools
Architect can create applications for Ext JS 4 and Sencha Touch 2. The Toolbox has been improved dramatically to make the richness of both frameworks more accessible. Categories now make searching for a component quicker, and it’s possible to create new groups of components for your personal workflow.
Architect also includes a built-in JavaScript editor, so you can work on your code without switching back and forth between different tools, although it’s still easy to switch between Architect and your favorite IDE.
In-line Documentation
Now every component, property and configuration comes with handy inline documentation, and if you need more, there are quick links to go deep into the API reference. The documentation is available as a part of the main UI, and appears as tool-tips and hovers as you need it.
Source Control-Friendly File Format
Architect 2 projects are easier to manage and track via source control. The single file archive we had in Ext Designer 1 has been replaced by a file for each view, model, and store. This decision was intended to make it easier to work on a project where more than a single developer is involved.
Native Mobile Packaging & iOS Simulation
You can now package applications for iOS and Android directly from Architect 2. Using technology we released with Sencha Touch 2, Architect lets you take a finished application and get it ready for deployment on a mobile device quickly and easily. And if you’re on OS X and you have Xcode 4 installed, Architect starts the iOS simulator for you and loads your application automatically.
A Better UX to Make Development Fun
Several weeks ago, we asked for volunteers to help user-test our beta version. Thanks to their help and our extensive set of usability studies, we were able to zero in on the biggest user experience issues and to design better solutions for commonly performed tasks.
Here are just a few of the user experience improvements we made. We added a highlight for new components that are added to the Project Inspector: this helps you see where the component is added in the hierarchy. We added a toggle to the property panel that lets you switch between commonly used configurations vs. the comprehensive set. We also enhanced our component icons to improve readability. These were just a few of a long list of detail improvements.
Countless hours went into making Architect 2 a beautiful and easy to use application. User experience is never complete but we know you will notice right away how our new process has made the tool as easy to use as it is powerful.
We couldn’t have done it without you…
On top of our formal user studies, we want to say thank you to our community for helping and guiding us with their constant feedback: first with the private beta program for SenchaCon 2011 attendees (it rocked to meet you in person in Austin!) to the later open beta. Your suggestions and questions helped make Architect 2 what it is today.
We also want to thank you for your patience and your incredibly insightful comments, and we ask you to keep it up: Architect 2 will be evolving over the course of 2012 and we need your continued support and feedback to make all the things we have dreamed during the last months a reality.
Keep asking for new features, keep reporting bugs, keep showing us your examples.
Getting Started with Sencha Architect 2
This version of Architect ships with a significant number of examples for Ext JS 4 and Sencha Touch 2 alike. We have re-created a few of the frameworks’ demos in Architect 2 including GeoCongress and the Feed Reader, and it’s all available from Architect’s product page (close to the bottom). Just unzip it and open the .xda files to see great examples of entire applications.
The online documentation is also a significant step forward. All our technical docs are now hosted online, just like the API docs, which makes them easier to search and easier to keep updated. While the docs are already much better, we are committed to improve them and expand them significantly over time. Please let us know where you find the current documentation lacking or unclear, and we will concentrate our efforts where it’s most useful.
We also want to let you know that, if you have an example you are particularly proud of, and you want to share it with the community, submit it to the dev team for inclusion with the set that comes with Architect 2: if we like it, we’ll add it to the downloadable package and of course give you credit in the notes. It’s your chance to shine, don’t miss out on it!
Pricing & Availability
Individual copies of Sencha Architect 2 cost $399, with discounts for 5 and 20 packs. If you are upgrading from an old copy of Ext Designer 1, please read the following carefully:
– If you bought Ext Designer 1.0 after January 1st, 2012, you’re already entitled to Sencha Architect 2! Your license will be sent shortly to your email address, but in case it doesn’t after a few days for any reason (typos, spam filters, etc) please contact [email protected] and we will take care of everything for you.
– If you purchased an Ext Designer 1.x license prior to January 1st, 2012, you can upgrade to Architect 2 for $279 in our online store.
Please note that Sencha Complete includes Architect 2, and remains priced at $995. So, go ahead, buy Sencha Architect 2 from the Sencha Store, or download the trial and share your experiences with us!
Holy shit. This is huge.
Nice work team! Spectacular addition to the Sencha developer tool belt.
Have been working with the beta since #SenchaCon2011.
So I couldn’t wait till it was finished … but now … let’s go.
Thanks.
Yes!! I’ve been waiting for this since the open beta!! Awesome work Sencha
Thanks!
Nice work Sencha Team!!! You guys have really out done yourselves on this one. As part of the beta testers, I can totally say, with no reservations, that this is the best designer I’ve ever seen for building web client software. Rock on!
Does Sencha Architect make it easier to share code between Ext JS and Sencha Touch?
slickkk! When will Architect be built with Architect? :D
I love it. Nice work. Well done!
“it’s still easy to switch between Architect and your favorite IDE.”
Does that mean that SA2 supports roundtrips and external JS files import?
@interfaSys – Sencha Architect supports this type of development styles in two ways.
First off you can always include external files via resource management. Click the + at the top right of the inspector, Resources -> JS Resource and then configure the url properly. The contents of that file will be included in your project at runtime and will be available to you.
Second, you can create overrides of your design time classes you create in Architect by clicking “Create Override”. Overrides are treated by Architect as text files only and we do not store any metadata about them. They are freeform and you can do as you please with them in your favorite IDE.
Code which is generated by architect and has a comment at the top that it will always be generated at proejct save time will overwrite anything you put in it from an external editor. The preferred practice is to create an override as listed in the second option.
If you have any additional questions about this feature, please post in the sencha architect forums so we can give you in-depth responses. Getting a little long for the blog here ;)
Congratz to the team and Sencha!
Great work guys and thank for this cool app!
What a great way to start the day!
I’m currently downloading the IDE and is looking forward to trying this out. I wanted to know if the IDE will help me deploy the app on my mobile device like iPhone, Android or a Blackberry device. Or is this part outside the scope of the new IDE? Thanks.
Seriously, congratulations team — this is a phenomenal product and light years ahead of Ext Designer.
@Jay – Sencha Architect will help you use SDK Tools which will package your applications for iOS and Android.
Congratulations to the SA2 team. Can’t wait to give it a try this evening.
You guys are getting into habit of exceeding expectations with each new major release.
Making some stability progress. seems smoother now.
Editor keeps being just and editor with code highlighting…. nothing much, smoother and faster, and with a font that can be read.
Still much to go for it being an IDE and a trully option to code in there…
Nice work!
I will play more to comment further!
Awesome awesome awesome!!! Bravo on the name change as well — a true reflection of it’s evolved state!
Btw, for anyone wondering — although the post makes it sound as though the zip of examples comes bundled with the installer package, it’s in fact a separate download available via the product page, or the direct link: https://cdn.sencha.com/architect/architect-examples.zip
great but no auto-complete in the code editor ?
If I have any suggestions where should I post/ who should I contact ?
I don’t know why my comment was removed .
“Great ! but no auto-complete in the code editor” ? Is this feature available then point me to it why delete it ?
Congrats, guys! Great job :)
nice work , what is the size of the app and js files , is it compressed when deployed to iPhone?
does it support Windows phone?
Will there be a free license for students, non-commercial purposes or so?
AWESOME!! :D
just hope the code edit become as good as Coda/Sublime hehe
Love U SENCHA o/
Finally!!! I’ve only been waiting (patiently) for this to release for the last 4 months.
I, too, would love to see some form of intellisence or autocomplete. However, I know this feature would be very challenging to implement. (I’ve seen others try, but nothing fully functioning.) Not to mention the CPU load on the text searches required for the intellisence.
Is there an offline version? I am seeing that Sencha Architect 2 wont start without an INTERNET.
Wow factor +10! Can’t wait to see where this is going.
“This version of Architect ships with a significant number of examples for Ext JS 4 and Sencha Touch 2…”
So… where are the examples?
There’s no menu link in SA2 to show you where they are. Nor does it actually ship with SA2 and get installed on your PC.
@LoreZyra – the product page has the link to the samples at the bottom. Here is the link for convenience: https://cdn.sencha.com/architect/architect-examples.zip
Also, documentation is found at http://docs.sencha.com/architect/2-0/
wow!…………. I’m realy waiting for this kind of tool………….
I will immidialy work on the trail version….. Hope it will be upto the expectations.
You know, if you mute the audio and remove the screens of the Architect 2 product being used, that Vimeo video could pass as a “Apple Products in the Workplace” commercial.
Really Superb work guys lot of improvements over Sencha Designer 2.0 beta , now renamed to Sencha Architect 2.Great work Guys.
Good Job
We are expecting more from Sencha, keep it
Include more Examples with best practices to follow
Why are u using mac computer?
Good Job
samples and examples: http://docs.sencha.com/architect/2-0/#!/guide
@Michael Ramirez It does not make it easier to share code between Touch and ExtJS ;(. I can tell you this sort of thinking is the mantra for Sencha as a company in 2012
@Jarred: Thanks for the links. I had already found them by searching around.
Perhaps, my point should have been phrased a bit differently…
Why don’t you include the examples with the binaries? Have a directory in the install folder called examples and provide a link to them within the application itself. Why does the user have to figure out where the examples are _online_?
It’s worth pointing out that not everyone has a network connection to check out the examples. Or, they are behind a strangely configured proxy. Sometimes, you have to install everything via USB stick.
@Anshuman we didn’t delete your comment, I can still see it. As for the feature request, you are more than welcome to discuss this kind of stuff in the forums.
Any special price for students?
@Aaron Conran – Thanks for your detailed answer. I may try the override method and will use the forum to get some answers :)
@LoreZyra because the samples are continually updated or expanded. we are no strangers to the fact that many people run Architect in a militarized zone and they bring Architect to the secured machines through authorized mediums. it’s just as easy to obtain the samples through the same process, even at the same time. in truth the samples are not bundled with the installer because they’re rapidly changing as the team creates more and fixes issues in existing samples. no one wants stale samples :)
Hi,
If you can provide an option to open the application using Android Simulator(Windows Simulator may be in future) also some options to preview in web browser directly form Sencha Architect that would be great.
Also usability of preview & deploy is confusing ( at least you can provide some help here or may be some good video how to deploy in tomcat server), because if we want to show this tool to some Manager in the company (who can take the decisions to use this tool or not) they want to see the immediate result in web browser or Simulator.
I hope in future you improve the tool with more features, Wish you all the best.
Kumar.
Great job, Sencha! Just purchased my license ;)
Keep up the good work…
@Kumar
Deploy, Package, Simulate are all things we are rapidly improving over the next few weeks. Expect UX to improve here.
Wow… I opened the main page of Sencha and… surprise! Sencha Architect!
That’s what I’m talking about!
Let’s try…
Regards
Only spent a few hours with Architect and already I’m impressed. There is one thing missing which I need for my next project, Touch Charts. When will Touch Charts be included in Architect? Is this on your radar?
Simply the best framework for app mobile
Nice work…. However “Deploy” doesn’t seem to work…. error “can not file commandsencha.js”
Even from the command window [ sencha create jsb -a somehtmlfile.html -p output.jsb3 gives the same error “can not file commandsencha.js”
Simply amazing! Great work Sencha!
I’m working with the trial version. Are there limitations with the trial version? if so what are they?
Hi all,
Sencha Architect 2 is a great tool but it needs more grid features like header filters and normal filters. Have you planned to add grid filter features soon? or Can you release a nightly build with grid filter features to test?
regards,
@jhoncarrillo
Hi,
Other great feature you can add to the Sencha Architect 2 components is an event calendar like “extensible” or fullcalendar. It would be fantastic!
regards,
@jhoncarrillo
Nice tool! Is it possible to integrate third-party libraries? For example, GeoExt (http://www.geoext.org/) adds geospatial capabilities that we love to be able to take advantage of from within Sencha Architect.
I’ve been watching your videos and have downloaded Sencha Architect 2. I’m pretty new to mobile development, but have a firm grasp of Microsoft technologies such as Silverlight – using MVC, SharePoint, C# and all Visual Studios since the dawn of VB.
A fair amount of the toolboxes make sense too me, but I’m struggling with my first hello world. Not with the code part, but with the setup of Sencha Architect, and how to setup Deployment etc… your videos give good command line references about what to do after it is etc.. but my question is how do you start from a plain mac w/xcode, the sencha SDK 2.0 beta downloaded, and Architect bits on the disk?
I’m questing to make a single hello world app that will run on my iPad starting from nothing but the raw bits for your software.
How does a “typical” developer have his/her workstation setup? how are the directory structures setup? what is typical for starting a new app project?
Thanks!
@Roger Boone – I completely agree. I have a similar background, and would like to be able to leverage what I already know how to do – but have experienced the same degree of frustration getting something working from the ground up. Sencha Touch is a great API. The Sencha Architect IDE is another advancement for the platform. If I could install it and use it in the same way the introduction video promotes it, I’d buy a license in a heartbeat.
You might try having a look in the forum and – for that matter posting your comment there.
@roger and @doug – Thanks for the feedback. Look for continuous improving documentation for the help guides that we’ve been working on here:
http://docs.sencha.com/architect/2-0/#!/guide
The Architect Help forum is also a great source of information as well.
Hi, I am unclear on how to get the examples code into architect for further modification. Like the let get started app. The example code provided with Architect does not include the whole project archive for import. Or am I missing something? It would we REALLY helpful and instructive, to be able to import that code for review in the context of Architect and also provide a starter base for new apps.
Any place where this is explained?
Wow… Just finished a tabpanel with 5 tabs, each with its own Grid View.. each with it’s own Model and Store (Proxy attached to the Models).. It was so easy to start on the first tab.. get it configured how I wanted it.. and duplicate each Tab.. which also duplicated each Grid View in the Tab… Then Duplicated the Models and Stores.. Changed the URL in each proxy .. tweaked a few classnames and ID’s…. I had this running in 45 mins…. Normally something like this would have taken me 3 or 4 hours… You guys at Sencha did an excellent job on Architect.. There are a few bugs here and there,, but no show stopper.. Also, it would be easier to write code fast in the Events if there was intellisense… Years ago.. I used to have fun programming… now.. I just program… but I actually had fun programming that little app.. “using Architect to write most of the code”
On another note… When an error occurs in Architect you should provide a link to click that takes us somewhere we can report it..
Thanks
Jim
It is great that finally an IDE for Sencha Touch is available…
What about Touch Charts, I do not see that control in there…
Any idea or samples on how to integrate Touch Charts with in Architect ???
Charts are a fundamental part for our applications, please help….
Thanks
Nice product. How hard is it to move a project from Designer 1.2 to Architect 2.0? Do you have any upgrade pointers?
@Jeremy – We’ve been built a number of examples in Architect for you to take a look at. We are working on additional documentation guides. If you’d provide feedback in the forums, it would be helpful to know what you’d like for us
@gustavo – At this time, you can include any additional libraries such as charts or ux’s as external resources and then use them in your overrides.
@Glenn – Ext JS 4 projects built in Designer 1.2 should open without a hitch in Architect 2. If you have any project that fails, please post it as a bug in the Sencha Architect forums and we will help you out.
@Aaron,
I have to agree with Jeremy. I think the ability to directly import example apps from folders would be a killer feature. In fact, it seems a strange omission that it’s not there already. I mean, it’s outputting Sencha Javascript files, so why can’t it import them?
Sorry, but you won’t be getting my $400 until it can.
@Aaron, and BrowwieBoy
I did find a way to get other examples/samples into the Architect. Oddly it was not the examples shown here or included with the download. However, If you go to the site and download the sample webapps like “citybars” there is an archive file with the Architect archive extention .xda. If you open those with Architect, it opens in the app as a project and you can see the whole structure.
It would be simple to export the the tutorial app used in the demo with this extension and otheres would be able to just open it, sturcture and all, with one click. That would be really helpful! But the ones included with the download do not include this critical file archive. Granted the sample apps provide plenty of examples and use of code but you have to hunt for them. It just would make sense to do that with every demo and example wouldn’t it. One more click and it’s there.
When I am using the code editor the compiler works after any change but it takes the focus and I need to do a click on the edited line to continue writing. I have a lot of windows and components in my app and I noted that the editor takes more time to verify the edited lines.
Why I lose the focus until I am editing code? when I created the app the editor worked very good.
Any date for next release with 4.1 support?
@Aaron Conran
Where could I have samples on adding external resources using them on overrides???
Thanks
The only reason I still don’t use Architect is because I cannot edit source code and see the changes back in the GUI. I guess most people that are used to popular IDE’s expect this behavior.
There most be a very powerful reason why Sencha Architect creators don’t want to add this feature.
Or Is it so hard to implement it?
I just don’t feel comfortable with the READ-ONLY source code, which forces me to extend the code. But then, the extended code is not reflected in the GUI either.
What skillets are needed to use Sencha Architect? Meaning do you need to be a developer or could a UI designer be able to create basic interaction with this product?
WoW!
Thats damn awesome guys,
Keep up the great work Sencha!