Configuration d’un projet Angular 2.1.0 (version finale) avec Webpack

Avec l’automne, la version finale de Angular 2 est arrivé. Actuellement en version 2.1.0, le Framework JavaScript de Google offre beaucoup de fonctionnalités et mets le développement du stack Front-End des applications JavaScript sur un autre niveau super agréable, mais surtout fun.

Après avoir travaillé avec Angular 2 dépuis la version RC 2, j’ai suivi pas mal de changements dans le développement du Framework pendant les derniers mois.

Dans cet article-ci j’aimerais bien partager quelques conclusions pour un setup de base d’un application Single Page Angular 2.1.0. J’utilise le module bundler Webpack, NPM, le compiler de TypeScript et je montre le rechargement en live et comment on peut faire source mapping pour debugger l’application Angular 2 facilement dans un navigateur comme Chrome. En gros j’aimerais bien donner un aperçu de base aux questions suivants :

  • C’est quoi WebPack
  • Comment utiliser WebPack dans un appli Angular 2
  • Comment peut-on transpiler un appli en mode développement et production

Tout d’abord il faut créer la structure d’un projet, et l’ouvrir dans un editor de choix – ici Visual Studio Code, un très bon editor gratuit de Microsoft.

01-projectsetup

Les fichiers les plus importants sont package.json, tsconfig.json et webpack.config.js. Dans ceux fichiers-ci on retrouve la logique de configuration de ce projet-là.

{
  "name": "angular2-starter",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --progress",
    "build:prod": "webpack -p --progress",
    "postinstall": "typings install",
    "serve":"webpack-dev-server --inline --progress"
  },
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.24.1",
    "ts-loader": "^1.0.0",
    "typescript": "^2.0.7",
    "typings": "^1.5.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }
}

package.json est utilise pour charger les libraries dépendantes pour l’application. C’est conseillé de télécharger une version spécifique d’une bibliothèque pour ne pas briser l’application un jour. Néanmoins, ici j’utilise la dernière version des bibliothèques de la journée de la création. Ici on configure aussi les modes dev et prod.

{
    "compilerOptions": {
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

tsconfig.json est important pour configurer TypeScript. Alors que c’est possible de développer un appli Angular 2 aussi avec JavaScript par exemple, on peut se vraiment faciliter la vie en utilisant TypeScript au lieu de JS.

On met le target de la transpilation sur es5, pour permettre aussi aux vieux navigateurs d’utiliser notre application. En plus il faut permettre quelques features de es6 de fonctionner dans notre TypeScript codage.

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {test: /\.ts$/, loader: 'ts'}
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

webpack.config.js, c’est le cœur de notre application, on configure WebPack avec.

En gros, WebPack c’est un module bundler, donc un outil qui permet de mettre le codage JS d’un server sur la côté du client. C’est-à-dire, WebPack peut faire pas mal de choses, et est riche de plugins. Ici on l’utilise pour :

  • Ajouter un lien vers bundle.js dans le index.html
  • Transpiler notre TS et Uglify notre JavaScript
  • Source Mapping (Map Js to TypeScript, pour debugger)
  • Live Reload

Au-dessous se trouvent les fichiers TypeScript et HTML qui sont utilisés par notre application. On utilise un main.ts pour bootstraper l’appli, un index.html, un app module et un premier component. Pour savoir plus autour de Angular 2, je conseille le Quick Start sur le site Web de Angular.

import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { AppModule } from './app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8" />
        <title>Angular 2 Appli</title>
    </head>
    <body>
        <my-app>Chargement...</my-app>
    </body>
</html>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations:[
        AppComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }
import { Component } from '@angular/core';

@Component({
    selector:'my-app',
    template:`
        <h1>Mon Appli</h1>
    `
})
export class AppComponent {
    
}

Avant que ça fonctionne, il faut exécuter quelques commands de NPM et WebPack dans notre console :

  1. npm install
  2. npm install –save-dev typescript
  3. npm install –save-dev typings
  4. npm install –save-dev webpack
  5. npm install –save-dev ts-loader
  6. npm install –save-dev html-webpack-plugin
  7. npm install –save-dev webpack-dev-server
  8. npm run build (npm run build:prod)
  9. webpack –progress
  10. npm run serve

Ben, c’est tout 😉 Depuis récemment il y a aussi le Angular CLI, qui peut faciliter le setup de base d’un appli Angular 2. Néanmoins, le CLI est encore en version Beta en ce moment.

De toute façon Angular 2 Rocks !!

Intellisense pour AngularJS et JQuery avec Visual Studio Code

Pour utiliser intellisense dans le VS Code il est recommandé d’utiliser les fichiers TypeScript (.tsd) qui se trouvent dans un package npm. Voici le codage (Console + NodeJS) pour l’ajouter dans son projet.

npm install tsd -g
# cd to your project folder
tsd query -r -o -a install angular jquery

textarea avec tinyMCE et HTML character count

Peut-être vous cherchez la fonctionnalité de compter les caractères dans votre WYSIWYG editor, où vous voulez savoir comment mettre en place un bon editor comme le tinyMCE dans votre projet ASP.NET. Alors, cet article est pour vous.

tinyMCE est probablement le meilleur editor WYSIWYG sur le marché. En plus il est distribué sous la licence Open Source LGPL 2.1 et est donc gratuit à utiliser dans votre projet commercial !

Ensuite, un character counter ou compteur de caractères. D’abord il faut se poser la question : est-ce que un compteur de caractère dans un control rich text WYSIWYG fait du sens ?

Le problème, c’est que un tel control ajoute toujours du HTML au fond. Si ce n’est pas grave, voici la solution comment implementer dans un projet ASP.NET Web Forms le tinyMCE rich text edior avec un compteur de caractères.

tinyMCE

D’abord il faut considerer qu’on s’occupe de deux scènarios différents, l’editor est un control JavaScript et est donc << rendered >> sur le client d’un autre côté ASP.NET Web Forms travaille sur le serveur et offre des controls uniquement pour Web Forms. Néanmoins on peut utiliser le control TextBox de WebForms pour créer un tinyMCE WYSIWYG editor.

Voici l’HTML :

<h1>Tiny MCE Text Editor</h1>

<asp:TextBox ID="TextBox1" runat="server" CssClass="tinymce"></asp:TextBox>

<div style="float: right;">
   Total Characters(including trails): <span id="totalChars">0</span><br />
</div>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /

…et le JavaScript :

<%-- tinyMCE --%>
<script>

 function setCnt(editor) {
    var content = editor.getContent({ format: 'raw' });
    var count = content.length;
    $("#totalChars").html(count);
 };

 tinymce.init({
    selector: ".tinymce",
    theme: "modern",
    encoding: "xml", // decode html tags
    forced_root_block : false,
    setup: function (editor) {
       editor.on('change', function (e) { setCnt(editor) });
       editor.on('keyup', function (e) { setCnt(editor) });
    }
 });

</script>

…enfin, le code behind :

namespace tinyMCE
{
    public partial class _Default : Page
    {

        protected void Button1_Click(object sender, EventArgs e)
        {
            var message = HttpUtility.HtmlDecode(TextBox1.Text);
        }
    }
}

this en C# n’est pas this en JavaScript

this n’est pas this, au moins dans le monde de la programmation. Dans cet article je jette un coup d’œil sur les différentes possibilités d’utilisations du mot clé this en C# et en JavaScript.

En C# (ou même en Java ou C++) le mot clé this est utilisable dans n’importe quelle méthode d’une classe et fait une référence à l’instance actuelle de cette classe. C’est-à-dire, this représante une classe et peut être utilisé pour assigner des valeurs ou exécuter des méthodes d’une classe. En plus this est souvent utilisé pour créer des indexer ou méthodes d’extension.

Voici quelques exemples pour this en C#:

  • Qualification de membres (privat) par des noms similaires p.ex. dans un constructor d’une classe Person :
public Person(string name, int age)
{
   this.name = name;
   this.age = age;
}
  • Passage d’un objet comme paramètre à d’autres méthodes :
CalcAge(this);

Dans le langage de JavaScript l’utilisation du this est vraiment différent, ce qui peut causer des difficultés parmi les dévelopeurs qui sont habitués à un autre langage comme le C# ou également Java ou C++.

JavaScript est (un peu) différent.

Alors que le JavaScript est un langage orienté objet, le concept est un autre que celui en C#. JavaScript, un langage de Script, utilise une orientation objet prototype. Un objet en JavaScript est un simple système de key-value stockage et ressemble beaucoup à un Dictionary – connu en C#.

  • Un objet en Javascript:
// Créer un objet vide
var person = {};

// Ajouter une property
person.name = "Tino";
person["name"] = "Tino";

…et ou est-ce que se trouve le this finalement?

Le mot this est toujours lié à une fonction en JavaScript et avec cela son scope. Dans ce langage de script on n’utilise pas des classes << traditionnels >>. Il y a le concept de fonctions de constructor (constructor function), qui permettrent de créer des instances avec le mot clé new.

function Person(name){
   this.name = name;
};

// utilisation
var p1 = new Person("Tino");

En JavaScript this est souvent utilisé avec p.ex. that (un mot, libre choix) pour avoir une copie d’une fonctionnalité dans un fonction.

var magic = {
   i: 0,
   foo: function(){
      var that = this;
      var setNumber = function(){
        that.i = 42;
      }
      setNumber();
      console.log(this.i);
   }
}

magic.foo();

JavaScript n’est pas C#, mais c’est définitifement très performant.