Aurelia JS
Par défaut Aurelia JS ne génère par d'option de compression gzip (*.gz) ou brontli (*.br) des fichiers produits par Webpack.
Si ces fichiers existent sur le serveur Web ils sont envoyés à la place du fichier non compressé afin de gagner de la bande passant et du temps de chargement...
Sous Aurelia lorsque vous naviguez ou chargez une ressource il est bien de faire patienter l’utilisateur avec une animation bloquant l’interface.
Le composant « nprogresse » permet de faire cela.
Installer « nprogress » dans votre projet Aurelia
npm install nprogress --save
Dans le dossier « src/resources/elements » créez le fichier « loading-indicator.js » avec le script suivant :
import * as nprogress from 'nprogress';
import {bindable, noView} from 'aurelia-framework';
import 'nprogress/nprogress.css';
@noView
export class LoadingIndicator {
@bindable loading = false;
loadingChanged(newValue) {
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
}Ce code crée un composant HTML « loading-indicator » non relié à une vue (de même non), mais important une feuille de style « nprogress/nprogress.css ».
Définissez le plug-in dans le fichier « resources/index.js » en ajoutant :
import {PLATFORM} from 'aurelia-framework';
export function configure(config) {
config.globalResources([PLATFORM.moduleName('./elements/loading-indicator')]);
}Positionner le composant HTML de nprogress dans la page HTML principale « App.html » en ajoutant le code suivant :
<loading-indicator loading.bind="router.isNavigating || context.isRequesting"></loading-indicator>
Pour activer ce composant il suffit de mettre a « true » la variable de « context.isRequesting », on d’appeler la méthode « nprogress.start() ». Une barre bleue de progression s’affichera en haut.
Pour le cacher, appelez-la méthode « nprogress.stop(); »
Vous pouvez changer le style de la barre de progression en ajout le code suivant dans votre fichier style CSS principale :
#nprogress {
display: block;
position: fixed;
z-index: 1030;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
background-color: #fff;
}
#nprogress .bar {
height : 8px;
}
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 50%;
}
Le package « Font Awesome » vous permet d’utiliser des icônes libres et proportionnelles dans vos pages Web. Effectivement la feuille de style proposé par Font Awesome utilise une police vectorielle représentant des icônes.
Regarder sur les exemples suivant http://fontawesome.io/examples cela va vous plaire.
Lorsque vous utilisez Aurelia CLI, le package NodeJS de « Font awesome » est mal configuré et génère des erreurs.
Je vous propose donc une recette simple pour bien l’intégrer dans vos développements Aurelia JS.
1) Installer le package Font-Awesome dans NodeJS :
npm install font-awesome --save
2) Dans le fichier « aurelia-project/aurelia.json » ajouter dans le « build » la copie des polices vectorielles dans le dossier « fonts » de votre projet :
...
"build": {
...,
"copyFiles": {
"node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
"node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
"node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
"node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
"node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
}, ...3) Toujours sur ce document, dans les dépendances « dependencies » ajouter la description du package « font-awesome » :
"dependencies": [
...,
{
"name": "css/font-awesome",
"path": "../node_modules/font-awesome/",
"main": "css/font-awesome.css"
}, ...4) Pour utiliser la police dans une page HTML d’Aurelia, il suffit d’y ajouter après le « <template> » l’instruction suivante :
<require from="css/font-awesome.css"></require>
Vous noterez le « css/ » devant « font-awesome.css ». Cella permet d’être relative au projet Aurelia, sans devoir copier le dossier « fonts » à la racine de votre site WEB.
Le framework Aurelia JS 😛 est régulièrement mis à jour. Mais comment le mettre à jour ?
Attention, cella n’influence pas la version utilisé dans un projet existant.
npm install -g aurelia-cli
Si vous obtenez une erreur, il faut le supprimer de NodeJS puis de le re-installer en nettoyant les cache :
npm uninstall -g aurelia-cli npm cache clean npm install -g aurelia-cli
npm install aurelia-update -g
Pour mètre à jour Aurelia faire simplement :
aurelia-update
Maintenant vous voulez surement mettre à jour les bibliothèques utilisées dans un projet Aurelia.
En premier il faut trouver les numéro des nouvelles versions des bibliothèques. Soit vous les rechercher sur le site de npm soit vous installer le package « npm-check-updates » par :
npm install npm-check-updates -g
puis lancer la recherche des nouveaux numéros de version par :
npm-check-updates
ce qui affichera une liste ressemblant à (sur la droite la version la plus récente) :
aurelia-bootstrapper ^1.0.0 → ^2.1.1 aurelia-dialog ^0.6.2 → ^1.0.0-rc.1.0.3 jquery 2.2.4 → 3.2.1 aurelia-tools ^0.2.2 → ^1.0.0 gulp-notify ^2.2.0 → ^3.0.0 uglify-js ^2.6.3 → ^3.0.26 babel-eslint ^6.0.4 → ^7.2.3 babel-preset-es2015-loose ^7.0.0 → ^8.0.0 gulp-eslint ^2.0.0 → ^4.0.0
Si tout vous convient, vous pouvez tous les mettre à jour par (Je vous le déconseille) :
npm-check-updates -u
Sinon éditer le fichier « package.json » puis pour chaque version a mettre à jour, remplacer son ancien numéro par le nouveau.
Maintenant il reste plus qu’a faire une mise à jour npm par :
npm update
Ou supprimer le dossier « node_modules » puis faire une installation :
npm install
Et voila, toutes vos bibliothèques (libray) sont à jour !
Attention aux incompatibilités entre numéro de version .
Voici ma liste Twitter sur Aurelia
Liste Aurelia
Zeal est une application Linux, Windows permettant de regrouper localement des documentations techniques telles que HTTP, CSS, HTML, Java, Reactjs ... Ainsi plus besoin de ce connecter sur le Web (on a pas toujours accès à internet ;-)
Bien que sa bibliothèque soit bien fournie (195 documentations), elle ne contient pas la documentation d'Aurelia (Aurelia.io).
Cependant, il existe un moyen de créer sa propre documentation Aurelia pour Zeal.
Aurelia un framework Javascript qui monte. il est facile à apprendre, simplifiant le développement d'interface utilisateur (le plus important), une documentions, une communauté ... un must ...