Template designed by

web development:

client side vs. server side

Andrea Saltarello

andrea.saltarello@ugidotnet.org

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

andrea.saltarello@ugidotnet.org

Grazie