1. #1
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default IDE examples & how to set up

    IDE examples & how to set up


    I'm coming from a Flex background where I use flashbuilder IDE for developing and I'm trying to find out what if anything similar exists for sencha.
    I've downloaded the tools, and a webserver etc and I've got the helloworld example working using notepad++, but I would hate to have to code a project using this.

    I'm looking for something where I can click a 'create sencha project' or at least import one in after using the cmd line to generate it. Then I'd like the usual autocomplete etc and nice big RUN button that opens up my browser and lets me debug what I've just built. Then ideally the IDE will have a deploy button (I'm really not a fan of using the cmd line) and I can move the code to my non local webserver.

    I'm brand new to Sencha (also JS in general), so what development environments do the experienced Sencha devs use and any tips on setting them up.

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Spokane Washington, USA
    Posts
    20
    Vote Rating
    2
    DaveAlger is on a distinguished road

      0  

    Default I'm in the exact same boat

    I'm in the exact same boat


    I thought I posted this question as I was reading it. I don't think there is a good IDE with code complete anywhere close to what you are asking for.

    As far as I can tell some veterans say they like visual studio, some like dream weaver, more seem to like WebStorm by JetBrains (a company that makes great stuff though I can't vouch for WebStorm yet)

    I have only been at this for a little over a week and ended up using eclipse + spket + run jetty. I would tell you how to set it all up but am still trying to figure out what I did myself.

    I'll probably try WebStorm before too long just to compare.

    Hope someone gives you (and me) a better reply. Let me know if you find something like you describe.

    Thanks

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    I've used Aptana, PSPad, Zend Studio and am now using WebStorm.

    My vote is on webstorm, it's well worth the money. An ExtJS app is still just a web app, so any IDE optimized for building web apps will mix with ExtJS. The trick is having an IDE that is smart about editing JavaScript code. WebStorm is the best at editing JavaScript of any editor or IDE I've tried.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default


    I'm currently trying to get Aptana set up, I've tried the standalone version which I couldn't get to work with various plugins ( an ExtJS blog was recommending http://www.agpad.com/ for a plugin ). So I've now got Eclispe for Javascript + Aptana plugin + the agpad plugin.
    I then changed some preferences to add the jsb3 file which the blog advised was meant to link up the sencha code. I created a js file and the sencha code doesn't appear to be linked yet.

    So what I'm saying is,

    Once you have an IDE, how do you generate, link up, debug & deploy apps easily using your chosen IDE? Can you do things like Ctrl + Click to jump into code etc. If so how. Can you add the Sencha/Ext JS code like a framework library, or does it actually need to be copied into each project?

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Spokane Washington, USA
    Posts
    20
    Vote Rating
    2
    DaveAlger is on a distinguished road

      0  

    Default


    I also come from a Flex background and there have been quite a few things I've had to adapt to. Some good, some bad.

    Sencha framework is 100% javascript and css so it is really just a nice head start to building a traditional html website.

    Thanks for the link to a possible code complete scenario. I was hoping to get a working code complete add-on for the latest framework in eclipse. If I find one and get it to work I'll let you know.

    p.s. Yes I can control-click into javascript function definitions from where they are called in the code which I just assumed was part of the eclipse web development package I installed.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Spokane Washington, USA
    Posts
    20
    Vote Rating
    2
    DaveAlger is on a distinguished road

      0  

    Default


    I assume this would be what we are both looking for but I haven't been able to get it to work -- http://www.spket.com/extjs.html

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default


    That's definitely one of things I'm after, I could put up with using cmd line for deployment/generate, but not having code assist would be very painful. Trying to squeeze in time to try and get this working. When I do I'll need to blog this as the info doesn't seem to be out there in one place.

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    Quote Originally Posted by delp View Post
    Once you have an IDE, how do you generate, link up, debug & deploy apps easily using your chosen IDE? Can you do things like Ctrl + Click to jump into code etc. If so how. Can you add the Sencha/Ext JS code like a framework library, or does it actually need to be copied into each project?
    My approach:
    1. I use ext-all.js (on ExtJS 3) and sencha-touch-all.js (on ST2) instead of making custom builds. I end up using most of what's in there anyway, so it doesn't seem worth it to make a custom build. I keep a copy of the subset of ExtJS that I need (base.js, all.js and the css folder) inside the project folder as a subfolder. This way I know exactly which ExtJS version the project is using.
    2. At develop time I hand-edit the ExtJS <script> includes to point to the "debug" files so I can step inside ExtJS code. I don't commit that change to the repository.
    3. I make one js file for each component (a form or screen is just another component). Components are loaded on-demand (I use a custom loader for legacy reasons, but ExtJS has a built-in loader as well).
    4. To make the app load faster in production, I have a php-based build script that generates a zip file which also minifies and concatenates all the component files needed for the initial page. The code that generates the initial html page is written so it detects this concatenated file and preloads it. This script is optional, so there is no mandatory "build" step between changing code and running the app which makes the change-reload cycle much faster.

    Ctrl-click works fine, but I've only gotten it to work reliably in webstorm. Same with auto-completion. I never got that sort of functionality to work right in the free IDE's and code editors. YMMV.

  9. #9
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    Scotland
    Posts
    111
    Vote Rating
    2
    delp is on a distinguished road

      0  

    Default


    Ok thanks for the previous replies. I've now got the creation, deployment of app sorted using the various SDK tools and commands. Now that I understand them a bit more, you don't really need to use the tools very often (mainly once to create, then once to deploy - think I'm right in saying that ), so I'm not to bothered that I can't click a button to create a project etc.

    Now from what I've read and found out, when using an IDE with javascript, its only real purpose is to make the code look readable and give you content assist (No compilation - so you don't know if you've broken something until you run it).
    For running and debugging you have to load the page and each time you save your files in the IDE you then just hit refresh and debug using Chrome dev tools.
    Is that about right? Or am I way of track?

  10. #10
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about joeri has a spectacular aura about joeri has a spectacular aura about

      0  

    Default


    Quote Originally Posted by delp View Post
    Now from what I've read and found out, when using an IDE with javascript, its only real purpose is to make the code look readable and give you content assist (No compilation - so you don't know if you've broken something until you run it).
    For running and debugging you have to load the page and each time you save your files in the IDE you then just hit refresh and debug using Chrome dev tools.
    Is that about right? Or am I way of track?
    You need to run your code through something like jslint. An IDE that doesn't integrate jslint into the code editor isn't worth your time. In webstorm the code validation goes deeper even than jslint (because it actually parses the code and looks for things like calls to missing methods). Errors should get highlighted in the code while you're typing it. For me the code validation in the IDE takes care of most of the errors.

    For the rest, I use a combination of eyeball testing (in chrome, using the chrome dev tools), unit testing (with jasmine) and automated integration testing (with SmartBear TestComplete). If you look around the forums you can find many examples of how to do unit testing. If you have good unit test coverage and a code architecture that separates the MVC layers, that should be enough. I don't recommend automated integration testing unless you really know that you need it and what the time investment will be.

Thread Participants: 2

Tags for this Thread