L’univers merveilleux
du développeur frontend
ng-PLAN
I. AngularJS
+
ng-route
ng-cookie
ng-translate
ng-mocks
ng-PLAN
I. AngularJS
II. Le reste
… le tout à la sauce PredicSis
+
ng-route
ng-cookie
ng-translate
ng-mocks
JavaScript HTM...
AngularJS
ngularJS
● Powered by Google
Statistiques du repo GitHub :
87 releases 837 contributeurs
1096 bugs ouverts 6666 bugs fermé...
I. AngularJS
● Powered by Google
● Framework Javascript OpenSource MVC
■ Bibliothèque javascript (104ko)
■ Open source : h...
I. AngularJS
● Powered by Google
● Framework Javascript OpenSource MVC
● Releases https://github.com/angular/angular.js/bl...
I. AngularJS
● S P A complexes Single-Page Applications
● Manipulation du D O M Document Object Model
● Améliore la testab...
[
{
index: 0,
used: “true”,
name: “DUALPLAY”,
type: “Symbol”,
description: “Lorem ipsum sit amet”,
expression: “”
},
{
ind...
● MSNBC.com
● Vevo (player video)
● Plunker
● The guardian
● ...
https://builtwith.angularjs.org/
I. AngularJS
Javascript
Javascript
● Créé en 1995 par Brendan Eich (Netscape)
● Intégré au navigateur netscape en 1996
● Standardisé en 1997 par E...
Javascript
Navigateurs “normaux”
el.addEventListener('click', modifieTexte, false);
Internet Explorer
el.attachEvent('oncl...
JQuery
● Première version en 2006
● LA bibliothèque JS la plus répandue
● Simplifier les fonctions usuelles de JS
■ Modifi...
Sass
Sass
● Définition de variables
■ $color-dark-blue: #004466;
■ $color-border: #C6C6C6;
■ $size-width-page: 980px;
■ $size-w...
Sass
● Définition de variables
● Définition de fonctions
@mixin android-inputs($color) {
box-shadow: none;
background:
bot...
Sass
● Définition de variables
● Définition de fonctions
● Imbrication
input[type=text] {
@include droid-inputs($color-gre...
Sass
● Définition de variables
● Définition de fonctions
● Imbrication
input[type=text] { … }
input[type=text]::hover, inp...
Sass
● Définition de variables
● Définition de fonctions
● Imbrication
● Nécessite une compilation avant le rendu
Grunt
Grunt
sass: {
files: { '/styles/css/style.css' : '/styles/main/style.scss' }
}
> grunt sass
Fichier SASS Fichier CSS
Grunt
sass: {
files: { '/styles/css/style.css' : '/styles/main/style.scss' }
},
watch: {
sass-compile: {
files: ['/styles/...
Zurb foundation
Zurb foundation
● “Bienvenue dans la grille”
Zurb foundation
● “Bienvenue dans la grille”
● L’approche mobile first
<div class="large-4 medium-6"></div>
● Prévoir la v...
Zurb foundation
● “Bienvenue dans la grille”
● L’approche mobile first
● C’est un framework …
■ row, radius, large-centere...
Karma & protractor
Karma
angular.filter('nl2br', function() { | <div>
return function(text) { | {{ variable.description | nl2br }}
return tex...
Protractor
it('should display an error when try to create an account with an existing email', function() {
$httpBackend
.w...
Protractor
// enter email/password
element(by.input('username')).sendKeys('Sylvain');
element(by.input('email')).sendKeys(...
Protractor
// enter email/password
element(by.input('username')).sendKeys('Sylvain');
element(by.input('email')).sendKeys(...
ng-end
PredicSis’
Technobyte
Prochain SlideShare
Chargement dans…5
×

AngularJS et autres techno frontend

1 291 vues

Publié le

Frontend development requires a lot a different tools. This presentation is about these technos like AngularJS, Javascript, Jquery, Sass, Grunt, Zurb foundation, Karma, Protractor, ...

This presentation was shown during a TechnoByte (session of internal formation) on 2014/06/10

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 291
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
57
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

AngularJS et autres techno frontend

  1. 1. L’univers merveilleux du développeur frontend
  2. 2. ng-PLAN I. AngularJS + ng-route ng-cookie ng-translate ng-mocks
  3. 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. 4. AngularJS
  5. 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. 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. 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. 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. 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. 10. ● MSNBC.com ● Vevo (player video) ● Plunker ● The guardian ● ... https://builtwith.angularjs.org/ I. AngularJS
  11. 11. Javascript
  12. 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. 13. Javascript Navigateurs “normaux” el.addEventListener('click', modifieTexte, false); Internet Explorer el.attachEvent('onclick', modifieTexte);
  14. 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. 15. Sass
  16. 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. 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. 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. 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. 20. Sass ● Définition de variables ● Définition de fonctions ● Imbrication ● Nécessite une compilation avant le rendu
  21. 21. Grunt
  22. 22. Grunt sass: { files: { '/styles/css/style.css' : '/styles/main/style.scss' } } > grunt sass Fichier SASS Fichier CSS
  23. 23. Grunt sass: { files: { '/styles/css/style.css' : '/styles/main/style.scss' } }, watch: { sass-compile: { files: ['/styles/{,*/}*.{scss,sass}'], tasks: [sass] } } > grunt watch
  24. 24. Zurb foundation
  25. 25. Zurb foundation ● “Bienvenue dans la grille”
  26. 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. 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. 28. Karma & protractor
  29. 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. 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. 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. 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. 33. ng-end PredicSis’ Technobyte

×