Le document présente Angular et JHipster, en mettant l'accent sur Angular réécrit en TypeScript avec des fonctionnalités modernes et la gestion des dépendances via npm et Yarn. Il décrit l'architecture du projet, le workflow de développement incluant le live-reload, le linting et les tests. Enfin, il aborde les optimisations pour un package de production et les bénéfices/risk liés à cette approche.

1. Angular + JHipster

2. AngularJS : It’s just Angular
Framework récrit from scratch
Orienté Composant
Utilisation en TypeScript

3. TypeScript
Superset de JavaScript
Inclut les dernières spécifications de JavaScript (ES 2015+) :
➔Classes
➔Fonctions fléchées
➔Modules
Typage statique

4. Module Bundler : Webpack
Permet de packager l’application
Effectue du Tree Shaking
Split le code en bundles (ex : vendors, home, admin…)

5. Dépendances : NPM
Listées dans le fichier package.json à la racine du projet
Dépendances nécessaires à l’application dans dependencies
Dépendances nécessaires au dev/packaging dans devDependencies

6. Mieux que NPM : Yarn
Parallélise les appels réseau
Met en cache les packages
Lock toutes les dépendances (même les dépendances transitives)
S’utilise de manière transparente par rapport à NPM :
➔Même package.json, même registre...

7. Architecture
Pattern folders by feature :
➔Un dossier = Un composant : template, style, contrôleur
Modules regroupant les grosses parties de l’application :
➔Admin, Account, Entity, Shared...

8. Workflow de développement
Lancer un serveur de développement avec du live-reload (Browsersync)
➔yarn start
Linter le code TypeScript :
➔yarn run lint
➔yarn run lint:fix

9. Tests : Protractor, Jasmine, Karma
Tests unitaires avec Karma + Jasmine, lancés sous PhantomJS
Tests end-to-end (facultatifs), lancés via Protractor
Pour les exécuter :
➔yarn run test : tests unitaires
➔yarn run test --watch : tests unitaires + live reload
➔yarn run e2e : tests end to end

10. Package de prod
Optimisation du packaging pour la production :
➔Minification du JS, CSS
➔Hash dans les fichiers pour forcer le navigateur à les recharger
➔Tree Shaking : Seulement ce qui est nécessaire est packagé
➔Code Splitting : Plusieurs bundles
Contenu généré dans target/www

11. Angular CLI
Ligne de commande officielle d’Angular, permet de générer :
➔Composants
➔Services
➔Routes
➔....
Préconfiguré dans JHipster !

12. Bénéfices / Risques
- Typage
- Support d’ES2015+
- Un seul gestionnaire de dépendance
- Tree Shaking
- Lazy Loading
- Librairies tierces peu matures

13. Merci !