Le document présente un aperçu des technologies et outils utilisés dans le développement frontend, notamment AngularJS, JavaScript, Sass, et les frameworks associés comme Grunt et Foundation. Il fournit des statistiques sur le dépôt GitHub d'AngularJS et aborde des concepts tels que la manipulation du DOM, la testabilité, et la compilation de styles. Des exemples de code et des références aux meilleures pratiques de développement sont également inclus.

1. L’univers merveilleux
du développeur frontend

2. ng-PLAN
I. AngularJS
+
ng-route
ng-cookie
ng-translate
ng-mocks

3. ng-PLAN
I. AngularJS
II. Le reste
… le tout à la sauce PredicSis
+
ng-route
ng-cookie
ng-translate
ng-mocks
JavaScript HTML CSS JQuery Sass Grunt Bower Foundation Karma Protractor

4. AngularJS

5. ngularJS
● Powered by Google
Statistiques du repo GitHub :
87 releases 837 contributeurs
1096 bugs ouverts 6666 bugs fermés
dernière mise à jour : 1 heures 8550 forks

6. I. AngularJS
● Powered by Google
● Framework Javascript OpenSource MVC
■ Bibliothèque javascript (104ko)
■ Open source : https://github.com/angular/angular.js
■ MVC … oui, même en html - javascript !!
■ Entièrement exécutée dans un navigateur

7. I. AngularJS
● Powered by Google
● Framework Javascript OpenSource MVC
● Releases https://github.com/angular/angular.js/blob/master/CHANGELOG.md
■ 85 actuellement, 22 depuis 2014 (3-4 par mois)
■ la première : v0.9.0 [Dragon-breath] (20 oct 2010)
■ la première stable : 1.0.0 [Temporal-domination] (13 juin 2012)
■ la dernière : 1.3.0beta11 [Excessive-clarification] (06 juin 2014)

8. I. AngularJS
● S P A complexes Single-Page Applications
● Manipulation du D O M Document Object Model
● Améliore la testabilité (MVC, modules)
● Isole le front et le backend
● Utilise les dernières technos
(DOM templates, binding attributes, promises, ...)

9. [
{
index: 0,
used: “true”,
name: “DUALPLAY”,
type: “Symbol”,
description: “Lorem ipsum sit amet”,
expression: “”
},
{
index: 1,
...
]
http://plnkr.co/edit/74JBq2MDACBnmnUgTG0k?
p=preview
I. AngularJS

10. ● MSNBC.com
● Vevo (player video)
● Plunker
● The guardian
● ...
https://builtwith.angularjs.org/
I. AngularJS

11. Javascript

12. Javascript
● Créé en 1995 par Brendan Eich (Netscape)
● Intégré au navigateur netscape en 1996
● Standardisé en 1997 par ECMA intl
● Actuellement : ECMAScript 5 (12-2009)
■ Adobe : ActionScript
■ Microsoft : JScript
■ Google : V8 http://fr.wikipedia.org/wiki/ECMAScript

13. Javascript
Navigateurs “normaux”
el.addEventListener('click', modifieTexte, false);
Internet Explorer
el.attachEvent('onclick', modifieTexte);

14. JQuery
● Première version en 2006
● LA bibliothèque JS la plus répandue
● Simplifier les fonctions usuelles de JS
■ Modification du DOM et du CSS
■ Évènements, animations, AJAX
■ Plugins

15. Sass

16. Sass
● Définition de variables
■ $color-dark-blue: #004466;
■ $color-border: #C6C6C6;
■ $size-width-page: 980px;
■ $size-width-sidebar: $size-width-page / 2;
■ $color-light-blue: lighten($color-dark-blue, 30%);
Surcharge de variables précédemment définies :
$fi-path: "../../vendor/foundation-icon-fonts";

17. Sass
● Définition de variables
● Définition de fonctions
@mixin android-inputs($color) {
box-shadow: none;
background:
bottom left linear-gradient($color, $color) no-repeat,
bottom center linear-gradient($color, $color) repeat-x,
bottom right linear-gradient($color, $color) no-repeat;
background-size: 1px 6px, 1px 1px, 1px 6px;
}

18. Sass
● Définition de variables
● Définition de fonctions
● Imbrication
input[type=text] {
@include droid-inputs($color-grey);
&:hover, &:focus { @include droid-inputs($color-blue); }
&.error { @include droid-inputs($color-dark-red) }
}

19. Sass
● Définition de variables
● Définition de fonctions
● Imbrication
input[type=text] { … }
input[type=text]::hover, input[type=text]::focus { … }
input[type=text].error { … }

20. Sass
● Définition de variables
● Définition de fonctions
● Imbrication
● Nécessite une compilation avant le rendu

21. Grunt

22. Grunt
sass: {
files: { '/styles/css/style.css' : '/styles/main/style.scss' }
}
> grunt sass
Fichier SASS Fichier CSS

23. Grunt
sass: {
files: { '/styles/css/style.css' : '/styles/main/style.scss' }
},
watch: {
sass-compile: {
files: ['/styles/{,*/}*.{scss,sass}'],
tasks: [sass]
}
}
> grunt watch

24. Zurb foundation

25. Zurb foundation
● “Bienvenue dans la grille”

26. Zurb foundation
● “Bienvenue dans la grille”
● L’approche mobile first
<div class="large-4 medium-6"></div>
● Prévoir la version mobile
● Identifier tôt les contenus essentiels

27. Zurb foundation
● “Bienvenue dans la grille”
● L’approche mobile first
● C’est un framework …
■ row, radius, large-centered, breadcrumbs, …
■ définit un grand nombre de variables
■ documentation : http://foundation.zurb.com/docs/index.html

28. Karma & protractor

29. Karma
angular.filter('nl2br', function() { | <div>
return function(text) { | {{ variable.description | nl2br }}
return text.replace(/n/g, '<br/>'); | </div>
}; |
}); |
--------------------------------------------------------------------------------------------------------
-
describe("Test for nl2br filter", function() {
it('should replace n by <br/>', inject(function(nl2brFilter) {
var scenario = {
input : [ '', 'n', 'nn', 'a linenanother'],
output : [ '', '<br/>', '<br/><br/>', 'a line<br/>another']
};
for (var i = 0 ; i < scenario.input.length ; i++) {
expect(nl2brFilter(scenario.input[i])).toEqual(scenario.output[i]);
}
}));
});

30. Protractor
it('should display an error when try to create an account with an existing email', function() {
$httpBackend
.when(API.USER_CREATE.method, API.USER_CREATE.url)
.respond(HTTP.UNPROCESSABLE_ENTITY, {
message: 'Validation failed',
status: HTTP.UNPROCESSABLE_ENTITY,
errors: [
{ resource: 'User', field: 'email' , code: 'already_exists' },
{ resource: 'User', field: 'password', code: 'invalid' }
]
})
;
...

31. Protractor
// enter email/password
element(by.input('username')).sendKeys('Sylvain');
element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com');
element(by.input('password')).sendKeys('s');
// create account
element(page.form.signup).findElement(by.css('button[type=submit]')).click();
// text expectations
expect(ptor.getCurrentUrl()).toMatch('#/login');
expect(element(by.input('email')).getAttribute('class')).toContain('error');
expect(element(by.input('password')).getAttribute('class')).toContain('error');
});

32. Protractor
// enter email/password
element(by.input('username')).sendKeys('Sylvain');
element(by.input('email')).sendKeys('sylvain.ragot@predicsis.com');
element(by.input('password')).sendKeys('s');
// create account
element(page.form.signup).findElement(by.css('button[type=submit]')).click();
// text expectations
expect(ptor.getCurrentUrl()).toMatch('#/login');
expect(element(by.input('email')).getAttribute('class')).toContain('error');
expect(element(by.input('password')).getAttribute('class')).toContain('error');
});

33. ng-end
PredicSis’
Technobyte