Making development with Ext JS fast - extjs

Ext JS is a nice framework for web UI, but I found that building and putting stuff together takes a long time and painfully slow.
This might be a general problem when working with JavaScript, but does anybody have any way to speed things up?
What can I use? Better IDE with good JavaScript suppport? GUI designers? Code generators?
I need some way to speed up common things like building grids and forms but yet let me do complex things like creating custom components easily.
I'm using ASP.NET MVC. Coolite seems nice at first, but I feel that I'll be having trouble when creating any custom components later on.

There's always Ext GWT, which lets you use Eclipse tooling (and all of the advantages that gives you, such as refactoring, swift code navigation, etc.) to create your Ext/JavaScript app.

When you download the ExtJs library, you find lot of sample applications for common requirements like Grid panel, forms, form elements etc.
Regarding IDEs, you dont find mature productive tools, but check the below link and wish it could be of help to you
http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/
But if you really wish to develop custom components, you need to get through knowledge,start approaching with ExtJs-provided sample apps.

If you want to get faster at anything, practice it until you fully understand how it works and how to make it do what you want. If you are just starting out, why would expect to be able to work as quickly as you do when you are working on something that you are very familiar with?

Things I use to make ExtJS less painful
Chrome, for it's developer tools, or Firefox with Firebug.
snipMate: snippets for Vim, so I can quickly produce boiler plate code for classes.
JSLint as a command line tool. Especially good for detecting rogue commas.
Sencha forums.
ExtJS IRC chat (Server: irc.freenode.net Room: #extjs).
API documentation.
Sencha and Saki's ExtJS examples.
Beer.

ExtJS is building a designer right know so you can look forward it, the only problem I think is not gonna be free.
you can see a video demo there, in term of release date I think this is due to the first quarter of this year.

I say learn the framework. But to develop apps, I use IntelliJ IDEA, which has partial code completion, etc. It costs money though.

Once you have some practice and understanding of how ExtJS works, you'll get faster at it. By using the examples for reference, and building up my application in small pieces, I've gotten much better (and faster) at developing stuff with ExtJS. A great way to get started is to find an example (or two) that kind of do what you need, and modify (or combine) them to see how they work together.

Related

'Find Usages' IDE functionality for Angularjs (Directives, Services)

I'm starting to wonder what is the best way to work with a moderately sized AngularJS project. I'm wanting to find where a directive or service is used without having to do a 'Ctrl+F' and search the project manually. Are there any IDEs that offer this feature, or does anyone have some approaches for working with these projects that they could share?
I didn't try it personally, so my answer is going to be pretty short, but I think you should look at TypeScript (http://www.typescriptlang.org/). I've seen many mentions of it being a good fit for Angular, and it allows for "Intellisense" features in IDE that should meet your needs.
Basically it means rewriting your code in an "augmented" version of JavaScript that makes your code typed and therefore should make it easier to handle a large codebase and run static analysis.
Here's some information about TypeScript support in IntelliJ, if that's your IDE: https://www.jetbrains.com/idea/help/typescript-support.html

Is there an interactive tutorial for Backbone that resembles the one for Knockout?

I've been evaluating JS libraries and frameworks for the company I contract for, and the best (for our needs—I'm not saying these are the best for every circumstance!) appears to be either Backbone or Knockout. I lean towards the former1 but I really like the interactive tutorial for Knockout, and think it would help drive acceptance among the other developers.
There are many tutorials for Backbone, but a big advantage I see of the interactive Knockout tutorial on the official Knockout site is that you just open the page and start playing with code immediately, and see results immediately, and it quickly becomes apparent that learning (at least the basics of) Knockout are not a big and formidable undertaking. Suppose I have exactly 1 minute worth of attention of another developer to overcome the resistance to being told a particular JS library is easy to use and will save him lots of time. The Knockout tutorial is a big winner when presenting to a not-necessarily-motivated developer. With other tutorials you're still reading a description of what the library is and will do. You almost might as well hand them a 500-page WROX book and tell them to read it.
Where can I find something comparable to the excellent Knockout tutorial, but for Backbone?
1. Mostly because I'm already familiar with it, and the things which Knockout offers that Backbone doesn't can be easily added. That might be true in reverse as well, but since I know less about Knockout it's not obvious to me if it is.
Have you seen ChooseYourOwnApplication.com? It will allow you to walk through the same problem through any combination of Backbone/Knockout/JavaScript/CoffeeScript. It also includes options of different server side technology. One of the big advantages is that you see the strengths of the stack though the process of implementing the same web app. It does not include an interactive editor however.

Is it possible to use ExtJS components in AngularJS?

I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/

How to implement Backbone boilerplate with views

I am trying to learn backbone, however truth be told, I'm feeling a little overwhelmed. Everywhere I look it is being done in a slightly different way, each with more frameworks and plugins to learn. So I have decided to put my faith in Addy Osmani and am reading his Backbone Fundamentals book. I have followed his recommendation and used the Backbone-Boilerplate. However for whatever reason, I have been unable to successfully install Grunt BBB so I cannot download the working examples.
What I am trying to do is follow this router section and use views. http://addyosmani.github.com/backbone-fundamentals/#router.js.
The problem is that I think these instructions are incomplete. For a start the collection.fetch() variable is in the wrong scope, and I really am not understanding where I need to place the views and how. I am pretty sure that if I could see a working example of this I could understand it, but as I said, everywhere I look its a different implementation.
Does anyone know how to use the backbone-boilerplate with routers and views? Are there any working examples anywhere?
Let me make a suggestion. A couple of months ago, I was where you are now: trying to learn backbone and trying to follow best practices while I did so. Like you, I came across Addy Osmani's book and like you I tried getting stated with backbone-boilerplate.
After much stumbling around, I eventually concluded that backbone-boilerplate was not something I needed to have while I was just learning backbone. It is now, only after having created a fully working, non-trivial CRUD application that I start to see how I might incorporate backbone-boilerplate. I think you probably need to be asking the questions that backbone-boilerplate answers (How can I break up my application into modules?, etc.) before you attempt to incorporate another framework or plugin. The same goes for Backbone.Marionette: great library, but you really need to have something to apply it to before using it.
Starting out, I would suggest having just a single file for all your backbone code.
One of the things that really helped me out was playing around with and extending various jsfiddle demos people had created using backbone. A simple google search will turn up quite a few. I found it a great way to learn as I was able to manipulate working code and get immediate feedback on what worked and what was allowed.
And although backbone is a client-side library, it's often simpler and faster just to ignore html and write stuff out to the console.
Finally, if you're willing to pay for it, I highly recommend Liam McLennan's set of backbone.js training videos on pluralsight.

Agile Toolkit, worth using?

I'm considering using the Agile Toolkit, ATK4 to upgrade a number of web projects that I'm working on. I really like the idea/paradigm that the Agile Toolkit presents, but I'm worried about documentation.
The agile website's documentation is sparse, in broken English, and seems to 'paraphrase' the symfony documentation.
The agile toolkit alleges to have been in development/production since 1999, yet there are only a handful of StackOverflow.com posts regarding agile, and next to nothing comes up in Google searches...
In short is it worth spending time learning the Agile toolkit, or would my time be better spent on a framework that has more of an active support community? I've tried a few other frameworks, but ATK's implementation really stands out...
Initially ATK was born as an internal tool from Agile Technologies (.ie) so that has been conceived in 1999 but it was recently launched as dual licensed framework.
That's why it lacks some documentation and has not a huge community nor appears Googling.
I was amazed at first sight by its working way proposal so that I engaged it. The documentation has been already improved and over the time it will keep getting better and community will grow.
I had the chance to get in touch with the lead developer and trust me, it will get better and better.
Even, as an example all the ATK4's site is developed with the toolkit and the code is short and pretty easy to read.
Good luck!
ATK4 does have many examples, and code is concise and clear. It accomplishes the goal of wrapping server-side and client-side into one comprehensive framework via php. Plus it looks nice. It does appear that documentation is improving.
Yep - agree with what the others are saying - Romans is doing a great job of getting the documentation updated. I started writing an application in straight php but realised i was going to need to use jquery to get a nice, cross browser compatible front end and wanted a php framework that would support that.
I looked at Yii, Cake and CodeIgniter but ATK4 really seems to do what i wanted. Like anything, it takes a bit of getting used to and i'm still relatively new to both php and ATK4 but i've rewritten what i already had for my application in the framework and the code is so clean - all the html and css are separate and the page code is really compact. The integration with Jquery is great and i've just written a plugin that i needed to get jqplot working for nice looking graphs.

Resources