Comment bien se lancer dans le monde du javascript avec Dojo ?

Version imprimable

22/08/2018, 09h53
skerdreux

Comment bien se lancer dans le monde du javascript avec Dojo ?

Bonjour à tous,

Je vous explique mon "problème" :
je suis développeur C# plutôt orienté client lourd / dev API et je dois "m'ouvrir" au langage Javascript dans le cadre particulier des systèmes d'informations géographiques (SIG).

Pour moi le javascript est un monde obscur 8O où quand ça ne fonctionne pas on ne sait pas vraiment pourquoi (l'avantage du C# c'est que quand ça compile on a des chances que ça se lance un peu).
J'ai aussi l'impression que construire une interface graphique c'est tout de suite compliqué et on peut rapidement faire du n'importe quoi et cela va peut être marché de travers (c'est l'impression que j'ai et j'espère que j'ai totalement tort).

Pour en revenir à mon cas je dois être amené à développer en utiliser DOJO (là dessus je n'ai pas le choix).
Comme beaucoup de monde j'ai suivi des tutoriaux HelloWorld mais au final on n'apprend pas forcément grand chose quand il s'agit de vraiment créer quelques chose et pas afficher uniquement un simple message.

Donc voilà mes questions :

- existe il un tutorial pour réfléchir javascript ?
je m'explique : comme indiqué je suis dev c# et donc j'ai toujours dans ma tête mon pattern MVVM avec ma petite vue, mon viewModel et mon model et tout me paraît simple logique. En JS j'ai tellement l'impression que tout est mélangé (et les exemples me le font penser comme par exemple celui là : https://developers.arcgis.com/javasc...point-features)

- existe il un IDE permettant de développer facilement ?
je m'explique : j'utilisais Visual studio 2017 pour le C# et par exemple l'indentation était réalisé automatiquement (j'utilisais en plus Resharper). là avec VSCode (je n'ai plus VS2017) je passe plus de temps à mettre en forme (je suis maniaque) qu'à comprendre ce que j'écris. c'est le genre de petit détail qui m’irrite fortement.

- Peut-on tout faire avec Dojo où est-il nécessaire d'utiliser d'autres frameworks ?
je m'explique : comme beaucoup j'ai l'impression que le JS est un nid à framework qui sont tous meilleurs, plus rapides, etc... (un peu comme les SSII qui sont toutes leaders...). moi ce que j'aurai besoin c'est de développer des petits widgets/composant pas de développer une application web multi pages. Par exemple j'aurai une carte avec un fond de plan et des couches vectorielles et j'aurai besoin de développer un widget pour afficher un tableau avec les attributs, un widget pour faire quelques dessins, bref des choses "simples".

- enfin est c'est ce que vous avez des conseils pour pas se perdre dans le développement JS ?

Je me doute que certains questions ont plus ou moins était abordé (notamment l'IDE) mais je souhaitais avoir des avis un peu plus orienté vers mon cas.
Je ne souhaite pas devenir un expert JS qui va même coder des applis desktop avec Electron mais devenir bon dans mon domaine (développement JS avec Dojo sur le SIG).

merci d'avance pour vos réponses (et je suis ouvert à toute discussion !)
Sylvain.
22/08/2018, 11h23
bretus

Salut,

Faisant de moins en moins de traitement SIG lourd et de plus en plus d'application web, je vais tenter une réponse.

Attention quand même : Je ne suis pas un expert JS, je suis plus sur le back en veillant à avoir un cadre pour que le front soit maintenable. En bref, je m'assure plus qu'on puisse éviter et corriger les bugs que d'être à la dernière mode JS sur tous les composants ;)

Citation:

Envoyé par skerdreux

- existe il un tutorial pour réfléchir javascript ?

Il n'y a pas qu'une façon de réfléchir en javascript... Si tu prends javascript sans cadre (fixé par des règles ou un framework), tu as une liberté absolue et ça devient vite le merdier (symptôme : quelques gros fichiers JS où tu es incapable d'avoir une vision d'ensemble).

Si tu veux te faire une idée des différentes façons à la mode de penser en JS, le mieux est de suivre les tutorials des frameworks à la mode (AngularJS, ReactJS, etc.). Dans ton cas, tu peux aussi regarder l'évolution dans la façon d'organiser le code dans OpenLayers entre les versions 2, 3, 4, etc.

Tu verras que ça bouge assez vite.

Citation:

Envoyé par skerdreux

- existe il un IDE permettant de développer facilement ?

Je suis assez content de visual studio code. L’auto-complétion fonctionne bien sur JS et tu as logiquement de quoi reformater le code. Sinon, tu prends un outil à part (JSHint?)

Citation:

Envoyé par skerdreux

- Peut-on tout faire avec Dojo où est-il nécessaire d'utiliser d'autres frameworks ?

La dernière fois que j'ai entendu parler de Dojo, c'était il y a ~10 ans, en bidouillant avec ArcGIS server. Je pourrais pas te dire s'il y a toutes les fonctionnalités dont tu auras besoin dedans mais ça à l'air assez riche.

Citation:

Envoyé par skerdreux

Par exemple j'aurai une carte avec un fond de plan et des couches vectorielles et j'aurai besoin de développer un widget pour afficher un tableau avec les attributs, un widget pour faire quelques dessins, bref des choses "simples".

Tu risques surtout de manipuler du openlayers... Avec un peu de chance, le code correspondant pourra être indépendant ou presque de Dojo.

Citation:

Envoyé par skerdreux

- enfin est c'est ce que vous avez des conseils pour pas se perdre dans le développement JS ?

- Apprendre à se servir de npm (ils parlent de bowser sur dojo mais c'est un peu mort)
- Apprendre à organiser son code (séparer en plusieurs fichiers et assembler le tout avec un webpack, grunt ou gulp)
- Apprendre à faire des tests avec mocha ou autre
- Choisir un cadre et s'y tenir en particulier pour l'organisation du code (requirejs, CommonJS, etc.) et pour les bibliothèques utilisées
- Faire une bibliothèque séparée quand on fait des choses compliquées (carte avec de nombreuses interactions) et s'arranger pour pouvoir la tester en dehors du projet principal (dossier "example")

(ce dernier point permet de suivre progressivement les modes javascript, en particulier sur l'organisation du code, tout en profitant des outils nodejs pour écrire des tests, récupérer tes dépendances et construire ton projet)

Dans ton cas, je te conseillerais bien de commencer par :

- Apprendre à faire une carte simple avec openlayers (ils ont pas mal d'exemples)
- Apprendre à utiliser les bibliothèques ArcGIS (ils ont eux aussi pas mal d'exemples)
- Apprendre à utiliser les fonctionnalités de bases de dojo
- Te faire un mini projet qui fait appel aux trois composants (une couche, un graphique, etc.)
- Nettoyer le mini-projet pour avoir quelques choses de propre (i.e. tu peux livrer un "dist" ou un "public", tu peux versionner, tu peux facilement ajouter une fonctionnalité, etc.)
22/08/2018, 11h46
skerdreux

Merci beaucoup pour ta réponse ! ça me servira de base.
Après étant pro ArcGIS (non pas par conviction mais parce qu'actuellement je n'ai que des projets ArcGIS depuis plusieurs années) je n'ai hélas pas le choix sur le Dojo (je ne suis vraiment pas fan de la syntaxe).
De même je ne vais pas trop regarder du côté d'OpenLayers sauf la partie organisation du code qui pourrait m'intéresser pour m'inspirer.

Pour me répondre à moi même sur la partie IDE j'ai trouvé des plugins pour le formatage du code :
beautify et beautify css
ça permettra au moins d'avoir la même indentation partout.
22/08/2018, 17h40
Watilin
Selon, moi, les étapes difficiles à passer dans l’apprentissage de JS c’est :
- maîtriser sa nature fortement asynchone (mais il me semble qu’il y a de l’asynchone aussi en C#, non ?) ;
- accepter qu’il n’est pas parfait et connaître les pratiques pour éviter les pièges ;
- faire la différence entre ce qui se passe côté serveur et côté client ;
- optionnellement, comprendre son modèle objet, basé sur les prototypes et non pas sur les classes, mais j’ai entendu dire qu’il y a des gens qui survivent sans.
Je rajouterais quelques conseils simples :
- La console F12 est absolument indispensable. Sans elle, on développe à l’aveugle comme dans les années 90.
- Adopte le mode strict qui, entre autres, lève des erreurs quand une variable n’est pas déclarée et quand tu tentes d’écrire sur une variable en lecture seule.
- Méfie-toi de la coertion de type. Les opérateurs de comparaison == et != ne sont pas tes amis car ils font des conversions implicites. À la place, utilise la comparaison stricte === et !==.
- Vérifie toujours l’âge de la doc. Le Web est perclus de documentations JavaScript obsolètes sur lesquelles tu vas trouver des pratiques obsolètes voire dangereuses. Le MDN, avec son fonctionnement de wiki, a tendance à évoluer vite et est globalement à jour, même s’il y a des exceptions. Garde toujours un œil critique.
Pour aider au formatage il y a le très pratique editorConfig.

Et sinon, il existe un certain nombres de linteurs (JSLint, JSHint, etc.) JavaScript, certains intégrés aux éditeurs de texte / IDE, mais ils ont tendance à être très exigeants, tout ce qu’ils disent n’est pas à prendre aux pied de la lettre. Utilise-les si tu en as envie :)