Étude sur les frameworks Front-end
État de l’art et évolution de JavaScript en 2016
Bilel ZEGHAD
Framework - comparaison
https://www.google.com/trends
Framework - comparaison sur Github
Angular 1 github.com/angular/angular.js
React github.com/facebook/react
Ember.js github.com/emberjs/ember.js
Angular 2 github.com/angular/angular
JavaScript : État de l’art et évolution
ECMAScript 6 (ES6)
● Une gestion avancée des tableaux (map, foreach, ...)
● Du lazy chaining pour de nombreuses fonctions (le fait d’exécuter une série de commandes en une seule fois pour
économiser du temps de calcul)
● Une vraie gestion des classes (le mot-clé class est enfin disponible!)
● De vrais arguments (obligatoires, optionnels, valeurs par défaut, ...)
● De l'interpolation de variables et des chaines de textes sur plusieurs lignes
ES6 permet de mieux structurer le code et de se passer de librairie comme jQuery.
http://www.synbioz.com/blog/ecmascript_6
https://www.wanadev.fr/introduction-a-ecmascript-6-le-javascript-de-demain/
http://www.blogduwebdesign.com/ressources-javascript/es6-futur-Javascript-ressources-traduire-es5/1594
ECMAScript 6 (ES6)
% du support des nouvelles fonctionnalités d’ES6 par les navigateurs
Pour palier à ce manque de support( à ce jour) , il est possible de compiler du code ES6 en ES5.
Mi-2016, les navigateurs modernes supporteront tous ES6
TypeScript
● typescriptlang.org
TypeScript est un langage de programmation libre et open-source développé par Microsoft qui a pour but d'améliorer et de
sécuriser la production de code JavaScript.
C'est un sur-ensemble de JavaScript (tout code JavaScript peut être utilisé avec TypeScript). Le code TypeScript est
transcompilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web ou moteur JavaScript. Il a été
cocréé par Anders Hejlsberg, principal inventeur de C# 1.
TypeScript permet un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces,
l'import de modules, tout en conservant l'approche non-contraignante de JavaScript. Il supporte la spécification ECMAScript
6. https://fr.wikipedia.org/wiki/TypeScript
Angular 1.4 : version actuelle
Dernières annonces angularjs.blogspot.com
● Growth: Angular 1 continues its stellar growth with over 1.1M developers worldwide.
● ngUpgrade: You can seamlessly mix and match Angular 1 with Angular 2 by using the ngUpgrade library.
● Support: We'll be continuing support for Angular 1 so long as the majority of developers use it. We've made
32 releases this year with new features, bug fixes, and performance improvements. Upcoming release include new
features in components, routing, i18n, and animation.
Angular 2
● Speed: Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre-
rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling
and snappy view transitions.
● Browsers: Angular 2 supports IE 9, 10, 11, Microsoft Edge, Safari, Firefox, Chrome, Mobile Safari, and Android 4.1
+.
● Cross-platform: By learning Angular 2, you'll gain the core knowledge you'll need to build for a full range of
platforms including desktop and mobile web, hybrid and native UI mobile installed apps, and even installable
desktop applications.
● Microsoft partner! TypeScript <3 Angular
Ressources web
https://www.google.com/trends (Angular vs Silverlight vs ReactJS)
http://www.journaldunet.com/developpeur/outils/angular-js.shtml
http://www.synbioz.com/blog/ecmascript_6
https://www.wanadev.fr/introduction-a-ecmascript-6-le-javascript-de-demain/
http://www.blogduwebdesign.com/ressources-javascript/es6-futur-Javascript-ressources-traduire-es5/1594
TypeScript <3 Angular

Etude rapide sur les frameworks Front-end (AngularJS vs *JS)

  • 1.
    Étude sur lesframeworks Front-end État de l’art et évolution de JavaScript en 2016 Bilel ZEGHAD
  • 2.
  • 3.
    Framework - comparaisonsur Github Angular 1 github.com/angular/angular.js React github.com/facebook/react Ember.js github.com/emberjs/ember.js Angular 2 github.com/angular/angular
  • 4.
    JavaScript : Étatde l’art et évolution
  • 5.
    ECMAScript 6 (ES6) ●Une gestion avancée des tableaux (map, foreach, ...) ● Du lazy chaining pour de nombreuses fonctions (le fait d’exécuter une série de commandes en une seule fois pour économiser du temps de calcul) ● Une vraie gestion des classes (le mot-clé class est enfin disponible!) ● De vrais arguments (obligatoires, optionnels, valeurs par défaut, ...) ● De l'interpolation de variables et des chaines de textes sur plusieurs lignes ES6 permet de mieux structurer le code et de se passer de librairie comme jQuery. http://www.synbioz.com/blog/ecmascript_6 https://www.wanadev.fr/introduction-a-ecmascript-6-le-javascript-de-demain/ http://www.blogduwebdesign.com/ressources-javascript/es6-futur-Javascript-ressources-traduire-es5/1594
  • 6.
    ECMAScript 6 (ES6) %du support des nouvelles fonctionnalités d’ES6 par les navigateurs Pour palier à ce manque de support( à ce jour) , il est possible de compiler du code ES6 en ES5. Mi-2016, les navigateurs modernes supporteront tous ES6
  • 7.
    TypeScript ● typescriptlang.org TypeScript estun langage de programmation libre et open-source développé par Microsoft qui a pour but d'améliorer et de sécuriser la production de code JavaScript. C'est un sur-ensemble de JavaScript (tout code JavaScript peut être utilisé avec TypeScript). Le code TypeScript est transcompilé en JavaScript, pouvant ainsi être interprété par n'importe quel navigateur web ou moteur JavaScript. Il a été cocréé par Anders Hejlsberg, principal inventeur de C# 1. TypeScript permet un typage statique optionnel des variables et des fonctions, la création de classes et d'interfaces, l'import de modules, tout en conservant l'approche non-contraignante de JavaScript. Il supporte la spécification ECMAScript 6. https://fr.wikipedia.org/wiki/TypeScript
  • 8.
    Angular 1.4 :version actuelle Dernières annonces angularjs.blogspot.com ● Growth: Angular 1 continues its stellar growth with over 1.1M developers worldwide. ● ngUpgrade: You can seamlessly mix and match Angular 1 with Angular 2 by using the ngUpgrade library. ● Support: We'll be continuing support for Angular 1 so long as the majority of developers use it. We've made 32 releases this year with new features, bug fixes, and performance improvements. Upcoming release include new features in components, routing, i18n, and animation.
  • 9.
    Angular 2 ● Speed:Angular 2 is dramatically faster than Angular 1 with support for fast initial loads through server-side pre- rendering, offline compile for fast startup, and ultrafast change detection and view caching for smooth virtual scrolling and snappy view transitions. ● Browsers: Angular 2 supports IE 9, 10, 11, Microsoft Edge, Safari, Firefox, Chrome, Mobile Safari, and Android 4.1 +. ● Cross-platform: By learning Angular 2, you'll gain the core knowledge you'll need to build for a full range of platforms including desktop and mobile web, hybrid and native UI mobile installed apps, and even installable desktop applications. ● Microsoft partner! TypeScript <3 Angular
  • 10.
    Ressources web https://www.google.com/trends (Angularvs Silverlight vs ReactJS) http://www.journaldunet.com/developpeur/outils/angular-js.shtml http://www.synbioz.com/blog/ecmascript_6 https://www.wanadev.fr/introduction-a-ecmascript-6-le-javascript-de-demain/ http://www.blogduwebdesign.com/ressources-javascript/es6-futur-Javascript-ressources-traduire-es5/1594 TypeScript <3 Angular