Javascript s’est depuis longtemps imposé comme le principal langage pour développer des écrans web dynamiques. L'émergence des SPA (Single Page Application) est en fait l'aboutissement logique du succès de ces outils au premier rang desquels on compte jQuery et AJAX.
AngularJS fait partie d’une nouvelle génération de frameworks qui propose d’aller plus loin afin d’avoir non seulement des SPA améliorant l’expérience utilisateur mais aussi un code mieux organisé, plus modulaire et donc facilement testable.
Au cours de cette soirée, vous verrez d’abord la manière dont AngularJS étend le HTML à travers les directives puis le binding bidirectionnel, ensuite, la programmation asynchrone avec AngularJS. Enfin pour finir, nous allons voir ces petits plus qui expliquent la popularité du framework : les filtres, l’injection de dépendance et les tests.
Quelques éléments de contexte - API, Microservices, Agilité, DevOps, Cloud
Organisation de projets Front - Back: impacts, dépendances et solutions
Les normes & bonnes pratiques issues de Retours d'Expériences
Un focus sur AngularsJS 2.0
Présentation et retour d'expérieuce sur node.js + AngularJS au journal Le Monde, novembre 2014.
Présenté dans le cadre d'un « apéro techno » chez Omnilog.
Slides de ma présentation du 27/11/2014 au meetup Angular à l'école 42.
Je parle des nouveautés annoncées à ngEurope pour AngularJS 2.0 ainsi que de l'environnement javascript dans lequel le framework sera écrit (AtScript + ES6 + Traceur).
mon twitter : @Clement_D
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
Dans cette présentation, je vais mettre l'accent sur les fondamentaux du fameux Framework Javascript AngularJs. Ainsi partager avec vous, certaines de mes expériences avec AngularJs .Enfin j'espère que ça vous plaît.
Radhouene Rouached
https://www.linkedin.com/in/radrouached
Plan :
* Introduction
* Architecture
* Démonstration
* Notions AngularJS
* Directives
* Services
* Routage
* Avantages & Limites
* Outils utiles
* Documentation
Javascript s’est depuis longtemps imposé comme le principal langage pour développer des écrans web dynamiques. L'émergence des SPA (Single Page Application) est en fait l'aboutissement logique du succès de ces outils au premier rang desquels on compte jQuery et AJAX.
AngularJS fait partie d’une nouvelle génération de frameworks qui propose d’aller plus loin afin d’avoir non seulement des SPA améliorant l’expérience utilisateur mais aussi un code mieux organisé, plus modulaire et donc facilement testable.
Au cours de cette soirée, vous verrez d’abord la manière dont AngularJS étend le HTML à travers les directives puis le binding bidirectionnel, ensuite, la programmation asynchrone avec AngularJS. Enfin pour finir, nous allons voir ces petits plus qui expliquent la popularité du framework : les filtres, l’injection de dépendance et les tests.
Quelques éléments de contexte - API, Microservices, Agilité, DevOps, Cloud
Organisation de projets Front - Back: impacts, dépendances et solutions
Les normes & bonnes pratiques issues de Retours d'Expériences
Un focus sur AngularsJS 2.0
Présentation et retour d'expérieuce sur node.js + AngularJS au journal Le Monde, novembre 2014.
Présenté dans le cadre d'un « apéro techno » chez Omnilog.
Slides de ma présentation du 27/11/2014 au meetup Angular à l'école 42.
Je parle des nouveautés annoncées à ngEurope pour AngularJS 2.0 ainsi que de l'environnement javascript dans lequel le framework sera écrit (AtScript + ES6 + Traceur).
mon twitter : @Clement_D
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
Dans cette présentation, je vais mettre l'accent sur les fondamentaux du fameux Framework Javascript AngularJs. Ainsi partager avec vous, certaines de mes expériences avec AngularJs .Enfin j'espère que ça vous plaît.
Radhouene Rouached
https://www.linkedin.com/in/radrouached
Plan :
* Introduction
* Architecture
* Démonstration
* Notions AngularJS
* Directives
* Services
* Routage
* Avantages & Limites
* Outils utiles
* Documentation
AngularJS est un framework Javascript en plein essor, visant à structurer et simplifier le développement d'applications riches côté client.
Développé par Google sous licence open-source, il intègre nativement l'ensemble des fonctionnalités habituellement obtenues par assemblage de librairies spécialisées : routage, templates, bindings, appels REST... Sa robustesse et sa polyvalence en font aujourd'hui un élément incontournable de toutes les applications web orientées REST !
En effet, cette formation vous apportera la maîtrise des fonctionnalités clés du framework : filtres, contrôleurs, templates, REST... Vous verrez également son intégration dans la plateforme PowerTools (Accélérateur B2B Hybris).
Découvrez comment construire une application from scratch en utilisant Rails::API et AngularJS.
1. Nous construirons tout d'abord un BackOffice offrant une API REST grâce à Rails::API ;
2. Nous nous attaquerons ensuite au FrontOffice permettant de consommer notre API en utilisant le framework AngularJS ;
3. Nous verrons finalement comment gérer les problématiques de Cross-Origin Resource Sharing (CORS)
Google : Prise en charge de l'Ajax et de l'Angular JSPeak Ace
Slides présentées lors du Petit Déjeuner Search Foresight du 19 novembre 2015.
Google vient d'annoncer qu'ils cessaient de promouvoir la méthode des "hashbangs" et des "escaped fragments" pour rendre les sites faits en ajax crawlables.
Comment interpréter ce revirement, et comment Google se comporte vraiment avec des sites faits en Ajax.
Point sur les bonnes pratiques dans ce domaine, en particulier pour les sites faits avec des technologies nouvelles comme Angular JS
Présentation de la dernière version d'Angular 2, le framework JavaScript de Google pour créer des applications monopages — http://angularfrance.com/
Thème abordés : Angular en chiffres. Principales fonctionnalités d'Angular 2. Comparaison entre Angular 1 et Angular 2. Outillage Angular 2. Angular 2 est une plateforme. Démarrer avec Angular 2. Migrer de Angular 1 à Angular 2. Faut-il passer à Angular 2 aujourd’hui ?
Node.js et les nouvelles technologies javascriptKhalid Jebbari
Présentation sur Node.js et les nouvelles technologies javascript, qui a eu lieu dans les locaux de Smile, à Levallois (92).
Retour d'exploration par un développeur Drupal (moi) sur ces technologies, et comparaison avec Drupal.
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
HTTP est un protocole simple à comprendre, simple à utiliser et c’est cette simplicité qui le rend disponible sur un grand nombre de plate-forme. REST, de son côté, est un style d’architecture qui permet d’exposer facilement une API en utilisant HTTP et différents types de représentations de données tels que JSON ou XML.
ASP.NET Web API est une évolution de WCF pour écrire une couche d’API REST, en utilisant un modèle de programmation proche d’ASP.NET MVC. Cette soirée 3T sera l’occasion pour vous de découvrir les fonctionnalités offertes par ASP.NET Web API qui font que c’est une technologie qu’il faut envisager d’utiliser lorsque vous devez créer une API REST.
AngularJS est un framework Javascript en plein essor, visant à structurer et simplifier le développement d'applications riches côté client.
Développé par Google sous licence open-source, il intègre nativement l'ensemble des fonctionnalités habituellement obtenues par assemblage de librairies spécialisées : routage, templates, bindings, appels REST... Sa robustesse et sa polyvalence en font aujourd'hui un élément incontournable de toutes les applications web orientées REST !
En effet, cette formation vous apportera la maîtrise des fonctionnalités clés du framework : filtres, contrôleurs, templates, REST... Vous verrez également son intégration dans la plateforme PowerTools (Accélérateur B2B Hybris).
Découvrez comment construire une application from scratch en utilisant Rails::API et AngularJS.
1. Nous construirons tout d'abord un BackOffice offrant une API REST grâce à Rails::API ;
2. Nous nous attaquerons ensuite au FrontOffice permettant de consommer notre API en utilisant le framework AngularJS ;
3. Nous verrons finalement comment gérer les problématiques de Cross-Origin Resource Sharing (CORS)
Google : Prise en charge de l'Ajax et de l'Angular JSPeak Ace
Slides présentées lors du Petit Déjeuner Search Foresight du 19 novembre 2015.
Google vient d'annoncer qu'ils cessaient de promouvoir la méthode des "hashbangs" et des "escaped fragments" pour rendre les sites faits en ajax crawlables.
Comment interpréter ce revirement, et comment Google se comporte vraiment avec des sites faits en Ajax.
Point sur les bonnes pratiques dans ce domaine, en particulier pour les sites faits avec des technologies nouvelles comme Angular JS
Présentation de la dernière version d'Angular 2, le framework JavaScript de Google pour créer des applications monopages — http://angularfrance.com/
Thème abordés : Angular en chiffres. Principales fonctionnalités d'Angular 2. Comparaison entre Angular 1 et Angular 2. Outillage Angular 2. Angular 2 est une plateforme. Démarrer avec Angular 2. Migrer de Angular 1 à Angular 2. Faut-il passer à Angular 2 aujourd’hui ?
Node.js et les nouvelles technologies javascriptKhalid Jebbari
Présentation sur Node.js et les nouvelles technologies javascript, qui a eu lieu dans les locaux de Smile, à Levallois (92).
Retour d'exploration par un développeur Drupal (moi) sur ces technologies, et comparaison avec Drupal.
ASP.Net Web API - Léonard Labat (18 février 2014)SOAT
HTTP est un protocole simple à comprendre, simple à utiliser et c’est cette simplicité qui le rend disponible sur un grand nombre de plate-forme. REST, de son côté, est un style d’architecture qui permet d’exposer facilement une API en utilisant HTTP et différents types de représentations de données tels que JSON ou XML.
ASP.NET Web API est une évolution de WCF pour écrire une couche d’API REST, en utilisant un modèle de programmation proche d’ASP.NET MVC. Cette soirée 3T sera l’occasion pour vous de découvrir les fonctionnalités offertes par ASP.NET Web API qui font que c’est une technologie qu’il faut envisager d’utiliser lorsque vous devez créer une API REST.
Paris Web 2015 - Atelier désendettement Javascript legacyFrançois Petitit
par Michael Akbaraly et François Petitit - OCTO Technology
Vous avez récupéré un projet JavaScript de plusieurs milliers de lignes, on vous demande des évolutions et des corrections de bugs, et rien ne va.
Code illisible, régressions en pagaille, structure des répertoires incompréhensibles : vous ne savez pas par où commencer !
Au long des 90 minutes de cet atelier, nous vous proposons de découvrir les techniques et les outils qui vont vous sauver la vie via des travaux pratiques de code JavaScript côté back-end avec NodeJS, et côté front-end avec AngularJS.
Débutants ou ayant déjà une connaissance de ces technologies sont les bienvenus. Les travaux pratiques seront disponibles si vous souhaitez coder vous-mêmes pendant l'atelier.
This presentation has been executed on 14th april, 2009 in Valtech Technology Consulting, Paris, France.
This is an overview of the SWTBot test framework.
Download the ppt for the comments on each slide.
HTML5, ARIA et accessibilité du Web: où en est-on?Qelios
Le HTML5 révolutionne le Web. Mais qu'en est-il de son accessibilité? Comment rendre accessible une application développée avec la technologie du web d'aujourd'hui et de demain?
Cette présentation de Jean-Pierre Villain (Qelios), donnée lors de la Conférence Romande sur l'Accessibilité Web 2013 (CRAW2013) fait le point sur les principaux challenges posés, et les solutions disponibles.
Support de cours utilisé lors de la formation d'élèves en licence informatique. Cette formation porte sur les technologies JavaScript : de la découverte du langage aux notions avancées, en passant par la stack/architecture MEAN (MongoDB, Express, Angular, Node.js), jQuery et d'autres technologies du moment.
Plus d'informations sur mon profil Linkedin : https://fr.linkedin.com/in/guillaumemorelbailly
This document contains a quiz on Java concepts with 3 multiple choice questions. The first question asks which collection interface TreeMap implements, with the correct answer being SortedMap. The second question asks how garbage collection can be forced, with the answer being that it cannot be forced. The third question provides code assigning dates to variables and changing a year, asking what the output will be. The correct answer is that d1 and d2 will have different years printed, with d2's year changed in the method.
The document is a quiz on Java 8 features and contains 5 multiple choice questions about default methods in interfaces, lambda syntax, and the Nashorn JavaScript engine tool. The answers to the 5 questions are provided at the end. Contact information is also provided for any additional questions.
Geek Time October 2016 : Coding Dojo - Calisthenics ObjectsOLBATI
This document discusses Calisthenics Objects and provides resources for practicing this coding technique. It recommends following guidelines such as having only one level of indentation per method, wrapping all primitives and strings, and keeping all entities small. It also provides links to external resources on the Object Calisthenics technique and closes by thanking the reader and providing contact information.
Geek Time September 2016 : Coding Dojo - Working on Legacy CodeOLBATI
The document discusses working with legacy code, describing it as old code that is difficult to maintain and test. It notes problems with legacy applications like difficulty adding features or introducing regressions due to changes. The document recommends following the Boy Scout Rule when working with legacy code, which is to leave the code cleaner than you found it. It provides contact information for the author to ask any questions.
1. Geek Time - Mai 2017
Oussama BOUDHRI
Consultant - OLBATI
Introduction Vue.js
2. OLBATI - Geek Time - Mai 2016
PLAN
1- Introduction
2-Qu’est ce que vue.js
3- Pourquoi vue.js / Benchmark
4- Architecture & Lifecycle
5- Notions vue.js
6- Routing
7- Gestion des états avec vuex (Flux implemetation)
8- Conclusion
3. OLBATI - Geek Time - Mai 2016
Introduction
Si vous avez déjà été dans l’une des situations suivantes
- Des composants JS difficile à maintenir
- Avoir l’impression d’avoir installé une usine à gaz pour gérer la partie front de l’appli
- Trouver une difficulté d’apprentissage d’un framework et vous avez des délais serrés
Vue.js vous intéressera peut être !
4. OLBATI - Geek Time - Mai 2016
Qu’est ce que vue.js ?
Progressive javascript
framework
Créer des
applications SPA
Composantes
reactives
Virtual DOM
5. OLBATI - Geek Time - Mai 2016
Qu’est ce que vue.js ?
Reactive Interfaces
Declarative Rendering
Data Binding
Directives
Template Logic
Component & Nesting
Event Handling
Computed Properties
CSS Transitions & Animation
Custom Filters
6. OLBATI - Geek Time - Mai 2016
Qu’est ce que vue.js ?
Ecosystème :
- vuex (state management)
- vue-resource (HTTP requests)
- vue-router (routing)
- vue-cli (command line scaffolding)
- vue-developer (chrome devtools extension for debugging)
7. OLBATI - Geek Time - Mai 2016
Pourquoi vue.js / Benchmark
• Simple
Pas besoin de bibliothèques externes, ni de plugins
Code très lisible
Facilité d’apprentissage, une documentation très complète
Le créateur du framework dit qu’une journée d’apprentissage est généralement suffisante
pour écrire des applications non triviales
8. OLBATI - Geek Time - Mai 2016
Pourquoi vue.js / Benchmark
• Léger
L’application Vue 2.0 complète, compilateur inclus, ne fait que 23 Ko => plus léger que les
autres frameworks du marché.
9. OLBATI - Geek Time - Mai 2016
Pourquoi vue.js / Benchmark
• Performant et rapide
10. OLBATI - Geek Time - Mai 2016
Architecture & Lifecycle
11. OLBATI - Geek Time - Mai 2016
Architecture & Lifecycle
12. OLBATI - Geek Time - Mai 2016
Architecture & Lifecycle
Chaque instance de composant a son propre instance watcher
Quand le setter d’une dependance est déclenché
Une envoi de notification vers le watcher
Appel de re-render component
Mise à jour du virtual DOM
• Reactivité
13. OLBATI - Geek Time - Mai 2016
Notions : Component
Pour enregistrer un component, on utilise le syntaxe Vue.component(tagName, options)
Par exemple :
Utilisation du composant dans le template :
14. OLBATI - Geek Time - Mai 2016
Notions : Component
• Local registration
Rendre un composant disponible dans la portée d'une autre instance / composant
en l'enregistrant avec l'option component:
15. OLBATI - Geek Time - Mai 2016
Notions : Component
• Composing components
Le composant A peut utiliser le composant B dans son propre template
Le parent peut avoir besoin de transmettre les données au composant “child”
L'enfant peut avoir besoin d'informer le parent de ce qui s'est passé dans l’enfant
==> Il faut un bon découplage via des interfaces défini
==> Isolation des compostants ==> maintenabilité et reutilisabilité
16. OLBATI - Geek Time - Mai 2016
Notions : Component
• Composing components
Dans vue.js, la relation composant de type parent-child est defini par: props down, event up
- le composants parent passe les donnée pour le child a travers des props
- le composants child passe les données pour le parent a travers des events
17. OLBATI - Geek Time - Mai 2016
Notions : Component
• Props
Chaque instance de composant à sa propre “scope”
Cela signifie qu’on peut pas referencer directement les données d’un composant “parent”
à partir d’un composant “child”
Les données de type “up to down” sont passés à travers les props
18. OLBATI - Geek Time - Mai 2016
Notions : Component
• Props
recevoir les données à travers un attribut
19. OLBATI - Geek Time - Mai 2016
Notions : Component
• Props validation
20. OLBATI - Geek Time - Mai 2016
Notions : Component
• Custom Events
=> C’est pour cela on a besoin des custom events
Et comment on peut communiquer les données d’un élément composant de type “child”
vers un composant “parent” ?
21. OLBATI - Geek Time - Mai 2016
Notions : Component
• Custom Events
Chaque Vue instance implémente l’interface des events:
• Ecoute les évènements à travers $on(eventName)
• Envoyer les évènements à travers $emit(eventName)
22. OLBATI - Geek Time - Mai 2016
Notions: Conditionals
• v-if
• v-else-if
23. OLBATI - Geek Time - Mai 2016
Notions: Conditionals
• v-show
• v-show Vs v-if
v-show compile et rend toujours le contenu, il ajoute simplement le style “display:none” à l’élement
Il y a un cout de chargement initial au debut, mais le changement d’état affiché/non-affiché est rapide.
v-if c’est lazy, quand la condition = false rien n’est fait, sinon il compile et rend le contenu
Le basculement de la condition est couteux car il permet de créer et détruire des composants pour
chaque changement d’état.
24. OLBATI - Geek Time - Mai 2016
Notions: Filters
Vue possède commodément un certain nombre de filtres intégrés
Le symbole de pipe (|) est utilisé pour désigner un filtre tel que
25. OLBATI - Geek Time - Mai 2016
Notions: Filters
Les filtres peuvent être placés à la fin de la valeur d'une directive:
ou dans un syntaxe mustache
ou avec un chainage de plusieurs filtres
• Filter vue.js
26. OLBATI - Geek Time - Mai 2016
Notions: Filters
• Custom Filter
on peut enregistrer un filtre personnalisé avec la méthode globale Vue.filter(), en passant en
paramètre l’ID du filtre et la fonction de filtrage
Utilisation du filtre
Enregistrement du filtre
27. OLBATI - Geek Time - Mai 2016
Notions: Computed Properties
Mettre trop de logique dans les templates peut les rendre trop verbeux et difficiles à maintenir:
=> Difficulté d’inclure le message inversé dans votre modèle plus d'une fois.
C'est pourquoi pour toute logique complexe dans les templates, on utilise les “computed properties”
28. OLBATI - Geek Time - Mai 2016
Notions: Computed Properties
• Exemple
29. OLBATI - Geek Time - Mai 2016
Notions: Computed Properties
Les “computed properties” sont mises en cache en fonction de leurs dépendances. Ceci est
changé lorsque certaines de ses dépendances ont changé.
Cela signifie que tant que le message n'a pas changé, l'accès multiple à la propriété calculée
reversedMessage enverra immédiatement la valeur précédente sans devoir exécuter la fonction
à nouveau.
• Exemple
30. OLBATI - Geek Time - Mai 2016
Notions: Watchers
Lorsque on souhaite effectuer des opérations asynchrones ou coûteuses en réponse à la
modification des données. => On a besoin d’un watcher
Exemple:
31. OLBATI - Geek Time - Mai 2016
Notions: Watchers
Exemple:
32. OLBATI - Geek Time - Mai 2016
Notions: Class & style bindings
Nous pouvons transmettre à l’attribut v-bind:class un objet pour affecter dynamiquement
les classes css:
Contenu du model:
Rendu dans le DOM:
33. OLBATI - Geek Time - Mai 2016
Routing
Il est recommandé d'utiliser la bibliothèque vue-routeur pour gérer la navigation des pages:
HTML:
34. OLBATI - Geek Time - Mai 2016
Routing
Router javascript configuration:
35. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Le concept de "one-way data flow” :
- State : Conteneur qui stocke l’état de l’application
- View : Afficher l’état et déclencher des actions
- Action : Contient les différents possibilités d’actions
qui peuvent être appliqué sur l’état
36. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Si on a plusieurs composants qui partagent le même état
- Plusieurs Vue qui dependent de la même partie
qui stocke l’état
- Des actions qui ont besoin de changer l’état on même
temps => Mutation
37. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Vuex pattern inspiré de Flux, Redux qui est une implémentation dédié pour vue.js
38. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
L’installation de vuex se fait avec la commande npm install vue —save
La création d’un simple store :
39. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Recuperation de l’etat à partir d’un composant
Soit un composant qui va être appelé par un compostant parent :
Mais comment l’objet store a été passé ?
40. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Recuperation de l’etat à partir d’un composant
La variable store est passé dans le composant parent afin de permettre au autre composant
qui l’appelle d’accéder á la variable Store
41. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Declaration des Getters au sein d’un store
Getter call :
Getters :
42. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Declaration des Actions au sein d’un store qui contient des opérations asynchrones
Actions :
Les Actions sont déclenché par la méthode store.dispatch
43. OLBATI - Geek Time - Mai 2016
Gestion des états avec Vuex
Mais si on veut faire l’incrementation, pourquoi on appelle pas directement
store.commit(‘increment’) ?
La raison :
- Les mutations doivent être synchrones
- Par contre, les actions ne sont pas synchrones
44. OLBATI - Geek Time - Mai 2016
Conclusion
Le point faible de Vue.js aux yeux des décideurs est qu’il reste un framework d’une « seule
personne »
45. OLBATI - Geek Time - Mai 2016
Conclusion
- Vue.js ne joue vraiment pas dans la cour d’Angular 2, mais vous n’avez pas toujours besoin d’une
telle puissance.
- La puissance d’Angular 2 est contrebalancée par la complexité et une courbe d’apprentissage
assez raide.
Vue 2 est sûrement un framework à considérer pour votre prochain projet.
46. OLBATI - Geek Time - Mai 2016
‹#›
Thanks!
Any questions?
@oboudhri
oussama.boudhri@olbati.com