ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3

Conception d'Applications
Interactives :
Applications Web et JEE
Séance #1
Côté navigateur
HTML5 / CSS / JS / AngularJS

Côté navigateur
● Les bases du web
○ HTTP, URL, HTML, CSS, JS, AJAX...

● HTML5
○ HTML5, CSS3, le casse-tête des navigateurs...
○ Le web en 2013, le responsive design

● Twitter Bootstrap
○ Outils, échafaudage, LessCSS, JQuery

● Le développeur web en 2013
○ Rôles, technologies, langages, veille technologique

● AngularJS
○ Modèle MVC côté navigateur

AngularJS
● Pourquoi AngularJS ?
● Les bases

AngularJS
HTML enhanced for web apps!

Pourquoi AngularJS ?
Parce qu’on veut faire des vraies applications web
● AngularJS fonctionne sur le principe MVC
○
○

Apporte aux applications web côté client des services
traditionnellement apportés côté serveur
Permet des applications web plus legères et dynamiques

HTML is great for declaring static documents, but it falters
when we try to use it for declaring dynamic views in webapplications. AngularJS lets you extend HTML vocabulary
for your application. The resulting environment is
extraordinarily expressive, readable, and quick to develop.

Mise en garde :
Je suis un développeur web
●

Et lorsque je raconte des histoires, je le fais du point de
vue d’un développeur web

Image : TylkoMrok.pl

Si vous faites des applications client lourd,
vous pourrez trouver que je caricature un peu

Au début il y avait le client lourd
●

Le bloc de base des IHM était le composant :
○
Encapsulation
○
Réutilisation

Image : Wikipedia

On créait les IHM en ensamblant des composants

Mais le développement web
n’avait rien à voir...
●

HTML/CSS/JS ne supportaient pas les composants
○
Le bloc de base était la page

Image : IBM

Les applications web étaient des ensembles de pages

Des outils comme GWT ont introduit
les composants dans les webapps
●

GWT utilise un paradigme semblable au client lourd
○
Composants, propriétés, événements...

Image : GWT Mail sample app

Les webapps GWT sont orientées composant :
Single-page apps

Aujourd’hui les single-page apps ont
le vent en poupe
●

Proposent une expérience utilisateur (UX) riche
○
Mais les construire n’est pas si simple

Image : Ken Schultz comedy juggler

HTML/CSS/JS toujours pas orientés composants

Le futur standard Web Components
●

Le W3C travaille dans un standard Web Components
○
Et on sait bien ce que ça veut dire
■

Piste : HTML5

Ils vont y travailler pendant des années,
chipotant et pinaillant sans se mettre d’accord

En attendant on fait quoi ?
●

●

On utilise des technologies qui permettent d’avoir cette
approche single-page app avec les standard d’aujourd’
hui
Beaucoup d’alternatives :
○

●

BackboneJS, EmberJS, Polymer…

Une solution simple, puissante, plébiscité et mure :

AngularJS

Déclaratif plutôt qu’impératif
●

Deux façons de définir un IHM :
○

○

●

impératif : enchaînee programmatiquement les ordres pour
construire l’IHM
déclaratif : utiliser un langage pour décrire comment l’IHM se
présente à l’utilisateur

Le web à la base est déclaratif : HTML
○
Ses lacunes sont comblées par JS en impératif
■
○

●

Avec jQuery et d’autres, de plus en plus impératif

Difficile de faire des IHM riches en impératif

AngularJS : approche déclarative

Étendre HTML
●

Pas réinventer un langage, utiliser celui qui est déjà là : HTML
○
○

AngularJS propose un mécanisme d’extension :
■ Des nouvelles balises et attributs HTML
AngularJS va repasser sur le DOM
■ pour interpréter ces balises et ces attributs supplémentaires
■ pour les instrumenter

●

Objectif : du code HTML augmenté
○ Répondant aux attentes de la description d’une IHM riche
moderne

●

Approche différente des templates
○
○

On ne genère pas du code HTML
On écrit du HTML étendu

Angular JS is HTML enhanced for web apps!
AngularJS is HTML6
Angular is what HTML would have been had it been designed for applications

Hello Angular
Déclaration d’application AngularJS

<!doctype html>
<html ng-app>

Chargement de la bibliothèque

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"
></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>

Liaison dynamique (data binding)

</html>

Comment feriez-vous la même chose
avec d’autres technologies ?

Syntaxe {{ }}
●

Permet la création de templates HTML
○
Le code à l’intérieur des accolades est interprété
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"
></script>
</head>
<body>
<div>
<h1>2+2 = {{2+2}}</h1>
</div>
</body>
</html>

Data binding
●

Data binding :
○
○

●

mise à jour automatique de la vue quand le modèle change
mise à jour automatique du modèle quand la vue change

Pas besoin de manipulations du DOM
ni des événements

Let’s click
<!doctype html>
<html ng-app>

Déclaration d’application AngularJS
Chargement de la bibliothèque

<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
</head>
<body>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
count: {{count}}
</body>

Directive déclarant une expression
permettant d’incrémenter un compteur

</html>

Affichage du compteur

Les modules
●

Utilisés pour organiser les objets dans l’application
Sur app.js :

Sur index.html :

app = angular.module('myApp',
[]);

<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script src="./app.js"></script>
</head>
<body>
[...]
</body>
</html>

●

Dans l’appel à angular.module() :
○

Premier argument : nom du module

○

Deuxième argument : Dépendances du module

Les contrôleurs
●

Liés à des élément de l’IHM
○
○

Contiennent les données et les fonctions
■ Avec lesquels les éléments de l’IHM interagissent
Intéragissent avec les services
■ Qui se chargent des choses comme les appels serveur

Sur app.js :

Sur index.html :

app = angular.module('myApp', []);

<!doctype html>

app.controller('mainCtrl',

<html ng-app="myApp">

function($scope){
$scope.name = 'Default Name';
});

<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"
></script>
<script src="./app.js"></script>

$scope contient les données à
la portée de l’élément IHM
$scope.name pour la variable name
côté HTML

</head>
<body ng-app='myApp'>
<div ng-controller='mainCtrl'>
<input type='text' ng-model='name' />
<h2>{{name}}</h2>
</div>
</body>

Et maintenant ?
●

Maintenant on plonge dans le côté pratique !
Livecoding à partir du site AngularJS.org

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3

Semelhante a ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 (20)

Mais de Horacio Gonzalez

Mais de Horacio Gonzalez (20)

ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3