How can I get sublime text 3 to auto adjust paths in my imported paths, for ES6 - reactjs

I have seen other IDEs that can watch your project structure, and if you move a file from one folder to another, all references or imports to that file will be auto adjusted in all files that reference that file.
I can't seem to find information anywhere so far for how to implement this feature or if there's a package out there that handles this.
I would appreciate any suggestions from anyone that has got it to work. My project is in React, so basically it's to update all the component imports

I developed a new plugin called JavaScript Enhancements, that you can find on Package Control. It uses Flow (javascript static type checker from Facebook) under the hood.
It offers smart javascript autocomplete, real-time errors, code refactoring and also a lot of features about creating, developing and managing javascript projects.
In your case you could use https://github.com/pichillilorenzo/JavaScriptEnhancements/wiki/Code-Refactoring#safe-move
An introduction to this plugin could be found in this css-tricks.com article: Turn Sublime Text 3 into a JavaScript IDE

Related

How to convert my old projects structure to the new Codenameone initializer project structure based on maven?

We have been writing a Code Name One project since a few years ago.
It is already in production.
The project was created using IDE Netbeans which creates all the initial folder structures for it.
Recently, Codenameome provide an app called Codenameone initializ which executes the task of creating a new project from scratch using a new folder structure and using maven as dependencies manager.
We want to convert our project to this new structure and use it from now on.
How could We do that?
Is there a converter for that?
Check out the tutorial here: https://www.codenameone.com/blog/migrating-your-project-to-maven.html
Personally I prefer creating a new project then copying the source files and my personal build hints. Then adding the dependencies. This keeps the project "clean" and helps remove a lot of the legacy stuff from over the years.
This is important since a lot of things changed significantly. E.g. dependency hints are no longer listed in codenameone_settings.properties and are instead listed in the individual dependency. So the file is cleaner.

Is there a tool to reorganize React components?

Is there a tool or a feature built into a common code editor/IDE that makes it easy to reorganize React components? I want change my folder structure and have all import statements automatically update. Thanks.
There are more most used ides for JavaScript/React
https://www.jetbrains.com/webstorm/
https://code.visualstudio.com/
https://atom.io
I personally used WebStorm which offers nice feature called refactor/move https://www.jetbrains.com/help/idea/move-refactorings.html when you move any file/folder it can automatically find all references and replace the imports automatically according to your new file structure. I think it is the exactly for what you are searching for.

DNN Module Import file

I'm making a module to import CODA files. It is a Belgian banking standard. I have seen around on the internet, and as of now, there is no existing module for DNN. There are snippets here and there and there's ODOO, but I need it in DNN.
I'm not new to programming, but I am however new to web dev. I am trying to first import the file and then parse it. However, I can't seem to find any straightforward way of importing it. I tried to see the code here but was not able to adapt it for my need.
How to parse a text file with C#
Any help is appreciated.
You probably will need to create your own module to handle such specific requirements. There are tutorials out there, but I'd start by either create a simple module at Host > Extensions > Create new extension within DNN itself.
Or use the Christoc's Module Template.
A third but more ugly solution would be to create a standalone aspx page and iframe it.

What are the required folders to start using Ext JS 6?

Ext JS 6 contains 37,903 items that total 504 MB.
Here is the content of the package:
I need to learn which files (white entries) & folders (blue entries) are required in order to use Ext JS 6 without using Sencha Cmd.
p.s. I am not using dynamic loading. I always import ext-all.js and theme-X-all.css files which are located under the build folder.
you really should try to use Sencha Cmd, it reduces your app size and the number of files significantly.
However, If for some reason you don't want to use it, then it is safe to delete the build folder and the build.xml file.
If you are using ExtJS classic then you should keep the classic folder, otherwise delete it. The same goes for the modern folder.
You can also delete the cmd and examples folder.
You won't need the LICENSE file and the licenses folder, however, you should keep it for legal reasons.
Also, delete the Readme, release-notes, templates, sass and welcome files and folders.
You won't need those if you are not using Sencha Cmd, but then again, I advise you to use it, it does a lot better job at creating a nice and clean build of your app.
Sencha has a great getting started guide located here:
https://docs.sencha.com/extjs/6.0.2/guides/getting_started/getting_started.html
This assumes you have sencha CMD which is only available if you purchase a license (not GPL version). With sencha CMD, it automatically extracts the files you need when you run "Sencha App Watch".
If you don't have a commercial license it's best to link to the full sencha library that has everything include in one file. If you are starting out I recommend you use the debug and commented version so you will see your errors better. You can find a link to directions to do that here:
https://docs.sencha.com/extjs/6.2.1/guides/other_resources/extjs_faq.html
(and scroll to "How can I build an application without Sencha Cmd?")
I understand your concern seeing tens of thousands of files. Sencha ExtJS has a pretty steep learning curve but once you learn it there are big pay backs in productivity. All those files really help in debugging. Other libraries just cram them all together and when things don't work you are left without a clue.
HTH's

What is the expected collaboration workflow with Sencha Architect?

I started a trial of Sencha Architect, and the more I use it more questions come to my mind for its actual feasibility usage in a development environment, one of the bigger questions I have is
In an environment that you can't edit the individual files in different editors, how can multiple people collaborate in developing different parts of a site, for example
app/models|components|views/Model1.js <- In charge of developer one
app/models|components|views/Model2.js <- In charge of developer two.
In a regular environment you could use git, for example, to distribute each file but in architect, you are not expected to edit files manually (which sucks because features like profiles are not exposed in architect). If you do edit them manually, it will cause problems or it may overwrite your code back to whatever data is on the project file so I am wondering what is the proper, or expected collaboration workflow with Sencha.
Having read the above posts, I still can't believe that keeping Sencha
metadata files in code repository and generating ALL JavaScript from metadata is suitable for big projects.
The idea of Sencha Architect is to keep the code not in javascript files, but in JSON metadata, and whenever you need to edit a JavaScript code, you have to use IDE and edit metadata. Phil Strong said "We ask that you continue to use Architect as your editor and doing so with 20 engineers is perfectly safe using Git or SVN.". Of course this workflow is very profitable for Sencha, it forces 20 people to use a licensed Sencha Architect, because to change a single line of JavaScript code the developer must use Sencha Architect.
When two people edit the same file, IDE updates metadata. Then they check-in the file into a code repository, and one of them has to resolve conflicts, so the developer has to merge two metadata files, not JavaScript files.
The whole idea of not letting developers to edit JavaScript unless they use Sencha Architect is counter-productive, because the same person can be using his favorite IDE for both Java and JavaScript development, or Python and JavaScript. Doing both client and server programming in the same IDE is faster than switch between two IDE's. The reality of a big project is that you have multiple teams around the globe who work with different IDE's, you also may have a short-term project implemented by a contractor who also has his favorite IDE.
ExtJS is a well designed framework, you don't need SenchaArchitect to modify a single line of JavaScript code.
When coding in JavaScript, I save my JavaScript file and refresh browser, and see the changes immediately. Sencha Archtect adds and additional step, it requires you to publish
javascript (generate JavaScript from metadata), and the bigger the project is, the longer is delay. Often I have to modify JavaScript files in production, sometimes changing a single line fixes the problem, again, I have to use Sencha Architect to re-generate this single line from metadata.
I use Sencha Architect for quick prototyping only, then check-in generated files into code repository and continue to edit JavaScript manually. With this approach I can use a version control system to see the history of JavaScript. If I checked in JSON metadata into
a VCS, then I would not have the history of JavaScript, I would have the history of JSON metadata which is counterintuitive.
I think that having metadata for GUI form is OK, but the limitation that MVC controller level has also to be generated from metadata is not OK.
While I appreciate very much Sencha's effort in creating useful and full-featured dev environment I don't think Sencha Architect is quite ready for relatively big projects and teams of developers.
I original Architect software very useful for quick prototyping and designing complex UI structures, but then again - after you figure out the way your UI elements will lay down in JS file - often it's easier and faster to copy-paste existing JS code.
I don't think this is the answer you were looking for, I just wanted to share my thoughts.
When I had searched for this same topic, I had found that it is the metadata/ directory that is the important meat of the project, and that all of the components are separated out into their own metadata files. This, along with the root level project files, is probably the important part for version control. The app/ is regenerated on save and probably can be excluded from version control.
The main xds project file containers more general references and will probably change less often than the metadata components. But it would change when new components are created or project/app level settings are modified.
Ideally, if you just check in the root files and the metadata folder, it should just work.
Working in a team with source/version control is quite easy with Sencha Architect. An Architect project is all enclosed in a project directory. Inside it's made up of n parts
project file - consists of a small amount of data used by Architect to open and maintain your project. It's the single file you can double click to open it
metadata directory - consists of the files that describe all the pieces of your project. Each class (controller, view, model, store, resource) has it's information stored in it's own file.
app directory - consists of the src of the project you've created. A javascript file for each class.
other root files - an app.html and app.js which is the launchpad for your application and what get's run when you preview your application. This is also where your packager.json, app.json would go.
The point of me describing all of this is to show you that the files generated by Architect are pretty much identical to what you would have created in your favorite editor by hand. The only additional information is the metadata and the project file. The metadata is all JSON.
FOR NOW!!
We ask that you continue to use Architect as your editor and doing so with 20 engineers is perfectly safe using Git or SVN. When a dev makes a change it changes both the metadata and the app for those files.
I asked the same question to Aaron from Sencha in a private message. He suggested to check in the entire project structure including app and metadata.
It works, we did one flow in our team.

Resources