Este documento describe la humanización de JavaScript con TypeScript para Dynamics 365 Customer Engagement. Se explica la adopción de TypeScript como lenguaje de programación en el cliente, el establecimiento del entorno de trabajo local y la implementación de CI/CD mediante pipelines y releases para automatizar la compilación y publicación del código.

1. Junio 2020
Humanización de JS
con TypeScript para
D365CE
• Fernando Bo Gimenez

3. About Me
• Fernando Bo Gimenez
• Senior consultant at Axazure.
• Email: fernando.bo21@Gmail.com
• LinkedIn:
https://www.linkedin.com/in/fernando-bo
• Twitter: @FernandoBo3

4. Agenda
• Adopción de TypeScript como nuestro lenguaje de
programación(Client Side)
• Implantación de nuestro entorno local de trabajo.
• Implementación de CI (Pipelines and Releases)

5. Por que TypeScript?
• Sintaxis:
Lenguaje Similar a C#.
Necesario para Crear PCF.
• Tipada:
Al ser un lenguaje tipado
ofrece muchisimas correcciones
de sintaxis y de programacion
en el mismo momento de
escritura del codigo

6. Entorno Local de Trabajo
• Requisitos:
• Node.js (https://nodejs.org/en/download/).
• Visual Studio Code. (Se puede usar VisualStudio tambien)
• Pasos:
1. Crear carpeta local
2. Abrir Node.Js command prompt
3. Npm Init  Crea el Package.json
4. Npm Install.
5. Npm install typescrtip  node_modules
6. npm install uglify-js.
Resultado:

7. Entorno Local de Trabajo
• Estructura de carpetas:
• TypeScript/src  aqui pondremos todo el código fuente de TS.
• JavaScript/src  aquí pondremos todo el código fuente de JS.
• NOTA: Solo lo crearemos para comparar.
• Visual Studio Code:
1. Crear archivo tsconfing.json
2. Crear archivo TS: en el ejemplo contactEntity.TS
3. Commando tsc  Convierte nuestro TS en un JS
4. Commando uglifyjs  Minifica nuestro JS

8. Implementación CI/CD
• Pipelines & Releases
• Pipeline: crearemos un pipeline
que realizara todas las acciones
que hemos hecho nuestro
entorno local y deje un paquete
listo para actualizar el Recurso
Web.
• Release: crearemos un reléase
para automatizar las
publicaciones de código JS a
D365CE.

9. Pipeline
• Tipos de tareas que utilizaremos:
• Npm
• Copy Files
• Command Line
• Grunt  multiple Uglify
• Publish Artifact
Así como en nuestro entorno local de trabajo lo hemos hecho, debemos
implementar prácticamente las mismas operaciones.
Comencemos entonces a crear nuestro pipeline.
1. Task Npm: no tiene mas misterio que agrega la cajita “npm” y en el campo
command seleccionar Install.

10. Pipeline
2. Copy Files: tendremos que mover ficheros de configuración de nuestro repo a
el servidor virtual donde se compilara nuestro código. En mi ejemplo siempre
muevo los ficheros al $(System.DefaultWorkingDirectory) que es donde luego
haremos la compilación. Los ficheros que tendremos que copiarnos son:
• package.json
• javascriptDeploys.json (Fichero para posterior deploy)
• tsconfig.json
• gruntfile.js
• **.ts (Todos los ficheros TypeScript que tenemos)

11. Grunt
Grunt es un multiejecutor de tareas en una sola tarea, en este ejemplo lo necesite
implementar para ejecutar por cada JS el comando “uglifyjs” mencionado
anteriormente.
Elegí este por que me ha parecido el mas simple y comprensible ya que hay
muchos ejemplos y documentación. Este es mi ejemplo.
module.exports = function (grunt) {
grunt.initConfig({
uglify: {
files: {
src: 'D:/a/1/a/dist/*.js',
dest: 'D:/a/1/a/distmin/', // destination folder
expand: true, // allow dynamic building
flatten: true, // remove all unnecessary nesting
ext: '.min.js' // replace .js to .min.js
}
},
watch: {
js: { files: '$(Build.ArtifactStagingDirectory)/dist/*.js', tasks: [ 'uglify' ] },
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', [ 'uglify' ]);
};

12. Pipeline
3. Command Line: el siguiente paso consiste en ejecutar todos los comandos
que hemos ejecutado en nuestro entorno local, agregando unas ejecuciones
de instalación especificas para Grunt:
• npm install typescript
• npm install grunt --save-dev
• npm install grunt-cli --save-dev
• npm install grunt-contrib-watch --save-dev
• npm install grunt-contrib-uglify --save-dev
• tsc --outDir $(Build.ArtifactStagingDirectory)dist -p
$(System.DefaultWorkingDirectory)TypeScript **.ts

13. Pipeline
4. Grunt: esta tarea simplemente ejecutara el script js anteriormente
mencionado. En la opción Grunt Task tendremos que poner el nombre de la
tarea que hemos asignado en el JS.
5. Publish build artifact: esta tarea crea un artefacto
que que utilizaremos en nuestro reléase.

14. Release
Para finalizar, solo nos queda publicar los javascripts en los correspondientes web
resources.
Utilizo las Power DevOps Tools para hacer la publicacion, las únicas tareas que
utilizaremos de este set son:
• Power DevOps Tool Installer
• Update Web Resources (Preview)
Para la tarea “Update Web Resources”, utilizaremos el fichero
javascriptDeploys.json.
Por ultimo indicamos la
carpeta de donde recogerá los
JS para publicar.
Importante: los webresources
Tienen que estar creados antes
de la ejecución.

15. ¡Muchas gracias!