SlideShare une entreprise Scribd logo

Javascript as a first programming language : votre IC prête pour la révolution !

VISEO
VISEO

NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ? Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.

1  sur  136
Télécharger pour lire hors ligne
JavaScript as a first programming
language
votre IC prête pour la révolution
Julien Roche
Frédéric Dubois
Frédéric Bouquet
From Objet Direct
Julien Roche - @rochejul
•Ingénieur d’étude Java, Web, Web Mobile / hybride chez
Objet Direct depuis 6 ans
•Formateur / consultant sur ces technologies
Frédéric Bouquet - @bouquetf
Curieux
Bidouilleur
Open source
Bonitasoft
Objet Direct
www.espacedefouille.org
Frédéric Dubois - @fduboisca
http://www.devoxx.com/display/FR12/Pour+un+developpement+du
rable
12 ans d’expérience
Et tu développes encore
?
So what !!?!!?!
Qualité
Agilité
TDDXP
IC Coding rules check
Sonar
Refactoring
Javascript as a first programming language : votre IC prête pour la révolution !

Recommandé

TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummiesMicrosoft
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)guicara
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Julien Jakubowski
 
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Bonnes pratiques pour apprivoiser le C++11 avec Visual C++
Bonnes pratiques pour apprivoiser le C++11 avec Visual C++Microsoft
 
C++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in ParisC++ 11 - Tech Days 2014 in Paris
C++ 11 - Tech Days 2014 in Parischristophep21
 
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPPascal MARTIN
 

Contenu connexe

Tendances

Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScriptfelixbillon
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Javajollivetc
 
Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Jean-Michel Doudoux
 
Jquery
JqueryJquery
Jquerykrymo
 
Rouabhi algiers meetup
Rouabhi algiers meetupRouabhi algiers meetup
Rouabhi algiers meetupSamir Rouabhi
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScriptStrasWeb
 
Presentation Rex Methodes Agiles
Presentation Rex Methodes AgilesPresentation Rex Methodes Agiles
Presentation Rex Methodes AgilesIppon
 
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014Ippon
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Ippon
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Xavier Lacot
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Dr Samir A. ROUABHI
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesIppon
 
Swift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'AppleSwift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'AppleDamien GOSSET
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileIppon
 
C# 5 versus Java 8... Quand C++ 11 s'invite à la fête
C# 5 versus Java 8... Quand C++ 11 s'invite à la fêteC# 5 versus Java 8... Quand C++ 11 s'invite à la fête
C# 5 versus Java 8... Quand C++ 11 s'invite à la fêteFabrice JEAN-FRANCOIS
 
Domain-Specific Languages avec Groovy
Domain-Specific Languages avec GroovyDomain-Specific Languages avec Groovy
Domain-Specific Languages avec GroovyGuillaume Laforge
 

Tendances (20)

Formation VBA Excel
Formation VBA ExcelFormation VBA Excel
Formation VBA Excel
 
Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript
 
JavaScript pour le développeur Java
JavaScript pour le développeur JavaJavaScript pour le développeur Java
JavaScript pour le développeur Java
 
Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10Voxxeddays lux 2018 apres java 8, java 9 et 10
Voxxeddays lux 2018 apres java 8, java 9 et 10
 
Jquery
JqueryJquery
Jquery
 
Rouabhi algiers meetup
Rouabhi algiers meetupRouabhi algiers meetup
Rouabhi algiers meetup
 
Initiation au JavaScript
Initiation au JavaScriptInitiation au JavaScript
Initiation au JavaScript
 
Tutoriel java
Tutoriel javaTutoriel java
Tutoriel java
 
Presentation Rex Methodes Agiles
Presentation Rex Methodes AgilesPresentation Rex Methodes Agiles
Presentation Rex Methodes Agiles
 
Nouveautés de java 8
Nouveautés de java 8Nouveautés de java 8
Nouveautés de java 8
 
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
Web API & Cache, the HTTP way - Ippevent 10 Juin 2014
 
Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014Formation Spring Avancé gratuite par Ippon 2014
Formation Spring Avancé gratuite par Ippon 2014
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
 
Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)Présentation Javascript à l'ESI (Alger)
Présentation Javascript à l'ESI (Alger)
 
JPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à AchillesJPA avec Cassandra, grâce à Achilles
JPA avec Cassandra, grâce à Achilles
 
Swift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'AppleSwift, opportunités et perspectives du dernier langage d'Apple
Swift, opportunités et perspectives du dernier langage d'Apple
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
 
The Future of Javascript
The Future of JavascriptThe Future of Javascript
The Future of Javascript
 
C# 5 versus Java 8... Quand C++ 11 s'invite à la fête
C# 5 versus Java 8... Quand C++ 11 s'invite à la fêteC# 5 versus Java 8... Quand C++ 11 s'invite à la fête
C# 5 versus Java 8... Quand C++ 11 s'invite à la fête
 
Domain-Specific Languages avec Groovy
Domain-Specific Languages avec GroovyDomain-Specific Languages avec Groovy
Domain-Specific Languages avec Groovy
 

En vedette

HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsSun Technlogies
 
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...Santé des trans
 
Les Applications CRM mobile Tunisie Telecom Pour BlackBerry
Les Applications CRM mobile Tunisie Telecom Pour BlackBerryLes Applications CRM mobile Tunisie Telecom Pour BlackBerry
Les Applications CRM mobile Tunisie Telecom Pour BlackBerrytunisieblackberry
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSSSun Technlogies
 
Système de gestion de tickets
Système de gestion de ticketsSystème de gestion de tickets
Système de gestion de ticketsraymen87
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...Hajer Dahech
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 

En vedette (13)

HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...
Rencontre du CRIPS / Act Up-Paris "Personnes trans : quels enjeux de santé ?"...
 
Jsp
JspJsp
Jsp
 
Les Applications CRM mobile Tunisie Telecom Pour BlackBerry
Les Applications CRM mobile Tunisie Telecom Pour BlackBerryLes Applications CRM mobile Tunisie Telecom Pour BlackBerry
Les Applications CRM mobile Tunisie Telecom Pour BlackBerry
 
Cascading Style Sheets - CSS
Cascading Style Sheets - CSSCascading Style Sheets - CSS
Cascading Style Sheets - CSS
 
Arşivlik Fotoğraflar
Arşivlik FotoğraflarArşivlik Fotoğraflar
Arşivlik Fotoğraflar
 
Système de gestion de tickets
Système de gestion de ticketsSystème de gestion de tickets
Système de gestion de tickets
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...Rapport  PFE  "Conception et développement d'un Portail web pour le Smart Met...
Rapport PFE "Conception et développement d'un Portail web pour le Smart Met...
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 

Similaire à Javascript as a first programming language : votre IC prête pour la révolution !

Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesChristophe Furmaniak
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphipprem
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Guillaume Sautereau
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?Frédéric Harper
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Cellenza
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfboulonvert
 
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...Jasmine Conseil
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Julien Dubois
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent Biret
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Microsoft
 

Similaire à Javascript as a first programming language : votre IC prête pour la révolution ! (20)

Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Native script
Native scriptNative script
Native script
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Rex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantesRex docker en production meeutp-docker-nantes
Rex docker en production meeutp-docker-nantes
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
REX react native
REX react nativeREX react native
REX react native
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1Au coeur du framework .net 4.5.1
Au coeur du framework .net 4.5.1
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et  ...
Livraison en continue avec l'outillage devops - Jenkins, Ansible, Docker et ...
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)Vincent biret azure functions et flow (montreal)
Vincent biret azure functions et flow (montreal)
 
Usine Logicielle 2013
Usine Logicielle 2013Usine Logicielle 2013
Usine Logicielle 2013
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
 
Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1Au cœur du Framework .NET 4.5.1
Au cœur du Framework .NET 4.5.1
 

Plus de VISEO

Tendances Mobile 2018
Tendances Mobile 2018Tendances Mobile 2018
Tendances Mobile 2018VISEO
 
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...VISEO
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...VISEO
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.lessVISEO
 
Phonegap
PhonegapPhonegap
PhonegapVISEO
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJSVISEO
 
Faire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxxFaire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxxVISEO
 
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012   Gregory Weinbach - il n y a pas de bon modele metierDevoxx 2012   Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metierVISEO
 
Sexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobileSexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobileVISEO
 

Plus de VISEO (9)

Tendances Mobile 2018
Tendances Mobile 2018Tendances Mobile 2018
Tendances Mobile 2018
 
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
What’s new in Microsoft ALM 2013, hosted in Windows Azure, VISUAL STUDIO ONLI...
 
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
Devoxx France 2013: CSS, more or Less - http://www.devoxx.com/display/FR13/CS...
 
Css.more.or.less
Css.more.or.lessCss.more.or.less
Css.more.or.less
 
Phonegap
PhonegapPhonegap
Phonegap
 
Aperçu de RequireJS
Aperçu de RequireJSAperçu de RequireJS
Aperçu de RequireJS
 
Faire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxxFaire du-code-centre-sur-l-humain devoxx
Faire du-code-centre-sur-l-humain devoxx
 
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012   Gregory Weinbach - il n y a pas de bon modele metierDevoxx 2012   Gregory Weinbach - il n y a pas de bon modele metier
Devoxx 2012 Gregory Weinbach - il n y a pas de bon modele metier
 
Sexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobileSexy.le.developpement.web.mobile
Sexy.le.developpement.web.mobile
 

Javascript as a first programming language : votre IC prête pour la révolution !

  • 1. JavaScript as a first programming language votre IC prête pour la révolution Julien Roche Frédéric Dubois Frédéric Bouquet From Objet Direct
  • 2. Julien Roche - @rochejul •Ingénieur d’étude Java, Web, Web Mobile / hybride chez Objet Direct depuis 6 ans •Formateur / consultant sur ces technologies
  • 3. Frédéric Bouquet - @bouquetf Curieux Bidouilleur Open source Bonitasoft Objet Direct www.espacedefouille.org
  • 4. Frédéric Dubois - @fduboisca http://www.devoxx.com/display/FR12/Pour+un+developpement+du rable 12 ans d’expérience Et tu développes encore ? So what !!?!!?! Qualité Agilité
  • 5. TDDXP IC Coding rules check Sonar Refactoring
  • 8. La mort annoncée de Flash et autres Metro style browsing and plug-in free HTML5. … Many of the 62% of these sites that currently use Adobe Flash already fall back to HTML5 video in the absence of plug-in support Building Windows 8, avril 2011 Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short. Steve Jobs, avril 2010
  • 10. JavaScript ?!!!?!!!? C’est pas un langage orienté Objet…Prototype tu dis ? Pas de typage fort Pas de complétion, WTF! Les scripts c’est pour faire des moulinettes pas des applications!!
  • 12. • Le fantôme, le zombie et testacular, panorama des outils de tests pour application web moderne • AngularJS, ou le futur du développement Web • Frontend Live Coding : Tour d'horizon de l'outillage et des technos web d'aujourd'hui • Developing Modern Web Apps With Backbone.js • Space Chatons: Bleeding Edge HTML5 • Live coding avec Yeoman & AngularJS • Du Javascript propre ? Challenge Accepted • Animez vos pages HTML5: un tour d'horizon complet des techniques d'animation en HTML5 • Creating Games with WebGL and Three.js
  • 15. Et bah moi en Java…
  • 16. Et ils veulent me faire changer pour ça? IDE = Debug = Profiling = Test = Quality = Build = = Continuous Integration
  • 17. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 18. Pendant ces 2h1/2, nous allons Présenter une usine logicielle Javascript complète Autour d’une projet Web Il y aura, du code De la conf Des fantômes, des oiseaux, des phacochères, des
  • 20. Des outils • Concevoir, développer, tester • Sauvegarder/Archiver/Versioner • Gérer les dépendances • Compiler • Exécuter les tests • Vérifier la qualité du code produit • Documenter • Produire un livrable A chaque version
  • 21. Big Picture dans le monde Java Produit Géré par Articulé autour de Testé avec Versione avec Peut utiliser
  • 22. Big Picture dans le monde Web Produit Géré par Articulé autour de Testé avec Versione avec Peut utiliser ?? ? ?
  • 24. Un développeur sans IDE •C’est un peu comme MacGyver sans son couteau suisse
  • 25. Et pourtant ! •Le développeur Web a longtemps été seul •Souvent, un simple Notepad++ était son meilleur outil
  • 26. Mais cela a changé ! •Nous avons désormais un ensemble d’IDE à notre disposition pour nous aider !
  • 27. Webstorm •Produit par Jetbrains •Spécialisé pour répondre au large panel de nouvelles technologies du Web
  • 29. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 31. Autrefois … • Si nous voulions gérer un projet pur JavaScript, nous étions seul au monde • … encore …
  • 32. NodeJs – Et la force est avec nous ? • NodeJs est un outils écrit en C qui utilise JavaScript comme langage de script • Il offre une API importante pour gérer les streams, fichiers, … • Nous pouvons nous en servir en tant que serveur, mais aussi en tant qu’outils • Il est à la fois puissant et scalable • De nombreuses entreprises aux Etats-Unis l’utilisent en tant que serveur d’entreprise comme PayPal
  • 33. Un exemple de serveur (1) var sys = require('sys'), httpServer = require('http'); httpServer.createServer(function(request,response){ response.writeHeader(200, { 'Content-Type': 'text/plain '}); response.write('Hello World'); response.end(); }); httpServer.listen(8080); sys.puts('Server Running on 8080');
  • 34. Un exemple de serveur (2) var express = require('express'), app = express(), restPrefix = '/api', port = process.env.PORT || 9000; app.configure(function () { app.use(express.bodyParser()); app.use(express.static(__dirname)); // Our server is the local directory '.' }); app.get(restPrefix + '/users', function(req, res) { console.log('A request is done on /users on GET'); res.json([ { 'id': 1, 'firstName': 'John', 'lastName': 'Doe', 'age': 25 } ]); }); app.listen(port); console.log('Server started on port ' + port);
  • 35. NodeJs – En tant qu’outils (1) • La simplicité et le choix de JavaScript a permis à de nombreux frameworks JavaScripts de proposer des outils • Evitant d’écrire des scripts Shell
  • 36. NodeJs – En tant qu’outils (2) • Une pléthore de plugins sont alors apparus ! • Sans compter les très nombreux modules NodeJs qui sont là pour nous aider à concevoir d’autres modules NodeJs
  • 38. Et ce n'est pas que pour les POCs • http://nodejs.org/industry
  • 40. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 43. Sommaire • Marre du "alert('...');" • Initialiser un projet • Et pour mon jQuery ? • Organiser mon code • He’s alive ! ALIVE ! • Les tests et les rapports de qualités • Un petit coup de pouce ? • L’intégration dans une IC • One more thing
  • 45. Autrefois … •Le déboggage d’une application Web était plutôt compliqué … •Nous devions souvent mettre des instructions « alert » dans notre code pour voir le cheminement •Les erreurs remontées étaient souvent ardues à comprendre, ou alors n’indiquaient pas le bon emplacement
  • 46. Néanmoins … •Des outils ont émergés pour essayer de nous aider •Firebug pour Firefox •Dynatrace Ajax edition •Log4JavaScript •Mais ils n’étaient pas suffisant
  • 47. ChromeDevTools à l’aide •C’est un outils intégré dans Chrome •Il a pour but d’intégrer un large panel de fonctionnalités pour: •Débugger le JavaScript, HTML, CSS •Faire du monitoring réseau, mémoire •Simuler un environnement
  • 49. Aperçu pour la partie HTML
  • 50. Aperçu pour la partie JavaScript
  • 51. Pour le réseau, nous pouvons … •Connaître toutes les réseaux chargés •Avec le temps de chargement •Avec le statut réseau •Avec les entêtes et le corps de la requête •Avec les entêtes et le corps de la réponse
  • 52. Et bien d’autres choses ! •Timeline pour voir les événements capturés et le temps de traitement chacun •Timeline pour connaître le temps d’affichage de la page •Timeline pour connaître la mémoire consommé •Profiling JavaScript •Profiling Canvas •Audit de son site Web •Console
  • 58. Que fait un gestionnaire de projet ? • Il a pour but de donner des informations sur le projet • Nom, auteur, version … • Il a pour but de gérer les dépendances • Pour mieux gérer le projet • Pour le projet lui-même • Il a pour but de lancer les tests unitaires • Il a pour but de déployer des versions
  • 62. Le gestionnaire de dépendances • Il a pour but de télécharger des modules / frameworks pour • Soit mieux gérer l’application • Soit pour l’application lui-même • Dans le cas où nous écrivons une application serveur, NodeJs suffit • Via NPM • Mais dans le cas d’une application cliente, comment faire ?
  • 63. Bienvenue à Bower ! • Bower est un module NodeJs qui est orienté pour les solutions clientes • Comme Maven, • Il a une gestion de version • Il a gestion des dépendances • Ex: Si j’ai besoin de Backone.Marionette, je ne déclare que lui, et Bower ira télécharger la bonne version de Backbone et d’Underscore
  • 64. Son repository • Il a son propre repository: http://bower.io/search
  • 65. Que devons-nous faire ? • Il va falloir déclarer dans notre projet NodeJs que nous avons besoin de Bower • Nous allons avoir une nouvelle commande dans notre shell « bower » • Nous pourrons faire • « bower init » pour créer le fichier de description Bower • « bower install » pour déclarer / télécharger une dépendance à notre projet, modifier le fichier de description
  • 68. Pallier un syndrôme bien connu • Souvent nous avons ça: • Autrement, nous avons une liste impressionnante de JavaScript à déclarer dans le bon ordre pour notre application ! <head> <title>Devoxx Application</title> <meta charset="utf-8" /> <script type="text/javascript" defer="defer" src="./frameworks/jquery.js"></script> <script type="text/javascript" defer="defer" src="./models/users.js"></script> <script type="text/javascript" defer="defer" src="./models/groups.js"></script> <script type="text/javascript" defer="defer" src="./models/commands.js"></script> <!-- To infinity ... and beyhond ! --> <script type="text/javascript" defer="defer" src="./main.js"></script> </head>
  • 69. Ce qui nous amène à la question … • Comment devons-nous charger nos fichiers JavaScripts ? • Dans la balise HEAD ? • En bas de la balise BODY ? • En utilisant les attributs async (HTML5) ou defer ? • Via JavaScript, en injectant un nœud ? • Via JavaScript, en injectant un nœud, au moment de l’événement « Load », en utilisant « defer » ?
  • 70. Et si on allait plus loin ? • Ne pourrions-nous pas avoir un framework qui fasse du chargement asynchrone • Chargement optimisé • Mais également • Une gestion de dépendances ? • Un chargement des templates ? • Une gestion de l’internalisation ? • Et qui soit léger ? • Une solution: RequireJS
  • 71. RequireJS • Github: https://github.com/jrburke/requirejs • Documentation: http://requirejs.org/ • Compatible sur la quasi-totalité des navigateurs • IE6+, Firefox 2+, Safari 3.2+, Chrome 3+, Opera 10+ • Repose sur l’AMD: • Asynchronous Module Definition: https://github.com/amdjs/amdjs- api/wiki/AMD • Repose sur deux méthodes: Define et Require
  • 72. Un aperçu … define( ["mypreviousmodule", "myanotherpreviousmodule"], function(a, b){ // Do something // Return something return { "a": "a" }; } ); • Et il existe un grand nombre de plugins • Pour charger des templates, les compiler avec Underscore • Pour gérer l’internalisation • Pour charger une image • Pour charger des API Google • …
  • 73. Optimisation • RequireJS a un plugin NodeJS permettant • De concaténer et de minifier les fichiers JavaScripts • Et cela en respectant l’ordre de chargement des modules et de leurs dépendances • Il suffit alors de l’installer • Et de le lancer ! > npm install -g requirejs > node r.js -o baseUrl=. paths.requireLib=../require name=main include=requireLib out=main-built.js
  • 76. Votre projet vit • Un gestionnaire de projet propose en générale un cycle de vie • Pour télécharger les dépendances • Pour nettoyer son projet • Pour lancer les tests • Pour lancer les rapports de qualités • Pour générer la documentation • Pour compiler votre application • Pour le développement ou la production • Pour distribuer l’application
  • 77. Jetons un œil chez Maven 3.2.1
  • 79. Et chez NodeJs • Nous allons un petit cycle de vie que nous définissons dans le package.json et qui a pour but de lancer des commandes: • prepublish, publish • presintall, install, postinstall • preuninstall, uninstall, postuninstall • pretest, test, posttest • …
  • 81. Néanmoins … • Ce cycle de vie n’est pas toujours très adapté • Quelles solutions aurions-nous ? • Utiliser des solutions comme Maven, Gradle, Ant ? • Pas très adapté car plutôt pour le monde Java • Ou alors existe-t-il une solution dans le monde NodeJs
  • 82. Solution: GruntJs • GruntJs est un module NodeJs qui propose un peu comme Ant d’exécuter des « tâches » • Une tâche étant soit un script JavaScript, soit un plugin GruntJs • Pour ce faire, GruntJs vous propose une API assez riche pour créer vos propres plugins • Beaucoup de modules NodeJs possède leur propre plugin GruntJs • Less, JsHint, RequireJs, Bower, Karma …
  • 84. GruntJs et ses plugins officiels • grunt-contrib: pour avoir tous les plugins officiels • grunt-contrib-clean • grunt-contrib-compress • grunt-contrib-concat • grunt-contrib-copy • grunt-contrib-cssmin • grunt-contrib-csslint • grunt-contrib-htmlmin • grunt-contrib-imagemin • grunt-contrib-jshint • …
  • 87. Parent / enfant • Nous avons la notion de projets parent / enfants • Où un enfant est un sous-ensemble • Où le parent regroupe ses enfants • Avec le monde NodeJs, sera tout à fait possible • Et cela assez simplement
  • 88. On obtient une transversalité ! • Un même technologie partout
  • 89. Et pour ce faire • Si nous voulons étendre un module backend: utilisation de NodeJs • Si nous voulons étendre un module frontend: utilisation de Bower
  • 91. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 93. Nos exigences qualités • En règle générale, nous aimons bien avoir: • Des rapports sur nos tests • Des rapports sur la couverture de code • De la génération de documentation • Des rapports sur la qualité du code et le bon respect des conventions • …
  • 94. Dans le monde Java • Cela se traduit par: • Des rapports Junit • Des rapports Cobertura • De la JavaDoc / Oxygen • Des rapports Checktyle, PMD, …
  • 95. Dans le monde du Web • Autant dans le monde Java, nous validons du Java • Autant dans le monde du Web, nous validons: • De l’HTML • Du CSS / Less / Compass • Du JavaScript / CoffeeScript / TypeScript / Dart • … • Ce qui demande un outillage plus important
  • 97. Ce que nous voulons faire Des TUs Des TFs Ecrire Les exécuter Dans un navigateur headless Pour produire <XML/ > Et alimenter
  • 98. Ecrire des tests Jasmine pour les tests unitaires • Syntaxe BDD, assertions et mock • Intégration avec les tests runner frontend et backend (On aurait pu aussi utiliser qunit, mocha, chai, nodeunit, etc.) CasperJS • Navigation sur une application web • Evaluation dans le contexte du navigateur (On aurait pu aussi utiliser ZombieJS, WebDriverJS, Protractor ou Selenium)
  • 99. Karma à la rescousse Son objectif: exécuter les tests dans un navigateur Avantages • Gère plusieurs frameworks de tests (Jasmine, Mocka …) • Permet l’exécution dans plusieurs navigateurs (PhantomJs , Chrome, Firefox…) • Supporte les principaux frameworks (RequireJs, Angular, …) • Génère des rapports • Compatible xunit pour les tests • Compatible Cobertura pour la couverture de code
  • 100. PhantomJs • Nous utilisons souvent Karma avec PhantomJs • Basé sur Webkit NAVIGATEUR HEADLESS = ! AUTOMATISATION!
  • 103. Elle est où la doc ? JSDoc 3
  • 104. Oui mais Web = JS + HTML, CSS, etc Normes de développement ? • Nous avions JsLint (initié par Douglas Crokford) qui permettait de faire la qualité de code sur le JavaScript • Remplacé par JsHint qui va plus loin Pour les autres technologies, nous avons souvent un équivalent de XLint / XHint: … Batch + intégration IDE
  • 105. Reporting • Et en règle générale, un générateur de rapport se disant « Lint » ou « Hint » génère souvent un fichier de type Checkstyle • Dans le cas de notre usine, il nous suffit de trouver ceux ayant un plugin grunt • grunt-contrib-jshint • grunt-htmlhint • grunt-contrib-csslint • grunt-lesshint • grunt-coffeehint • …
  • 107. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 109. Nous voulons… valider JSDoc 3 2- compiler 3 -analyser 4- documenter Checkstyle reports 1- Mettre à jour les dépendances 5- tester Junit & cobertura reports
  • 110. Nous voulons… produire un livrable • Minification • Optimisation • Obfuscation • Manifest HTML5
  • 111. Intégration dans Jenkins • Comme pour Maven / Gradle / Ant, nous allons créer un job qui va lancer une commande ! Lance les tests avec Récupère le code avec récupère les dépendances projets et de l’application avec Publie les rapports de tests, qualités Produit la documentation Tag l’application …
  • 113. En bref • Notre projet pourra s’intégrer assez facilement dans les différentes intégration continue
  • 115. Javascript as a 1st language Un environnement de développement performant De l’outillage, ne pas réinventer la roue Ecrire un backend Ecrire un frontend De qualité Avec des indicateurs remontés dans une IC
  • 117. Tout ça a dû vous faire peur …
  • 119. Néanmoins, il y a Yeoman • Soutenu par les grands du monde Web • Addy Osmany • Paul Irish • Sindre Sorhus • … • Il a pour objectif de vous faciliter la vie • En vous proposant un moteur de génération basé sur des templates • En vous permettant de créer des templates !
  • 120. Créer son projet en un « click » • Tout d’abord, il faut l’installer • Ensuite, il faut installer un template • Par exemple un pour créer des sites Web • Nous allons pouvoir alors demander de créer un template de type « webapp » npm install -g yo npm install -g generator-webapp yo webapp
  • 121. Ce qui nous donne
  • 122. Et les templates sont légions
  • 123. Pourquoi l’évoquer que maintenant ? • Tout simplement pour ne pas brûler les étapes ! • Il y a beaucoup de nouvelles technologies • Il y a beaucoup de finesses et de notions à connaître • Si nous allons directement à Yeoman • Nous serons un peu perdu sur comment modifier les fichiers • Nous ne saurons pas quoi faire en cas de « bug » • Nous ne saurons pas à quoi corresponde tel ou tel chose
  • 124. En bref • L’utilisation de Yeoman est à préconiser: • Quand vous avez des bonnes notions • Personnellement, je passe plus de temps à déconfigurer ce qu’ils proposent, du coup, je l’utilise rarement  • Quand vous souhaitez créer vos propres templates pour vos projets
  • 126. Maven/Gradle Commandes shell pour exécuter node.js Maven : pl.allegro:grunt-maven-plugin Gradle : com.moowork.gradle:gradle-grunt-plugin Cycles de vie ! Packaging
  • 127. Et ailleurs ? • Java 8 : Nashorn/nodyn • Microsoft: du node partout, mais surtout dans azure ! • Python : encore du node • Rails/Grails/… : des tags et des plugins
  • 128. Des outils • Concevoir, développer, tester • Sauvegarder/Archiver/Versioner • Gérer les dépendances • Compiler • Exécuter les tests • Vérifier la qualité du code produit • Documenter • Produire un livrable A chaque version
  • 130. En une phrase pour commencer
  • 131. Période plutôt existante … • Nous sommes dans une période charnière ! • De nombreuses technologies Web • La révolution dans le navigateur • La guerre des navigateurs • Le JavaScript qui évolue lentement mais sûrement dans le bon sens • Adoption de Ecmacscript 6 en cours • Définition de Ecmascript 7
  • 132. … où on pourra dire … • Qu’il y a eu un avant et un après 2004 2014
  • 133. Avec des bonnes nouvelles !!
  • 134. En une phrase pour finir
  • 136. Ceux que nous n'avons pas cités