AngularJS et autres techno frontend

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 HTML CSS JQuery Sass Grunt Bower Foundation Karma Protractor

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

I. AngularJS
● 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

I. AngularJS
● 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)

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, ...)

[
{
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

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

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

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

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

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";

Sass
● 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;
}

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

Sass
● Imbrication
input[type=text] { … }
input[type=text]::hover, input[type=text]::focus { … }
input[type=text].error { … }

Sass
● Imbrication
● Nécessite une compilation avant le rendu

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/{,*/}*.{scss,sass}'],
tasks: [sass]
}
}
> grunt watch

Zurb foundation
● “Bienvenue dans la grille”

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

Zurb foundation
● 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

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]);
}
}));
});

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' }
]
})
;
...

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');
});

ng-end
PredicSis’
Technobyte

AngularJS et autres techno frontend

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à AngularJS et autres techno frontend

Similaire à AngularJS et autres techno frontend (20)

AngularJS et autres techno frontend