AngularJS et autres techno frontend

L’univers merveilleuxdu développeur frontend

Sylvain RAGOT Technobyte VII10 juin 2014

ng-PLAN

I. AngularJS+

ng-routeng-cookieng-translateng-mocks

ng-PLAN

I. AngularJS

II. Le reste

… le tout à la sauce PredicSis

+ng-routeng-cookieng-translateng-mocks

JavaScript HTML CSS JQuery Sass Grunt Bower Foundation Karma Protractor

AngularJS

ngularJS

● Powered by GoogleStatistiques du repo GitHub :

87 releases 837 contributeurs

1096 bugs ouverts 6666 bugs fermés

dernière mise à jour : 1 heures 8550 forks

1. ng-introduction

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

1. ng-introduction

https://github.com/angular/angular.js

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)

1. ng-introduction

https://github.com/angular/angular.js/blob/master/CHANGELOG.md

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

1. ng-introduction

[

{

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 2. ng-demo




● MSNBC.com● Vevo (player video)● Plunker● The guardian● ...

https://builtwith.angularjs.org/

I. AngularJS 3. ng-users



Javascript

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 n’est pas du Java, même déguisé !

http://fr.wikipedia.org/wiki/ECMAScript#D.C3.A9nomination

Javascript

Navigateurs “normaux”el.addEventListener('click', modifieTexte, false);

Internet Explorerel.attachEvent('onclick', modifieTexte);

capilotraction en marche !!!

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

CSS’s next generation

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;

}


Sass


● Définition de fonctions

● Imbricationinput[type=text] {

@include droid-inputs($color-grey);

&:hover, &:focus { @include droid-inputs($color-blue); }

&.error { @include droid-inputs($color-dark-red) }

}


Sass



● Imbricationinput[type=text] { … }

input[type=text]::hover, input[type=text]::focus { … }

input[type=text].error { … }


Sass



● Imbrication

● Nécessite une compilation avant le rendu


Gruntsass: {

files: { '/styles/css/style.css' : '/styles/main/style.scss' }

}

> grunt sass

Task runner

Fichier SASS Fichier CSS

Gruntsass: {

files: { '/styles/css/style.css' : '/styles/main/style.scss' }

},

watch: {

sass-compile: {

files: ['/styles/{,*/}*.{scss,sass}'],

tasks: [sass]

}

}

> grunt watch

Task runner

Zurb foundation

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

http://foundation.zurb.com/docs/index.html

Karma & protractor

Karmaangular.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', '\n\n', 'a line\nanother'], 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]); } }));});

Protractorit('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('[email protected]'); 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

Internet

Transcript of AngularJS et autres techno frontend