Construire seule Page Apps – partie 5 – HTML 5 et optimisation Web ASP.NET

Original: http://www.johnpapa.net/spapost5/

 

Apps de Page unique (SPA) font fureur, et alors que c’est excitant de parler le JavaScript que nous utilisons dans le SPA, le HTML est tout aussi important. Si les balises HTML5 sont utilisées, puis son important de s’assurer que vous préparez pour une dégradation gracieuse si vous voulez plus vieux soutien de navigateur. Aussi, l’interpréteur de commandes HTML devrait gérer cela et tirez dans les scripts aussi efficacement que possible.

 

Vous pouvez lire plus à ce sujet et d’autres sujets dans quelques semaines quand Pluralsight va sortir mon nouveau cours intitulé « Building seule Page Apps (SPA) avec HTML5, ASP.NET Web API, Knockout et jQuery ». Til alors, j’ai décidé de journaliser la création du cours dans quelques postes. Vous pouvez vous rattraper sur les posts précédents de cette série ici :
Renseignements sur la Code Camper SPA
Partie 1 – l’histoire commence (ce qui est le Code Camper SPA?)

 

Partie 2 – les Technologies clientes

 

Partie 3 – Technologies de serveur (la couche de données)

 

Partie 4 – desservant JSON avec ASP.NET Web API

 

Partie 5 – HTML 5 et optimisation Web ASP.NET

 

Partie 6 – Modules JavaScript

 

Partie 7 – MVVM et KnockoutJS

 

Partie 8 – Services de données sur le Client

 

Partie 9 – Navigation, Transitions, entreposage et messagerie

 

Partie 10 – économie, changer de suivi et le commandant

 

Partie 11 – conception sensible et mobilité
Pratiques exemplaires de HTML
Regarder une toile vierge peut être terrifiant pour les développeurs. Allez, Avouez-le… aussi excitants que c’est de commencer un nouveau projet, parfois sa juste intimidant à penser « comment puis-je commencer? » La bonne nouvelle est que lors du démarrage avec une application HTML il y a aide pour vous allez obtenir. Et selon les meilleures pratiques pour le HTML est en fait assez simple. 2 de mes outils préférés pour commencer sont HTML5 Shiv et HTML5 Boilerplate. Dans mes cours, j’ai choisi HTML5 Boilerplate et il propose cela (et bien plus) avantages :

 

1) conseils sur où mettre vos scripts dans la page HTML

 

2) mobilité et aide conception sensible

 

 

3) Référence CSS pour les styles (Vérifiez le style.css inclus dans le modèle)

 

4) contribue à rendre votre $ $ etAPP fonctionne bien dans l’ensemble de plusieurs marques de navigateur et les versions avec modernizr

 

 

5) conseils pour les scripts utilisant CDNs et secours

 

Il est tellement plus en HTML5 Boilerplate et je le recommande fortement que vous l’extrayez. C’est amusant pour télécharger la version complète de celui-ci, qui inclut des tonnes de commentaires sur ce que font les caractéristiques.

 

Optimisation Web ASP.NET

 

Lorsque vous générez une application vous pouvez vous retrouver avec beaucoup de fichiers JavaScript et CSS. Certains vous écrivez vous-même et les autres que vous comprennent des bibliothèques populaires comme jQuery ou Knockout. Vous voulez vous assurer de qu’obtenir ces scripts et CSS de votre navigateur aussi rapidement et efficacement que possible. C’est où le groupement et minification peuvent avoir un impact énorme.

 

La bonne nouvelle, c’est qu’il y a beaucoup d’options, il y a un dos droit dans la dernière version de ASP.NET appelée optimisation Web ASP.NET (disponible sur NuGet). Avec cet outil vous est pouvez de grouper votre JavaScript (ou CSS) quelques produits similaires. Donc au lieu du navigateur faisant 40 demandes pour 40 fichiers (si c’est ce que vous avez), vous pourriez avoir les fichiers de demande 2 navigateur (votre faisceaux). Groupement est tout simplement la concaténation vos fichiers ensemble.

 

image

L’autre moitié de cette équation est réduire vos fichiers, qui découpe les espaces blancs et fait quelques autres astuces pour raccourcir le contenu des fichiers. Dans certains cas, ceux-ci peuvent réduire considérablement la taille du fichier et donc en faire la demande prendre beaucoup moins de temps pour obtenir au navigateur. Une fois que les scripts sont optimisées, vous pouvez apporter au navigateur via une référence de balise de script ordinaire ou par le biais de la syntaxe Styles.Render et Scripts.Render spéciale de ASP/NET comme suit :

 

 

Voici quelques uns de la fonctionnalité d’optimisation Web ASP.NET. Vous pouvez voir plus sur cette fonctionnalité dans mes cours, que je l’utilise pour créer quelques faisceaux principaux pour mes scripts et CSS.

 

Ensuite jusqu’à, je vais vous expliquer quelques trucs pour le coup d’envoi du SPA avec JavaScript.

Comments are closed.