Frontend

Para construír nuestro frontend utilizaremos Angular 2.

Comenzaremos instalando angular por medio de npm. Editaremos el archivo package.json para agregar las siguientes dependencias:

    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4",
    "reflect-metadata": "^0.1.10"

Y luego ejecutamos npm install

Configurando webpack

Para poder utilizar ES6 en el código de frontend utilizaremos una herramienta llamada Webpack. Webpack interactuará con babel para transpilar nuestros archivos js del frontend y ensamblarlos luego en un gran archivo que pueda correr dentro de un browser.

Instalaremos lo que necesitamos por medio de npm.

$ npm install --save-dev babel-core babel-loader babel-plugin-transform-decorators-legacy html-webpack-plugin copy-webpack-plugin raw-loader css-loader json-loader webpack

Crearemos un archivo llamado webpack.config.js en la raiz del proyecto.

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/frontend/bootstrap.js', output: { path: __dirname + '/dist/frontend', filename: 'bundle.js' }, module: { loaders: [ // load and compile javascript { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.json$/, loader: "json-loader" }, { test: /\.css$/, loader: "css-loader" }, { test: /\.html$/, exclude: /node_modules/, loader: "raw-loader" } ] }, // inject js reference bundle to index.html plugins: [ new HtmlWebpackPlugin({ template: './src/frontend/index.html', inject: 'body', minify: false }), new CopyWebpackPlugin([{ from: 'src/frontend/assets', to: 'assets' }]) ], devtool: '#inline-source-map' }

y luego editamos el archivo .babel.rc para agregar un plugin

webpack.config.js

{ "presets": ["es2015"], "plugins": ["transform-decorators-legacy"] }

Lo unico que necesitamos saber por ahora son las siguientes cosas:

  • Va a existir un archivo src/frontend/index.html con el código html de la aplicación
  • Va a existir un archivo src/frontend/bootstrap.js con el código javascript encargado de inicializar Angular2.
  • Todo va a ser transpilado y copiado a dist/frontend.

Angular 2

Una aplicación angular está compuesta de componentes. Un componente es la combinación de un template HTML y una clase componente que controla una porción determinada de la pantalla.

Comencemos con un ejemplo sencillo. Crearemos un componente sencillo:

src/frontend/app/components/app.component.js

import { Component } from '@angular/core' @Component({ selector: 'app-view', template: '<h1>Bienvenidos a {{name}}</h1>' }) export default class AppComponent { constructor() { this.name = 'Noticias UNQ' } }

Un componente estará representado por una clase, la cual debe ser anotada con un decorator (annotation) @Component. Dicho decorator especificará dos atributos:

  • selector: este es el nombre del tag html (<app-view> en este caso) donde se insertará el código del componente.
  • template: este es html que será renderizado por este componente. Podemos notar que posee un placeholder `. En tiempo de ejecución dicho placeholder será reemplazado por, en este caso, el valor del atributonamedel objeto que controla el componente (en este caso"Noticias UNQ"`)

Angular2 construíra el template html reemplazando el placeholder ` por el valor dethis.name`. Si en cualquier momento dicho valor llegase a modificarse, angular2 volverá a renderizar el template. Mas información en : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

warning::Decorators y ES6

Los decorators no forman parte de la especificación de ES6 (su especificación es aún un draft). Es por eso que debimos agregar una linea adicional al archivo babel.rc para instruír a babel de transpilarlos también.

Angular sin decorators

Es posible usar Angular2 sin decorators (vainilla ES6), pero la sintaxis se vuelve algo más pesada. Mas info en:

Luego agregaremos a nuestra aplicación dos archivos. El primero index.html es el punto de entrada a la misma.

src/frontend/index.html

<!DOCTYPE html> <html> <head> <title>Noticias</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <app-view>Loading...</app-view> </body> </html>

Es normal que sea un archivo bastante anémico:

  • no tiene ningún comportamiento especial. Lo unico que hace es delegar en angular para renderizar la aplicación (por medio del tag <app-view>
  • no incluye referencia a librería js alguna, ya que webpack inyectará las dependencias necesarias.

El segundo archivo que necesitamos es bootstrap.js. El mismo se encarga de configurar angular y de registrar los componentes que existen actualmente.

src/frontend/bootstrap.js

import 'reflect-metadata' import 'zone.js' import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import AppComponent from './app/components/app.component' @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)

Como notamos el mismo está importando nuestro componente AppComponent y registrandolo luego en la lista de componentes del @NgModule.

Transpilando y empaquetando

Invocaremos a webpack para que empaquete entonces nuestros fuentes. Lo haremos de la siguiente forma:

$  node node_modules/webpack/bin/webpack.js --progress

Una vez que el mismo termine notaremos que se habrá creado la carpeta dist/frontend/ con dos archivos:

  • bundle.js: con todo el javascript de la aplicación, listo para ser corrido en un browser.
  • index.html: con el punto de entrada html de nuestra app.

Si ejecutamos a webpack con una opción extra --watch el mismo quedará corriendo y ejecutará la tarea de transipilación y empaquetado cada vez que detecte algún nuevo cambio en nuestros fuentes.

Configurando express

Como dijimos, webpack nos generó un conjunto de archivos estaticos para nuestra aplicación web. Ahora solo debemos configurar webpack para que sirva dichos archivos en alguna ruta determinada. Para ello tocamos el index.js del backend para agregar la siguiente linea:

src/backend/index.js

//Static resources app.use(express.static(__dirname + "/../../dist/frontend"))

Luego sencillamente cargamos http://localhost:3001 desde nuestro browser.

GitHub

Como referencia dejamos el estado del proyecto en GitHub

results matching ""

    No results matching ""