Best practices: SmartClient development with IDEs and TypeScript / SmartClient project setup

[Blama]

Hi Isomorphic,

coming from the Java world, I've always liked the existence of GWT/SmartGWT and started our development with it.
Nowadays, with TypeScript and a lot of IDE support (did not test this yet, @All: Any SmartClient 12 + TypeScript IDE suggestions welcome) switching to SmartClient seems an option to me.
Especially if you consider annoying recompile issues in SuperDevMode like this one.

As we are going to have a separate management project based on the data of our current application, but not included in our current application coming up eventually, I wanted to collect best practices, from you and the community beforehand.

• In Java you have files with classes and imports, which makes separation easy. How do you do this in JS? I looked at the Debug Modules of yours and it seems you have your source in single files like DataBoundComponent.js or Tree.js and copy those together.
  • Is this also the suggested way of doing things in application development?
  • How does one do package structures?
  • Is there a need of defining parent classes before classes extending them, or is having them in the same js file enough?
• Any tips regarding the selection of a JS minifier, best with source map support?
• Any tips regarding the "how to develop"? Is having httpd directly on the git repository a good idea (I can't see why not)?

Do you have docs on this? Something like the Quick Start Guide, but with more focus on tooling?

I'd really like to hear your suggestions and the ones from the community here.

Thank you & Best regards
Blama

[Isomorphic]

We do not follow the Java one-class-per-file convention in JS as we feel this forces very closely related code to be placed in separate files.

We would recommend simply following the convention of putting closely related code in the same files.

There are no package structures other than what you may choose to create via ordinary directories.

Parent classes must be defined before children. However, since a class definition is just ordinary code that runs like any other code, it's straightforward to load the code in another order if you need to.

We have never looked through available minifiers since we have our own in-house tools with specialized functions.

We do not use httpd directly on the source repository, we have each developer run an environment hosted on their checkout.

VSCode is a popular editor amongst our team. There's not really a second-most-popular editor.

[pavlo]

Hi, here are my thoughts about how to use smartclient together with typescript.
- install vue cli and create a project with typescript support and without all other features. It will give us a project structure, build scripts etc.
- By default vue cli generates App.vue application file and Helloworld.vue component file.
- Delete Helloworld .vue
- rename App.vue to App.ts and remove from file "template" and "style" blocks. ClassApp in the App.ts should implement a method "render". It 's our entry point.
- fix imports in main.ts.

So, at the current moment we a typical vue application where we a going to render HTML programmatically (without template blocks)
Now it's time to add smartclient.(download and unzip it)
- copy SmartClient_v120p_<date>_LGPL\smartclientRuntime\isomorphic to <our vue app>/public folder. It's a folder for static assets.
- add smartclient scripts loading to the index.html

<SCRIPT>var isomorphicDir="<%= BASE_URL %>isomorphic/";</SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_Core.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
<SCRIPT SRC="<%= BASE_URL %>isomorphic/skins/Enterprise/load_skin.js"></SCRIPT>

- For App.ts add reference to the smartclient.d.ts

/// <reference path="../public/isomorphic/system/development/smartclient.d.ts" />

- create smartclient button in the "render" method of App.ts. So code should look like

/// <reference path="../public/isomorphic/system/development/smartclient.d.ts" />
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class App extends Vue {
render () {
let btn = isc.Button.create({
title: 'Hello',
click: () => {isc.say('click'); return true}
})
}
}

now Hello button should be on the page.
I guess vue-router could be used as well. All routes should be configured to the App component and information about route can be extracted from the property this.$route

One thing what I do not know how to fix - it's how to disable validation of file "smartclient.d.ts".

[pavlo]

BTW, does someone know how to disable validation of 'smartclient.d.ts' file? Because it prints a huge amount of errors to the console and I do not see where are my issues.

Here is part of my console

ERROR in /projects/other/vuesmart/public/isomorphic/system/development/smartclient.d.ts
148370:27 Cannot find name 'ValidatorConditionCallback'.
   148368 | * @default null
   148369 | */
 > 148370 | condition: StringMethod | ValidatorConditionCallback;
          |                           ^
   148371 |  
   148372 | /**
   148373 | * Callback, function, or JavaScript expression called after every validation (i.e. call
ERROR in /home/corsair/projects/other/vuesmart/public/isomorphic/system/development/smartclient.d.ts
148384:24 Cannot find name 'ValidatorActionCallback'.
   148382 | * @default null
   148383 | */
 > 148384 | action: StringMethod | ValidatorActionCallback;
          |                        ^
   148385 |  
   148386 |  
   148387 |

As you can see last line is 148387 - on my PC it takes around a one minute to validate such big file.

[dvekeman]

Hi pavlo
Did you already try `skipLibCheck` in tsconfig.json:

 {   "compilerOptions": {     ...     "skipLibCheck": true   },

[Isomorphic]

Thanks for posting this information.

Just so you're aware, VSCode, Eclipse, Visual Studio, and Intellij all have TypeScript support and none exhibit the long delays you're talking about, so they might be better choices as editors.