Learning Resources for Sencha Architect

Hi there,

We're deciding to switch to use the Sencha stack from Flex/Flash. We like this new Architect product as it presents a lot of promises. However we're yet to find good learning resources to get us started on Sencha Architect. Yes, there are the documents here and a few videos, but in general it's lacking a few detailed tutorials to guide newbie through building applications with Architect for Ext JS and Touch.

So... my question to the community is... what's the best tutorials out there that can help a newbie to get started on Architect. Books? Videos? Articles? (Please exclude the $3K training program by Sencha :) It's just not feasible for now...)

Or will Sencha Design's document/tutorials still apply to the Sencha Architect?

Thanks in advanced!!

I'll start things off!

Docs: http://docs.sencha.com/ and choose Architect 2

Example projects: http://cdn.sencha.io/architect/architect-examples.zip

Thank you Phil! I've been to the first doc already but couldn't find my detailed tutorials. Thanks for the zip file link, I'll check into it.

I found two to share here:
http://www.youtube.com/watch?v=wAyvMnopzEk
http://vimeo.com/36873281

Quote:

---

Originally Posted by Phil.Strong

I'll start things off!

Docs: http://docs.sencha.com/ and choose Architect 2

Example projects: http://cdn.sencha.io/architect/architect-examples.zip

---

I have to agree, there are not many decent guides, and what there is are usually lacking in some way, things are not fully explained.

This is especially true with jumping right into Architect 2, without using just the SDK first.

I assume you're going for a form of accessibility and ease of use for this new product. If that's the case, you really need tutorials to support that goal. I've downloaded the trial and am trying to figure it out... if I can't I probably won't convert to a paid user, but if you had some tutorial path and it is as intuitive and easy to use at it appears to be then I certainly would! Seems like such a small investment against all the work you did to develop this product.

For example, I was able to follow Michael Hartly's Rails by Example tutorial all the way to completion through the RubyMine IDE, and now that I'm done I'm definitely going to upgrade my RubyMine trial to the paid version.

The "Learn Architect" section is badly lacking in useful information. In fact, most of what is there is relevant to 1.x. There's only a couple things on 2.x. Even the featured screen cast is 1.x, and it doesn't even have voice over.. its just a speed-demo to rock music, not a tutorial!

If anyone finds any good resources for this I'd love to hear about it before my trial runs out.

Assume you've checked out http://docs.sencha.com/architect/2/#!/guide

also tons of examples on Github

https://github.com/SenchaArchitect

Actually when I wrote that message I didn't follow the link that you listed (that is also earlier in the thread). Rather I just went to the Learning section on the main site. One thing of note is that as a novice, going into the "Learn" section (from Sencha home page) and then "Architect" of your website, what I get led to are outdated Screencasts, not this link, which I would have never known about but for this thread. Imo those outdated screencasts should be removed anyway. They're 'teaching' features that aren't even applicable to current versions of your product. Presumably if you have an old version you know how to use it or where to look to learn, and it just confuses new users such as myself. In fact if you restrict the search to "2.x" you only get two enteries. One about routes, and the other is about data in Sencha Designer (I assume this is a synonym for Architect? not sure what Designer is.. is that an old product?)

Now as to your link.. it did give me enough of a basis to get something done and get started in learning the product, but many of my concerns still apply. In particular, I believe Architect is targeted both at the experienced developer and the novice, however for me, the novice, I still haven't found an expansive tutorial that fills in the gaps to make a fully functional web app.

Here are some of the issues I've been struggling with.. and I say this less to get an answer because I am researching all of these actively (and have made a lot of progress on the map one) but more to point out that it is really difficult to find these answers if you are starting from nothing, which I assume is at least part of the segment Architect targets:
(note these are all for ext 4 Architect projects)

1. How to add app type functionality to a static page made in something like Dreamweaver. I can't figure out how to bring a static HTML into Architect and then start adding components to it.
--a. If that isn't possible, then how to add Architect components to an HTML after the fact, without Architect overwriting my html, and while still being able to make edits to my app project in Architect.
--b. Also when making an app from scratch full in Architect, how do I put just simple HTML into it? Oddly I still can't find out how to do this seemingly simple thing.

2. Related to above, how can I integrate a backend service such as Rails with Architect, or alternately is there no reason to even do this? I'm only thinking about doing it because I understand Rails better as a result of Hartl's tutorial but Architect makes making a front end a lot easier.

3. How can I integrate common and important APIs into Architect ext 4, such as Google Maps?
-- I want to expand on this one to give you an idea the process that this newbie went through to do this.
-- a. First I found the script to hook up to Google maps. I made a static page unrelated to Architect that displayed the map using this code.
-- b. Then I went about the process of trying to get it into Architect. I started with a Panel object that I used the "tpl" function for and tried to put my map div in there. I couldn't figure out how to get the script itself into the head section of Architect's app.html. So, I went in and manually put it in there after I saved the file just as a test to see if it would be enough to display it in the panel. Obviously, that didn't work.
-- c.Then I figured out that I have to put the java script with the Google API script into the Resources section of the Inspector. I found a script someone made called GMapPanel.js and imported that into the Resources. I fully expected that a GMapPanel would appear in my Toolbox. It didn't. (why is that by the way?).
-- d. Then I followed their example code to launch a new window via one of my button clicks that displays the map. Success, I finally displayed a map in an Architect app without writing stuff on top of the auto-generated HTML.
-- e. I still currently can't figure out how to display that in my design view. I can't get it into one my Architect panels yet either.. rather its just a runtime generated window that doesn't appear anywhere in my designs. There must be a way to put it into a panel (something with tpl maybe) but I haven't figured that out yet (this goes back to my problem 1b above). Now I'm trying to add some driving directions, and I think I need to put that code into a controller, but that is where I am at now with my learning.

Those are examples of things I'm dealing and trying to figure out. I don't put them here in order to ask for answers.. I'm still making progress on figuring them out through trial and error and lots of searches (any hints and shortcuts are appreciated though).. the only reason making this post is to point out that since Architect is at least partially aimed at novices like myself (correct if I'm wrong on this btw) then there aught to be comprehensive tutorials that teach you, in one place, all the important things you need to know to build many of the important basic features of a REST web app, and common integration examples (HTML5 animations, static elements designed in something like Dreamweaver, or common APIs like Google maps, etc.) It seems like a waste to have such an amazing product that appears like it might be easy to use (I think?) and lose novices such as myself because of lack of tutorials.

Whilst I understand there are plenty of examples out there.. they are just that, examples. More akin to demos than tutorials. The "Build your First Desktop App" tutorial was by far the best resource I could find to help teach some of the basics of the product, but even this told you to take many of the steps without explaining them (sometimes referring you to Ext documentation, like in the case of tpl). That said, it dramatically increased my understanding of how to use Architect.

I THINK that Rails is more difficult to learn than Architect is meant to be, since it isn't graphical, and even with an IDE it still doesn't have visual component placement and like Architect does.. however, as a newbie learning both, I can understand how to do something in Rails much more easily than I can in Architect simply as a result of the in-depth Michael Hartl Rails by Example tutorial which sets the foundation for most of the important things you'll want to do in Rails. In Architect once I exhausted the learning I could get from the Build your First Desktop App tutorial, everything else has been grind and challenge to learn to find a resource to learn from. So in effect the two frameworks aren't on even footing to compare their ease of learning.

Again, I'm only posting this in the hopes that it might be an area you guys can improve and so you have on file a perspective from a rank neophyte's experience. My specific recommendations would be:

1. Create a detailed tutorial that creates a full REST Architect ext JS 4 (and Sencha Touch, though I'm not working with that yet) application from scratch. The app should be full featured enough to be able to hit on all the important features that almost all REST apps will have, including how to make it look the way you want with graphics and styles and such.
2. Revamp the Learn section on the main website for Architect
--a. Remove (or hide away) anything not current to the latest version of your software.
--b. Prominently display the link to the Sencha Architect 2 Guides here (they aren't there that I could see)
--c. Make a screencast that is something like the Build your First Desktop App tutorial (and hopefully many more screencasts, but at least this as a starting point).
3. Create screencasts or tutorials that talk about integration between static pages and Architect (I've searched around, and I still can't figure out how to do this yet). And possibly between Rails and Architect.

And if I'm wrong about your target market and Architect is only meant for experienced ext JS 4 and javascript developers then please disregard all of the above with my apologies :)

Concerning the second point, our JogWithFriends example might help you.

https://github.com/SenchaArchitect/JogWithFriends

The backend is node.js and not rails, but hopefully it will answer some of your questions.

Just as an update.. I eventually decided to give up on Architect because learning it was too slow for me. Rails just has so many learning resources that even though it isn't graphical (or only minorly so with Twitter Bootstrap and an IDE like RubyMine) it ends up being easier to learn simply because of the vast number of resources out there.

In addition to the problems I had listed above, one of my other major challenges was that I couldn't find a way to debug my Architect apps. There may be a good way to debug, but again, being a neophyte and without having found good learning resources, I didn't know what it was.

Specifically, to again give you an example of a real user experience that you might use to inform your development and design (unless I'm not your target market as mentioned above) here is something I went through:
I was trying to get a piece of code working, and when I previewed it in the browser my app showed up as blank. I went back to a version that worked and then looked at the changes I made in between. This was a bit of a pain without source control but I didn't look too hard to see if source control was supported anyhow because I was just trying to get super basic stuff working first to see if I was even going to use the framework. Then, having found the area of code that I thought was the problem, I commented out sections of it and then eventually line by line, each time previewing it, to find the errant code segment.

It was about this time I realized that this framework wasn't going to work for me. I hope that I was just doing things wrong, and eventually good learning resources will be available to help novices get a kick start (similar to Hartl's Rails by Example tutorial), but maybe worse yet there isn't a debugging system.

Also the issues I listed in my earlier post still apply, and one final one was the idea of using two MVCs in the same app if I used Rails as a backend (although I didn't even get far enough to figure out if that was even necessarily a good idea)

Ultimately I've decided to use Adobe Edge for HTML 5 interactivity/front end and animation connected to Rails for the MVC and REST architecture. My hope for using Sencha was being able to leverage the tremendous promise of the cross-platform compatibility of the product (across browsers and into mobile devices) to reduce the number of versions that would need to be maintained.

I'll check in with the product from time to time and see if it becomes more accessible (or if I get better or work with seasoned developers).

Finally I'd like to say that I really appreciate the mammoth problem you guys are trying to solve, and I only take the time to make these posts in the hopes that one user's semi-detailed experiences might help in the improvement of the product, and not at all to diminish from what you've made here.

Hi, love the promise of this tool. But have to agree with some of the posts here. As a novice I need a good starter doc/wiki that's covers component by component my options to build within architect2.

My team and I are looking for a good round trip tool for building mobile apps. I think architect is it. But I am nubie to all code methods. I need architect to let me work like I would in Adobe illustrator and then I hand off to web technologies team.

Any good component by component training available?

Just got the adobe edge suite of tools preview and that is my next option but a little worried that phone gap capabilities as a packager.

Thanks
Ivan