How to develop with Angular in a JHipster Application ? Discover the ecosystem, the benefits and the risks about using the latest framework from Google within the popular application generator.

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 !