Embed Size (px)
Citation preview
Comment réussir son projet en Angular 1.5 ?
Maxime BERNARDLead Dev @ WeStud.io
Qui suis-je ?
Lead Dev
Disclaimer
Disclaimer
Interactivité Subjectivité
Prérequis ?
Contexte
Contexte
Meetings & Eventsby ClubMed
www.meetings-events-clubmed.fr
Angular 1.3
Projet NB
[confidentiel]
Angular 1.5.5
Part ILes outils
Part ILes outils
Avant de démarrer le développement, il faut des bons outils
=> Gain de temps
=> Réduire les taches fastidieuses et/ou répétitives
=> Facilité
Quels outils utilisez-vous ?
Pour démarrer votre projet, il existe un outil bien pratique
appelé...
OutilsYeoman
-> Générateur de projet(outil de scaffolding)
- Structure des fichiers
- Scripts de compilation
- Minification des feuilles de styles
et tellement plus encore...
Exemple
Scaffolding
OutilsYeoman
-> Des centaines de générateurs différents disponibles
-> Mon préféré: gulp-angular
Et c’est quoi tous ces fichiers créés par le générateur ?
Scaffolding
À quoi sert le fichier `package.json` ?
OutilsNPM
-> Le Package Manager de Javascript
-> Gère vos outils (et leur version & dépendances)
-> `npm install -g yo`
-> Fichier de configuration par projet:package.json
Pourquoi c’est bien ?
OutilsNPM
-> C’est facile
-> S’occupe des versions et des dépendances
-> Le package.json permet d’avoir les mêmes outils et mêmes versions quelque soit la machine
Scaffolding
À quoi sert le fichier `bower.json` ?
OutilsBower
-> Le Package Manager de ...
Euh… C’est pas déjà NPM ça ?
OutilsBower
-> Package Manager du Web
- Pas propre à Javascript- Pas le même job- Fichier de configuration bower.json
OutilsBower
Installer jQuery
Avant:
- Aller jquery.com
- Télécharger la dernière version de jQuery.js
- Déplacer le fichier dans votre projet
- Et pareil pour mettre à jour
OutilsBower
Installer jQuery
Grace à Bower:
- `bower install jquery`(`--save`)
- Et pour mettre à jour… `bower update`
Quelle est la différence avec NPM ?
NPM-> gère vos dépendances
“outils”
ex:
`npm install yo``npm install bower`
-> gère vos dépendances “applicatives”
ex:
`bower install angular``bower install jquery`
`bower install bootstrap`
Bower
Scaffolding
À quoi sert le fichier `gulpfile.js` ?
OutilsGulp
-> “Automatiseur de tâches”
(Concurrent de Grunt)
- Asynchrone
- StreamBased
OutilsGulp - serve
Besoin de compiler vos fichiers et les servir en local ?
=> `gulp serve`
Par défaut, BrowserSync activé par défaut (gulp-angular).
OutilsGulp - dépendances
Gulp gère les dépendances
`gulp serve`
`gulp build`
Exemplegulp.task('html', function (done) { // Compiler vos templates});
gulp.task('styles', function (done) { // Compiler vos CSS});
gulp.task('build', ['html', 'styles'], function(done) { // Ce que vous voulez faire en plus (facultatif)});
gulp.task('serve', ['build']);
Comment faites-vous vos sprites ?
OutilsGulp - spritesmith
gulp.spritesmith
-> Dans un dossier `foo`,
./foo/bar.png
./foo/baz.png
=> sprite.css & sprite.png
- gère le @2x
- génère lui-même vos classes .bar & .baz
=> `gulp sprite`
gulp-bower
=> `gulp bower`
- lit vos dépendances dans le bower.json
- les injecte automatiquement dans votre application
OutilsGulp <3 Bower
OutilsGulp
Des centaines de plugins Gulp sont déjà disponibles
D’autres exemples ?
- `gulp deploy`
- `gulp test`
- `gulp watch`
T’en as encore combien des outils… ?
Outilsconclusion
- NPM & Bower sont des “must-have”
- Pour Gulp=> Utilisez les outils qui vous servent
Part IIAngularJS 1.5
Nouveautés AngularJS 1.5 ?
AngularJS 1.5
Quelles sont les nouveautés ?
- Components
- Amélioration des Classes ES6
- Plein de petites améliorations sympas
=> Plus d’infos sur:http://angularjs.blogspot.fr/2016/02/angular-150-ennoblement-facilitation.html
Qui connait déjà les Components ?
ComponentsQu’est-ce que c’est ?
C’est comme une directive… mais en plus simple et moins puissant.
Rien ne vaut un petit exemple :)
Avant(Directives)
Après(Components)
.directive('counter', function counter() { return { restrict: 'E', scope: {}, bindToController: { count: '=' }, controller: function () { function increment() { this.count++; } this.increment = increment; } };});
.component('counter', { bindings: { count: '=' }, controller: function () { function increment() { this.count++; } this.increment = increment; }});
Euh… C’est tout ?
bindingsbindToController
compilecontrollercontrollerAs
linkmultiElementpriorityrequirerestrictscopetemplate
templateNamespacetemplateUrlterminaltransclude
(Elements only)(Isolate only)
Directives Components
Comparatif
ComponentsLifecycle Hooks
/!\ Angular 1.5.5
- $onInit()
- $postLink()
- $onChanges()
- $onDestroy()
=> Plus besoin de $scope :)(ou presque)
Components$onChanges
Avant$scope.$watch(‘name’, function(n, o) { // Traitement });
Aprèsthis.$onChanges = function(changesObj) { if (changesObj.name) {
// Traitement}
}
Components$onDestroy
Avantvar timer = $timeout(function () {
// Traitement}, 100);
$scope.$on(‘destroy’, function() {$timeout.cancel(timer);
});
Aprèsvar timer = $timeout(function () {
// Traitement}, 100);
this.$onDestroy = function() {$timeout.cancel(timer);
};
Quels sont les avantages ?
ComponentsAvantages
- Facilité d’implémentation
- Moins de pouvoir implique moins de responsabilités
- Les Components en Angular 2.0 sont très similaires
Quels sont les inconvénients ?
ComponentsInconvénients
- Limitations techniques
Comment choisir ?
ComponentsComment choisir ?
- Les Components ne remplacent pas les Directives
- Utilise un Component…sauf quand tu n’as pas le choix.
Part IIIComponent-Based
Architecture
Qui a déjà entendu de “Component-Based Achitecture” ?
Component Based
ArchitectureLa théorie
=> Approche modulaire(chaque module remplit sa fonctionnalité):
- meilleure lisibilité
- maintenance et évolutions facilitées
- problèmes isolés
- effets de bord réduits
Component Based
ArchitectureLa théorie appliquée au
Web
=> “Extend the Web”
Simple standard HTML tags:-> <button>, <table>, <input>, ...
Créons nos propres composants !
-> <your-super-feature>
<votre-super-header>
<article>
<votre-super-footer>
<article> <article>
<article> <article>
Component Based
ArchitecturePetit schéma explicatif
En pratique, ça donne quoi ?
Scaffolding
ComponentsBased
Architecture La pratique
├── app│ ├── common│ │ ├── components│ │ ├── entities│ │ ├── filters│ │ └── services│ ├── config│ │ ├── config.js│ │ ├── env.json│ │ └── global.json│ ├── index.js│ ├── index.scss│ ├── layout│ │ ├── _10_fonts.scss│ │ ├── _20_colors.scss│ │ ├── _30_mixins.scss│ │ ├── _layout.scss│ ├── pages│ │ ├── articles│ │ ├── dashboard│ │ ├── home│ │ ├── profile│ │ ├── signup
App file structure
ComponentsBased
Architecture La pratique
src/app/common/components├── nb-badge│ ├── nb-badge.html│ ├── nb-badge.js│ └── nb-badge.scss├── nb-bubble-tag│ ├── nb-bubble-tag.html│ ├── nb-bubble-tag.js│ └── nb-bubble-tag.scss├── nb-footer│ ├── nb-footer.html│ ├── nb-footer.js│ └── nb-footer.scss├── nb-header│ ├── nb-header.html│ ├── nb-header.js│ └── nb-header.scss├── nb-logo│ ├── nb-logo.html│ ├── nb-logo.js│ └── nb-logo.scss├── nb-small-article│ ├── nb-small-article.html│ ├── nb-small-article.js│ └── nb-small-article.scss├── nb-star-rating│ ├── nb-star-rating.html│ ├── nb-star-rating.js│ └── nb-star-rating.scss
Components file structure
Proj
et N
B
Bes
t Pra
ctic
e ;)
ComponentsBased
ArchitectureLa pratique
Chaque Component a:
- sa structure (HTML)
- son affichage (CSS)
- son comportement (JS)
ComponentsBased
ArchitectureAvantages
- meilleure lisibilité-> chaque chose à sa place
- maintenance et évolutions facilitées-> le code est à un seul endroit qu’on retrouve facilement
- problèmes isolés-> idem
- effets de bord réduits-> le Component a un scope isolé-> chaque Component a son CSS
ComponentsBased
ArchitectureInconvénients
- plus de réflexion-> Est-ce que je fais un Component pour cette fonctionnalité ou pas ?
- plus de dév-> 3 fichiers de plus par Component
- => Plus de temps -> plus d’argent
ComponentsBased
ArchitectureConclusion
Le code est bien plus
- lisible
- maintenable
- évolutif
À utiliser sur des projets à long terme.
Bonne introduction à Angular 2.0
Epilogue1 Tip & 1 Trick
Connaissez-vous $resource ?
Exemple $resource .factory('Users', function (API, $resource) { return $resource(API + '/users/:id', { id: '@id' }); });
Users.get({ id: 123 }); [GET]Users.save(); [POST]Users.query(); [GET] // sans :idUsers.delete(); [DELETE]
-- Object Style --
var user = new Users();user.firstname = ‘Tom’;user.$save();
Exemple $resource avec méthodes supérieures .factory('Users', function (API, $resource) { var Users = $resource(API + '/users/:id/:action', { id: '@id' }, { orders: { params: { action: 'orders' }, isArray: true }, invoices: { params: { action: 'invoices' }, isArray: true }, }); return Users; });
1 Tip$resource, c’est la vie !
Si vous utilisez une API RESTful pour vos données, utilisez $resource
-> gain de temps
-> simplicité
-> maintenabilité
À quoi sert $timeout ?
1 Trick$timeout comme vous ne l’avez jamais utilisé !
- $apply ? $digest ?
- “$digest is already in progress” => :(
- $timeout :)
Exempleangular.module('app', []).controller('TestController', ['$scope', function($scope){ $scope.name = 'Tom'; setTimeout(function(){ $scope.name = 'Bob'; }, 2000); }]);
angular.module('app', []).controller('TestController', ['$scope', '$timeout', function($scope, $timeout){ $scope.name = 'Tom'; $timeout(function(){ $scope.name = 'Bob'; }, 2000); }]);
Utiliser $timeout avec/sans `delay` permet de notifier Angular
de vérifier ses `bindings`
Des questions ?Des suggestions ?
Partagez votre expérience !
Merci :)Vous pourrez retrouver ces slides
sur SlideShare.
