Faster ExtJs 4 learning methodology - javascript

How can a JQuery Ninja cross over to ExtJS as fast as possible? Given that ExtJS 3.x is now obsolete, how can one quickly grip concepts in Ext JS 4. Hardly can one find a book on Ext JS 4 online. The documentation is quite forward but complex. Ext Js has many components, and each component has several APIs e.g. a Grid has very many ways of manipulating its view e.t.c. What learning flow may work for me to quickly not skip anything on components, views, controllers e.t.c. I would want to write good Ext JS code in a period of 2 months from now.
please suggest methods of learning Ext JS 4
NOTE: the writer has never used Ext Js wether in older versions of it or the new

you may wish to refer to this thread
Also not that a few books are available now like this one and another one which is in a review phase but the most comprehensive guide will always be the documentation which you can get here. Otherwise you are not supposed to find any hardship because its all javascript.

Two months ago I've started with Ext JS project without having previous experience with it. Can't say it was hard to learn. Ext JS is designed really cleverly. I've been learning only from official documentation and google. First I've read the official tutorials, after that was exploring reference, many helpful examples can be found there. Books about libraries and frameworks, especially about such well-documented like Ext JS are wasting of time in my opinion. If you have previous experience with JS and know about OOP it should be easy to learn Ext JS.

Check the statup guide: http://docs.sencha.com/ext-js/4-1/#!/guide
The best way to learn is see the examples : http://docs.sencha.com/ext-js/4-1/#!/example
Learn by videos: http://docs.sencha.com/ext-js/4-1/#!/video
Once you are comfortable, read the api docs: http://docs.sencha.com/ext-js/4-1/#!/api

Related

What makes Angular and Backbone different from jQuery?

I have been using JavaScript and jQuery for quite a while now and want to extend my skill set further, during my search I came across two popular names Angular and Backbone and while reading about them I found one line common in both them which somehow also seems to be their USP i.e.
It is designed for developing single-page web applications
This makes my confused.
What is that I cannot do with JS or jQuery and I would require these?
I have created web application on single page, where users can perform CRUD operations on single page through asynchronous calls so why so much importance of for these others libraries?
And as a middle level web developer who has have good hands on JS is it right path to move to these two or here is something else I should look into before these?
Please help?
Structure.
In an ongoing project that started about 4 years ago we built the front end with jQuery. We were able to do just about everything that we needed creating several single page applications that were quite functional.
As the project progressed and the code base grew we started experiencing some major problems with maintainability of the code. We ended up with hundreds or thousands of lines of JavaScript code per page in a tangle that was almost impossible to navigate. This could have been avoided if we were more careful of course but at the time we focused on making sure the back end architecture was robust.
Many years ago the community learned that code needs structure to be maintainable. We developed MVC patterns, multi-tiered applications etc. But JavaScript was never a big player in the field and we largely ignored it.
Over the last 6 months or so we introduced Angular into the project and started sorting out some of the mess in the project. The results are remarkable. Not only is the code simpler and easier to create, the structure makes it easier to implement tests, easier to maintain and generally a huge improvement over what we had before. We still use jQuery but now we have been burnt by the lack of structure and know a thing or two about the architecture of a JavaScript application. Angular and its like provide you with the tools to architect a good application.
When you are creating larger scale web applications it is wise to check out Backbone, Angular or perhaps Meteor. jQuery supports neat tricks, but it does not help you structure your code in a maintainable way. Larger scale web apps build on jQuery need their own vision on how to separate the code into layers with their own responsibility.
The other frameworks give more support.
I would suggest checking out at least one of the libraries. Perhaps you eventually won't use them, but it will benefit how you work in jQuery.
Well Now a days there has been quite a hype about Angular.js and especially SPAs (Single Page Applications). Well to be honest, I had the same question in my mind about a month ago when my team decided to shift from Jquery to Angular.
Whenever it comes to Jquery, one of the first thing that comes in our mind is the DOM manipulation. While using Jquery we always think of manipulating the DOM. Show/hide elements, animating elements, getting data from tags you name it. But Angular offers something more than that. It offers you an architecture, a way to structure your applications at the front end.
So whenever you go for Angular.js, change the way you think about creating web applications (and believe me its worth it). Most of Angular's structure uses the concept of Dependency Injection which is a neat way to maintain your code.
Backbone is only a library whereas Angular.js is a complete framework to create and manage Single Page Applications
Talking about the fact that Angular.js should be used when we are creating large scalable apps, it is true. In my case the team I work with is full of Jquery Ninjas. We have been creating a great app for the last 3 years and believe me it became difficult for us to maintain and debug thousands of lines of Jquery. This is the main reason we have decided to revamp this app into Angular.
Kindly see some of these Helpful links. You will get a better idea.
http://net.tutsplus.com/tutorials/javascript-ajax/3-reasons-to-choose-angularjs-for-your-next-project/
"Thinking in AngularJS" if I have a jQuery background?

Ext JS - A start

Folks,
I am starting off to learn ExtJS. I had a look through Sencha's website. I went through some of the questions also already asked here.
But had some doubts,
What is the difference between ExtJS designer and Aptana ? Do we require both ?
How to start building your own 1st application in ExtJS ? Any tutorials for the total beginners.
Will I need to write JavaScript code manually or use a ExtJS designer to do that for me ?
Thanks.
I'll disagree a bit with the already-accepted answer.
They are both optional. I use neither.
OK, not too helpful. Aptana is a general-purpose IDE. It is based on Eclipse, but unlike vanilla Eclipse (which is Java-oriented) Aptana has lots of additions and plugins for doing JavaScript, PHP and other "web-centric" development. I actually use Aptana myself, even for Ext development, because it works for me. IDE discussions tend to get religious -- everyone has their own requirements and peeves, YMMV. Aptana does actually support framework-specific autocomplete, including for Ext JS (though I think they are still on an older version). Note that you can accomplish the same things as Aptana (generally-spekaing) using WebStorm, Komodo, NetBeans, TextMate or any old text editor -- just depends on what IDE-specific features you find helpful or not.
Ext Designer (now Sencha Architect) on the other hand is NOT a general-purpose IDE -- it is strictly intended as an Ext UI design tool. However, it does go beyond simply "placing widgets" on the page. You can easily drag-drop things into place and also preview how they will render, hook up data stores to databound widgets (again via simple drag/drop interactions), it includes context-specific config and property setting (which makes it much easier to know what options are available without having to refer to the API docs constantly), etc. Architect then generates classes, in best-practice code format, that you can drop into your app and then extend as needed with your own business logic. The output of Architect could basically become the input project for Aptana (or whatever) where you would build your application code (although many people stick exclusively to Architect).
Regarding tutorials, the docs site of Sencha.com was revamped recently and includes many tutorials updated for the most current versions of Ext. Of course the official examples are also a good place to start. The best book on Ext development is probably Jay Garcia's Ext JS in Action, though unfortunately it has not yet been updated for Ext 4 (he's currently working on that). It's a great overview of the concepts and best practices for Ext in general though, and a lot of what's in that book will still apply today.
Finally, while Architect will definitely get you started with good UI code, it will not wire your app together or write any business logic for you. For that, you'll have to use the existing tutorials and examples to help guide you to write your own code.
They are both optional. I use neither.
Depends on how “total” a beginner you are. Judging from your questions, I guess you aren’t familiar with JavaScript and web development in general. If that is the case, start by reading some tutorials on JavaScript and AJAX—you’ll need a solid grounding in those to make good use of Ext JS. I am yet to see a good tutorial for Ext JS (version 4) itself, and you’ll probably end up gathering pieces from the official docs, the Sencha blog, and the examples that ship with Ext JS.
You will have to write JavaScript (and maybe also HTML and CSS, depending on your scenario). The designer can only help you with placing widgets (like buttons or text boxes) on the page. In my experience so far, this has been the easy part, so unless you’re doing a complex user interface, you probably don’t need the designer.

resource for javascript without jQuery

Is there any repository of code snippets, tutorials, whatever, that concentrates on pure JS, without the use of frameworks?
I first approached javascript through scriptalicious then jumped to jQuery. I am now a seasoned jQuery developer, and I've done quite a lot in jQuery throughout the years.
My problem is, I've almost never coded in pure JS. By the time I got advanced in coding in general (I mean, cross-language), my JS coding style relied already heavily on jQuery.
Plus, each time I research a solution for a problem, the first results (or pages of results) in google involve jQuery, or, more rarely, another Js framework. Which leads me to this problem: since I have developed a lot of custom plugins, some fairly complex, for jQuery, I am quite sure I do know a lot of JS. But I can't tell the difference!
So I decided that from now on, and as long as I feel the need, I am going to try to use pure JS, at least at the beginning of each project (leaving myself enough time to revert to good old jQueryScript if I get stuck). My problem is I am way too advanced to follow beginner's tutorials. I would like to know if any of you guys has a suggestion for a place to begin my training. Some website where I could learn advanced JS, without frameworks.
I actually think Resig's book, Pro Javascript Techniques would be a great fit. I read it a while ago and my memory of it was that he walked through a lot of the kinds of cross browser issues one can experience with Javascript and talks about how one could create code to help remediate those issues.
Ultimately that thinking is what jQuery is all about, but this book is not a jQuery book at all, more focused on JavaScript, approaching the same kinds of problems jQuery makes you not have to think about.
Might be a great fit for where you are, and it is by no means a beginner book.
http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273/ref=sr_1_1?ie=UTF8&s=books&qid=1310240944&sr=8-1
If you want learn more about JavaScript in general and really master it, there are two books that I would recommend:
JavaScript: The Definitive Guide
JavaScript: The Good Parts
Both are excellent resources with great depth and cover fairly advanced topics.
If you would like to explore the possiblities of JS outside the browser and explore some cutting edge JS then take a look at the Node.js and CommonJS projects.
I recommend using this Google group:
http://groups.google.com/group/jsmentors

ExtJS or SmartClient?

I would like your opinion about these two frameworks. I like a lot the features of ExtJS, but recently I saw SmartClient and it seems to be great too, and free (its Client side features) for commercial projects. I tried a little of SmartClient and it seems to be easier than ExtJS, and it has a better documentation tnan ExtJS.
BUT.. I didn't work with any of these frameworks and maybe I'm wrong. That's why I would like the opinion of people who has worked with them.
And BTW.. how does the license of ExtJS work? you've to but one license for each developer and then you're able to develop and sell every app you want or you have to buy a license for each app you sell?
Thanks in advance for your help.
This has been pretty well covered on SO. Specifically here and here.
Ext JS is licensed per developer not per app.
I'm an Ext JS developer so I'm partial to Ext, but I have no opinion of SmartClient good or bad. If licensing is the most important criterion SmartClient might be better for you. If you want to weight the technical merits see the links above, or even better evaluate them both based on your own needs.
I use SmartClient and am quite happy with it and the support provided by Isomorphic. The U/I widgets aren't the nicest out there, but you can see that they've been around for some time by the richness of their API.
It's also quite easy to roll out your own custom controls when the built-in ones don't suit your needs. For example, we integrated Raphael pie chart SVG drawings inside custom Isomorphic canvas classes. We also integrated Mondrian/JPivot analytical technologies which are legacy JSP pages, using Smartclient's HtmlFlow control. It's quite powerful what can be achieved.
One thing I regret about Smartclient versus other technologies such as jQuery, is a clearer separation between the work a web designer does versus the work a developer/programmer does.
With Smartclient, it's mostly done thru code, even the layout of components. There's no HTML per say. They've separated very well the skinning (css), but that's about it. Everything else needs to be done by a developer/programmer thru Javascript code. Smartclient is good for single-page apps.
I can't speak for ExtJS as I haven't used it real production environments, but in the end I think it all boils down to the licensing model and programing/design model you want to be using.
I have used both, and I would recommend Ext for the following reasons:
Layout flow is much easier, especially with the design tools.
The UI Builder from Isomorphic lacks the usability that the tool from Ext offers
The Javascript performance was better with Ext
CSS is easier to use with the Ext framework
Editing CSS/Themes/Skins in SmartGWT/SmartClient is major surgery (very tedious and time consuming)
Widgets are similar but "prettier" in Ext
Forum administrators on both sites can be "snippy", however premium support did not change
this on the Isomorphic site. They are rude and condescending even when you pay.
Ext has a dedicated MVC framework. The Isomorphic framework does not.
SmartClient charting DOES NOT support negative number values
Before starting new GUI for our new project arrival, I made some research.
Here are my findings (remove spaces from "http: // "; bcoz stackoverflow is preventing me to do so :)):
Prototype framework favorable links:
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html
http://www.devx.com/AJAXRoundup/Article/33209
Dojo framework favorable links:
http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison
jQuery framework favorable links:
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
Test speed of different RIA frameworks:
http://mootools.net/slickspeed/#
More comparasions:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://jqueryvsmootools.com/#conclusion
Out of all these findings I started using SmartClient 5. Initially we faced some issues but as SmartClient matures I find it interesting in many terms:
1. APIs doc help and examples
2. Flexible controls
3. Forum
Today I am working on SmartClient 8 and few on my GUIs are in production running successfully. Actually the great help with SmartClient is that you find every thing at one place. No need to dug many other sites that is hard to do for any other open source RIA framework.
So my choice is no doubt SmartClient.
Thanks
Shailendra (shaILU)
I would prefer Jquery UI. Which is supported well by community. By combining plugins you can get similar -if not better- screens provided by extJS and SmartClient.

Ext Js and Adobe Air

Can anyone reccomend some good tutorials for ext js and adobe air? The ones I have seen seem to start with you knowing a lot or already having a lot of code in place.
What I am looking for is a simple step by step guide that takes you through the basics of Ext Js in use with adobe air, in fact i suppose just a good Ext Js tutorial for begginers would be handy I just cant find anything.
Im looking to build a desktop app and need to get on it quickly, but Js is my weakness and the app has some complexity (dont they always!!).
So Question - What are the best Ext Js tutorials for begginners (preferbly with some adobe air thrown in, but not essentiall, one step at a time ;))
I found the best tutorials are on the Ext JS site itself.
Ext JS Intro Tutorial
Ext JS is large JS library that includes a lot of functionality from standard DOM manipulation through the one of the most comprehensive set of JavaScript UI components. Since it's such a large API to learn, I found looking through the samples and the associated source code a the best way to learn.
Ext JS Samples
It's handy to have the Ext JS API docs easily accessible and Jack Slocum's Ext JS Docs AIR app is nice.
Ext JS API Docs AIR App
If your JS isn't too strong, you may want to consider a different JavaScript library/framework. Ext JS is great and some would argue it's the highest quality JS library/framework out there at least from a UI components perspective, but it takes some time to master it since it is so large. If your only going to use a couple of the UI components then you may be ok, but once you get into more complex UI that includes many components and layouts it gets fairly involved.
one more best resource i can suggest is www.adobeairtutorials.com

Categories