Inclure JQuery 2.x pour les fureteurs récents et 1.x pour les récalcitrants

L’équipe derrière JQuery a pris la décision de laisser tomber le support pour Internet Explorer 6, 7 et 8 dans la branche 2.x.

Pour l’explication officielle, veuillez consulter jQuery Core: Version 1.9 and Beyond. En voici un extrait:

There’s just one thing interfering with our vision of the future, and that’s the ghost of browsers past. Internet Explorer 6, 7, and 8–collectively, oldIE–have been a thorn in the side of web developers for a decade.

L’API de la branche 2.x est compatible avec l’API de la branche JQuery 1.9+ qui supporte toujours les vielles versions.

Our goal is for 1.9 and 2.0 to be interchangeable as far as the API set they support. When 2.0 comes out, your decision on which version to choose should be as simple as this: If you need IE 6/7/8 support, choose 1.9; otherwise you can use either 1.9 or 2.0.

Cependant, pour y arriver, cette branche doit faire plusieurs pirouettes et tours de magie et cela complique le code et rend plus difficile son évolution. Ou encore mieux formulé (par l’équipe de JQuery):

If jQuery 1.9 and 2.0 are basically the same API, what makes 2.0 compelling?

Smaller size, better performance, and the lack of problems introduced by the need for oldIE support. We expect that we can improve error handling in the $.Deferred implementation in 2.0, for example, whereas we can’t do that as long as oldIE is supported.

En tant que développeur, on veut souvent profiter des dernières améliorations nous permettant d’écrire du code concis, efficace et avec le moins de défaut possible. On veut aussi minimiser le nombre de tests à effectuer. Tester un site pour IE 11, IE 10, IE 9 et Chrome est déjà beaucoup. Si en plus il faut tester avec IE 8, IE7 et IE6, cela rend les choses encore plus compliquées.

Même les grosses compagnies avec de gros comptes de banque et beaucoup d’employés préfèrent supporter les fureteurs récents. Par exemple, Google a abandonné le support pour IE9 quelque temps après la sortie de IE 11:

Google Drops Support for IE9

Alors si vous souhaitez travailler avec les dernières versions des fureteurs et la dernière version de JQuery lors du développement mais garder une porte ouverte pour supporter les vieux fureteurs si on client l’exige, voici un petite recette.

Recette pour inclure automatiquement la dernière version de JQuery dans un application ASP.Net MVC

  1. Ajoutez la dernière version de JQuery 2.x à votre projet ainsi que la dernière version de JQuery 1.ximage
  2. Dans la classe BundleConfig, ajoutez deux bundles:
    public static void RegisterBundles(BundleCollection bundles)
    {
    bundles.Add(new ScriptBundle(« ~/bundles/jquery1 »).Include(« ~/Scripts/jquery-1* »));
    bundles.Add(new ScriptBundle(« ~/bundles/jquery2 »).Include(« ~/Scripts/jquery-2* »));
    (…)
  3. Définissez une vue partielle nommée _JQueryInclude.cshtml et contenant les 5 lignes suivantes:<!– Conditionally include jQuery version based on IE version –>
    <!–[if lt IE 9]>
    @Scripts.Render(« ~/bundles/jquery1 ») <![endif]–>
    <!–[if gte IE 9]><!–>
    @Scripts.Render(« ~/bundles/jquery2 ») <!–<![endif]—>
  4. Dans votre layout page ou à l’endroit où vous désirez inclure JQuery, utilisez:@Html.Partial(« _JQueryInclude »)

Et voilà! Si vos utilisateurs utilisent IE 6, IE 7 ou IE 8, les pages HTML utiliseront la branche 1.x de JQuery. Autrement, la version moderne de la branche 2.x sera utilisée.

Quelques nouveautés MVC 4

Je suis en train de lire le livre Programming ASP.NET MVC 4 de O’Reilly. Il y a vraiment beaucoup de nouveautés vis-à-vis MVC 3 mais ce que vous savez n’est pas perdu. Vous pouvez commencer par intégrer les nouvelles capacités à votre rhytme. Cet article vise à énumérer certains ajouts, il ne vise par à décrire toutes les nouveautés.

Razor V2

Les développeurs de Microsoft ont mis l’engin Razor à jour. Il faut l’activer dans le Web.Config

<appSettings>
<add key= »webpages:Version » value= »2.0.0.0″ />
<add key= »webpages:Enabled » value= »true » />

Razor V2: Résolution d’URL

Il n’y a pas tant d’ajouts mais ils sont pratiques. Par exemple, vous pouvez dire bye bye à @Url.Content ou @Href

<script src=”@Url.Content(“~/Scripts/myscript.js”)”></script>

devient:

<script src=”~/Scripts/myscript.js”></script>

Cela fonctionne pour tous les attributs, pas de traitement spécial!

<html data-root=”~/”>
$(document).data(‘root’)
en JQuery

Et avec une expression complexe:

<a href=”~/MySite/@Foo/Bar/@Baz”>Something!</a>

Razor v2: Simplifier le code fréquent

Mettre un attribut ou non selon une condition

<input type=”checkbox” checked=”@isChecked”>

Si isChecked est true:

<input type=”checkbox” checked=”checked”>

Sinon:

<input type=”checkbox”>

Mettre un attribut ou non si non null

@{ string foo = null; string bar = “bar” }
<div id=”foo” class=”@foo @bar”>

devient:

<div id=”foo” class=”bar”>

car foo est null (l’espace entre foo et bar est même enlevé!)

Exceptions:

  1. Les attributs data-<nom> car ceux-ci sont utilisés avec JQuery et doivent garder la notion de null
  2. Si la variable vaut String.Empty au lieu de null

Bundles

Ils ont ajouté la capacité de donner un nom à un ensemble de fichiers Scripts ou CSS et de les inclure au HTML en utilisant le nom. Cela crée une indirection et facilite la maintenance en permettant d’ajouter ou enlever des scripts à un seul endroit.

Objectifs

  1. Simplifier l’inclusion de scripts
  2. Combiner des fichiers pour réduire le nombre de connexions au serveur Web
  3. Minifier le contenu pour réduire la taille

Terminologie

  1. Bundling : Process of combining all the different JavaScript and CSS files into one file (one for JavaScript and one for CSS).
  2. Minification : Process of shrinking the JavaScript  and CSS content (removing all of the carriage returns,empty spaces,line feeds & shortening the variables  without changing actual functionality).

Fonctionnement

  1. Il y a un nouveau fichier pour configurer les bundles sous App_Start:

image

  • Pour déclarer un bundle de scripts:bundles.Add(new ScriptBundle(« ~/bundles/jquerylib« ).Include(« ~/Scripts/jquery-ui-{version}.js », « ~/Scripts/jquery.unobtrusive* », « ~/Scripts/jquery.validate.js », « ~/Scripts/additional-methods.js »));
  • Facilitants pour utiliser la dernière version{version} ou pattern matching (*) – détails plus loin
  • Pour inclure un bundle de scripts:@Scripts.Render(« ~/bundles/jquerylib »)
  • Pour déclarer un bundle de styles:bundles.Add(new StyleBundle(« ~/Content/themes/base/css »).Include(« ~/Content/themes/base/jquery.ui.core.css »,
    « ~/Content/themes/base/jquery.ui.resizable.css »,
    « ~/Content/themes/base/jquery.ui.tabs.css »,
    « ~/Content/themes/base/jquery.ui.theme.css »));
  • Pour inclure un bundle de styles:@Styles.Render(« ~/Content/themes/base/css »)

 

Notes sur le path virtuel (nom du bundle)

  1. Il est arbitraire mais ceux par défaut sont bizarres

You can also use, new StyleBundle(« ~/css ») and new ScriptBundle(« ~/script ») provided that you also need to change your Layout/Master file to match the new key(css/script) as Scripts.Render(« ~/script ») and Styles.Render(« ~/css », « ~/Content/css »). The fact is that the name must need to match.

  • Le path virtuel ne doit pas référer à un nom d’un fichier existant

    You also need to make sure that there is no file/directory exist with this new key(css/script).
  • Il fera partie de l’URL virtuel qui retourne le contenu du bundle

 

Facilitants: {version}

~/Scripts/jquery-ui-{version}.js

  1. Sélectionne la dernière version de JQuery du projet
  2. Prend la version complète en debug et la version .min autrement<system.web>
    <compilation debug= »true » targetFramework= »4.0″ />
  3. Fonctionne uniquement sur le nom des fichiers et fonctionne via une expression régulière. Je pensais qu’il dépendant du fichier packages.config géré par NuGet, mais cet article semble dire qu’il ne s’agit que d’une expression régulière sur les fichiers du projet ASP.Net.

Facilitants: *

~/Scripts/jquery.validate*

  1. Préfixe ou suffixe de la dernière partie du path
  2. Marche avec .Include et .IncludeDirectory
  3. Case-Insensitive

Exemple du HTML en release

<link href= »/Site/Content/css?v=-ag4GKGu1OPL0-OcBskTm1_ir8lgMDmnaLJg6M00Q-A1″ rel= »stylesheet »/>

<link href= »/Site/Content/themes/base/css?v=58KZ5iata6ouERaCYSZC3XN4JTpS9kDRB9t3LBZ1Ue81″ rel= »stylesheet »/>

<script src= »/Site/bundles/modernizr?v=rGcoDow97GYrNMSwHq7xCCjlcB3UIY4_OhPRc6BBSQA1″></script>

<link href= »/Site/Content/tablesorter/syntell/css?v=Gwg660DZtJBqCmEKqEhqrVLIAnDqfWVy95qmBX5OGCk1″ rel= »stylesheet »/>

Autres fonctionnalités

  1. Les contrôleurs peuvent être dans des répertoires différents
  2. Support pour les méthodes asynchrones du .NET 4.5
  3. Authentification via Oauth et OpenID (ex. Facebook)
  4. Séparation des classes dans App_Start (BundleConfig, FilterConfig, RouteConfig, WebApiConfig)
  5. Mode d’affichage: des vues différentes seront sélectionnées selon le fureteur faisant la requête
  6. Support le Azure SDK 1.6+
  7. MVC 4 inclus Entity Framework
  8. Projet de type Web APIimage
  9. Projet de type mobile (JQuery Mobile)image
  10. Le projet vide est maintenant vide, l’ancien s’appelle Basic
  11. Les gabarits par défaut ont un nouveau look et utilisent le rendu adaptif

Références

Bundling and Minification in ASP.NET MVC 4
http://theshravan.net/blog/bundling-and-minification-in-asp-net-mvc-4/

What’s new in Razor v2
http://vibrantcode.com/blog/2012/4/10/whats-new-in-razor-v2.html

What else is new in Razor v2?
http://vibrantcode.com/blog/2012/4/13/what-else-is-new-in-razor-v2.html

{version} wildcard in MVC 4 Bundle
http://stackoverflow.com/questions/12029161/version-wildcard-in-mvc4-bundle

ASP.NET 4.5, ASP.NET MVC 4, ASP.NET Web Pages 2, and Visual Studio 2012 for web developers: Part 1
http://weblogs.asp.net/jgalloway/archive/2012/08/16/asp-net-4-5-asp-net-mvc-4-asp-net-web-pages-2-and-visual-studio-2012-web-developer-features.aspx

Caractères accentués, ASP.Net MVC Razor et boutons de dialogue JQuery UI

Développeurs MVC francophones: avez-vous déjà eu des problèmes avec des caractères accentués dans les boutons d’un dialogue JQuery UI?

Afin de développer l’application Web en anglais et français, les libellés des boutons sont stockés dans des fichiers de ressources (*.resx).

Tout fonctionnait avec des boutons comme Sauvegarder, Annuler, OK etc. Mais tout à coup, la technique habituelle échoue avec un bouton Générer …

image

Et s’il n’y avait pas de guillement pour la clé (Gén&/233;rer: function() { … ), c’est pire car cela fera planter votre script.

La solution est d’utiliser la méthode @Html.Raw et d’entourer le résultat avec des guillements:

$(« #dlgGenerator »).dialog({
  autoOpen: false,
  width: 800,
  height: 600,
  resizable: false,
  modal: true,
  open: function(event, ui) {
    // Initialization
  },
  buttons: {
    « @Html.Raw(Global.LblGenerate) »: function() {
      $(« #cmdGenerateAssignments »).click();
    },
    « @Html.Raw(Global.LblCancel) »: function() {
      $(this).dialog(« close »);
    }
  }
});

image

Il est peut-être sage de vous protéger tout de suite d’un changement de libellé éventuel! L’utilisation de Html.Raw vous protège des caractères accentués tandis que l’utilisation des guillemets empêchera les erreurs de script dûes à la présence d’un espace ou caractère illégal.

À la prochaine fois,