25

Le Web mobile avec ASP.Net MVC et jQuery Mobile

Embed Size (px)

DESCRIPTION

ASP.Net MVC introduit des briques pour le développement d'applications web pour terminaux mobiles, et propose de tirer parti de jQuery Mobile pour accélérer vos développements. Durant cette session, nous aborderons les nouveautés de ASP.Net MVC4 pour les applications web mobiles, et nous présenterons les concepts fondamentaux de jQuery Mobile. Nous verrons comment ces deux outils se complémentent pour dopper vos développements ! Speakers : François Guillot (MCNEXT), Guillaume Leborgne (MCNEXT)

Citation preview

Page 1: Le Web mobile avec ASP.Net MVC et jQuery Mobile
Page 2: Le Web mobile avec ASP.Net MVC et jQuery Mobile

ASP.NET MVC et jQuery Mobile

Le Web mobile avec ASP.Net MVC et jQuery

MobileGuillaume Leborgne

MVP Client devMCNEXT

François Guillot

ConsultantMCNEXT

http://www.mcnext.com

Page 3: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

Depuis votre smartphone sur :http://notes.mstechdays.fr

De nombreux lots à gagner toutes les heures !!!Claviers, souris et jeux Microsoft…

Merci de nous aider à améliorer les Techdays !

Donnez votre avis !

Page 4: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

Page 5: Le Web mobile avec ASP.Net MVC et jQuery Mobile

ASP.NET MVC et jQuery Mobile#mstechdays

LE WEB

Page 6: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Il y a 5 ans

L’informatique & le web

Page 7: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Aujourd’hui

L’informatique & le web

Page 8: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

– Desktop– Smartphones– Tablettes– Liseuses– Bornes– TV connectées– Montres– Réfrigérateurs– …

Diversité des terminaux

Page 9: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

Les navigateurs

NokiaBlackberryBadaWebOS

OperaMiniNetFrontMyriadPhantom

SkyFireAmazon Silk…

Google Chrome

Mozilla Firefox

OperaApple Safari

Microsoft Internet Explorer

Page 10: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

Les navigateursAu total, environ 400 navigateurs ou versions différentes…

Page 11: Le Web mobile avec ASP.Net MVC et jQuery Mobile

ASP.NET MVC et jQuery Mobile#mstechdays

APPROCHES POUR DU WEB MULTI-CANAL

Page 12: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Application multi-support– Exploite le responsive web

design (bootstrap)• S’adapte au périphérique

– Difficile à implementer sur des pages complexes

Choix de fonctionnement

Page 13: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Sites dédiés– Redirection gérée par le

serveur web– Liberté totale de

fonctionnement– Tout est à faire en

double

Choix de fonctionnement

Page 14: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Logique commune, affichage dédié– Ergonomie adaptée à

chaque appareil– Utilise le DisplayMode

de ASP.NET MVC– Le principe de

fonctionnement doit rester commun

Choix de fonctionnement

Page 15: Le Web mobile avec ASP.Net MVC et jQuery Mobile

ASP.NET MVC et jQuery Mobile#mstechdays

RÉALISER SON APPLICATIONWEB MOBILE AVEC ASP.NET

Page 16: Le Web mobile avec ASP.Net MVC et jQuery Mobile

démo

#mstechdaysASP.NET MVC et jQuery Mobile

CRÉER UN PROJET MOBILEAVEC VISUAL STUDIO 2013

Page 17: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Packages NuGet• Le module de

bundling• WebEssentials• DisplayMode• ASP.NET Web API

Les outils de Visual Studio

Page 18: Le Web mobile avec ASP.Net MVC et jQuery Mobile

ASP.NET MVC et jQuery Mobile#mstechdays

JQUERY MOBILE

Page 19: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• jQuery: Abstraction du navigateur

• jQuery Mobile: Widgets & abstraction de l’interface

• jQuery Mobile n’est PAS une librairie pour faire des Single Page Applications

Principe

Page 20: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Un themeroller• Des widgets imbriqués• Code par markup (data-…)• La gestion des différences

d’implémentation entre navigateurs (touch, …)

• Des classes CSS « clef en main »

Fonctionnement

Page 21: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Pensé pour le mobile (cross devices)• Responsive web design• Amélioration progressive• Accessibilité

• -> Accélère beaucoup les développements

Avantages

Page 22: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• À partir d’Internet Explorer 8• Design parfois uniforme• Parfois lent sur les smartphones bas de gamme• Peut devenir contraignant si on sort des dogmes

d’ergonomie du framework

Défauts

Page 23: Le Web mobile avec ASP.Net MVC et jQuery Mobile

démo

#mstechdaysASP.NET MVC et jQuery Mobile

WEB APP ASP.NET MVCUTILISANT JQUERY MOBILE

Page 24: Le Web mobile avec ASP.Net MVC et jQuery Mobile

#mstechdaysASP.NET MVC et jQuery Mobile

• Attention aux sous-requêtes et à la consommation réseau– Minifier, concaténer et compresser (GZIP) les ressources– Optimiser les images, utiliser des sprites=> Utilisez les bundles ASP.Net, Webgrease, etc

• Tester sur des vrais terminaux, et si possible en condition réelles GSM

• Amélioration progressive=> Modernizr

• Combiner jQuery mobile avec un framework SPA• Tirer parti de HTML5 (app cache, …)

Les bonnes pratiques

Page 25: Le Web mobile avec ASP.Net MVC et jQuery Mobile

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Digital is business