PDA

View Full Version : MVC structure migration



Yoann M.
12 Oct 2011, 2:04 AM
Hy,

so curious by that new release, I try this morning migration from 1.1 to 2
Therefore... new errors, due to, I suspect, my Sencha architecture. I try to follow MVC requierement as presented during SenchaCon (cf video on document)

But ... regApplication seems not to be accepted already
(Uncaught TypeError: Object #<Object> has no method 'regApplication')

So, did you plan a new tutorial about MVC structure developpement using sencha 2 ?
Did I miss something ?

Möhre
12 Oct 2011, 3:09 AM
So, did you plan a new tutorial about MVC structure developpement using sencha 2 ?


I hope so ;)

Have a look at the Ext JS 4 MVC tutorial. It´s almost compatible?!

tobiu
12 Oct 2011, 3:33 AM
replace Ext.regApplication with Ext.application.

Yoann M.
12 Oct 2011, 4:25 AM
Definitively not so simple in our case.

TommyMaintz
12 Oct 2011, 7:24 AM
Hi Yoann,

The MVC architecture in Touch 2.0 differs quite a bit from the one in 1.1. As others suggested you can follow the Ext JS 4 architecture guides and tutorials as they apply to Touch 2.0 as well. Here are three articles I wrote on the MVC architecture.

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3

You can also check out the source code for Twitter, Kiva and the Kitchensink, as they all use the new recommended MVC architecture.

Yoann M.
12 Oct 2011, 7:59 AM
Thanks very much for the help !

edspencer
12 Oct 2011, 4:09 PM
We'll be creating way more documentation for the application architecture in the next couple of releases (just as we did for individual components and concepts this time round)

senchito
14 Oct 2011, 3:43 PM
I just started the task of migrating.

It looks like a big enough task since my project is already HUGE.

Immediately upon switching the library from 1.1 to 2.0 I got a ton of error messages

regApplication error
regModel error
regController error
and about 200 Uncaught Error: [Ext.extend] Attempting to extend from a class which has not been loaded on the page.

Now.. my question is this. Is the migration process basically going to entail JUST changing the way that I define my classes, controllers, models and the application itself? Following the way you define it in your Kitchensink MVC example?

Or is it going to be a lot more than that?

Things such as Ext.dispatch() for calling my controller actions. initComponent for applying my config parameters to my extended classes. And functionalities such as Ext.getCmp('MyCarousel').setActiveItem(x). Those will all continue to work right?

Also regarding the orientation listener. I implemented a few "hacks" in my 1.1 application to remedy some bugs in regards to the playbook tablet and other anomalies. So as part of my Ext.regApplication() I was using this:



Ext.regApplication('App' {
name : 'App',
useLoadMask : false,


launch: function() {
this.viewport = new app.views.Viewport({
application: this
});

myMask = new Ext.LoadMask(Ext.getBody(), { msg:"Working..."} );
},
profiles: {
PortraitPhone: function() {
return Ext.is.Phone && Ext.orientation == ( (Ext.is.Playbook) ? 'landscape' : 'portrait' );
},
LandscapePhone: function() {
return Ext.is.Phone && Ext.orientation == ( (Ext.is.Playbook) ? 'portrait' : 'landscape' );
},
PortraitTablet: function() {
return !Ext.is.Phone && Ext.orientation == ( (Ext.is.Playbook) ? 'landscape' : 'portrait' );
},
LandscapeTablet: function() {
return !Ext.is.Phone && Ext.orientation == ( (Ext.is.Playbook) ? 'portrait' : 'landscape' );
}
}
});


But your MVC example uses a much simplied declaration:



Ext.application({
name: 'Kitchensink',
controllers: ['Main'],
models: ['Demo']
});


can I still use my launch: and profiles: if I declare it with Ext.application ?

And what's with the controllers and models... they have to be defined in my Ext.application now? Or can I just define them seperately like I did before and use the namespaces to properly refer to them?

edspencer
14 Oct 2011, 6:00 PM
@senchito seems I didn't do a great job communicating well enough that we're not expecting ST 1.x apps to work right now with the preview release. We have put a lot of effort into backwards compatibility with individual classes but not with larger things like MVC yet. For most code paths we can provide a decent compatibility bridge, for the rest we'll have a guide that explains what needs to be done.

If you want to help us create that guide that would be great :)

oddz
15 Oct 2011, 11:35 AM
Yeah, there is a quit a bit of structural changes that need to be made to port 1.0 to 2.0 it seems. Most of which have to do with using the Ext JS 4.0 definition of "classes". Also, using init for controllers and initialize for components. That seems to most of it, if you do not run into any bugs like I have. Than you can go the extra mile an start using control inside controllers to handle events, which is probably one of my favorite things so far. That said, it doesn't look like the structure of the HTML and CSS has changed much at all. It's merely the lower level structure of defining "classes", properties and initialization. There is also auto loading which I have not tackled yet considering the structure of my directories do not follow the standard. I have it turned off and will probably be overriding the auto loader to handle the way I have organized my application. Probably…

senchito
17 Oct 2011, 7:08 AM
@edspencer,

You did do a good enough job because I was fully aware that the preview release had very limited if any backward compatibility. This is why I was trying to gauge just how much I need to change to make my application working again using ST2. I wish to get it working as soon as possible even if it means making a lot of changes. If possible I would still love an answer to my questions above.

As for a guide.. it would be great to have one.. but as usual.. just a few examples scattered around would also go a long way to help me understand what changes I need to do. I guess I'll read the forums some more. I really want to take advantage of the speed and device compatibility enhancements as soon as possible so that once the final release of ST2 is out all I should have to do is install it and my project will already be working.

oddz
17 Oct 2011, 7:12 PM
This is becoming larger and larger as a task as I get more into it. It also seems like every hour I'm running into some type of bug/lack of fully implemented feature… which is fair enough considering its a beta release. In my opinion I think it may be best to wait for a stable release considering I've spent around 10 hours and haven't got to far with this, seems like there is always an issue. Again… fair enough but still sadly I don't have the time to be dealing with so many issues and submitting bug reports. Back to 1 I go for the time being. Though I can't wait to get my hands on a stable version, maybe even fully backward compatible ( I can dream). Like the thing with the carousels not animating… I spent a while only to determine that was no fault of my own. None the less, can't wait for the stable version.

tshah
19 Oct 2011, 6:37 AM
We are in process of start developing new business application. We have designed couple of pages using MVC 1.1. We downloaded and started using 2.0 preview framework. and nothing is working. Any guidelines we follow to make sure code works in 2.0?

TommyMaintz
19 Oct 2011, 8:30 AM
@tshah
We suggest you develop your app using the new MVC architecture. On the previous page I already linked to some articles that can help you get started with this new MVC architecture.

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3

@oddz
We actually mentioned the fact that carousel doesnt animate yet in several places, like the blog post and in several forum posts. You mention that there are so many bugs in ST2 that it is unusable yet. Could you please help us out and be more specific as to what kind of problems you are actually running into?

oddz
19 Oct 2011, 3:38 PM
Yeah, I would like to be a little more help in regards to documenting the bugs I have ran into attempting to migrate but have been on a tight deadline at this time. That was my *only* motivation for not continuing forward with migrating 2.0 and actually overcoming the many issues I have ran into. I'll see what I can recall though that I haven't already posted in the bug forum. None the less – great product, damn deadlines!!!

wilzdezign
21 Oct 2011, 2:47 PM
Thanks Ed and Tommy!

arislaw
23 Oct 2011, 1:52 PM
if you are going to start a new application, starts with version two, but wait until a stable version to go to production ...
and for you developer team, do not expect they are going to start developing right away... Sencha Touch 2 is not so simple as the version 1 and your team is going to have a totally different learning curve ...

for those who already have a app working in v 1.1... bad news ... I am migrating a very small app and it is not easy to make it works. One reason is the lack of documentation, but it is not just that.

Version 2 is very different from the v1, and you have to change a LOT of things to make it working. My other app, that is huge, I have to wait to migrate because it is going to be a project of two months or more...

I know verstion 2 is better, and it is. The MVC now is kind of obligation. You HAVE to follow the MVC aspects of the framework otherwise you will not be able to do anything.

Sencha Touch 2 is GREAT. I am really happy they have move forward to the Ext 4 core, but the migration from v1 is hard and I think it is much more complicated. Much more!

Maybe they are going to wrong direction, like dojo did... I hope they make it easier to quickly create apps, otherwise they are going to lose the fight against jquery way of life...

edspencer
23 Oct 2011, 2:03 PM
@arislaw seems I did a terrible job of communicating what the Preview Release is all about :( sorry

This preview is really not intended to be used to migrate apps from 1.x - that's a major goal as we move towards beta, but yeah right now it's really hard to upgrade. I tried to point out in the blog post that it's really not meant for porting apps or trying to make them go into production - it's for feedback on our approaches and for real-world performance verification.

As we move further along the process we'll make upgrading much easier, and we'll definitely make creating apps as simple as it can possibly be (most of this is just that we have a massive conference going on right now so it's hard to find time to update the docs this week!)

arislaw
25 Oct 2011, 2:45 PM
I agree Ed and you were clear when you said that on the Preview Release. I was trying to do it anyway ;-)

But as a feedback I have to say to you that I think we are going to need a very clear documentation about how to start, how to develop big apps following the new MVC rules. And the examples today are not that clear. It just create a component and show it... when we have to put everything together things change. The example apps follow different approuchs about Define/Create. And that make me confused and sometimes the Ext.define seems to not work perfectly so I have to create the objects on the fly.

I felt that I have to learn everything again and it is really frustrating when I try to follow the docs and nothing happen and seems that everything is broken.

Example: I was trying to create a DataView with a new tpl, I could not. I was trying to create a FormPanel, but I could not, the methods setValues() and getValues() weren't there... maybe I was doing something really stupid, but in the previews version I was able to do whatever I want and it was really easy...

I know it is a Preview Release, and I am sorry if I should wait to tell you this things, but as a huge Sencha/ExtJS fan I prefer to tell you now and try to help you on the next releases, because I will use it for sure!

About the performance, I have to tell you that it is really fast... unfortunately I could not do more tests because I couldn't create more components and build some modules of my ST v1 apps.

Tks Ed!

wilzdezign
26 Oct 2011, 4:23 PM
Loading dependencies and the components that are used in your app, I would recommend taking a look at Ext.Loader. Since ST2 is using some of the same Ext JS 4+ loading, you can either link the 'sencha-touch-all.js' and load on demand, but it will use the 500+Kb file. Or asynchronously load by using the Ext.require() to load only what you need. In the /examples/layout/dock.js they are using only two:


Ext.require(['Ext.Container', 'Ext.Button'], function(){
...
}

matdar
5 Nov 2011, 3:46 AM
Do you guys have an eta for the migration doc? Where will it be published?
Thanks.