SlideShare une entreprise Scribd logo
1  sur  86
Comment réussir son
projet en Angular 1.5 ?
Maxime BERNARD
Lead Dev @ WeStud.io
Qui suis-je ?
Lead Dev
Disclaimer
Disclaimer
Interactivité Subjectivité
Prérequis ?
Contexte
Contexte
Meetings & Events
by ClubMed
www.meetings-events-clubmed.fr
Angular 1.3
Projet NB
[confidentiel]
Angular 1.5.5
Part I
Les outils
Part I
Les 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é...
Outils
Yeoman
-> 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
Outils
Yeoman
-> 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` ?
Outils
NPM
-> 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 ?
Outils
NPM
-> 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` ?
Outils
Bower
-> Le Package Manager de
...
Euh… C’est pas déjà NPM ça ?
Outils
Bower
-> Package Manager du Web
- Pas propre à Javascript
- Pas le même job
- Fichier de configuration
bower.json
Outils
Bower
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
Outils
Bower
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` ?
Outils
Gulp
-> “Automatiseur de tâches”
(Concurrent de Grunt)
- Asynchrone
- StreamBased
Outils
Gulp - serve
Besoin de compiler vos
fichiers et les servir en
local ?
=> `gulp serve`
Par défaut, BrowserSync
activé par défaut (gulp-
angular).
Outils
Gulp - dépendances
Gulp gère les dépendances
`gulp serve`
`gulp build`
Exemple
gulp.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 ?
Outils
Gulp - 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
Outils
Gulp <3 Bower
Outils
Gulp
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… ?
Outils
conclusion
- NPM & Bower sont des
“must-have”
- Pour Gulp
=> Utilisez les outils
qui vous servent
Part II
AngularJS 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 ?
Components
Qu’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 ?
bindings
bindToController
compile
controller
controllerAs
link
multiElement
priority
require
restrict
scope
template
templateNamespace
templateUrl
terminal
transclude
(Elements only)
(Isolate only)
Directives Components
Comparatif
Components
Lifecycle 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ès
this.$onChanges = function(changesObj) {
if (changesObj.name) {
// Traitement
}
}
Components
$onDestroy
Avant
var timer = $timeout(function () {
// Traitement
}, 100);
$scope.$on(‘destroy’, function() {
$timeout.cancel(timer);
});
Après
var timer = $timeout(function () {
// Traitement
}, 100);
this.$onDestroy = function() {
$timeout.cancel(timer);
};
Quels sont les avantages ?
Components
Avantages
- 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 ?
Components
Inconvénients
- Limitations techniques
Comment choisir ?
Components
Comment choisir ?
- Les Components ne
remplacent pas les
Directives
- Utilise un Component…
sauf quand tu n’as pas
le choix.
Part III
Component-Based Architecture
Qui a déjà entendu de “Component-Based
Achitecture” ?
Component
Based
Architecture
La 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
Architecture
La 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
Architecture
Petit schéma explicatif
En pratique, ça donne quoi ?
Scaffolding
Components
Based
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
Components
Based
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
ProjetNB
BestPractice;)
Components
Based
Architecture
La pratique
Chaque Component a:
- sa structure (HTML)
- son affichage (CSS)
- son comportement (JS)
Components
Based
Architecture
Avantages
- 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
Components
Based
Architecture
Inconvé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
Components
Based
Architecture
Conclusion
Le code est bien plus
- lisible
- maintenable
- évolutif
À utiliser sur des projets à long
terme.
Bonne introduction à Angular 2.0
Epilogue
1 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 :id
Users.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 :)
Exemple
angular.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.

Contenu connexe

Tendances

Tendances (20)

Gatekeeper par Guillaume Faure
Gatekeeper par Guillaume FaureGatekeeper par Guillaume Faure
Gatekeeper par Guillaume Faure
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Présentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWTPrésentation DevoxxFR 2015 sur GWT
Présentation DevoxxFR 2015 sur GWT
 
Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)Le futur de AngularJS (2.0)
Le futur de AngularJS (2.0)
 
Symfony with angular.pptx
Symfony with angular.pptxSymfony with angular.pptx
Symfony with angular.pptx
 
Annotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVMAnnotation Processor, trésor caché de la JVM
Annotation Processor, trésor caché de la JVM
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérience
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
Retour d'experience projet AngularJS
Retour d'experience projet AngularJSRetour d'experience projet AngularJS
Retour d'experience projet AngularJS
 
Test angular 2+
Test angular 2+Test angular 2+
Test angular 2+
 
Angular 2
Angular 2Angular 2
Angular 2
 
Polymer
PolymerPolymer
Polymer
 
Utilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHPUtilisation optimale et professionnelle de PHP
Utilisation optimale et professionnelle de PHP
 
XebiConFr 15 - Le nouvel Ops
XebiConFr 15 - Le nouvel Ops XebiConFr 15 - Le nouvel Ops
XebiConFr 15 - Le nouvel Ops
 
ParisJUG Spring Boot
ParisJUG Spring BootParisJUG Spring Boot
ParisJUG Spring Boot
 
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrenteCocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
CocoaHeads Toulouse - Marc Boudou / FreezySnail - Programmation concurrente
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Maven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieuxMaven c'est bien, SBT c'est mieux
Maven c'est bien, SBT c'est mieux
 
XebiConFr 15 - Swift dans la vraie vie
XebiConFr 15 - Swift dans la vraie vieXebiConFr 15 - Swift dans la vraie vie
XebiConFr 15 - Swift dans la vraie vie
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 

En vedette

Tm05 modelo de_interacción
Tm05 modelo de_interacciónTm05 modelo de_interacción
Tm05 modelo de_interacción
Julio Pari
 
1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate
paolyta28
 
第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」
yoshiaki iwanaga
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Sofien Benrhouma
 

En vedette (20)

Componentes en angularjs 1.5
Componentes en angularjs 1.5Componentes en angularjs 1.5
Componentes en angularjs 1.5
 
Le métier du développeur
Le métier du développeurLe métier du développeur
Le métier du développeur
 
Building Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJSBuilding Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJS
 
Angular beans
Angular beansAngular beans
Angular beans
 
Tm05 modelo de_interacción
Tm05 modelo de_interacciónTm05 modelo de_interacción
Tm05 modelo de_interacción
 
Angular 1.5 Components
Angular 1.5 ComponentsAngular 1.5 Components
Angular 1.5 Components
 
AngularJS Version 1.3
AngularJS  Version 1.3AngularJS  Version 1.3
AngularJS Version 1.3
 
1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate1.3 y 1.4 subject and predicate
1.3 y 1.4 subject and predicate
 
Hello AngularJS - Back to the future
Hello AngularJS - Back to the futureHello AngularJS - Back to the future
Hello AngularJS - Back to the future
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
Angular 1.x reloaded:  improve your app now! and get ready for 2.0Angular 1.x reloaded:  improve your app now! and get ready for 2.0
Angular 1.x reloaded: improve your app now! and get ready for 2.0
 
さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)さわってみようReact.js、AngularJS(1系、2系)
さわってみようReact.js、AngularJS(1系、2系)
 
Introduction to AngularJs
Introduction to AngularJsIntroduction to AngularJs
Introduction to AngularJs
 
Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0Code migration from Angular 1.x to Angular 2.0
Code migration from Angular 1.x to Angular 2.0
 
第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」第三回ありえる社内勉強会 「いわががのLombok」
第三回ありえる社内勉強会 「いわががのLombok」
 
Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6Angular 2 Migration - JHipster Meetup 6
Angular 2 Migration - JHipster Meetup 6
 
Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2 Migrating an application from Angular 1 to Angular 2
Migrating an application from Angular 1 to Angular 2
 
AngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJSAngularJS 2, version 1 and ReactJS
AngularJS 2, version 1 and ReactJS
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
Rapport Projet De Fin D'étude Développent d'une application web avec Symfony2
 

Similaire à Comment réussir son projet en Angular 1.5 ?

Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
Xavier NOPRE
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
Devclic
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
Christophe HERAL
 

Similaire à Comment réussir son projet en Angular 1.5 ? (20)

Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)Drupal7 - Bonnes Pratiques (Partie 1)
Drupal7 - Bonnes Pratiques (Partie 1)
 
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 WordCamp Lyon 2015 - WordPress, Git et l'intégration continue WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
WordCamp Lyon 2015 - WordPress, Git et l'intégration continue
 
20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven20090615 - Ch'ti JUG - Apache Maven
20090615 - Ch'ti JUG - Apache Maven
 
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
Node, Grunt et leurs copains qui font de l’accessibilité tout seuls !
 
Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013Play framework - Human Talks Grenoble - 12.02.2013
Play framework - Human Talks Grenoble - 12.02.2013
 
At2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville PublicAt2008 Grenoble Hugonnet Sanlaville Public
At2008 Grenoble Hugonnet Sanlaville Public
 
20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven20081113 - Nantes Jug - Apache Maven
20081113 - Nantes Jug - Apache Maven
 
Les méthodes agiles dans TFS
Les méthodes agiles dans TFSLes méthodes agiles dans TFS
Les méthodes agiles dans TFS
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Symfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiquesSymfony2: 30 astuces et bonnes pratiques
Symfony2: 30 astuces et bonnes pratiques
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Etude des Frameworks PHP
Etude des Frameworks PHPEtude des Frameworks PHP
Etude des Frameworks PHP
 
Introduction à Symfony2
Introduction à Symfony2Introduction à Symfony2
Introduction à Symfony2
 
vuejs.ppt
vuejs.pptvuejs.ppt
vuejs.ppt
 
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
[Scrum Day 2011] Outillage Agile dans un environnement Microsoft
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 

Comment réussir son projet en Angular 1.5 ?