I wanted to share my thoughts on my progress learning Ext JS 4.1 as a developer new to Sencha. As an application developer I have used many different development environments and application frameworks throughout my career and whenever I learn something new I compare back to my experience. Overall I have been very impressed with Sencha frameworks as they provide a professional foundation to build an application atop.
h3. Interpreted
The single hardest shift for me is embracing the interpreted nature of JavaScript within the Ext JS framework in general. While not new to interpreted systems, I personally expect compiler emitted errors/warnings/flags, syntax auto-completion, and strong typing for member variables, return types and assignments. Having come most recently from Java, I find that being shown errors and autocompletion as I type is a great productivity enhancement but these benefits are tied to the nature of a strongly typed and compiled language. The general lack of these facilities in working with JavaScript is really the first hurdle in moving to web technology. Truth is, as I got more comfortable with the interpreted nature of the the language, I quickly found myself enjoying the advantages:
* JavaScript’s flexibility is a double edged sword. The language’s freedom is a joy but you must use best practices to avoid common pitfalls.
* Modern browsers offer developers great insight into application behavior at runtime. I have found the Chrome developer Console and Debugger JavaScript tools to be invaluable.
* Ext JS uses JavaScript as a meta-language to provide deeper OOP/MVC/Class Loading/Mixin support is very elegant for larger scale application development. These facilities exist in very few frameworks and really differentiate Ext JS and Touch. The ability to extend components or leverage a clean MVC pattern within an application make it very developer friendly as a framework.
* Leveraging JavaScript object literals and JSON for data/component instantiation is very productive. The ability to load components remotely, define UI as objects at runtime, and leverage client layout templating is very powerful. The syntax of larger object literals using xtype takes some getting used to. I found myself formatting my code more than normal to avoid the dreaded missing comma errors deep within an object literal.
* Using the Eclipse VJET Plugin was a great productivity boost for JavaScript and Ext JS development. The plugin provides auto-completion for JavaScript and there are several open source syntaxes for Ext JS. Being able to see instances, warnings/errors, and in-context return types is a very pleasant addition based on my past experience. “VJET”:https://www.ebayopensource.org/index.php/VJET/HomePage “VJET+ExtJS”:http://www.ebayopensource.org/wiki/display/VJET/VJET+Ext+Js+Extension+-+Sencha
h3. Ext JS “Standard Library”
Ext JS provides a foundational set of helper classes and methods to make building applications easier. I found that the Ext.Array, Ext.Date, Ext.String, Ext.Object, Ext.Loader classes make working with data very easy and generally simplify building applications. Every application will use these common libraries and having them included and integrated into the framework is great.
Ext.require( [ ‘widget.*’ , ‘layout.*’ , ‘Ext.data.*’ ] );
Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) { console.log( name ); });
Ext.Object.getSize( { age:23 , height:6, name:”Ted” } ); //3
h3. Containers
Ext JS provides a rich set of containers (Ext.window.Window, Ext.panel.Panel, Ext.container.Container, Ext.grid.Panel, etc.) to allow developers to easily create nested views and more complex application logic. In Ext JS, containers’ layout behavior is programmatic and allows you to set the behavior of a container at runtime to ‘vbox’, ‘hbox’, or any of the Ext.layout.container types. Additionally you can set sizes dynamically by assigning values to the ‘flex’ property on items within a container.
h3. Xtype
Ext JS provides a loosely typed data format called Xtype to allow you to pass trees of containers and controls as a single object. It is a very, very powerful technique and really makes building lots of UI components at all at once easy. In Flex and Android I used declarative XML for component initialization and layout but these are closely tied into compiler workflow. In an interpreted system, you want to leverage a format that is rapidly parsed and supports remote loading. As Xtype is a JavaScript Object Literal, it is parsed at the speed of the JavaScript engine in use. On both mobile and desktop targets, this is very fast. While you can create components independently, using xtype for component generation is much more productive once you get the hang of it. Here are 3 xtypes passed within an Array:
[ { xtype: ‘container’, html:’First Item’, flex:1 } ,{ xtype: ‘splitter’ } ,
{ xtype: ‘container’, html:’Second Item’, flex:1, maintainFlex:true } ]
If this were assigned to a container’s ‘item’ property, it would render a split view. I found this very simple and elegant, compared to the complexity in other frameworks.
h3. Styling
I have styled components in several frameworks. In Ext JS, abstracting style properties as runtime loaded CSS for all components is very powerful. Better still, generating CSS from the provided SASS/Compass source formats makes building a global style change quite easy. In both Flex and Android, style is baked in at compile-time and is less flexible than a runtime interpreted model. While I now feel comfortable generating a base color change in Ext JS, it will take me some time to absorb the finer details of CSS styling of the components. This is easily one of the more complex areas of the framework and will take me time to fully understand.
h3. Hello Sencha
Given this is my first real post on Ext JS on Sencha.com, I thought it would be good to post the simplest example possible. The example creates a window with an image inside. Feel free to paste into a local html file and open in a browser.
Hello Sencha
I will continue to document my journey learning Ext JS and Touch frameworks as I go. There is clearly a lot to learn and hopefully sharing my experience will help others new to Sencha. More to follow.
What's your reaction?
0
0
Good stuff!
(There’s a “strong”-markup in the first code example that may look cryptic to new developers. :))
In case anyone just wants to try easily, copy & pasted his example code to jsfiddle
http://jsfiddle.net/yVmQd/
Great first article! I share the same feelings regarding ExtJS :)
I downloaded and installed VJET Plugin for Eclipse. Can you send some hints about where can I find the open source syntaxes for ExtJS ?
Why is this called Learning ExtJS 4.1 when it is not released yet and does not mention the beta.
@Anon check the demo source, the two linked resources point to “/extjs/4.1.0.b1/”
Nice commercial post ….
@Reynald
Look at http://www.ebayopensource.org/wiki/display/VJET/VJET+Ext+Js+Extension+-+Sencha
I’m with Reynald. A quick google search didn’t yield anything useful. Where can we find stuff for VJET?
I feel the presence of the (rather large) section “Interpreted” made me question the author as a valid source of a reliable review. I would have rather found it more valuable to hear from an experienced JavaScript expert. The title “Head first into JavaScript with ExtJS” would have been more accurate and might have been better published on some other site, not the actual Sencha site. It sounds like you’re not much of a front-end developer based on this article and as a follower of ExtJS through every iteration from 1.0 to today (including Ext Core and Sencha Touch) I’m disappointed after reading it. So inclusion, why is this on here?
Wait a second! This guy wrote this article and HE is the director of developer relations?
FACEPALM.
Generally the sencha blog is a heap of great knowledge that I am excited to read whenever it shows up in my RSS reader. However, this is an article about javascript, by a java developer, with a hint of Ext added in. Not something I would expect to see here.
With that being said, the use of alert kind of makes me queasy, and there is a missing semicolon after the “)” when creating the window.
You say learning with 4.1
Is 4.1 out already?
Added the two links to VJET and VJET Syntax for Ext JS. Also added a semi-colon after the window creation, thanks @puritysdisciple. I am learning Ext JS 4.1 from scratch and the example above is using Ext JS 4.1 beta 1 via the Sencha.io CDN.
VJET: https://www.ebayopensource.org/index.php/VJET/HomePage
VJET+Ext JS Syntax: http://www.ebayopensource.org/wiki/display/VJET/VJET+Ext+Js+Extension+-+Sencha
@Ted Patrick
I’m wondering, why don’t you use latest stable version? Since Ext JS 4.1 is still beta and it has so many bugs (see https://www.sencha.com/forum/forumdisplay.php?93-Ext-4.1-Beta ), it seems to me that using Ext JS 4.1 for learning or development is waste of time.
@John Internally we are very focused on improving the quality of the Ext JS 4.1 framework and we are creating lots of new learning material and training for the release. I am learning 4.1 is to align with the QA efforts underway here at Sencha.
@Ted Patrick
You mention VJET+ExtJS. But the link that you posted does not contain any details on how to install the ExtJS extension. There are only details about VJET…
I agree with Paipai – this is just a commercial post without real value.
@Cristian The Ext extention is experimental in the github repo here https://github.com/vjetteam/vjet/tree/ext_experimental
Regarding the “commercial post”, I can understand your perspective from an intermediate to advanced developer point of view, the post was my first steps with Ext JS. We are seeing lots of new developers coming to Sencha from other languages and my learning experience is helpful to them.
That said, I am very interested in seeing the larger Sencha community contribute intermediate and advanced articles to the Sencha blog. If you are interested in writing an articles, please reach out to me at ted.patrick -at- sencha.com. Regards. Ted :)
It s really funny to see a former Java, Flex developer trying to promote a solution based on JavaScript.
Companies like Google wont be creating stuff like Closure, GWT and latelly Dart if JavaScript was a half decent platform to build on. But what do they know :)
Hi, I’m struggling to find any useful information on how to use ExtJS with VJET. The links in this post don’t link to anything that appears to be useful. Any chance of anyone posting a link to a tutorial?
I am new in sencha touch. How I call Webservice and how parse xml in sencha touch ? tutarial ? my email adress : [email protected]
Well, I can find everything but extjs typelibraries. Everyone else appears to be represented, but extjs is not, as far as I can see:
Dojo 1.6
EcmaScript Ed. 5 api updates
HTML Canvas 2D API
jQuery 1.4
jQuery Mobile 1.0 Alpha 4.1 (Requires JQuery Type lib)
JSON
Node.js 0.4
same here Mark, i’ve taken a look at the github link posted by Ted but is in no way obvious how you use the contents as a typlib.
I think it would be really useful if Ted could post a comment on how he got the extjs typlib working and where he got it from.
i want to learn ext js could you help me
I would assume the lib is ExtCoreTL? at the following path:
https://github.com/ebayopensource/vjet-typelib
Thanks for your article! I’m starting to learn the basics of ExtJS and this kind of articles really helps. Thanks a lot :)
Does it also support ExtJS, or just the Core!?
thanks
What are expository essays?