{"id":50897,"date":"2020-02-25T07:00:16","date_gmt":"2020-02-25T06:00:16","guid":{"rendered":"http:\/\/smeupnew.it\/magazine\/blog\/libreria-di-componenti\/"},"modified":"2021-04-09T14:55:03","modified_gmt":"2021-04-09T12:55:03","slug":"libreria-di-componenti","status":"publish","type":"post","link":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/","title":{"rendered":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup – Parte 4"},"content":{"rendered":"

Nelle scorse puntate avevamo parlato del vantaggio dell\u2019utilizzo dei Web Components per il rinnovamento delle User Interface (Te li sei persi? Recupera subito leggendo Il rinnovamento della user interface tramite la libreria Ketch.UP<\/a> , I framework javascript Component based<\/a> e Il vantaggio dei Web Component<\/a>) . \u00a0Abbiamo parlato dell\u2019utilizzo delle librerie di Componenti per il rinnovamento delle User Interface, dei pregi e difetti dei framework Javascript e dei pregi delle funzionalit\u00e0 dei Web Components per la scrittura di componenti. Vi abbiamo presentato anche la libreria Ketch.UP, la nuova libreria di componenti Web di smeup.<\/p>\n

La libreria di componenti Ketch.UP ha l’obiettivo di diventare lo standard grafico dei prodotti Web di smeup. Ci\u00f2 permetter\u00e0 di dare a tutte le applicazioni Web di smeup uniformit\u00e0 di aspetto e di interazione utente.<\/p>\n

Ketch.UP<\/strong> \u00e8 open source<\/strong>, quindi \u00e8 messa a disposizione di chiunque sul Web voglia utilizzarla o collaborare al suo sviluppo.<\/p>\n

Il codice \u00e8 disponibile a questo indirizzo: https:\/\/github.com\/smeup\/ketchup<\/a>.<\/p>\n

A questo indirizzo si trova invece uno showcase dimostrativo: https:\/\/ketchup.smeup.com\/ketchup-showcase\/#\/\u00a0<\/a><\/p>\n

Questa libreria di componenti contiene i components utili al disegno delle interfacce client di smeup, ma \u00e8 utilizzabile \u00a0anche fuori dall\u2019ambito smeup in quanto i componenti che si trovano a disposizione al suo interno sono astratti e generici. La libreria \u00e8 in fase di attivo sviluppo, quindi prossimamente verr\u00e0 sempre pi\u00f9 popolata con ulteriori elementi, dai pi\u00f9 semplici a pi\u00f9 complessi (timeline, gant, calendario, mind map, etc…).<\/p>\n

La peculitrit\u00e0 di Ketch.UP rispetto ad altre librerie gi\u00e0 presenti sul mercato \u00e8 quella di fornire dei components ricchi e complessi come quelli delle interfacce smeup, altamente astratti \u00a0e con un alto livello di configurabilit\u00e0 .<\/p>\n

I Web Component possono essere importati in qualsiasi applicazione, scritti in qualsiasi framework Javascript ma anche in html, CSS, Javascript puro o anche con tecnologie frontend Java EE quali le facelets o primefaces (intervenendo opportunamente sul codice di questi framework Java che alla base utilizzano comunque html, css e chiamate ajax). Tale duttilit\u00e0 dei Web Component consente l\u2019utilizzo di pi\u00f9 tecnologie di sviluppo di applicazioni Web, non vincolando alla scelta di una sola tecnologia.<\/p>\n

Per le nuove applicazioni Web del sistema smeup si potranno pertanto utilizzare i nuovi framework Javascript pi\u00f9 moderni. Ad esempio l’interfaccia del nuovo gateway di smeup \u00e8 stata gi\u00e0 sviluppata in Vue.js importandovi i components della libreria di componenti Ketch.UP.<\/p>\n

Per applicazioni gi\u00e0 in essere invece di una riscrittura completa del codice utilizzando un nuovo framework si potr\u00e0 seguire anche la strada di una migrazione parziale e progressiva al solo uso dei Web Component di Ketch.UP.\u00a0 E\u2019 quanto si sta ad esempio attuando per l\u2019applicazione Web.UP. Gi\u00e0 ora alcuni componenti sviluppati in Ketch.UP quali la Dashboard e il Gauge hanno sostituito in Web.UP i vecchi Componenti scritti utilizzando la libreria primefaces con tecnologia Java EE. E notare che l’uso dei Web Component su Web.UP si prevede migliorer\u00e0 sensibilmente non solo l’usabilit\u00e0 e l\u2019esperienza utente ma anche le prestazioni dell\u2019interfaccia. Test preliminari su Web.UP hanno dimostrato come il rendering di una tabella di molte righe e colonne realizzato con la tecnologia dei Web Component rispetto a quello messo in atto con la vecchia tecnologia primefaces sia estremamente pi\u00f9 performante.<\/p>\n","protected":false},"excerpt":{"rendered":"

La libreria Ketch.UP ha l’obiettivo di diventare lo standard grafico dei prodotti Web di smeup. Ci\u00f2 permetter\u00e0 di dare a tutte le applicazioni Web di smeup uniformit\u00e0 di aspetto e di interazione utente.<\/p>\n","protected":false},"author":1,"featured_media":53852,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7175],"tags":[],"class_list":["post-50897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux"],"acf":[],"yoast_head":"\nL\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4<\/title>\n<meta name=\"description\" content=\"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.\" \/>\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.smeup.com\/magazine\/blog\/libreria-di-componenti\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4\" \/>\n<meta property=\"og:description\" content=\"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/\" \/>\n<meta property=\"og:site_name\" content=\"Magazine\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-25T06:00:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-09T12:55:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"874\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"smeup\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"smeup\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/\"},\"author\":{\"name\":\"smeup\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/#\\\/schema\\\/person\\\/194a55d96e7e52223a84ff78468bf5c7\"},\"headline\":\"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup – Parte 4\",\"datePublished\":\"2020-02-25T06:00:16+00:00\",\"dateModified\":\"2021-04-09T12:55:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/\"},\"wordCount\":557,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2020\\\/02\\\/libreria-di-componenti.jpg\",\"articleSection\":[\"UX\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/\",\"url\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/\",\"name\":\"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2020\\\/02\\\/libreria-di-componenti.jpg\",\"datePublished\":\"2020-02-25T06:00:16+00:00\",\"dateModified\":\"2021-04-09T12:55:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/#\\\/schema\\\/person\\\/194a55d96e7e52223a84ff78468bf5c7\"},\"description\":\"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2020\\\/02\\\/libreria-di-componenti.jpg\",\"contentUrl\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/wp-content\\\/uploads\\\/sites\\\/5\\\/2020\\\/02\\\/libreria-di-componenti.jpg\",\"width\":1600,\"height\":874,\"caption\":\"smeup libreria di componenti\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/libreria-di-componenti\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup – Parte 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/\",\"name\":\"Magazine\",\"description\":\"smeup\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/#\\\/schema\\\/person\\\/194a55d96e7e52223a84ff78468bf5c7\",\"name\":\"smeup\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g\",\"caption\":\"smeup\"},\"sameAs\":[\"https:\\\/\\\/www.smeup.com\"],\"url\":\"https:\\\/\\\/www.smeup.com\\\/magazine\\\/blog\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4","description":"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.","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.smeup.com\/magazine\/blog\/libreria-di-componenti\/","og_locale":"it_IT","og_type":"article","og_title":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4","og_description":"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.","og_url":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/","og_site_name":"Magazine","article_published_time":"2020-02-25T06:00:16+00:00","article_modified_time":"2021-04-09T12:55:03+00:00","og_image":[{"width":1600,"height":874,"url":"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg","type":"image\/jpeg"}],"author":"smeup","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"smeup","Tempo di lettura stimato":"3 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#article","isPartOf":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/"},"author":{"name":"smeup","@id":"https:\/\/www.smeup.com\/magazine\/#\/schema\/person\/194a55d96e7e52223a84ff78468bf5c7"},"headline":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup – Parte 4","datePublished":"2020-02-25T06:00:16+00:00","dateModified":"2021-04-09T12:55:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/"},"wordCount":557,"commentCount":0,"image":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#primaryimage"},"thumbnailUrl":"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg","articleSection":["UX"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/","url":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/","name":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup - Parte 4","isPartOf":{"@id":"https:\/\/www.smeup.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#primaryimage"},"image":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#primaryimage"},"thumbnailUrl":"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg","datePublished":"2020-02-25T06:00:16+00:00","dateModified":"2021-04-09T12:55:03+00:00","author":{"@id":"https:\/\/www.smeup.com\/magazine\/#\/schema\/person\/194a55d96e7e52223a84ff78468bf5c7"},"description":"La libreria di componenti Ketch.UP ha l'obiettivo di diventare lo standard grafico dei prodotti Web di smeup garantendo uniformit\u00e0.","breadcrumb":{"@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#primaryimage","url":"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg","contentUrl":"https:\/\/www.smeup.com\/magazine\/wp-content\/uploads\/sites\/5\/2020\/02\/libreria-di-componenti.jpg","width":1600,"height":874,"caption":"smeup libreria di componenti"},{"@type":"BreadcrumbList","@id":"https:\/\/www.smeup.com\/magazine\/blog\/libreria-di-componenti\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.smeup.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"L\u2019uso della libreria di componenti Ketch.UP nei prodotti smeup – Parte 4"}]},{"@type":"WebSite","@id":"https:\/\/www.smeup.com\/magazine\/#website","url":"https:\/\/www.smeup.com\/magazine\/","name":"Magazine","description":"smeup","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.smeup.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.smeup.com\/magazine\/#\/schema\/person\/194a55d96e7e52223a84ff78468bf5c7","name":"smeup","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a88cc3ad6c0af01768fe2ac47c88a321699d97ced53c173f66ceaa51400f43ca?s=96&d=mm&r=g","caption":"smeup"},"sameAs":["https:\/\/www.smeup.com"],"url":"https:\/\/www.smeup.com\/magazine\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/posts\/50897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/comments?post=50897"}],"version-history":[{"count":2,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/posts\/50897\/revisions"}],"predecessor-version":[{"id":53854,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/posts\/50897\/revisions\/53854"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/media\/53852"}],"wp:attachment":[{"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/media?parent=50897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/categories?post=50897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.smeup.com\/magazine\/wp-json\/wp\/v2\/tags?post=50897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}