Template designed by
web development:
client side vs. server side
Andrea Saltarello
andrea.saltarello@ugidotnet.org
http:/...
brought to you by
chi sono
•CEO @ Managed Designs
•Co-founder & Presidente di UGIdotNET
•MVP ASP.NET dal 2003
•Co-autore di «Microsoft® .NET...
90’s: come eravamo…
Trova le differenze 
Cosa è cambiato?
Più o meno… Tutto 
•Velocità della connessione
•«Eterogeneità» dei client
•«Potenza» del client
•Normati...
Architecture
The fundamental organization of a system embodied in its
components, their relationships to each other, and t...
2014: Web vs. Architettura
I «components» sono (almeno) il front end ed i(l) back end,
l’«environment» è Internet.
1. Macr...
Il requisito, questo sconosciuto
Citando (quasi ) Don Abbondio: «il requisito (se non l’ha) uno
non se lo può dare»
Il no...
Sito UGIdotNET
•Fino a 1 milione di accessi/mese
•16000+ utenti
•Picchi non (sempre) prevedibili
•Fruizione da:
• PC
• Sma...
Architettura: back-end
Considerazioni:
•Non c’è necessariamente bisogno di essere «alt», oggi lo stack
è «good enough» out...
demo
CQRS @ UGIdotNET
Architettura: front-end
Considerazioni:
•Decidere *subito* i browser supportati
•Usare sempre Bootstrap, in un modo o nell...
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 ...
demo
AngularJS
Bootstrap
SEO (?)
L’investimento è inutile, se poi non abbiamo utenti. Facciamoci
trovare:
•Sitemap + (Robots.txt)
•Microdata
•Webma...
Sitemap
•Comunicano ai crawler gli url esposti dal sito
•Supportate da Bing e Google
•Documentate qui: http://www.sitemaps...
demo
Sitemap @ UGIdotNET
Microdata
•Aumentano la semantica oltre quanto permesso da HTML5
•Supportati da Bing, Google e Yandex
•Documentati qui: ht...
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 c...
Be01   web devclientvsserver
Be01   web devclientvsserver
Upcoming SlideShare
Loading in …5
×

Be01 web devclientvsserver

250 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
250
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Be01 web devclientvsserver

  1. 1. Template designed by web development: client side vs. server side Andrea Saltarello andrea.saltarello@ugidotnet.org http://blogs.ugidotnet.org/pape http://twitter.com/andysal74
  2. 2. brought to you by
  3. 3. 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» 
  4. 4. 90’s: come eravamo…
  5. 5. Trova le differenze 
  6. 6. 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
  7. 7. 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]
  8. 8. 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é
  9. 9. 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 
  10. 10. 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
  11. 11. 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*.
  12. 12. demo CQRS @ UGIdotNET
  13. 13. 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
  14. 14. 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
  15. 15. demo AngularJS Bootstrap
  16. 16. SEO (?) L’investimento è inutile, se poi non abbiamo utenti. Facciamoci trovare: •Sitemap + (Robots.txt) •Microdata •Webmaster Tools
  17. 17. Sitemap •Comunicano ai crawler gli url esposti dal sito •Supportate da Bing e Google •Documentate qui: http://www.sitemaps.org/
  18. 18. demo Sitemap @ UGIdotNET
  19. 19. Microdata •Aumentano la semantica oltre quanto permesso da HTML5 •Supportati da Bing, Google e Yandex •Documentati qui: http://schema.org/
  20. 20. demo Microdata @ UGIdotNET Google Webmaster Tools AngularJS vs. SEO
  21. 21. Demo •MvcMate: http://mvcmate.codeplex.com •UGIdotNET: http://www.ugidotnet.org (visualizzare sorgente della pagina)
  22. 22. Grazie a tutti per la partecipazione Riceverete il link per il download a slide e demo via email nei prossimi giorni Per contattarmi andrea.saltarello@ugidotnet.org Grazie

×