In part 1 and part 2 of this blog post series, I discussed the changes in Ext JS 6 Modern Toolkit and showed you how to do a basic mobile upgrade and an advanced mobile upgrade of your Sencha Touch apps. In this article, I’ll show you how to do an advanced universal upgrade.
Advanced Universal Upgrade
This upgrade will take the most time, but your opportunities are endless. You will have the latest framework with all the new features and classes, and you can improve your application performance and code base with the new MVVM architecture. Plus, you can create universal cross-platform apps (or plan to do that in the future). Not only can you build applications for mobile phones or tablets, you can also support desktop or hybrid computers, with a component set specifically made for desktop usage.
To take this approach, my advice is to regenerate a folder structure with Sencha Cmd, with the same namespace, but this time as a universal app.
- Navigate to the ext framework folder and generate a project with:
sencha generate app
ext> sencha generate app Dinmu ../dinmu3
This will create a folder structure with the shared app folder, the classic folder for the classic toolkit, and a modern folder for the modern toolkit.
- Once you have this folder structure, you will need to think about which code you want to share, and which code you want to be unique for each experience.
Obviously, this means that you need to create new views, specific for desktop. (In the case of the weather application, I can assume that you already have an existing touch application, with modern toolkit views, so you will make new desktop views). Desktop components might require unique event listeners, so you probably will end up with additional view controllers. You can share view controllers from the app folder, by extending it, for example.
However, you could also choose to create unique data / models for desktop views. The screens are bigger, so you have more space to display additional data. Or maybe a mobile phone has different features (camera, geolocation, etc.) than a desktop application, so you might want to create different behavior for certain devices. The good thing is that this is all possible. The trick here is that you move classes over from the app folder to either the classic or modern folders. You can learn more about creating universal apps in my previous blog post series.
What About File Sizes?
Are you interested in the file size of the build app.js and app.css of the Weather app? Have a look:
Ext JS 6 Modern – Basic
Ext JS 6 Modern – MVVM
|app.js – minified||
|app.css – compiled||
Ext JS 6 requires more advanced classes, so that’s why the total build will be a bit bigger. You can make your own code base smaller by switching to View Controllers, using data binding, and cleaning your model fields, which might get you an even smaller final build.
Also note, because of the new microloader, we can cache your applications way smarter, and applications can be made for offline use.
In this tutorial, I’ve explained how to migrate your Sencha Touch application to Ext JS 6 Modern toolkit. For me, the basic upgrade took a few hours, and the upgrade to MVVM took a morning. However, this is a pretty basic application with not many views.
Upgrading is easier than when you had to upgrade from Sencha Touch 1 to Sencha Touch 2, but it can take some time. It depends on whether you want to upgrade the pattern too, and if you have lots of custom components in your existing Sencha Touch app.
We have lots of professional services engineers, who migrate complex applications all the time, and they can help you with your application. Contact us for details.
I do think it’s worth spending the time on upgrading your app with the MVVM pattern because:
- You will be on the latest framework, and support the latest browsers and operating systems.
- You can clean up your code base a lot.
- The MVVM pattern can improve performance.
- You can create desktop & mobile applications with one code base.
- You will get all new classes, components, and themes.
- You can use the new theme package structure, and compile themes much faster.
Because of the new Ext JS core, all newer Ext JS apps (version 5 and up) will be backwards compatible. That means it will be simpler to upgrade (just like Ext JS 5 to Ext JS 6 applications, which only require an upgrade through Cmd).
Windows theme image link is broken because you added too many Gs as in “touch-extjsmodern-tutorial-windowsphone-part3-img4.pngg”.
Shirlie March says
Thanks Tomas. It’s fixed now.
Good article, but why is the ‘Modern’ Sencha core app.js so large? 836kb is too big, when you compare it to other frameworks such as Ionic 1x…it’s around 350kb so their framework feels quite a bit quicker. Who knows how much more optimized Ionic 2 will be once it enters GA. I think Sencha really needs to focus on core optimizations if it will have a chance to compete with Ionic 2 when that gets released…
Shirlie March says
Thanks for your comment, Tyla. We’re working on improvements to the Modern tookit. We’ll announce them on the blog when they’re available.
Hello Lee Boonstra, thanks for the tutorial. I´m wondering if the new Ext js 6 is fast and smooth on mobile phones. We are using sencha touch for the past 2 years, and the list scrolling never got nice… we are considering to move into another framework since touch releases take so long to get it and we need to deal with bugs for a year… but the most important is the user interface….
Does the Ext JS 6 REALLY improves list and dataviews performance? I´d love to have some examples/comparisons before we do a lot of work migrating to Ext JS 6.
The modern toolkit renewed all the Sencha Touch components, so there should be a performance win. My advice to you, is to create a simple prototype for your specific project and test the list on your phone. You can use the Ext JS 6 trial for that.
I can also give you 2 examples, of Modern toolkit lists, but again, I guess a prototype of your own project would be a better test.
* http://ladysign-apps.com/spotifinder/?modern#!tab-artists (try my lastfm username: savelee)
I’ve tested these on iPhone 5, 6 and an Android Galaxy phone, and it works great.