be01 web devclientvsserver
TRANSCRIPT
Template designed by
web development:
client side vs. server side
Andrea Saltarello
http://blogs.ugidotnet.org/papehttp://twitter.com/andysal74
brought to you by
chi sono
•CEO @ Managed Designs
•Co-founder & Presidente di UGIdotNET
•MVP ASP.NET dal 2003
•Co-autore di «Microsoft® .NET: Architecting Applications for
the Enterprise», pubblicato da Microsoft Press (1° edizione del
2008, la v2 esce a luglio)
•In sintesi… Trainer e consulente, ma soprattutto «Dev»
90’s: come eravamo…
Trova le differenze
Cosa è cambiato?
Più o meno… Tutto
•Velocità della connessione
•«Eterogeneità» dei client
•«Potenza» del client
•Normative
•Tipologia dei servizi offerti
•Concorrenza dell’offerta
Se cambiano i requisiti, cambia l’architettura
Architecture
The fundamental organization of a system embodied in its
components, their relationships to each other, and to the
environment, and the principles guiding its design and evolution.
[ISO/IEC 42010]
2014: Web vs. Architettura
I «components» sono (almeno) il front end ed i(l) back end,
l’«environment» è Internet.
1. Macro-architettura (es: thin client, SPA)
2. Architettura front end
3. Architettura back end
P.S.: ogni pagina può essere (quasi) un mondo a sé
Il requisito, questo sconosciuto
Citando (quasi ) Don Abbondio: «il requisito (se non l’ha) uno
non se lo può dare»
Il nostro requisito? http://www.ugidotnet.org
Sito UGIdotNET
•Fino a 1 milione di accessi/mese
•16000+ utenti
•Picchi non (sempre) prevedibili
•Fruizione da:• PC
• Smartphone
• Tablet
•Integrazione con servizi esterni:• SubText (blog engine)
• Vimeo (video)
•SEO
Architettura: back-end
Considerazioni:
•Non c’è necessariamente bisogno di essere «alt», oggi lo stack
è «good enough» out of the box
•MVC è il miglior «Jack-of-all-trades».
•CQRS paga *sempre*. *Sempre*.
demo
CQRS @ UGIdotNET
Architettura: front-end
Considerazioni:
•Decidere *subito* i browser supportati
•Usare sempre Bootstrap, in un modo o nell’altro
•La strategia «zero Javascript» non paga, prendiamone atto
•La strategia «SPA» vince, perf wise, a mani basse ma è una
sciagura sul fronte SEO
Front-end: tecnologia
IE7 IE8 IE9+ Chrome Opera Safari 5+ Firefox
jQuery 1.x Y Y Y V-1+ 12.1, V-1+ 5.1+ V-1+
jQuery 2.x N N Y V-1+ 12.1, V-1+ 5.1+ V-1+
Bootstrap 2 Y Y Y Y 12.1, V-1+ Y Y
Bootstrap 3 N N Y Y Y Y Y
AngularJS 1.2 N Y Y Y Y Y Y
demo
AngularJS
Bootstrap
SEO (?)
L’investimento è inutile, se poi non abbiamo utenti. Facciamoci
trovare:
•Sitemap + (Robots.txt)
•Microdata
•Webmaster Tools
Sitemap
•Comunicano ai crawler gli url esposti dal sito
•Supportate da Bing e Google
•Documentate qui: http://www.sitemaps.org/
demo
Sitemap @ UGIdotNET
Microdata
•Aumentano la semantica oltre quanto permesso da HTML5
•Supportati da Bing, Google e Yandex
•Documentati qui: http://schema.org/
demo
Microdata @ UGIdotNET
Google Webmaster Tools
AngularJS vs. SEO
Demo
•MvcMate: http://mvcmate.codeplex.com
•UGIdotNET: http://www.ugidotnet.org (visualizzare sorgente
della pagina)
Grazie a tutti per la partecipazione
Riceverete il link per il download a slide e demo via email nei
prossimi giorni
Per contattarmi
Grazie