PDA

View Full Version : Converting from Architect to WebStorm.



blomasky
7 Aug 2015, 11:04 AM
Because I am building an app in Ext 6, I have had to give up using Architect and am now developing the app in WebStorm, (with the plugin). After a few days of this, I will never ever complain about what a terrible editor Architect is! (Ok, I will and gripe about how long it takes the developers to fix simple bugs, etc. etc.), but as Tom Cruise said in Top Gun “I have the NEED for SPEED!” I am SO much faster with SA than with WS.

Yes, for many (esp. if there is more than one developer working on the project), SA has been found lacking. However, besides the obvious feature, having a “design” mode where I can see in real time what any changes will look like. (change the size of a container, and can see what fits or doesn’t, change the width of a grid column and can see that the text no longer fits. Etc. etc). However, there are so many other little features that I am now lacking, I figured it was worth sharing them with the community.

· List of Views is 1/3 shorter. If my app has 20 views in a folder, in SA, I see the 20, in WebStorm (WS) I see 60, since I see all the viewModels and ViewControllers. Takes longer to navigate and find what I want.

· If I want to work on a “cls” property and am not sure if its componentCls, or bodyCls, I can just search for “cls” and I see all of them. Saves me from going to the docs as often.

· If I want to see just properties that I have changed from the default value, no problem, a lovely little checkbox to show me those

· Editing the theme! This is a no brainer! When the theme editor does NOT crash in SA (which it does too often), so fast to find the properties, no need to create a bunch of subdirectories

· So much less typing to bind properties (or to remove it. Don’t need to remember about braces, stinkin commas!)

· No visibility to my view (esp. the references) when I am working in the viewController. With SA, I can have the view expanded, so I see all of the fields / columns. In WS I have to go to a diff tab to see what the references (or itemIds) are

· Adding JS references, again, so easy, vs. opening the app.json, searching down to line 220 ish, and adding a new object.


Perhaps, someday there will be a marriage between an editor and something like Ext.Designer and then will have the best of both worlds. perhaps???

Bruce

Peter Tierney
10 Aug 2015, 6:00 AM
I absolutely agree with Bruce's comments about Architect and the JetBrains plugin.

There are numerous whiners out there about how Architect is not for creating real Ext apps but they are only concerned with their single way of writing apps. It's a religious debate for them, not a rational debate. Architect has issues but so do other forms of development. Those who only want to create a UI with vi, well you must be a sadist. Anyone who wants to create a more engaging application than grid after grid after grid has to design it and visually understand context and why one element affects another for communicating to humans.

With that said, the Architect metadata files, when more than one dev is involved, can be troublesome. Why oh why do name properties change from "mycomponent1" to "mycomponent2" and sometimes back again? No it doesn't break anything but it def creates more noise to sift thru to find the important changes.

One of the major benefits of Architect is helping new or junior developers not completely break an app. Ext is a great framework, but it is feature and option rich making it more difficult to learn than simpletons like jQuery. Having the ability to easily see which properties are available, which properties are changed from the default and how all the bits fit together, is a major benefit.

I have created multiple large Ext apps all in Architect and never once found it to hinder my ability to create completely engaging applications. True, it might not support the latest and greatest jump in Ext framework, but it does follow a few months afterward. If you are changing from Ext 4 to 5, then Architect is by far the least of your concerns or time in that conversion.

In my personal opinion, CSS has outgrown it's usefulness and there needs to be a better solution, with that said, Architect and it's styling tools make most of that headache disappear. I write serious code to create amazing apps but when I am in designer mode, the last thing I want to think about is the code underneath just to switch a color, font or alignment. The human eye is very discerning and quickly sees the smallest infraction and enough of those visual fails creates a sense of distrust in users.

Creating good layout, design and UX is measured in pixels not lines of code.

worthlutz
30 Sep 2015, 10:36 AM
I'm just trying the JetBrains plugin. So far, I prefer Architect!

When creating a new Class, is there code completion for properties?

For example I start to type "xtype" and after "x" the options show up? Doesn't seem to happen for me. Am I to remember all the properties of class? I did not have to with Architect. They were all over there on the side.

Other completions seem to give me a list of junk, everything possible in the entire world it seems.

I'm not getting a warm fuzzy feeling here....

Chris.OBrien
1 Oct 2015, 6:30 AM
When creating a new Class, is there code completion for properties?

For example I start to type "xtype" and after "x" the options show up? Doesn't seem to happen for me. Am I to remember all the properties of class? I did not have to with Architect. They were all over there on the side.

Are you pressing control-space to bring up the auto-completion options after typing 'x'?

This is what I see when doing auto-completion in your example:

53333

worthlutz
1 Oct 2015, 7:13 AM
Are you pressing control-space to bring up the auto-completion options after typing 'x'?
...


No, I was not doing that. I missed that instruction. I just expected it to pop up. Is that keystoke defined by the plugin or by the IDE. Which set of instructions would teach me that? Can you point me to a tutorial which will help get me up to speed (I'm currently stopped).

I'm having to learn the new plugin and a totally new IDE at the same time. Having to jump into a new IDE and understand it immediately is impossible.

After spending much time getting to know the quirks of Architect, I now lose that tool and all the productivity that it provided.

My productivity has dropped to zero at the moment. Sencha 6 is a useless upgrade for me if I cannot work productively.

Chris.OBrien
1 Oct 2015, 7:36 AM
No, I was not doing that. I missed that instruction. I just expected it to pop up. Is that keystoke defined by the plugin or by the IDE. Which set of instructions would teach me that? Can you point me to a tutorial which will help get me up to speed (I'm currently stopped).

Ctrl-space is defined by the JetBrains IDE, which is the standard for code completion in their IDEs.

Once you type "xtype:" and hit space, it will automatically popup the completion dialog for the available xtypes. JetBrains has hooks where it automatically brings up the completion popup.

However, looking at our guide there's nothing specific about how to bring up code-completion, so I'll add some details to it when updating it for the Preferences/Setting ticket we opened.


This link I left you in the other thread might help you out with getting started with IntelliJ (if that's the JetBrains product you're using): https://www.jetbrains.com/idea/help/intellij-idea-quick-start-guide.html

There are also some video tutorials here: https://www.jetbrains.com/idea/documentation/

Peter Tierney
1 Oct 2015, 7:37 AM
One thing to understand when changing tools as you are doing, they are very different approaches to coding. Architect does supply a great deal of functionality and it does so in a visual manner. IDEs such as IntelliJ or WebStorm provide similar coding functionality but in an all text manner. “Code only” developers only ever want to deal with a text approach and they criticize any other approach as being a “pansy” way of coding. While those of us using a more visual approach quickly realize a great deal of speed and productivity and look at the text only approach as limiting and even counter intuitive.


Ask yourself, would you rather create a document in Word or vi? Would you rather create an app in Architect or WebStorm? The change you are attempting is not necessarily simple or comfortable. There probably isn’t a straight forward guide for this kind of change.


One point that might provide some aid for you is the property panel of a specific component in Architect is analogous but not equal to traversing the object via dot notation: e.g Ext. then control-space. You still have to know where to really start looking in that object tree, but they are similar. You won’t get any help in WebStorm for styling components or creating UIs/mixins from the available themes.


Hope that helps a little bit.

worthlutz
1 Oct 2015, 8:12 AM
...
Ask yourself, would you rather create a document in Word or vi? Would you rather create an app in Architect or WebStorm? The change you are attempting is not necessarily simple or comfortable. There probably isn’t a straight forward guide for this kind of change.
...


I'd rather code in Architect. Even though the design view crashes when I add a custom component (via "createAlias") from one of my packages. :)

Thanks Peter & Chris for your help and encouragement.

I'll keep reading and learning and maybe next week I can get some billable hours in.