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)

2. Le Web mobile avec ASP.Net
MVC et jQuery Mobile
Guillaume Leborgne
MVP Client dev
MCNEXT
François Guillot
Consultant
MCNEXT
http://www.mcnext.com
ASP.NET MVC et jQuery Mobile

3. Donnez votre avis !
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 !
#mstechdays
ASP.NET MVC et jQuery Mobile

4. #mstechdays
ASP.NET MVC et jQuery Mobile

5. LE WEB
#mstechdays
ASP.NET MVC et jQuery Mobile

6. L’informatique & le web
• Il y a 5 ans
#mstechdays
ASP.NET MVC et jQuery Mobile

7. L’informatique & le web
• Aujourd’hui
#mstechdays
ASP.NET MVC et jQuery Mobile

8. Diversité des terminaux
–
–
–
–
–
–
–
–
–
#mstechdays
Desktop
Smartphones
Tablettes
Liseuses
Bornes
TV connectées
Montres
Réfrigérateurs
…
ASP.NET MVC et jQuery Mobile

9. Les navigateurs
Google
Chrome
Nokia
Blackberry
Bada
WebOS
#mstechdays
Mozilla
Firefox
Opera
OperaMini
NetFront
Myriad
Phantom
ASP.NET MVC et jQuery Mobile
Apple
Safari
Microsoft Internet
Explorer
SkyFire
Amazon Silk
…

10. Les navigateurs
Au total, environ 400 navigateurs ou versions différentes…
#mstechdays
ASP.NET MVC et jQuery Mobile

11. APPROCHES POUR DU WEB
MULTI-CANAL
#mstechdays
ASP.NET MVC et jQuery Mobile

12. Choix de fonctionnement
• Application multi-support
– Exploite le responsive web design
(bootstrap)
• S’adapte au périphérique
– Difficile à implementer sur des
pages complexes
#mstechdays
ASP.NET MVC et jQuery Mobile

13. Choix de fonctionnement
• Sites dédiés
– Redirection gérée par le
serveur web
– Liberté totale de
fonctionnement
– Tout est à faire en double
#mstechdays
ASP.NET MVC et jQuery Mobile

14. Choix de fonctionnement
• Logique commune,
affichage dédié
– Ergonomie adaptée à
chaque appareil
– Utilise le DisplayMode de
ASP.NET MVC
– Le principe de
fonctionnement doit rester
commun
#mstechdays
ASP.NET MVC et jQuery Mobile

15. RÉALISER SON APPLICATION
WEB MOBILE AVEC ASP.NET
#mstechdays
ASP.NET MVC et jQuery Mobile

16. CRÉER UN PROJET MOBILE
AVEC VISUAL STUDIO 2013
#mstechdays
ASP.NET MVC et jQuery Mobile

17. Les outils de Visual Studio
•
•
•
•
•
Packages NuGet
Le module de bundling
WebEssentials
DisplayMode
ASP.NET Web API
#mstechdays
ASP.NET MVC et jQuery Mobile

18. JQUERY MOBILE
#mstechdays
ASP.NET MVC et jQuery Mobile

19. Principe
•
•
jQuery: Abstraction du navigateur
jQuery Mobile: Widgets &
abstraction de l’interface
•
jQuery Mobile n’est PAS une
librairie pour faire des Single Page
Applications
#mstechdays
ASP.NET MVC et jQuery Mobile

20. Fonctionnement
•
•
•
•
•
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 »
#mstechdays
ASP.NET MVC et jQuery Mobile

21. Avantages
•
•
•
•
Pensé pour le mobile (cross devices)
Responsive web design
Amélioration progressive
Accessibilité
•
-> Accélère beaucoup les développements
#mstechdays
ASP.NET MVC et jQuery Mobile

22. Défauts
•
•
•
•
À 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
#mstechdays
ASP.NET MVC et jQuery Mobile

23. WEB APP ASP.NET MVC
UTILISANT JQUERY MOBILE
#mstechdays
ASP.NET MVC et jQuery Mobile

24. Les bonnes pratiques
• 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, …)
#mstechdays
ASP.NET MVC et jQuery Mobile

25. Digital is
business