Lenguaje Dart de Google

   Vamos a empezar a ver una serie de artículos y/o tutoriales sobre el lenguaje de programación de Google, llamado Dart. 



     Es un lenguaje basado en html5, para la creación de aplicaciones web de una sola página o SPA (Single Page Application), pero también para aplicaciones de servidor. Estas aplicaciones de servidor son capaces de ejecutarse desde linea de comandos, sin necesidad de interfaz web. 
    Podemos decir que Dart es un lenguaje de propósito general, ya que sirve tanto para la web como para creación de servidores o pequeñas herramientas de linea de comandos. Y por supuesto es tan válido para implementar juegos html5 como el javascript. 
Dart tiene su propia máquina virtual, que por ahora solo está implementada en el chrome y chromium. Pero tiene un compilador que transformará el código Dart a código javascript, llamado "dart2js", y tambien tenemos uno mas moderno y modular llamado "dartdevc", con lo que podrás ejecutar tus aplicaciones sobre cualquier navegador compatible html5.
  Por lo tanto, chrome el código Dart sería capaz de arrancar directamente, sin previa transformación a javascript. De hecho, el Dart es más rápido que javascript, pero por ahora google, solo lo ha implementado en Chrome.
  Todas las herramientas Dart, de las que iremos hablando en posteriores artículos, las podéis encontrar en la página de instalación.  Hay varios métodos para instalar el Dart. No nos vamos a parar aquí para ver como instalarlo, ya que está muy bien explicado en la página de instalación.

   En cuanto al entorno IDE a utilizar para el desarrollo, hay varias herramientas que el equipo de Dart recomienda y que puedes encontrar aquí


   Principalmente la gente de Dart recomienda el WebStorm, aunque yo personalmente utilizo el Visual Studio Code, que está entre las 3 principales que recomiendan, y en la que van a estar basados los ejemplos que vayamos viendo en los artículos.
      Para crear un proyecto Dart, lo puedes hacer manualmente, es decir, crear el directorio principal de la aplicación e ir creando dentro de éste las diferentes carpetas, archivos, etc. Hay unas normas de facto, ya creadas para esto. Pero además, para cada tipo de proyecto(web, consola, servidor, etc, ...) se sigue unas estructuras de carpetas algo diferentes. Por eso, se ha creado una herramienta de linea de comandos llamada stagehand,que sigue estas normas. Además, esta herramienta es que también utiliza el entorno webstorm que ellos recomiendan. Una vez que hallas instalado el dart en tu equipo, la herramienta stagehand la podrás instalar con el comando

 pub global activate stagehand

  Os preguntaréis que es el comando pub. Pues al igual que tenemos Npm para nodejs y javascript, Dart tiene a pub como la herramienta de gestión de paquetes. Y el repositorio de paquetes se encuentra en  https://pub.dartlang.org.  
   Y concretamente la herramienta stagehand, si la buscáis en este repositorio, se encuentra en: 

https://pub.dartlang.org/packages/stagehand

Si os fijáis en esta página hay una sección que nos indica que plantillas de proyectos son las que puede utilizar stagehand. 
           

Si os fijáis, una de las plantillas es web-angular. Si, como lo oís. El framework Angular también está implementado en Dart, y se integra con éste, de una manera mucho más limpia que el Angular para Typescript. Los proyectos Dart-Angular los veremos mas adelante en otros artículos.

Una vez instalado la herramienta stagehand, vamos a crear como ejemplo, nuestro primer programa de consola al estilo "hola mundo". Primero creamos la carpeta donde queremos alojar todo el código y recursos de nuestro proyecto. Una vez creada, desde la consola de comandos, nos colocamos dentro de dicha carpeta y ejecutamos el comando.

stagehand console-full


La salida será algo como esto: 


   Vemos que nos pone un mensaje que indica que tenemos que arrancar pub get. Esto es porque "stagehand" solo crea el esqueleto de la plantilla, pero no se trae los paquetes.  Para esto tienes que arrancar el comando "pub get".
     Si ejecutamos este comando la salida será algo como: 


Carguemos ahora el proyecto en el Visual Studio Code: 


Asegúrense además, que en visual studio Code tenéis instalado el módulo de Dart (Dart Code): 


El fichero de configuración del proyecto es pubspec.yaml, y como su nombre indica es un simple fichero de texto basado en formato YAML.   En este proyecto de ejemplo, este fichero contiene lo siguiente: 

    


 En este caso, al ser una simple aplicación de consola, no hace falta utilizar ningún paquete externo. Solo las librerías integradas dentro del propio lenguaje. Por eso, la linea #dependencies  está comentada. Si hiciera falta descargar algún paquete se descomentaría esta línea y se indicará debajo el paquete junto con la versión que queramos.


En este tipo de proyectos de consola, vemos se crean 3 carpetas, la "bin", donde estará el programa principal, "lib", donde pondremos el código de las librerías y utilidades que vayamos desarrollando, y "test", para la ejecución de tests como su nombre indica, pero que dejaremos para el final de la lista de artículos.
Para ejecutar esta aplicación de ejemplo, solo tenemos que ejecutar el comando:
    pub run main.dart desde la linea de comandos en el directorio principal de la aplicación:


O también desde la consola del Visual studio: 


Con el comando pub run main.dart estamos ejecutando el proyecto directamente con la máquina virtual de Dart. Pero también podemos compilarlo a javascript. Para esto vamos a crear dentro de la carpeta del proyecto, una carpeta llamada "dist". Y entonces ejecutamos el comando: 

                             dart2js --out=dist/main.js bin/main.dart --minify


Vemos que nos ha creado tres ficheros: "main.js", "main.js.deps" y "main.js.map". El principal fichero resultado de la compilación a javascript es "main.js". 

Hasta aquí este primer artículo donde hemos visto una introducción al lenguaje Dart de Google. En el siguiente artículo seguiremos con un proyecto web básico.

 El video demostrativo de este ejemplo, lo puedes ver en:

 https://www.youtube.com/watch?v=Zf6Og7ia9o0

  Saludos y hasta pronto...

Comentarios

Entradas populares de este blog

Angular, css y Sass

Angular y generación automática de documentación de código.

Desplegar una aplicación Angular sobre el servicio de hosting de Firebase