Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Modern Web Development 2019

87 vues

Publié le

Frontend-Technologien wie React, Angular und Vue.js veränderten die Erwartungshaltung der User, wie eine moderne Web-Applikation reagieren muss. Serverless Computing, Cloud Functions und Architektur-Konzepte wie Headless CMS stellen die bekannte Web-Entwicklung auf den Kopf.

Intelliact gewann mit dem Projekt «Webshop Compona» beim Best of Swiss Web (BOSW) 2019 GOLD in der Kategorie Technologie, SILBER in der Kategorie Digital Commerce und BRONZE in der Kategorie Innovation.

CTOs, EntwicklerInnen sowie technisch interessierte Marketeer erhielten von Marco Egli, Senior Consultant bei Intelliact AG ein Update zu den aktuellen Themen in der Webentwicklung.

Sie lernten welche Architekturen und Technologien heute relevant sind, was sie für Vorteile in der Entwicklung sowie für den User bringen und wie eine Lösung aufgebaut wird, die auch längerfristig mit der Zeit gehen kann. Mehr Infos zu > https://intelliact.ch/know-how/modern-web-development-2019

Publié dans : Internet
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE Format, ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

Modern Web Development 2019

  1. 1. Intelliact AG Siewerdtstrasse 8 CH-8050 Zürich T. +41 (44) 315 67 40 mail@intelliact.ch www.intelliact.ch Modern Web Development 2019 Marco Egli, Jonas Fahrni, 6. Juni 2019 INTERNET-BRIEFING «Best Practices» anhand des «Compona Webshop»
  2. 2. Modern Web Development 2019 2 Modern … … aber unpraktisch und unflexibel
  3. 3. Marco Egli Senior Consultant Jonas Fahrni CTO und Stv. GL Eyekon AG Intelliact / Eyekon VORSTELLUNG 3
  4. 4. Darum sind wir heute hier EINLEITUNG 4
  5. 5. BOSW 2019 Gold in Technology Silber in Digital Commerce Bronze in Innovation Shortlist für Usability Masterkandidat Darum sind wir heute hier EINLEITUNG 5 Das Urteil der Jury Die Shoplösung besticht durch Schnelligkeit und Zweckmässigkeit. Im Vergleich zu gängigen Realisierungen ab Stange ist die Umsetzung weitaus eleganter, was der Orchestrierung bestehender Cloud-Services zu verdanken ist. Zudem glänzt sie mit sorgfältig gemachten Details wie etwa der Filter- und Empfehlungsfunktion. Das kluge und schlanke Design der Anwendung macht es möglich, dass die über 40'000 Produkte für die Kundschaft extrem schnell und einfach zugänglich sind.
  6. 6. MODERN WEBDEVELOPLMENT Die Zutaten für ein herausragendes Produkt 6
  7. 7. 3 Profis in Ihren Gebieten EINE PARTNERSCHAFTLICHE ZUSAMMENARBEIT 7 Compona Kunden Produkte Erfahrung Ziele Eyekon UX/UI Frontend Intelliact Daten und Strukturen Datenlogik & Prozesse Darstellung und Produktion User-Stories & -Experience Branding Lösung Erfolgsfaktoren Ganzheitliche Projektsicht Zielfokussiertes Vorgehen Nutzerzentrierte Konzeption Saubere Datenanalyse Angemessenes Design
  8. 8. 8 Moderne Webentwicklung Ist lösungsorientiert Ist user-centered Ist Datenbasiert Ist nicht Technologie getrieben
  9. 9. WEBDEVELOPLMENT – STATUS QUO Wie läuft es heute in den meisten Projekten? 9
  10. 10. Bestehender Tech-Stack in Unternehmen (ERP, PIM, PDM, ...) Web-Lösung wird von etabliertem Anbieter übernommen oder als eigenständiges Silo implementiert Lange Feature-Liste blendet die effektiven Bedürfnisse aus Silo-Denken (1 Aufgabe = 1 Software / Vertikal ausgerichtet) «klassische» Stolpersteine STATUS QUO 10
  11. 11. Compona Ausgangslage 11
  12. 12. Mengenlehre 12 Schnittmenge von A und B Quelle: https://de.wikipedia.org/wiki/Mengenlehre
  13. 13. Menge ERP 13 ERP Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & …
  14. 14. Menge PDM 14 ERPPDM Produkt-Stammdaten Dokumente Funktionsstrukturen Historie & … Konfiguration CAx-Modelle Klassifikation
  15. 15. Menge PIM 15 ERPPDM PIM Dokumente Konfiguration Klassifikation Produkt-Stammdaten Kunden & Vertriebskanäle Content & Media
  16. 16. Schnittmengen: Menge PIM ohne PDM und ERP 16 ERPPDM PIM Konfiguration Klassifikation Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & … Produkt-Stammdaten Dokumente Funktionsstrukturen Historie & … Konfiguration CAx-Modelle Klassifikation Dokumente Produkt-Stammdaten Kunden & Vertriebskanäle Content & Media !
  17. 17. Ergänzen des Fehlenden! 17 ERPPDM Produkt-Stammdaten Produktionsplanung Angebote Aufträge Kunden & Vertriebskanäle Lieferanten Equipment Finanzen & Personal & … Produkt-Stammdaten Dokumente Funktionsstrukturen Historie & … Konfiguration CAx-Modelle Klassifikation Content & Media
  18. 18. Mit CMS und Webshop folgt die komplette Überdeckung 18 ERPPDM PIM CMS Webshop Web-Katalog mit PIM und CMS und Webshop
  19. 19. Mit Software as a Service (SaaS) und Cloud-Funktionen 19 ERPPDM Serverless Cloud Functions Microservices Unternehmens- applikationen Media Management as a Service Headless CMS as a Service Web-Katalog ohne PIM
  20. 20. AM BEISPIEL COMPONA Wie macht man es besser?
  21. 21. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 21 Konzeption → Anforderungs- definition system-neutral system- und komponentenspezifisch Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas, Benutzergruppen User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen
  22. 22. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 22 system-neutral system- und komponentenspezifisch Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas, Benutzergrupppen User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition
  23. 23. Start with «WHY» Was/Wer bin ich? Wie (will ich wahrgenommen werden) Wen (will ich ansprechen) Ziele (was will ich erreichen) Mittel (womit) Warum (mache ich das) Eyekon Vorprojekt / Design-Sprint 23
  24. 24. Drill-Down über mehrere Stufen Unterschiedliche Nutzergruppen Einzelkäufer, Ingenieure (B2B, Prototypen) künftig evtl. auch B2C Strategische Einkäufer (Individuelle Preise, Mengenstaffelungen) Interne Nutzer (Beratung) Performance ist sehr wichtig Ladezeiten und Zugänglichkeit Beratungsfunktion Integration Company-Informationen (CMS) Resultate des Vorprojektes (gekürzt) 24
  25. 25. Unterschiedliche Datenmengen 37 Hersteller z.T. nur ein oder zwei Unterelemente Unterschiedliche Tiefe Integrierte Suche Kombinierbarkeit Hierarchische Strukturen BEISPIEL: DRILL-DOWN 1. Klassische Darstellung 2. Spezielle Herausforderungen 25
  26. 26. BEISPIEL: DRILL-DOWN 26
  27. 27. 27 TreeFinder Beispiel: Drill-Down
  28. 28. Vergleich von beliebigen Attributen In der gewohnten Ansicht Ohne zusätzlichen Arbeitsschritt Konfigurierbare Spaltenansicht Spaltensortierung innerhalb der Darstellung Produktvergleich BEISPIEL: PRODUKTVERGLEICH Herausforderung Lösung 28
  29. 29. Kombination von Produktvergleich, Filter und Navigation BEISPIEL: PRODUKTVERGLEICH Dynamische Anzeige der Trefferzahl auch für kombinierte Filter Liste aller Suchtags Benutzerspezifische Wahl der gezeigten Spalten Direktes Hinzufügen zum Warenkorb oder zu Merklisten möglich
  30. 30. 30 Spaltensortierung Beispiel: Drill-Down
  31. 31. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 31 system-neutral system- und komponentenspezifisch Implementierung → Frontend + Backend Ziel-Definition Strategie Definition Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen- Definition und – Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition
  32. 32. Aus Produktdaten Mehrwert generieren INTELLIACT 32 Market/UserneedsITBackend PDM ERP XYZ ABCMedia MAMContent CMS Meistens sind die Daten vorhanden, jedoch oftmals nicht in der für den Kunden benötigten, aufbereiteten Form. Zunehmend beinhalten Applikationen redundante Funktionen, wodurch auch redundante Daten entstehen Search Engine 3D Visualisation Analytics
  33. 33. Different Lifecycles on Different Levels 33 Frontend Market/Userneeds Flexibility Backend ITorganizationsneeds Stability Client platforms Frontend clients, Applications and components Server components, Business logics for applications Enterprise systems Data storage (decades) Server platforms Lifecycle needs Investment volumes User Journeys (months)
  34. 34. „Der Sturm [Frontend, UX] gewinnt Spiele, die Abwehr [Backend, Architektur] Meisterschaften“ Jupp Heynkes
  35. 35. Vom Monolithen zu Cloud Functions 35 https://www.youtube.com/watch?v=aBcG57Gw9k0 Adrian Cockcroft on the Evolution of Business Logic from Monoliths, to Microservices, to Functions
  36. 36. Referenzarchitektur des Digitalen Produkts INTELLIACT Spare Parts AR Service Tool Digital CommerceProduct CatalogProduct Information XYZERPPDM Authentication Pub/Sub Messaging Analytics Cloud Functions CDN PDM ERP XYZ Translation Search Engine 3D VisualisationAttributs, Descriptions ABC Payment Enterprise Applications Applications and Services IoT Asset IoT Asset Big Data UXUserExperience Media MAMContent CMS IAAS SAAS PAAS SAAS Services, API, Product Centric Developer Portal App Components Clients Use Case Driven Apps Business Case Driven Apps Common Components OPCUA Access Control Microservices Configuration RPC, SOAP, REST, GraphQL DXDeveloperExperience HTTPS, MQTTHTTPSHTTPS, FILE
  37. 37. Anwendungsfall Produktkatalog INTELLIACT Product Catalog ERP Attributs, Descriptions Payment Media MAMContent CMS Authentication Translation
  38. 38. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 38 system- und komponentenspezifisch Implementierung → Frontend + Backend Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen- Definition und -Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens- applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition Projektbeispiel: Produktkatalog (inkl. eCommerce) EVALUATION 27 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung Web-App Common Web-App Components Order Management (ERP) Image Management and CDN Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Internal Web-App Components Authentication & User Management
  39. 39. Wardley Map: Wie entsteht aus Daten Nutzen? 39 https://www.youtube.com/watch?v=oZZKjxeg5W0
  40. 40. Wardley Map: Wie entsteht aus Daten Nutzen? 40 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Need User User User Need Component Component Component ComponentComponent Component Component
  41. 41. Reifegradbewertung für Komponenten 41 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Reference: https://evolve.hiredthought.com/
  42. 42. Einordnungsbeispiele 42 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) New Super Ninja App Big Data Storage Competitive Advantage Differential Changing Volume Operations Operational Efficiency Stable
  43. 43. Projektbeispiel: Benutzergruppen und User Journeys 43 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung
  44. 44. Projektbeispiel: Basisbausteine, Komponenten der App 44 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Order Management (ERP) Image Management and CDN Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Authentication & User Management
  45. 45. Projektbeispiel: Produktkatalog (inkl. eCommerce) 45 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkauf (intern, Mitarbeiter) Vollständige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Produktdarstellung Web-App Common Web-App Components Order Management (ERP) Image Management and CDN Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Internal Web-App Components Authentication & User Management
  46. 46. Compona Application Components KONZEPTION UND ARCHITEKTUR Frontend: React + Redux https://reactjs.org/ A JavaScript library for building user interfaces https://redux.js.org/ A predictable state container for JavaScript apps ▪ Complete separation of frontend data and view ▪ Complete separation from server, runs as an app ▪ Ready for any service interface (REST, JSON-RPC, GraphQL) ▪ Widely used with good documentation ▪ Mature routing libs available ▪ Isomorphic Rendering (for SEO) possible Evaluated alternatives: Ember, Angular
  47. 47. Compona Application Components KONZEPTION UND ARCHITEKTUR Frontend Development: Typescript + Webpack https://www.typescriptlang.org/ A typed superset of JavaScript that compiles to plain Javascript https://webpack.js.org/ A static module bundler for modern JavaScript applications ▪ Selectable taget JS version (eg. ES5 for IE11) ▪ Linting with Tslink ▪ Perfect fit with React and Redux ▪ Dynamic module loading ▪ Small delivery packet sizes (<300 kB JS, <50 kB CSS) Evaluated alternatives: none
  48. 48. Compona Application Components KONZEPTION UND ARCHITEKTUR Product Data Search: Algolia https://www.algolia.com/ Cloud database for products ▪ $150 pMt (50k products) ▪ 20 –50 ms response time ▪ Synonyms: 5k ▪ Maximum Queries Per Second: 75* ▪ Maximum size per record: 20 KB ▪ Insights: Popularity & Zero-Result Searches ▪ Filters and Facets ▪ Custom Ranking ▪ Transparent Relevancy Evaluated alternative: Self hosted Solr database
  49. 49. Compona Application Components KONZEPTION UND ARCHITEKTUR Image CDN: ImgIX https://www.imgix.com/ Content Delivery Network for images: transforms, optimizes, and intelligently caches the entire image library for fast websites and apps using simple and robust URL parameters. ▪ $3 per 1,000 master images accessed each month. 8¢ per GB of CDN bandwidth for images delivered each month. ▪ Easy setup ▪ Fast image delivery & compression and performance. ▪ Image processing on demand (filters, resizing, blur and more as url parameters) ▪ Smart resizing & cropping ▪ Dynamic text overlays & metadata operations Evaluated alternative: Cloudinary
  50. 50. Compona Application Components KONZEPTION UND ARCHITEKTUR Headless CMS: Kirby https://getkirby.com/ Kirby is a file-based CMS. Easy to setup. Easy to use. Flexible as hell. ▪ Instant installation ▪ Can be used as a headless CMS ▪ No database ▪ Markdown syntax Evaluated alternatives: none
  51. 51. Compona Application Components KONZEPTION UND ARCHITEKTUR Chat as a Service: Olark https://www.olark.com/ Live Chat to connect to the right customer, in the right place, at the right time ▪ $15 per agent pMt ▪ Concurrent chats: unlimited ▪ Offline Messaging ▪ Widget unbranding: 8+ agents ▪ Live chat metrics ▪ Engage customers in real time ▪ Visited pages of the user ▪ Advanced user information Evaluated alternative: Zopim
  52. 52. Compona Application Components KONZEPTION UND ARCHITEKTUR Payment Solution: Datatrans https://www.datatrans.ch/ Der Schweizer Spezialist für komplexe E-Payment-Projekte. Innovativ und flexibel. ▪ CHF 50 pMt plus Transaktionsgebühr (CHF 0.3) bei eCom Professional ▪ Zahlungsmittel International ▪ Zahlungsmittel Schweiz ▪ Managementportal vorhanden ▪ Viele Integrationsmöglichkeiten ▪ Angebot nur über Kontakt ▪ Exkl. Akzeptanzverträge mit Finanzinstituten (Acquirern) Evaluated alternatives: SIX, Postfinance
  53. 53. Compona Application Components KONZEPTION UND ARCHITEKTUR Prerenderer: Prerender https://prerender.com/ Retrieve HTML, Screenshots, PDFs or HAR Files from any Webpage ▪ $5 pMt + $1 per 1000 requests ▪ HTML for Non-Google-Bots ▪ Execute custom Javascript ▪ Configurable screen size Evaluated alternatives: Prerender.io, Prerender.cloud PRERENDER
  54. 54. Compona Application Components KONZEPTION UND ARCHITEKTUR Analytics & Advertising: Google https://www.google.com/about/products/
  55. 55. Projektbeispiel: Vorteile und Potentiale 56 Genesis Invisible Reifegrad WertschöpfungsketteVisible Custom Product (and rental) Commodity (and utility) Hierarchische Navigation in Kategorien Entwicklungsing. (extern, Kunde) Verkaufsinnendienst (intern, Mitarbeiter) Vollstänige ProduktinformationWarenkorb Checkout Unstruktrierte Suche Klassifikationsmerkmale mit Filtermöglichkeiten Produktdarstellung Web-App Common Web-App Components Chat Component Authentication & User Management Order Management (ERP) Image Management and CDN Internal Web-App Components Payment Solution Translation Memory Master Data Management (PIM) Product Data Search Datasheet Storage Viele Komponenten ohne Customizing Potential für Commodity Nutzung bestehender Komponenten ausgebaut Kaum Funktionsredundanz Best in Class Komponenten
  56. 56. Vorgehen: Von der Zielsetzung zur Webapplikation INTELLIACT 57 system-neutral system- und komponentenspezifisch Ziel-Definition Strategie Definition Personas User Story Map, User Flow (fachlich) User Stories, Tasks, Entities, Values (fachlich) UX Design: Story Board, Wireframes Anforderungs- Spezifikation (System) Evaluation Komponenten Schnittstellen-Definition und –Spezifikation Implementierungs- Spezifikation Umsetzung UI: HTML/CSS Navigation und Logik: Javascript State und Interface Layer Integration Standardkomponenten (Common Components) Implementieren Spezialkomponenten (App Components) Konfigurieren SaaS Komponenten (Cloud Components) Ggf. fachliche Erweiterung Unternehmens-applikationen Konzeption → Anforderungs- definition Evaluation → System-/ Komponentendefinition Implementierung → Frontend + Backend
  57. 57. AM BEISPIEL COMPONA Zusammenfassung
  58. 58. «Change it, change it!» William Shakespeare
  59. 59. Die ursprüngliche Fragestellung «Welche Technologien sind modern?» ist ungeschickt.
  60. 60. Moderne Webentwicklung ist keine Technologiefrage sondern die Frage nach Funktionen und Services!
  61. 61. Modern Web Development ist vor allem flexibel und anpassungsfähig
  62. 62. Veränderungsprojekte statt Technologieprojekte!
  63. 63. Vielen Dank für Ihre Aufmerksamkeit
  64. 64. Kreative PLM-Konzepter, unabhängig und darauf spezialisiert, Ihre Produktdaten zu echten Teamplayern zu machen, um Mehrwerte zu schaffen. Intelliact AG BOSSARD AG 66
  65. 65. Bringen Sie Produkte & neue Digitale Services effizienter auf den Markt «MAKE YOUR DATA WORK TOGETHER» 67Quelle: https://intelliact.ch/
  66. 66. Mehr als 20 Jahre Erfahrung im Umgang mit Produktdaten (fachlich und technologisch) Ausgewiesene Erfahrung in der Konzeption, Evaluation, Umsetzung von Unternehmensapplikationen im Bereich Produktdaten Ausgewiesene Erfahrung in der Konzeption und Umsetzung von Webapplikationen, um aus Produktdaten Mehrwert zu schaffen. Unabhängigkeit, sich in jedem Fall für die optimalste Lösung zu entscheiden Warum Intelliact? INTELLIACT 68
  67. 67. 69 WIR SIND INTELLIACT Seit über 20 Jahren Intelliact Team: https://intelliact.ch/team 17 kreative Köpfe We make your data work together
  68. 68. Nehmen Sie Kontakt mit mir auf WAS SIND IHRE HERAUSFORDERUNGEN? 70 Marco Egli Senior Consultant Dipl. Masch.-Ing. ETH +41 443 156 743 egli@intelliact.ch
  69. 69. Eyekon AG Quellenstrasse 27 CH 8005 Zürich T +41 (0)43 444 77 77 hello@eyekon.ch www.eyekon.ch
  70. 70. 72
  71. 71. 73 Angebot 38 Corporate- und E-Business Websites und Portale Crossmedia Kampagnen, Marketing- Kommunikation, Social Media Kampagnen Interactive- und Multimedia Anwendungen, Microsites, POS Mobile- und Web-Apps, digitale Services, Konfiguratoren, Kataloge
  72. 72. 74
  73. 73. 75 Client list 40
  74. 74. 76 Agentur Ranking 41 Rang Firma Total Punkte 2015–2019 1 Hinderling Volkart 176.5 2 Jung von Matt / Limmat 137.83 3 Unic 121.66 4 Liip 93.30 5 Notch Interactive 80.50 6 Namics 73.20 7 Equipe 69.00 8 Eyekon 41.50 9 Wirz 38.50 10 Dreipol 37.50 Top 10 der 100 erfolgreichsten Agenturen von Best of Swiss Web 2015 – 2019
  75. 75. 77

×