{"id":3280,"date":"2017-02-23T08:45:16","date_gmt":"2017-02-23T07:45:16","guid":{"rendered":"https:\/\/www.intesys.it\/journal\/?p=3280"},"modified":"2022-03-01T12:59:34","modified_gmt":"2022-03-01T11:59:34","slug":"single-page-application-love-you","status":"publish","type":"post","link":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/","title":{"rendered":"Single Page Application, I love you!"},"content":{"rendered":"

<\/p>

Il mondo frontend<\/strong> negli ultimi anni \u00e8 cambiato radicalmente!<\/p>\n

C\u2019era una volta<\/h3>\n

Quando sono arrivato in Intesys<\/a>\u00a0nel 2008, il frontend era considerata un\u2019attivit\u00e0 di basso livello<\/strong>, spesso dedicata allo smontaggio delle grafiche e all\u2019installazione di qualche plugin per rendere le pagine pi\u00f9 dinamiche dal punto di vista grafico.
\nPur essendo un\u2019attivit\u00e0 di basso livello, era comunque fondamentale per la buona riuscita di un progetto, come lo era la parte backend.
\nQuesti due mondi (backend e frontend), pur essendo molto differenti tra loro<\/strong>, sono sempre stati mescolati sotto lo stesso progetto. Questo per\u00f2 ha sempre portato dei grossi limiti alla parte frontend, in quanto non c\u2019era un modo standard di sviluppare, ma bisognava sempre adattarsi alle regole che il framework (backend) imponeva.<\/p>\n

Al giorno d\u2019oggi<\/h3>\n

Negli ultimi anni il mondo frontend si \u00e8 trasformato<\/strong>, soprattutto con l\u2019avvento di Node.js<\/strong> e con il consolidamento di alcuni framework come React<\/a>\u00a0<\/strong>(di cui avevamo gi\u00e0 parlato in seguito al ReactJsDay 2016<\/a>)\u00a0e Angular<\/strong><\/a>. Tali\u00a0framework hanno permesso di strutturare in maniera pi\u00f9 solida il mondo frontend<\/strong>, di dargli una sua indipendenza e un\u2019identit\u00e0 molto pi\u00f9 chiara. Grazie a loro si \u00e8 cominciato a parlare di Single Page Application<\/strong>!<\/p>\n

Cos\u2019\u00e8 una Single Page Application<\/h3>\n

Una Single Page Application (SPA)<\/strong> \u00e8 a tutti gli effetti una applicazione web, che ha come obiettivo quello di migliorare molto l\u2019esperienza utente<\/strong>, in quanto la navigazione \u00e8 molto pi\u00f9 fluida e simile ad un\u2019applicazione desktop.<\/p>\n

Vediamo molto velocemente i maggiori vantaggi delle SPA:<\/p>\n

    \n
  • Velocit\u00e0<\/strong>: quando navighiamo un normale sito web, ogni pagina che cambiamo viene ricaricata completamente. In una SPA<\/strong> le risorse principali vengono caricate in fase iniziale, mentre durante la navigazione successiva vengono fatte solo richieste di dati, senza dover ricaricare la pagina, e senza obbligare il browser a renderizzare nuovamente tutto, se non\u00a0le parti che devono cambiare.<\/li>\n
  • Frontend indipendente<\/strong>: il frontend diventa a tutti gli effetti un mondo a s\u00e9, non \u00e8 pi\u00f9 vincolato alle regole del framework\/tecnologia backend, e quindi si pu\u00f2 strutturare in maniera molto pi\u00f9 solida, con scelte condivise che possono essere riutilizzate in diversi progetti.<\/li>\n
  • Backend a servizi<\/strong>: separando il frontend dal backend l\u2019unica maniera per comunicare tra i due layer \u00e8 tramite API. Impostando un backend a servizi (o API) \u00e8 molto pi\u00f9 semplice e molto pi\u00f9 vantaggioso, in quanto gli stessi servizi che vengono esposti per la SPA possono essere utilizzati da un\u2019app mobile, o da un servizio terzo che abbia bisogno di comunicare con il backend.<\/li>\n
  • Facilit\u00e0 di test<\/strong>: separando i due mondi, ognuno pu\u00f2 testare meglio ci\u00f2 che \u00e8 di sua competenza, alzando enormemente la qualit\u00e0 di ci\u00f2 che si realizza.<\/li>\n
  • Facilit\u00e0 di integrazione<\/strong>: una SPA pu\u00f2 integrarsi con qualsiasi framework\/tecnologia, in quanto la comunicazione avviene tramite un formato standard, il JSON, che pu\u00f2 essere prodotto da qualsiasi backend.<\/li>\n
  • Dati fake<\/strong>: in attesa che il backend implementi dei veri e propri servizi, si pu\u00f2 facilmente lavorare con dei dati finti (o fake), e cambiare contesto velocemente una volta che i servizi backend sono pronti.<\/li>\n<\/ul>\n

    Questo nuovo approccio porta molti\u00a0benefici alla sviluppo di un progetto. Va a colpire bisogni dell\u2019utente, in quanto l\u2019esperienza utente viene migliorata<\/strong>: pi\u00f9 un’applicazione \u00e8 reattiva, pi\u00f9 l\u2019utente finale \u00e8 facilitato ad utilizzare la piattaforma. Inoltre si vanno a colpire anche bisogni di development, in quanto sviluppando in questa maniera si ha molta pi\u00f9 flessibilit\u00e0<\/strong> e molta pi\u00f9 qualit\u00e0<\/strong> in ci\u00f2\u00a0che si va a realizzare.<\/p>\n

    La nostra esperienza<\/h3>\n

    Ne avevamo sentito parlare, e avevamo provato a fare qualcosa, ma sempre in contesti molto piccoli.<\/p>\n

    Nel 2016<\/strong> siamo stati coinvolti in due progetti molto ambiziosi<\/strong>, durati quasi un anno ciascuno, dove abbiamo realizzato due SPA veramente complesse. Questi due progetti ci hanno permesso finalmente di sperimentare concretamente quelli che erano i cosiddetti vantaggi teorici, e darci consapevolezza dei benefici che portano<\/strong>, sia a livello di sviluppo che a livello utente finale.<\/p>\n

    Nel 2017<\/strong> siamo gi\u00e0 stati coinvolti su altri due progetti di questo tipo<\/strong>, che sono attualmente in sviluppo. Questo metodo di sviluppo ci sta dando molte soddisfazioni<\/strong> e ci fa sentire davvero sulla strada giusta<\/strong>.<\/p>\n

    La nostra visione<\/h3>\n

    Questo nuovo approccio \u00e8 sicuramente il futuro dello sviluppo delle applicazioni web. Consapevoli di tutto ci\u00f2, ci siamo strutturati anche in Intesys con un nuovo team frontend<\/strong>, che possa rispondere in maniera puntale alle richieste del mercato, e che possa proporre questa nuova modalit\u00e0 di sviluppo, in qualsiasi progetto enterprise.<\/p>\n

    Sviluppare in questa modalit\u00e0, sta portando molto\u00a0pi\u00f9 valore<\/strong>\u00a0al risultato finale: valore per il cliente<\/strong>, valore per l’utente<\/strong>, valore in ci\u00f2\u00a0che realizziamo<\/strong>.<\/p>\n

    Che dire: siamo pronti<\/strong>, siamo sul pezzo<\/strong>, e siamo molto motivati<\/strong>!<\/p>\n

    E voi cosa ne pensate?<\/p>\n","protected":false},"excerpt":{"rendered":"

    Con le grandi evoluzioni dei framework, il lavoro frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 forte e precisa. Parliamo di Single Page Application e del nuovo team frontend di Intesys!<\/p>\n","protected":false},"author":69,"featured_media":3301,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[608,689],"class_list":{"0":"post-3280","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-information-technology","8":"tag-single-page-application","9":"tag-user-experience"},"acf":[],"yoast_head":"\nSingle Page Application, I love you!<\/title>\n<meta name=\"description\" content=\"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Single Page Application, I love you!\" \/>\n<meta property=\"og:description\" content=\"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/\" \/>\n<meta property=\"og:site_name\" content=\"Intesys Journal\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-23T07:45:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-01T11:59:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Federico Bonomi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Federico Bonomi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/\",\"url\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/\",\"name\":\"Single Page Application, I love you!\",\"isPartOf\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg\",\"datePublished\":\"2017-02-23T07:45:16+00:00\",\"dateModified\":\"2022-03-01T11:59:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/f7f4f468a3f69879eaa098ca8daa5f1d\"},\"description\":\"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:\",\"breadcrumb\":{\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage\",\"url\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg\",\"contentUrl\":\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg\",\"width\":1280,\"height\":960,\"caption\":\"single page application\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.intesys.it\/journal\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Single Page Application, I love you!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#website\",\"url\":\"https:\/\/www.intesys.it\/journal\/\",\"name\":\"Intesys\",\"description\":\"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.intesys.it\/journal\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/f7f4f468a3f69879eaa098ca8daa5f1d\",\"name\":\"Federico Bonomi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eeca482a4dd8c56553b9d3f16080d554a8d7411db30b2fb9771a62c8d135cbd5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eeca482a4dd8c56553b9d3f16080d554a8d7411db30b2fb9771a62c8d135cbd5?s=96&d=mm&r=g\",\"caption\":\"Federico Bonomi\"},\"url\":\"https:\/\/www.intesys.it\/journal\/autore\/federico-bonomi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Single Page Application, I love you!","description":"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/","og_locale":"it_IT","og_type":"article","og_title":"Single Page Application, I love you!","og_description":"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:","og_url":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/","og_site_name":"Intesys Journal","article_published_time":"2017-02-23T07:45:16+00:00","article_modified_time":"2022-03-01T11:59:34+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg","type":"image\/jpeg"}],"author":"Federico Bonomi","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Federico Bonomi","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/","url":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/","name":"Single Page Application, I love you!","isPartOf":{"@id":"https:\/\/www.intesys.it\/journal\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage"},"image":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage"},"thumbnailUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg","datePublished":"2017-02-23T07:45:16+00:00","dateModified":"2022-03-01T11:59:34+00:00","author":{"@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/f7f4f468a3f69879eaa098ca8daa5f1d"},"description":"Con le grandi evoluzioni dei framework, il mondo frontend \u00e8 riuscito ad assumere una identit\u00e0 pi\u00f9 distintiva. Ecco i vantaggi delle Single Page Application:","breadcrumb":{"@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#primaryimage","url":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg","contentUrl":"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2017\/02\/single-page-application.jpg","width":1280,"height":960,"caption":"single page application"},{"@type":"BreadcrumbList","@id":"https:\/\/www.intesys.it\/journal\/information-technology\/single-page-application-love-you\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.intesys.it\/journal\/"},{"@type":"ListItem","position":2,"name":"Single Page Application, I love you!"}]},{"@type":"WebSite","@id":"https:\/\/www.intesys.it\/journal\/#website","url":"https:\/\/www.intesys.it\/journal\/","name":"Intesys","description":"Ogni settimana nuovi articoli dedicati al mondo della trasformazione digitale!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.intesys.it\/journal\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/f7f4f468a3f69879eaa098ca8daa5f1d","name":"Federico Bonomi","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.intesys.it\/journal\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eeca482a4dd8c56553b9d3f16080d554a8d7411db30b2fb9771a62c8d135cbd5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eeca482a4dd8c56553b9d3f16080d554a8d7411db30b2fb9771a62c8d135cbd5?s=96&d=mm&r=g","caption":"Federico Bonomi"},"url":"https:\/\/www.intesys.it\/journal\/autore\/federico-bonomi\/"}]}},"_links":{"self":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/comments?post=3280"}],"version-history":[{"count":1,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3280\/revisions"}],"predecessor-version":[{"id":9926,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/posts\/3280\/revisions\/9926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media\/3301"}],"wp:attachment":[{"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/media?parent=3280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/categories?post=3280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intesys.it\/journal\/wp-json\/wp\/v2\/tags?post=3280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}