La leggenda del magento senza testa - Salvatore Capritta

Salvatore Capritta - salvo@syntheticlab.itLa leggenda del Magento senza testa
La leggenda del Magento senza testa
Un breve viaggio alla scoperta di nuove soluzioni per l’e-commerce di domani

Mi presento
Salvatore Capritta
● Co-Founder e CTO @ Synthetic;
● Sviluppatore Certificato Magento;
● Vivo a Milazzo (Sicilia) dove sviluppo e progetto dal 2000.
Di cosa mi occupo:
● Progetto le nuove soluzioni e i nuovi prodotti;
● Analizzo e introduco le nuove tecnologie per il team;
● Formo sui nuovi strumenti i miei compagni di viaggio;
● Sviluppo in prima persona alcune parti dei nuovi progetti.

La mia esperienza fin qui su Magento
Ha ravvivato la mia
voglia di mettermi in
gioco
Lo amo, e a volte lo odio
(ma sempre con amore)
Certificarsi è uno dei
modi migliori per
conoscerlo
Niente va mai dato per
scontato su Magento
Sorpresa
AmoreConoscenza
Passione

non del carrello!
Inizio dello sviluppo su Magento
pericolo autostima in agguato
divinazioni, sacri comandi da cli
salmodiati e inni a varie divinità
Inizia la “battaglia” :)
AUTOSTIMA
2.0 / 2.1
% DI ABBANDONO
CABALA
SANGUE
IL PRIMO APPROCCIO

275
482
- stack js obsoleto
- lentezza
- carico elevato
- Xml
- Templates
- Less
- Requirejs
- Jquery
- Knockout
- UI Components
Sofisticazione
Limiti
IL PROBLEMA SUL FRONTEND
S
L

IL COLPO DI GRAZIA (E DI GOOGLE)
WEB VITALS - 2020
Largest Contentful
Paint
LCF
First Input Delay
FID
Content Layout Shift
CLS
L F C

Un pesante Monolita - Qualche esempio
HH
Helly hansen

Un pesante Monolita - Qualche esempio
Helly hansen
BB
Bjorn Borg

LA RIVOLUZIONE SENZA TESTA
HEADLESS PWA

Facciamo chiarezza sui termini

COUPLED
Immagine, credits: https://www.brightspot.com/solutions/decoupled-cms-and-headless-cms-platform

DECOUPLED

HEADLESS

HEADLESS
più una strategia che una tecnologia
Headless Commerce is like teenage sex: everyone
talks about it, nobody really knows how to do it,
everyone thinks everyone else is doing it, so
everyone claims they are doing it.
cit. Allan MacGregor https://allanmacgregor.medium.com/exploring-headless-commerce-
698925c5573a

“Websites that took all the right vitamins”

CAPABLE RELIABLE INSTALLABLE
LA RIVOLUZIONE SENZA TESTA: PWA
INSTALLABLERELIABLE

LA RIVOLUZIONE SENZA TESTA: PWA
Sono veloci
Best Practices +
Checklist
Funzionano Offline
Project Fugu
04
0301
02
RESPONSIVE
RICERCABILI
APP-LIKE
AGGIORNATESICURE
LINKABILIINSTALLABILIRIATTIVABILI
PROGRESSIVE

un cavaliere senza testa?
Le nuove prospettive per Magento
Ghigliottine

Magento è pronto a perdere la testa?
Ghigliottine
GraphQL
Integrate dalla 2.3, sembrano essere giunte a uno stato
di maturità.
Status
Allo stato attuale, disponibile la quasi totalità delle
funzionalità B2C: link
Plan
E’ possibile consultare la roadmap del progetto su
Github: link
15h 13h 10h
h
8h
h

Magento è pronto a perdere la testa?
Ghigliottine
Magento Association
“Let’s face it:
the Magento 2 front end was already old
when it was released, and we’ve seen how
that plays with frameworks like
Prototype.js and Knockout.js.”
Miguel Balparda
Using Progressive Web Apps for your Magento Store
15h 13h 10h
h
8h
h

Ghigliottine: Frameworks disponibili
Agnostici Magento-only
Vue StoreFront
Next.js
Deity Falcon
Front Commerce
Pwa Studio
ScandiPwa

Ghigliottine - Qualche esempio

Ghigliottine
C T C T
COMPETENZE TEAM COSTI TEMPI
Profuma di futuro, entusiasma, ma ha un costo

e se la testa “giusta” l’avesse già?
Il potere nascosto di Magento2
Con la testa sulle spalle

Proper Web Site.
Willem Wigman presenta Hyva con il talk
“The biggest Secret Ever!”
LARAVEL ECOSYSTEM
REACTICON V3
PWS :)
Tailwind CSS +
Alpine JS +
GraphQl

L’intervento di Willem Wigman al Reacticon V3
- slides: link
- youtube: link
La demo di Hyva
- https://demo.hyva.io
HYVA
Cambierà le regole del gioco?

La mia Strada: cosa scegliere per il tuo team
TEAM
BUDGET
CLIENTE
OBIETTIVO
PRODOTTO
COMPETENZE

Grazie!
Domande, idee?
Salvo[ at ]syntheticlab.it
Twitter:
https://twitter.com/scapritta
Linkedin:
https://www.linkedin.com/in/salvatorecapritta/

Fonti e Risorse
● https://devdocs.magento.com/
● https://github.com/aleron75/mageres
● https://web.dev/vitals/
● https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
● https://www.hellyhansen.com/
● https://www.bjornborg.com/en/
● https://www.brightspot.com/solutions/decoupled-cms-and-headless-cms-
platform
● https://allanmacgregor.medium.com/exploring-headless-commerce-
698925c5573a
● https://headlesscommerce.org/
● https://web.dev/progressive-web-apps/
● https://web.dev/pwa-checklist/
● https://whatwebcando.today/
● https://caniuse.com/?search=PWA
● https://medium.com/swlh/what-is-project-fugu-googles-initiative-to-unlock-all-
native-device-features-for-the-web-892fafa726f9
● https://devdocs.magento.com/guides/v2.4/graphql/#the-current-state-of-
magento-graphql

Fonti e Risorse
● https://github.com/magento/graphql-ce/wiki/Roadmap
● https://magentoassociation.prod.itswebs.com/event-content-details/using-
progressive-web-apps-for-your-magento-store
● https://github.com/sandermangel/awesome-pwa-
ecommerce/blob/master/README.md
● https://www.vuestorefront.io/
● https://www.front-commerce.com/en/
● https://deity.io/
● https://nextjs.org/commerce
● https://magento.github.io/pwa-studio/
● https://scandipwa.com
● https://medium.com/@bjoern.meyer
● https://docs.google.com/spreadsheets/d/1nx5jcHa6reIH20q20uDnZLQNjuK2oh
k-HmQ09hy9NCE/edit#gid=0
● https://magento.github.io/pwa-studio/technologies/theme-vs-storefront/
● https://reacticon.org/
● http://demo.hyva.io
● https://www.integer-net.com/hyva-themes-and-the-magento-frontend-problem/
Template originale, usato per la presentazione, credits: Slidesgo and Freepik

La leggenda del magento senza testa - Salvatore Capritta

Recommended

Recommended

More Related Content

Similar to La leggenda del magento senza testa - Salvatore Capritta

Similar to La leggenda del magento senza testa - Salvatore Capritta (18)

La leggenda del magento senza testa - Salvatore Capritta